Parçacıklar ve kontrol yapıları. 10 blog gönderisinde Başlangıç ​​seviyesinden İleri Seviyeye kadar 4. Bölüm JavaScript kursu

Bu, sizi başlangıç ​​seviyesinden ileri seviyeye götürecek JavaScript blog yazısı serisinin 4. bölümüdür. Bu dizinin sonunda JavaScript'te kodlamaya başlamak için bilmeniz gereken tüm temel bilgileri öğreneceksiniz. Lafı fazla uzatmadan dördüncü derse başlayalım.

Parçacıklar ve kontrol yapıları – içindekiler tablosu:

1. Kodlama kurulumumuzu snippet'lere yükseltme
2. Kontrol Yapıları

Bu blog yazımızda üçüncü blog yazımızdan kaldığımız yerden devam edeceğiz. Bu aşamada Google Chrome tarayıcınızı ve daha spesifik olarak JavaScript konsolunuzu açık tutmalısınız. Herhangi bir nedenle onları kapattıysanız, tekrar açmak için iyi bir zaman olacaktır.

Mac kullanıyorsanız, konsolu açmak için klavye kısayolu, Chrome'u açtıktan sonra “Option + Command + J” tuşlarına basmaktır. Bir Windows cihazı kullanıyorsanız, Chrome'u açtıktan sonra JavaScript Konsolunu açmak için “Control + Shift + J” klavye kısayolunu kullanabilirsiniz. Veya en üstteki menüye gidip Görünüm -> Geliştirici -> JavaScript Konsolu'na da gidebilirsiniz.

Kodlama kurulumumuzu snippet'lere yükseltme

Dersin bu noktasına kadar her şeyi satır satır yazıp satır satır uygulayabilirdik. İşleri yürütmenin en uygun yolu olmayacaktı ama yine de işe yarayacaktı. Bu öğreticiden başlayarak, eksiksiz bir talimat seti oluşturmak için birden çok kod satırı alan kod yazacağız. Bunu başarmak için Google Chrome'da "snippet" adı verilen bir şey kullanacağız. Lafı fazla uzatmadan kurulumumuzu JavaScript konsolundan Chrome snippet'lerine yükseltelim.

Şu anda konsolunuzu açık tutmalısınız ve önceki öğreticileri izlediyseniz şuna benzeyen bir ekranınız olmalıdır:

Bu ekrana veya bu konudaki ekranınıza baktığınızda, karanlık alanın üst çubuğunda yan yana yazılmış Elements, Console, Sources, Network, Performance, Memory, Application ve benzerini görmelisiniz. Onları daha açık renklerde görüyorsanız, bu da tamamen iyi. Bu, gündüz için varsayılan mod olabilen ışık modunu kullandığınız anlamına gelir. Gösterdiğim ekran şu anda Chrome konsol ayarlarında karanlık mod için renk şemasını kullanıyor. Öğeler, Konsol, Kaynaklar, Ağ vb.'nin her iki renk şemasında da göründüğünü görürseniz, gitmeye hazırsınız.

Konsolun üst çubuğuna daha yakından bakarsanız, “Konsol” yazısının biraz farklı bir renkte göründüğünü görebilirsiniz. Devam edin ve hemen yanındaki "Kaynaklar" ı tıklayın.

Kaynaklara tıkladığınızda, bir şekilde buna benzeyen bir ekrana bakıyor olmalısınız.

Bir fark, daha önce oluşturduğum gibi, muhtemelen “notes.js” dosyasını görmemeniz durumunda bekleyebileceğiniz bir farktır. Bunun dışında buna oldukça benzer görünmelidir. Yeni bir dosya oluşturmak için “+ Yeni snippet”e tıklayın. Üzerine tıkladığınızda, sizin için yeni bir JavaScript dosyası oluşturacak ve istediğiniz gibi adlandırabilirsiniz. İlk veya birincil dosyayı “index.js” olarak adlandırmak yaygın bir uygulama olduğundan, bu öğreticide onu “index.js” olarak adlandıracağız.

Bu öğreticiyi kelime kelime takip etmek istiyorsanız, “+ Yeni Snippet”e tıkladıktan sonra “index.js” adını girebilir ve klavyenizdeki enter tuşuna basabilirsiniz. Şimdi JavaScript'i kodlamaya başlamak için açılan ana alanda açılan dosyanın içine tıklayabiliriz.

