JS Temel Bilgiler

Baslangic seviyesinde temel bilgileri ayri ayri yazmak yerine burada kisaca ozetliyelim.

Js’yi nereye, nasil ekliyoruz

Html kodumuz icine JS eklemek icin bir temelde iki yol var. Birincisi kodumuzu direk html sayfamiz icine yazmak veya ayrica olusturdugumuz bir js sayfasini (ornegin code.js) html sayfasi icine cagirmak (yerlestirmek).

VIDEO : HTML Sayfasına Javascript Ekleme

Yakindan bakalim:

Sayfa icine <script> Tag ile

Eger JS kodumuzu direk html sayfamiz icinde calistiracaksak kodumuzu <script> ve </script> tag’i arasina yazmamiz gerekiyor. Ornegin:

<script>
  document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Komut dosyaları bir HTML sayfasının <body> veya <head> bölümüne ya da her ikisine de yerleştirilebilir.

Ornegin:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed.";
      }
    </script>
  </head>
  <body>
    <h2>Demo JavaScript in Head</h2>

    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
  </body>
</html>

Harici Js dosyasi ile

En cok kullanilan yontemlerden biridir. Harici js dosyasini veya dosyalarini html sayfamizin icine cagirarak (entegre ederek) kullaniriz.

Aynı kod birçok farklı web sayfasında kullanıldığında harici komut dosyaları pratiktir. JavaScript dosyaları .js dosya uzantısına sahiptir. Harici bir komut dosyası asagidaki gibi kullanabiliriz;

<script src="myScript.js"></script>

<head> veya <body> içine istediğiniz gibi harici bir komut dosyası yerleştirebilirsiniz.

Ornegin:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <h2>Demo JavaScript in Head</h2>
    <p>A Paragraph</p>

    <script src="myScript.js"></script>
    <!--  harici js dosyamiz -->
    <script src="myScript2.js"></script>
    <!-- 2.  harici js dosyamiz -->
  </body>
</html>

Avantajlari

HTML ve js kodunu ayırır
HTML ve JavaScript’in okunmasını ve bakımını kolaylaştırır
Önbelleğe alınmış JavaScript dosyaları sayfa yüklemelerini hizlandirir

Js Cikisi (Output)

JavaScript, verilerini farklı şekillerde “görüntüleyebiliriz” Bunlar:

innerHTML kullanarak bir HTML öğesine yazma.
document.write() kullanarak HTML çıktısına yazma.
window.alert() işlevini kullanarak bir uyarı kutusuna yazma.
Console.log()’u kullanarak tarayıcı konsoluna yazma.

Ancak gelistirme asamasinda en cok kullanilan yontem console.log() yontemidir.

VIDEO : Çıktı Alma Metotları

console.log() detayli bilgi

Console.log() ile yazdigimiz kodun tarayicida gosterilmesi ile ilgili cesitli metodlar vardir. En cok kullanilanlari daha sonra eklemeyi dusunuyorum ancak simdilik asagidaki linkler kullanilabilir.

console.log() cheat sheet

Js Ifadeler (Statements)

Bir bilgisayar programı, bir bilgisayar tarafından “yürütülecek” “talimatların” bir listesidir. Bir programlama dilinde bu programlama talimatlarına ifadeler denir. Bir JavaScript programı, programlama ifadelerinin bir listesidir.

Örnegin;

let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

Js ifadaleri (Statements)

JavaScript ifadeleri şunlardan oluşur:

Values, Operators, Expressions, Keywords, and Comments

Örnegin asagidaki ifade, icinde id = "demo" içeren bir HTML sayfasinda bu alana “Merhaba Dolly” yazmasını söyler.

document.getElementById("demo").innerHTML = "Hello Dolly.";

Çoğu JavaScript kodlari birçok JavaScript ifadesi içerir. İfadeler, yazıldıkları sırayla tek tek yürütülür.

Js Sözdizimi (Syntax)

JavaScript söz dizimi, JavaScript programlarının nasıl oluşturulduğunu gösteren kurallar kümesidir:

// How to create variables:
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;

Js Values (degerler)

JavaScript sözdizimi iki tür değer tanımlar:

Sabit değerler (Fixed values)
Değişken değerler (Variable values)

Sabit değerlere Literaller (Literals) denir. Değişken değerlerine Değişkenler (Variables) denir.

JavaScript Literals (Degismez degerler)

Sabit değerler için en önemli iki sözdizimi kuralı şunlardır:

1- Numbers (Sayılar) ondalıklı veya ondalıksız yazılır:

let a = 10.50
let b = 1001

2- Strings Dizeler çift veya tek tırnak içinde yazılan metinlerdir:

let a = "John Doe"; // string cift tirank icinde
let b = "John Doe"; // string tırnak icinde

Semicolons (Noktali virgul) `;`

Noktalı virgüller JavaScript ifadelerini ayırır. Her yürütülebilir ifadenin sonuna noktalı virgül eklenmesi gerekir:

let a, b, c; // 3 degisken (variables) tanimlandi
a = 5; // a'ya 5 degeri atandi
b = 6; // b'ye 6 degeri atandi
c = a + b; // c'ye a ve b'nin toplami atandi

