Scribd Logo
Upload

Welcome to Scribd!

  • JAVASCRİPT

    Uploaded by

    efeenes 235711131719
    9K views13 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9K views13 pages

    JAVASCRİPT

    Uploaded by

    efeenes 235711131719

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    NOT:Visiual studio code diye bir uygulama indirdim. Oradan yazacağız.

    Herhangi bir kod dili dosyası


    oluştururken kafana göre dosya adı koyup ‘.’dan sonra eklenti uzantısını yaz. Mesela javascript
    dosyası açacaksın efe.js diye koy. Böyle yapınca zaten kendiliğinden javascipt dosyası olarak
    algılanıyor. Yorum satırları yazmak için başına iki tane eğik çizgi (//) koyman lazım. Yorum satırları live
    serverla çalıştırdığımızda gözükmez. Javascriptte fonksiyonun sonunda noktalı virgül kullanmak
    zorunda değiliz ama diğer kodlama dillerinde noktalı virgül kullanmak zorundasın.

    EKLENTİLERİN KURULMASI

    Auto Rename Tag: Kodların simetrik kısımlarında sağı düzelttiğimiz şekilde solu düzenler, aynı şey sol
    taraf için de geçerli.

    Better Comments: Yorum satırları (Derleyici tarafından derlenmeyen, yazılımıcıyı bilgilendirmek için
    satırlardır) normalde tek renk yeşildir. Bu eklenti yorum satırlarının anlam durumana göre falan
    renklendirilmesini sağlar. Mesela ‘!’ koyduğunda kırmızı, soru işareti koyduğunda mavi yapar
    gibi.Bunu uygulamaya yükleyince kendiliğinden çalışıyor.

    Javascript console utils: Projemizde bulunan tüm ‘console.logs’ları kaldırır. Bu kaldırılan şey bizim
    konsolumuzda yazılar yazmamızı sağlayan koddur.

    JavaScript(ES6) code snippets: Birçok yerde otomatik tamamlama isteği sunuyor.

    LiveServer

    JAVASRİPT’İN HTML SAYFASINA EKLENMESİ

    Html sayfası açıp ilk satırda çıkan arama kısmına ! koyduğumuzda il çıkan şeye tıkladığında

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Javascript Dahil Etme</title>

    </head>

    <body>

    </body>

    </html>
    Böyle bir kod çıkıyor. O koda eklemeler yapacağız.

    +JavaScrip’i <head> ve </head>, <body> ve </body> tagları arasına ekleyebiliriz ama eklerken
    </script> ve <script> taglarını kullanıp bu script tagları arasına yazman gerekir.

    console.log(“ “); o parantezin içine yazdığımızı yazdıran koddur.Sayıysa tırnak kullanılmaz, sayı
    değilse tırnak kullanılır.

    Neyse kodumuzu yazdık. Şimdi Live Sever ile çalıştıralım. Live Server ile çalıştırmak için eklentiler
    kısmından Live Server indirmen lazım. Sonra WEB’de çıkan sayfada sağ tık yapıp inceleye bas.
    Console kısmına bas. Orada aşağıdkaş gibi bir şey çıkacak.

    Efe Enes Baştuğ index.html:10

    Live reload enabled. index.html:43

    Ilk satırdaki şey onuncu satırda console.log(“ “)’un içine Efe Enes Baştuğ yazmışsın demek.

    Yukarıdaki mavi çıktı head taglarına içine yazılması sonucu ortaya çıktı. Ama genelde body taglarına
    arasına, son satır alttakinin bir üstüne gelecek şekilde yazılır.

    <p id=”paragraf1”> Lorem ipsum dolor sit amet.”</p> diye bir şey var. Bununla beraber console
    li javascript kodu yazdığımız zaman bu Javascpript Id'si paragraf1 olan paragrafı seç ve içindeki yazıyı
    değiştir, başka yazı yazdır komutunu veriyor. Bizim bunu yapabilmememiz için Javascriptin bunu
    görmesi gerekiyor. Derleyici kodları yukarıdan aşağıya doğru okur. Eğer javasripti head tagına
    yazarsak javascript yeşil olanı görmediği için kod çalışmaz, hata verir.

    +Ya da ayrı Java dosyasındaki kodları HTML sayfasına (veya dosyasına diyebilirsin,aynı şeyi
    kastediyoruz.) ekleyebiliriz. Bunu dahil etmek için body taglarının arasına

    <script src=”app.js”></script> kodunu yaz. O parantez içerisinde adı verilen dosyadaki kodları html
    sayfasına ekleyecektir. Bunun çalışabilmesi için o javascript dosyasının da açık olması lazım.

    ÇIKTI VERME

    İstediğin hangi tagla paylaşırsan paylaş

    Çıktı vermenin farklı yolları var. document.write(),console.log(),alert() ile çıktı alabiliriz.

    Bunlar yazıldıktan sonra ‘;’ koyulur. Sayı yazılacaksa çift tırnak kullanılmaz parantezin içinde.

    document diye bir obje var. document. yazınca bir sürü değişkenleri,methodları vesayre var.

    Document.

    Document.write(“ “):Bu tag kodu live server ile çalıştırdığımızda direkt sitede içine girilen şeyi
    yazdırır.
    Böyle istersen document.write(“ ”) taglarının arasına istersen birden fazla satır boşluk bırak yine de
    yan ayan yazacaktır. document.writeln(“ “) yaptığımızda arada boşluk bıraktırır.(bir sonraki tagın
    içinde yazan şeyi bir boşluk ötelettirir. Yani iki document tagından alttaki olanı document.writeln(“ “)
    olsaydı arada boşluk olmayacaktı.) Eğer farklı satırlarda yazılmasını istiyorsak document.write(“
    <br>“) yapar yazacağımız şeyi br!nin soluna yazarız. Bu sonraki write tagının içinde yazan şeyi bir alt
    satıra yazdırır.

    console.log(“ “):Bu tag kodu live server ile çalıştıtdığımızda çıkan sitetede inceleye bastığımızda
    console bölümünde içine girdiğimiz şeyi yazdırır. console sınıfının bir tane metodu var, onu koda
    yazdığımızda tüm konsolla alakalı çıktıları temizler ve console kısmında ‘Console was cleared’ diye
    yazı belirir. Bu console sınıfının türü console.clear(); dır. Bu console sınıfının çalışabilmesi için
    parantezin içine herhangi bir şey yazmaman lazım, olduğu gibi yazman lazım.

    let ile console tagını kordineli kullanabiliriz. Örneğin,

    let a=5;

    let b=10;

    Comnsole.log(a+b);

    yaptığımızda console kısmına 5 yazdırırı.


    Böyle de yazabilirsin.

    Bu şekilde de yapabilirisn ’,’ yerine ’+’ işareti koyarak. Ama ’+’ işaretlerinin karışmaması için parantez
    koyman lazım. (Matematiki işlem önceliğiyşe alakalı aslında biraz.) Parantez koymasaydın iki sayını
    toplamı cümlesi ile a ve b yi toplamaya çaılşacaktı ortaya garip bir şey çıkacaktı.

    Bizim window diye bir objemiz var. Javascriptte en büyük objesidir. İçinde çok sayıda method vardır.
    Window objesinin içinde document objesi var. Document objesinin içinde de birçok sayıda method
    var. Bu objeleri console ekranında göstermek ya da çalıştırmak için diğer isimleri yazdığımız gibi çift
    tırnak(“ “) kullanmayız.

    Aşağıda benim uygulamayı ayağa kaldırmış olduğum host adresini veriyor. document’in önüne
    window. eklesen de aynı şekilde çalışır. Sen yine de ekle. Böyle biribirini içinde olan objelerde nokta
    koyularak devam edilir.

    alert(“ “): Aşağıda görüldüğü gibi parantezdeki şeyi tamam butonu olan kutucuk şeklinde gösterir.
    Alert ingilizce uyarı anlamına gelir.
    WINDOW VE DOCUMENT OBJELERİ: Window bir siteyi komple kapsayan objedir. Document objesi
    ise window objesinin kapsadığı bir objedir. Document window’un alt kümesi diye benzetme
    yapabiliriz. Documentin ve windowun içinde bir sürü obje var. Bu objelerin sahip olduğu bir sürü
    method(fonksiyon diye de adlandırabiliriz) var. Bunları çalıştırırken fonksiyonun hemen üstündeki
    objesini yazmak zorundasın yoksa çalışmaz diğer üst objeleri istersen sıralamaya bağlı olarak
    ekleyebilirsin. Mesela,

    console.log(window.document.location.port)

    console.log(document.location.port)

    console.log(location.port)

    Bu yukarıdaki üçü çalışıyor ama aşağıdaki çalışmaz.

    console.log(port)

    Ayrıca console objesi de window objesinin alt objesidir. console objesinin sahip olduğu birçok
    method vardır. log,warn,error gibi methodlar buna örnektir.

    console.log( )

    console.error( ) bu fonksiyon aşağıdaki gibi x işareti içeren kırmızı levhaya parantez içine girilen
    metni yazdırır.

    console

    GELİŞTİRME ARACI

    Yazılan kodu Live Server ile çalıştırıp incele kısmına bastığımızda çıkan kısımdır. Bu kısmın Elements
    kısmında yazılan kod gözükür. Bu Elements kısmında kodların stillerini vesayre inceleyebilirsin.
    Console kısmında ise console sınıfımıza ait çıktılarımızı görebiliyoruz.
    Direkt console kısmına console objesine ait methodları kullanarak kod yazıp bunların çıktılarını
    görebiliriz.

    Kodlarımızı kısım kısım yazmamızı sağlayan debugger diye bir kavram var. Belirli bir koddan sonra alt
    satıra debugger; eklediğimizde kısım kısım inceleme olanağına sahip olabiliriz. Source kısmındaki
    araçlarla debugger kısmımızı yönetebilir ve inceleyebiliriz. debugger; kısmının altındaki kodlar
    gözükür. dışarıdaki sunucuların WEB IP adreslerine post veya get istekleri yapacaksınız. İstek oraya
    başarılı bir şekilde gitti mi gitmedi mi , giderken herhangi bir sorunla karşılaştı mı bunları geliştirme
    aracının network kısmından izleyebiliriz. Performance ve memory kısmında zaten bizi ilgilendiren
    pek bir şey yok. Application kısmında local storage ve session storage olmak üzere iki kısım var.
    Session storage’da verilerimizi key ve value yapısıyla depolayabiliriz. Şöyle yani key’i böyle olanın
    value değerini gösteriyor(true veya false gibi). Normalde eklediğimiz veriler bilgisayarı veya tarayıcıyı
    kapattığımızda silinir ama local storage’da eklediğimiz veriler silinmez. Local storagedeki çarpı
    kısmına basıldığında veriler silinir.

    YORUM SATIRLARI

    Yorum satırlarının çıktısı olmaz. Sadece yazılımcıyı bilgilendirmek amacıyla yazılan satırlardır. Başına
    çift eğik çizgi (//) koyduğun tüm satırlar yorum satırı olur. Satır satır değil de belirli bir aralığı yorum
    satırı yapmak istiyorsan bir tane eğik çizginin bitişiğine yıldız koy sonra aralığı bir tane daha yıldız koy
    onun bitişiğine eğik çizgi koyarak kapat.

    /*

    Rhfgb,

    Jfjtnh

    hf

    */

    SCOPE KAVRAMI

    Scope kapsam anlamına gelir. Üç tane scope kavramı vardır. Bunlar Global Scope, Function Scope,
    Block Scope’tur. JavaScriptte değişken tanımlamak istediğimizde var,let,const olmak üzere üç tane
    anahtar kullanmalıyız. Bu üç tür değişken tüm scope’lerde kurulabilir. Global Scope en kapsamlı
    scope’dir.Global Scope’ta değişken kullanmak istiyorsan değişken kıvırcık parantezler arasında
    olmamalı yoksa çalışmaz. Değişkenin kullanıldığı sayfada fonksiyon nerede olursa olsun ulaşılabilir.

    var değişkenismi=10;

    console.log(değişkenismi);
    Konsolda 10 yazılır.

    Yukarıda yazdırmak için methodu çağırmak gerekiyor. O yüzden parantezlerden sonra method();

    diye methodu çağırıyoruz.

    Yukarıda console.log(a) kıvırcık parantez dışarısında yazılsaydı yine de çalışırdı. Çünkü var değişkeni1
    kıvırcık parantezlerin dışarısına yazılmış yani Global Scope . Function Scope kavramında ise değişken
    ve ona bağlı fonksiyonlar kıvırcık parantez içine yazılmak zorundadır. Sen değişkeni kıvırcık parantez
    içerisinde tanımladıysan Function Scope’de çalışıyorsun demektir, buna bağlı fonksiyonları vesayre
    de kıvırcık parantezler arasında olmalıdır yoksa çalışmaz. Aşağıda gördüğün gibi hata veriyor eğer
    console.log() kıvırcık parantez arasına yazılsaydı herhangi bir hatayla karşılaşmazdık.

    If,while,for,do while gibi döngüler açtığımızda pembe kıvırcık parantezler oluşur, bu pembe kıvırcık
    parantezler arasında değişken tanımladığımızda block scope kavramında tanımlamış oluruz. Ya da
    fonksiyonun kendi parantezlerinin haricinde başka parantezler arasında değişken tanımlanmışsa
    block scope kavramında tanımlanmış diyebiliriz. Çalışması için değişkene bağlı fonksiyonlar o pembe
    kıvırcık parantezler arasında tanımlanmalıdır.

    NOT: Değişken tanımlama yaparkan noktalı virgül işaretine kadar her bir karakter arasına boşluk
    olmalı.

    let a = 5;
    var değişkeninde özel bir durum var, her yerden erişilebilir. Var değişkeninin pembe kıvırcık
    parantezler arasında tanımlansa bile function scope’de tanımlanmış gibi davranır, değişekene bağlı
    fonksiyonları normal kıvırcık parantezlerin arasındaki herhangi bir yerde yazarsan aşağıda gördüğün
    gibi çalışacaktır. var değişkeninin bu özelliğinden dolayı ram bellekte çok fazla yer kaplar ve
    uygulamamazı yavaşlatır.

    Aynı şeyi let ve const değişkenleriyle yapamazsın. let ve const değişkenlerini block scope’de
    tanımladığında buna ait fonksiyonları da blockscope’de tanımlamak zorundayız aksi durumda
    aşağıdaki gibi hata verir.
    Aşağıdaki gibi yapmalıyız.

    var değişkeni ile değişken tanımladığımızda değişkene bağlı fonksiyon tek değişken tanımlandığında
    ona göre birden fazla aynı ada sahip değişken tanımlandığında ise en son tanımlanan değişkene göre
    çalışır. Ama aynı şeyi let ve const ile yaptığımızda hata verir.

    Aşağıdaki gibi let ile değişken tanımlayıp değişkenin değerini değiştirebiliyoruz(istediğin kadar harf
    verip değiştirebilirsin). Bunu sakın iki farklı değişken tanımlamayla karıştırma (orada birden fazla kez
    let değişkenini kullanıyorduk.). Ama değişkenin değerini değiştirme olayını const ile yapamazsın,
    const zaten ingilizcede sabit anlamına gelen constant kelimesinden türemiştir.

    VERİ TÜRLERİ

    Javascriptte yaklaşık yedi tane veri türü vardır. Bunlar


    string,number,boolean,null,undefined,object,function

    let isim = “ “

    Eğer string tipinde tanmlamak istiyorsak çift tırnak veya tek tırnak içinde tanımlamalıyız.

    Tanımladığımız değişkenlerin hangi tip veri türünde tanımlandığını öğrenmek için console.log( )
    fonksiyonunun içine typeof değişkeninin ismi neyse yazıp kullanarak ulaşabiliriz. Bu tüm veri tipleri
    için geçerlidir. Aşağıdaki gibi;
    Harf içeren yerlerde string tipi veri türü kullanılır.

    Sayı içeren yerlerde number tipi veri kullanılır. Ondalık sayılarda vesayre de number tipi veri
    kullanılır. Rakamlarla oluşturulan tüm varyasyonlarda number tipi veri kullanılır.

    Sen eğer bunları tırnak içerisinde yazarsan sistem string tipi olarak alıgılar. Yukarıda tırnak içerisinde
    verilmemiş bu yüzden olması gerektiği gibi sayı olarak algılanmış ve matematiksel olarak toplanmış.
    Aşağıda ise tırnak (tek veya çift tırnak fark etmez) içerisinde verildiği için string veri türü olarak
    algılanır. String veri türü olarak algılandığı için matematiksel olarak toplanmaz, sözel olarak toplanır
    yani yan yana yazılır.

    Bir string veri türü ile number veri türünün toplamaya çalışırsanız matematiksel olarak toplanamaz
    yan yana yazdırır.

    Doğru veya yanlış olduğu kesin durumlarda boolean veri türü kullanılır. Bu veriyi kullanırken
    değişkene bağlı fonksiyonun içine kesin ifadeler yazılır.

    Mesela aşağıdaki gibi. Parantez içine 5>2 yazıyorsun ve direkt sonucu doğru olarak gösteriyor.

    Eğer 2>5 yazsaydın çıktı ekranında falsue yazacaktı.


    Sonuç adında değeri a+b olan yani 15 olan değişken tanımlamış bunun 18den büyük olup olmadığını
    sorguluyor. Javascriptte matematiksel eşittir işaretinin yerini iki tane yan yana eşittir işareti(==) alır.
    Eşit değildir işareti için ise ünlemin yanına eşittir(!=) ifadesi koyulur.

    null tipi veri tipi vardır. Bu veri tipinde değişken tanımlanır, değişkenin eşittirden sonraki kısmına null
    yazılır. Bu o değişkenin boşta tutulduğunu verinin kolaylıkla değiştirilebileceiğini ifade eder. Aşağıdaki
    gibi değişken boşta tutulmuş ve değeri değiştirilmiş.

    undefined diye bir veri tipi var. Bir değişkeni yazıp değer atamadığımızda tam olarak tanımlanmış
    olmaz. Bu değişkenler undefined (tanımsız) veri tipine aittir.

    let a;

    Mesela yukarıdakş undefined veri tipidir.

    Bileşik değişken tanımlayabiliriz. Bunun için değişkeni eşittire kadar normal bir şekilde tanımlayıp,
    eşittirden sonra kıvırcık parantez koyup bir isim atayıp isimden sonra iki nokta koyup karşısına değer
    atayabilirsin. Aşağıda gördüğün gibi bir değişken tanımlayor o değişkenin içine de değişkenler
    tanımlayabiliyorsun, yazdırdığında ise içindeki değişkenler de gözüküyor. Bu tarz değişkenler bizim
    bildiğimiz string,number,boolean,null,undefined,object,function gibi primitive(ilkel) veri tiplerine ait
    değildir. Bu değişkenlerin veri tipi objecttir. Bu tarz veri tipleri referans tipler olarak geçmektedir.
    Primitive ve referans tipler arasında ciddi farklar vardır.
    Değişkenin içine sayı dizisi tanımlarken köşeli parantez kullanırız. Bu değişken de referans veri tipleri
    arasında object veri tipine aittir.

    Değişken içerisinde fonksiyon da tanımlayabiliri. Değişkenimizin adını girdikten sonra function() yazıp
    sonra kıvırcık parantezler arasında fonksiyonumuzu yerleştirebiliriz. O fonksiyonu çalıştırmak için
    değişkenimizin adını yazıp sonrada parantez açıp kapatıp sonra da noktalı vürgül koyacağız böylece
    değişkenimizi çağırıp içerisindeki fonksiyonu çalıştırmış oluruz. Bu tarz değişkenler function veri
    tipine aittir.

    ARİTMETİK OPERATÖRLER

    +,-,*,/,%,++,--,** gibi pek çok operatör var.

    = eşittir operatörü matematikteki gibi eşittir anlamında gelmez. = operatörü atama operatörüdür .

    Mesela aşağıdaki gibi değişken tanımladığımızda a değişkenin içine 5’i koy anlamına gelir.

    let a = 5;

    + operatörü number veri tipine ait olan değişkenleri matematiksel olarak toplar. Eğer biri number
    değil veya ikisi de number değilse yan yana yazdırır.

    Yukarıda görüldüğü gibi parantez içerisine sayılar tırnak kullanılmadan yazılmış bu yüzden direkt sayı
    olarak kabul edip topluyor.
    Matematikte işlem önceliği vardır bu yüzden matematiksel ifadeyi yapıb string türünün yanına
    yazdırman için matematiksel bölümü parantez içine alman gerekir. Yoksa string+number diye
    düşünüp yazıyla sayıyı yan yana yazar sonra da bu bütünü string olarak kabul eder sonra da diğer
    sayıyı bütünü string olarak kabul ettiği için o sayıyı da onun yanına yazdırır.Yukarıda parantez
    içerisine yazılmadan yapılmış o yüzden toplamadan hepsini yan yana yazmış. Aşağıda ise parantez
    içerisine koyularak yazılmış.

    - operatörü number veri tiplerini birbirinden çıkartır.

    You might also like