İşe yaradığını zaten bildiğimiz bir şeyle başlayalım. Ve bu:

alert("Hello, World!");

Ekstra alıştırma için kendiniz yazabilir veya kod bölümünü kopyalayıp oluşturduğumuz dosyaya yapıştırabilirsiniz. Çoğu durumda bu şekilde öğreneceğiniz için kendiniz yazmanızı şiddetle tavsiye ederim. Yazdıktan sonra enter tuşuna basarsanız, kodun yürütülmediğini göreceksiniz. Bunun yerine imleciniz, diğer metin düzenleme alanlarında olduğu gibi bir sonraki satıra gidecektir. Kodumuzu yürütmenin iki ana yolu vardır. Bunlardan ilki sağ alt köşede bulunan play butonuna tıklamak.

Bu oynat düğmesine tıklarsanız, kodumuzu çalıştırmalı ve sonuçları bize göstermelidir.

“Tamam”a tıkladıktan sonra diğer ana yolu kullanarak kodumuzu da çalıştıralım. Kodunuzu çalıştırmanın veya snippet'inizi çalıştırmanın ikinci ana yolu klavye kısayolunu kullanmaktır. Gördüğümüz gibi, çalıştır düğmesine tıkladığımızda zaten bize kısayolu gösteriyor. Bu klavye kısayolu “Command + Enter” dır. Bunu yapmak için Komut tuşuna basabilir ve ardından Enter tuşuna basabiliriz. Bunu yapmak aynı zamanda kodumuzu da çalıştıracak ve bize oynat düğmesine tıklamakla aynı sonuçları verecektir.

Ve bununla birlikte, artık Chrome snippet'lerinde JavaScript kodumuzu çalıştırmanın iki yolunu da biliyorsunuz.

JavaScript hakkında notlar almak veya bazı JavaScript kodlarını uygulamak için yeni dosyalar oluşturmak istiyorsanız, “+ Yeni snippet”i tıklayarak her zaman yeni dosyalar oluşturabilir ve dosyalarınızı istediğiniz gibi adlandırabilirsiniz. Artık yeni kodlama kurulumumuzu hazır hale getirdiğimize göre, biraz daha JavaScript görelim.

Kontrol Yapıları

Kod yazarken, kullanıcının yapabileceği birçok senaryoyu ve eylemi hesaba katmamız gerekiyor. Farklı senaryolar için bu hazırlık, kodumuzun çalıştığı cihaz, görüntülenecek ekran boyutu, kullanıcının sahip olabileceği farklı tarayıcı türleri gibi farklı kaynaklardan gelebilir. Ancak farklı senaryolara hazırlıklı olabileceğimizden nasıl emin olabiliriz? Birbiri ardına farklı kodlar yazarsanız, hepsini yürütmek kullanıcıya mantıklı gelir mi? Bunların hepsini ve daha fazlasını cevaplamak için kontrol yapılarını kullanacağız.

Kontrol yapıları, kodumuzun farklı koşullara uyum sağlayabilmesi için kodun yürütülmesine rehberlik etmemizi sağlar. Kontrol yapıları için kullanılan çok sayıda ortak eleman vardır. Bu derste en basitinden başlayacağız ve oradan hareket edeceğiz. İlk göreceğimiz, kodun yürütülmesini kontrol etmek için If, else, else if deyimlerini kullanır.

Eğer, başka ve başka ise

Bu, başlamak için en basit kontrol yapısıdır. Yapmamıza izin verdiği şey, belirli bir koşul doğruysa bir kod parçasını yürütmek ve başka bir koşul doğruysa başka bir kod parçasını yürütmek. Bunu bir örnekle görelim. Diyelim ki dışarıda yağmur yağarsa şemsiyemi yanıma alacağım. Aksi takdirde şemsiye almayacağım. Tam mantığı ve muhakemeyi aşağıdaki gibi koda çevirebiliriz:

(Bu kodu yazmadan önce dosyada bulunan önceki kodumuzun kodunu önüne iki eğik çizgi koyarak yorumlayacağız, böylece çalıştırılmaz ama yine de bir kopyası sizde olur. Eğik çizgileri ekledikten sonra böyle görünmeli :)