Js Variables (Degiskenler)

Bu konu sonraki bolumlerde detayli islenecek. Ancak ozetle:

Bir programlama dilinde değişkenler (Variables) veri değerlerini depolamak için kullanılır.

JavaScript, değişkenleri bildirmek için var, let ve const anahtar kelimelerini kullanır.

Değişkenlere değer atamak için eşittir = işareti kullanılır.

let isim = "Ozay Ozdemir";
let yas = 45;
a = 10;
b = 5;
let toplam = a + b; // a ve b degiskeni toplanip, "toplam" adinda yeni bir degisken ile tanimlandi

let x; // x bir degisken olarak tanimlandi
x = 45; // burada x'e bir deger atandi.

Js Operators

Js hesaplama islemleri icin aritmetik operatorler (+ - * /) kullanir.

Örnegin;

(5 + 6) * 10;

JavaScript, değişkenlere değer atamak için bir atama operatörü ( = ) kullanır:

let x, y;
x = 5;
y = 6;

JavaScript Expressions (ifadeler)

İfade, bir değeri hesaplayan değerlerin, değişkenlerin ve operatörlerin birleşimidir. Hesaplamaya değerlendirme (evaluation) denir.

Örneğin, 5 * 10, 50 olarak hesaplanır:

5 * 10

İfadeler ayrıca değişken değerler de içerebilir:

x * 10

Değerler (values) sayılar (numbers) ve dizeler (strings) gibi çeşitli türlerde olabilir.

Örneğin, “John” + ” ” + “Doe”, “John Doe” olarak değerlendirilir:

"John" + " " + "Doe"; // John Doe

JavaScript Keywords (anahtar kelimeler)

Gerçekleştirilecek eylemleri tanımlamak için JavaScript anahtar kelimeleri kullanılır.

Örnegin Let ve var anahtar sözcüğü tarayıcıya değişkenler oluşturmasını söyler:

let x, y;
x = 5 + 6;
y = x * 10;

var x, y;
x = 5 + 6;
y = x * 10;

örnegin; let var = "test" cunku var rezerve anahtar kelimedir.

Rezerve edilmis anahtar kelime listesi;

Keyword	Description
var	Declares a variable
let	Declares a block variable
const	Declares a block constant
if	Marks a block of statements to be executed on a condition
switch	Marks a block of statements to be executed in different cases
for	Marks a block of statements to be executed in a loop
function	Declares a function
return	Exits a function
try	Implements error handling to a block of statements

JavaScript Comments (Yorum satirlari)

Js kodumuz icinde bazen aciklayici notlar yazma ihtiyaci hissederiz. Bu kodumuz icinde cesitli uyarilar veya bilgilendirici mesajlar olabilir. Bu sayede kodumuz hem kendimiz icin hem de baska gelistiriciler icin daha okunakli olur.

Yorum satirlarinin bir diger kullanim amaci yazdigimiz bir kodun tarayici tarafindan okunmasini (calistirilmasini) engellemektir. Bu sayede yazdigimiz bir kod parcasini tarayicida gecici olarak calismasini engelleyebiliriz.

Iki tip yorum satiri kullanilir;

Single Line Comments (tek satir yorumlari)

Tek satırlık yorumlar // ile başlar. // ile satır sonu arasındaki herhangi bir metin JavaScript tarafından dikkate alınmayacaktır (yürütülmeyecektir).

// yorum satiri
document.getElementById("myH").innerHTML = "My First Page";

let x = 5; // burada x degerine 5 atadik

// let y = x + 2; (bu kod tarayicida calismayacak)

Multi-line Comments ( cok satirli yorumlar)

Çok satırlı açıklamalar /* ile başlar ve */ ile biter. /* ve */ arasındaki herhangi bir metin JavaScript tarafından dikkate alınmayacaktır.

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

// veya bir kod blogunun calismasini engelleyebiliriz
/*
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
*/

VIDEO : Yorum Satırı Kullanımı

Js Buyuk/Kucuk harfe duyarlidir (Case Sensitive)

Tum js tanimlayicilar buyuk/kucuk harfe duyarlidir.

Ornegin lastname ve lastName degiskenler ayni degildir, js bunlari iki ayri degisken olarak saklar.

Camel Case kullanimi js yazarken okunakligi arttirir. Gelistiricilerin bunu aliskanlik haline getirmesi karmasik kodlarda okunurlulugu arttiracaktir.

Genelde iki kelime ve ustu isme sahip bir degisken olusturulurken camelCase kullanilir. Ornekleri inceleyelim:

// En cok kullanilan yontem;
let name = "Ozay"; // tek kelimeler komple kucuk harf kullanilir
let lastName = "Ozdemir"; // ikinci kelime buyuk harf ile baslar
let middleFirstName = "Ahmet";

// Bazi gelistiriceler asagidaki yontemleri de kullanir;
// Ilk harf buyuk baslar
let FirstName = "ozay";
let LastName = "Ozdemir";
let MiddleFirstName = "ahmet";
// Underscore kullanarak
let firt_name = "Ozay";