// alert("Hello, World!");
let rainy = true;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

Bu kodu çalıştırmak bize aşağıdaki çıktıyı verir:

// alert("Hello, World!");
let rainy = false;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

Yağmur olmadığını söyleyen kodun bu sürümünü çalıştırırken aşağıdaki çıktıyı verir:

Kod dosyasında değişiklik yapmak için kodu yazarken, dosya adına daha yakından bakarsanız, dosya adından önce bir yıldız işareti olacağını göreceksiniz. Bu, yazdığımız kod dosyasının tam olarak kaydedilmediği anlamına gelir. Her zaman yazabileceğiniz yalnızca birkaç satır kod yazıyorsanız, bu büyük bir fark yaratmayabilir, ancak daha sık olarak, daha sonra yeniden kullanabilmeniz veya gözden geçirebilmeniz için kodunuzu kaydetmek isteyeceksiniz. Bu kod dosyasını diğer dosyaları kaydettiğimiz gibi kaydedebiliriz, böylece Mac'te “Command + S” ve Windows'ta “Control + S” olur.

Bizim durumumuzda, kodumuzu yazdıktan hemen sonra çalıştırdığımız için, kodu çalıştırdığımızda dosyamızı otomatik olarak kaydetti. Bu nedenle, bir kod yazıp saatlerce bırakacaksanız, önemli bir ilerleme kaybetmediğinizden emin olmak için kodunuzu arada bir kaydetmek iyi bir fikirdir.

Bir If ve else deyimi kullanarak kodumuzu ikili bir koşula uyarlayabilmemiz harika, ancak dikkate almamız gereken birden çok şey var, ki bu büyük olasılıkla gerçek hayatta olacak. Örneğin, hava soğuksa ve hava soğukken bir kapüşonlu giymeniz gerekiyorsa. Bunu yapabilmemizin bir yolu “else if” ifadesi olabilir ve bunu aşağıdaki gibi yapabiliriz:

// alert("Hello, World!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Bu kodun çıktısı şöyle görünecektir:

Yani belirli bir koşul doğruysa, parantezler arasındaki ilk kod yürütülür. Bizim durumumuzda, ilk koşul yağmur olup olmadığını kontrol ettiğinden, kullanıcıyı şemsiye alması gerektiği konusunda uyaracağız. Bu koşul yanlışsa, yani yağmur yok ise, “else if” ifadesini kullanarak diğer koşulları kontrol etmeye devam edeceğiz. “else if” deyiminden önemli ölçüde farklı olan bir şey, else if deyimleriyle istediğimiz kadar koşulu kontrol edebilmemizdir.

Burada hatırlanması gereken önemli nokta, kodunuzun doğru veya gerçek olup olmadığı yukarıdan aşağıya doğru kontrol edileceğidir. Yani mevcut kod ile hava hem yağışlı hem de soğuk ise, ilk ifade doğru olduğu için soğuk havayı tanımayacaktır. Bunu, kodu hem yağışlı hem de soğuk olacak şekilde değiştirerek de doğrulayabiliriz.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Şimdi merak ediyor olabilirsiniz, bunu nasıl çözebilirim? Hangisi daha önemli, havanın soğuk olması mı yoksa yağmurlu olması mı? Bir koşulu seçip diğer koşulu feda etmeli misiniz? Böyle bir seçim yapmak zorunda mısın? Pek değil. Bu çok yaygın bir sorundur ve çok yaygın ve nispeten basit bir çözümü vardır. Birden fazla senaryoyu kapsamak için bir “ve” ifadesi kullanabiliriz. JavaScript'e programlama mantığımızı bağlamak için bir "ve" kullanmak istediğimizi söylemek için bu sembolden ikisini kullanacağız: "&". Ve kodumuz yukarıdan aşağıya doğru kontrol edildiğinden, ilk if ifadesine en kapsamlı seçeneği kullanacağız. Güncellenen kod daha sonra şöyle görünür.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Bu kodu çalıştırmak size şuna benzeyen bir uyarı verir:

Çok daha iyi. Artık bu senaryoların farklı kombinasyonları da dahil olmak üzere birden fazla farklı senaryoyu birleştirebiliriz. Peki ya soğuk değil yağmurlu bir senaryo düşünmek istersek. Ve kullanıcıya özel olarak bir kapüşonlu almamasını ve sadece bir şemsiye almasını söylemek istediğimizi varsayalım. Sadece bunu yapmak için, mantıksal “değil”i kullanabiliriz, kodumuzda belirtmek istediğimiz koşuldan önce ünlem işareti ile kullanabiliriz. Daha eksiksiz olması için bu koşulu kodumuza ekleyelim.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Bir if else ağacına yeni bir koşul eklerken, daha kapsamlı koşul olduğu sürece onu en üstte bir yere yerleştirebiliriz. Bu şekilde, karşıt yaklaşıma kıyasla çok daha az hata şansımız olur. Mevcut koda yeni kod eklemenin bir yan etkisi, kodun bir kısmının gereksiz hale gelmesi veya en verimli şekilde çalışmamasıdır. Verimlilik kısmına yoğun bir şekilde odaklanmayacağız, ancak şimdilik yağışlı bir hava için hem soğuk hem de soğuk olmayan koşulları kapsadığımızı görebiliyoruz, böylece isteğe bağlı olarak sadece “yağmurlu” durumu kontrol eden koşulu kaldırabiliriz. Bu kod ayarlamalarını yapmak aynı zamanda “Kod Yeniden Düzenleme” olarak da adlandırılır, yeniden düzenleme işleminde nokta, kodun adım adım daha temiz ve verimli olmasıdır.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Her iki koşulun da doğru olup olmadığını kontrol etmek istediğimizde, klavyenizde iki kez kullanılan boru sembolü olan ve “||” gibi görünen “veya” operatörünü kullanabiliriz.

Buna başka bir örnekle bir örnek görelim. Yeni komutlara müdahale etmeden aynı dosyaya daha fazla örnek eklemek için, önceki kodu daha önce gördüğümüz bu sembollerin içine sararak kullandığımız önceki kodu yorumlayabiliriz:

/* 
*/

Hangi bir eğik çizgi bir yıldız işaretidir ve yorum yapılan kısmı kapatmak için ters sırada aynı semboller. Mevcut kodumuzu bu sembollerin içine saralım ki gelecek yeni kodu engellemesinler. Şimdi kod dosyanız şöyle görünmelidir:

// alert("Hello, World!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}
*/

Şu andan itibaren dosyaya eklediğimiz yeni parçalara odaklanacağız, böylece her seferinde bir şey öğrenmeye odaklanabiliriz. İsteğe bağlı olarak önceki kodu yorum modunda tutabilir, referanslarınız için yeni bir dosyaya taşıyabilir veya artık görmek istemiyorsanız daha temiz bir dosya için silebilirsiniz.

Örneğimize bir “veya” durumu ile devam edelim. Her acıktığınızda veya susadığınızda, yiyecek ve içecekler için buzdolabınızı ziyaret ettiğiniz bir senaryo düşünün. Bunun için kod nasıl çalışır?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Go to the fridge and check what you have in there.");
}

Muhtemelen tahmin ettiğiniz gibi bu kodu çalıştırmak bize aşağıdaki sonucu verecektir:

Şimdiye kadar kullandığımız örnekler gerçeğe yakın senaryolardan geliyordu, ancak çoğu zaman koddaki sayılarla uğraşacaksınız. Rakamları daha önce bu seride görmüşsünüzdür ama karşılaştırmadan ya da onlarla yapabileceğimiz işlemlerden çok fazla bahsetmedik. Şimdi if else deyimlerini öğrendiğimize göre, sayılar hakkında biraz daha görelim.

if ve else if ifadeleriyle uğraşırken, bir ifadenin doğruluğunu kontrol ederiz. Ancak elimizdeki tek şey sayılarsa anlamlı bir if ifadesi de yapabilir miyiz? Örneğin yağmur yağma ihtimali %50'den fazlaysa şemsiye almak istersem bunu kodla başarabilir miyiz? Evet yapabiliriz ve işte nasıl olacağı.

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Get an umbrella.");
}

Sayılarla uğraşırken, if ifadesinin çalışması için onu bir tür doğruluğa veya yanlışlığa dönüştürmenin bir yoluna ihtiyacımız var. Kullanım durumumuza bağlı olarak bunu başarmanın birden fazla yolu vardır.

Örneğin, iki sayının birbirine tam olarak eşit olup olmadığını aşağıdaki gibi üç eşittir işaretiyle kontrol edebiliriz:

let a = 10;
let b = 10;
if (a === b) {
    alert("They are the same.");
}

Bu bize “Onlar aynı” uyarısını verir.

Aşağıdaki kodla eşit olup olmadığını da kontrol edebiliriz:

let a = 10;
let b = 5;
if (a !== b) {
    alert("They are not the same thing!");
}

Yukarıdaki kodu çalıştırmak bize “Aynı şey değiller!” uyarısını verecektir.

Ayrıca hangisinin daha büyük, daha büyük eşit, daha küçük veya daha küçük eşit olduğunu da kontrol edebiliriz. Size kolaylık sağlamak için işaretlerin bir özetini bulabilirsiniz.

// === checks for equality
// !== checks for not equality
// > greater than
// >= greater than or equal to
// < smaller than
// <= smaller than or equal to

Ayrıca ekstra uygulama ve kod gösterimi için birkaç tane daha görelim. Aşağıda, if deyimlerinin içinde sahip oldukları uyarıyı gösterecek olan birkaç örnek kod verilmiştir:

Şundan büyük:

let a = 10;
let b = 5;
if (a > b) {
    alert("a is greater than b");
}

Şundan büyük veya eşittir:

a = 10 olsun; b = 5 olsun; if (a >= b) { alert(“a, b'den büyük veya eşittir”); } [/kod]

Daha büyük veya eşittir için başka bir örnek:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a is greater than or equal to b");
}

Daha küçük:

let a = 5;
let b = 10;
if (a < b) {
    alert("a is smaller than b");
}

Şundan küçük veya eşittir:

let a = 5;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

Daha küçük veya eşittir için başka bir örnek:

let a = 10;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

Bu karşılaştırma veya eşitlik işaretlerinin bir kombinasyonunu kullanarak, farklı koşullara uyum sağlayabilen karmaşık kodlar oluşturabiliriz.

Aritmetik işlemler

Sayılarla uğraşırken yapmak istediğimiz başka bir şey de aritmetik işlemlerdir. Aritmetik işlemlerin çoğu oldukça tanıdık olmalıdır, ancak daha az tanıdık olabilecek programlamaya özgü aritmetik operatörler de vardır.

Size kolaylık sağlamak için JavaScript'te kullandığımız aritmetik işlemlerin bir özetini anlamlarıyla birlikte burada bulabilirsiniz:

// * multiplication
// / division
// + addition
// - subtraction
// % modulo operation, gives us the remainder after division
// ** exponentiation

İlk dördü beklediğiniz gibi çalışacak:

let a = 12;
let b = 5;
let c = a * b;
// c will be 60
c = a / b;
// c will now be 2.4
c = a + b;
// c will now be 17
c = a - b;
// c will now be 7

Modulo işlemi bize ilk sayıyı ikinci sayıya böldükten sonra kalanı verecektir. Önceki a, b ve c koduyla devam edersek:

c = a % b;
// c will now be 2
c = 18 % 5;
// c will now have the value of 3
// because 18 divided by 5 will give us the remainder of 3

Üs operatörü, JavaScript'te üs alma işlemini gerçekleştirir. İki yıldız işareti ile temsil edilir ve birinci elemanı ikinci elemanın gücüne götürür.

c = 2 ** 3;
// c will now have the value of 8
// because 2 * 2 * 2 equals 8

Bu nispeten uzun bir eğitimdi ve siz başardınız! Kodlama kurulumumuzu yükselttik ve bu eğitimde çok şey öğrendik. Bir sonraki eğitimde, kodumuzun akışını kontrol etmenin daha fazla yolu ile devam edeceğiz!

10 blog gönderisinde Başlangıç ​​Düzeyinden İleri Düzeye JavaScript Kursu:

1. JavaScript'te kodlamaya nasıl başlanır?
2. JavaScript temelleri
3. JavaScript'te değişkenler ve farklı veri türleri
4. Snippet'ler ve kontrol yapıları
5. Döngüler ve döngüler için
6. Java dizisi
7. JavaScript işlevleri
8. JavaScript nesneleri
9. JavaScript yöntemleri ve daha fazlası
10. JavaScript kursunun özeti