Asabeneh Yetayeh 'ın 30 Days of JavaScript' oluşturduğu ve 30 günde javascripti öğretmeyi hedeflediği repoyu elimden geldiğince türkçeleştirerek , ders sonlarındaki egzersizlerin örneklerini de paylaşacağım.
| # Günler | Konular |
|---|---|
| 01 | Giriş |
| 02 | Data Types - Veri Tipleri- |
| 03 | Boolean, Operatörler, Date(Tarih) |
- 📔 1.Gün
- 💻 1. Gün:Egzersizler
Tebrikler 30 günlük javaScript programlama challenge' a katılmaya karar verdiniz. Bu challenge'da JavaScript programcısı olmak için ihtiyacınız olan her şeyi ve genel olarak tüm programlama kavramını öğreneceksiniz. Yardıma ihtiyacınız olursa veya başkalarına yardım etmek isterseniz telegram grubuna katılabilirsiniz.
30 Günde JavaScript challenge'ı hem yeni başlayanlar için hemde ileri düzey JavaScript geliştiricileri için bir kılavuzdur.
JavaScript, web sitelerine etkileşim eklemek , mobil uygulamalar, masaüstü uygulamaları , oyunlar geliştirmek için kullanılır ve günümüzde JavaScript, makine öğrenimi ve yapay zeka için kullanılabilir.
Yalnızca şunlara ihtiyacınız var:
- Motivasyon
- Bilgilsayar
- İnternet
- Browser(Tarayıcı)
- Kod Editörü (IDE)
Node.js'e şuan ihtiyacınız olmayabilir, ancak daha sonra ihtiyacnız olabilir. Node.js'i indirebilirsiniz .
İndirdikten sonra çift tıklayın ve kurun
Localiniz de node'un kurulu olup olmadıgını terminali veya komut istemini kullanarak kontrol edebilirsiniz.
$ node -v
v12.14.0Hneüz indirmediyseniz Google Chrome' u indirin. Tarayıcı konsoluna küçük JavaScript kodları yazabiliriz, ancak tarayıcı konsolunu uygulama geliştirmek için kullanmayız.
Google Chrome konsolunu, tarayıcının sağ üst köşesindeki üç noktayı tıklayarak, Diğer araçlar -> Geliştirici araçları'nı seçerek veya bir klavye kısayolu kullanarak açabilirsiniz. Kısayolları kullanmayı tercih ederim.
Bir klavye kısayolu kullanarak Chrome konsolunu açmak için.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Google Chrome konsolu açtıktan sonra,işaretli butonları keşfetmeye çalışın. Zamanın çoğunu konsolda geçireceğiz. Google Konsol V8 motoru, JavaScript kodunuzu makine koduna değiştirir. Google Chrome konsoluna bir JavaScript kodu yazalım
Google console'una veya herhangi bir tarayıcı console'a herhangi bir JavaScript kodu yazabiliriz. Ancak, bu challenge da sadece Google Chrome console'a odaklanıyoruz. Aşağıdakileri kullanarak console açın
Mac
Command+Option+I
Windows:
Ctl+Shift+Iİlk JavaScript kodumuzu yazmak için console.log() kullandık.
console.log('Hello, World!')console.log() işlevi , virgülle ayrılmış birden çok parametre alabilir. Syntax'ı aşağıdaki gibidir.
console.log(param1, param2, param3)
console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')Tebrikler! İlk JavaScript kodunuzu console.log() kullanarak yazdınız.
Kodumuzu yorum ekleyebiliriz.Yorumlar, kodu daha okunaklı hale getirmek ve kodumuzda açıklamalar bırakmak için çok önemlidir.JavaScript kodumuzun yorum kısmını işlemez. JavaSvript' e // ile başlayan herhangi bir metin saıtı yorumdur,
ve bunun gibi arasındaki metinlerde
//yorumdur.
Örnek:Tek Satırlı Yorum
// This is the first comment
// This is the second comment
// I am a single line commentÖrnek: Çok Satırlı Yorum
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/Programmlama dilleri insan dillerine benzer. İngilizce veya diğer birçok dil, anlamlı bir mesaj iletmek için kelimeler, deyimler, cümleler, bileşik cümleler ve daha fazlasını kullanır.Syntax' ın İngilizce anlamı, bir dilde iyi oluşturulmuş cümleler oluşturmak için kelimelerin ve deyimlerin düzenlenmesidir. Syntax'ın teknik tanımı, bir bilgisayer dilindeki ifadelerin yapısıdır. Programlama dilleri syntax'a sahiptir.JavaScript bir programlama dilidir ve diğer programlama dilleri gibi kendi syntax'ına sahiptir. Eğer JavaScriptin anladığı dyntax ı kullanmazsak , farklı türde hatalar ortaya çıkar. Farklı JavaScript hata türlerini daha sonra keşfedeceğiz. Şimdilik syntax hatalarını görelim.
Hata geri bildirim kılavuzunu okuyarak syntax düzeltebilir ve sorunu çözebiliriz. Bir programdaki hataları belirleme ve kaldırma işlemine hata ayıklama denir. Hataları düzeltelim:
console.log('Hello, World!')
console.log('Hello, World!')Şimdiye kadar, console.log() kullanılarak metnin nasıl görüntüleneceğini gördük. console.log(), kullanarak metin veya dize yazdırıyorsak, metnin tek tırnak, çift tırnak veya ters tik içinde olması gerekir.
Örnek:
console.log('Hello, World!')
console.log("Hello, World!")
console.log(`Hello, World!`)Şimdi, sayı veri türleri için Google Chrome konsolunda console.log() kullanarak JavaScript kodları yazma konusunda daha fazla alıştırma yapalım. Metne ek olarak JavaScript kullanarak matematiksel hesaplamalar da yapabiliriz.
Aşağıdaki basit hesaplamaları yapalım. Google Chrome konsoluna JavaScript kodu doğrudan console.log() işlevi olmadan yazılabilir. Ancak, bu girişe dahil edilmiştir, çünkü bu zorluğun çoğu, işlevin kullanımının zorunlu olacağı bir metin düzenleyicide yer alacaktır.Console daki talimatlarla doğrudan oynayabilirsiniz.
0
console.log(2 + 3) // Toplama
console.log(3 - 2) // Çıkarma
console.log(2 * 3) // Çarpma
console.log(3 / 2) // Bölme
console.log(3 % 2) // Mod - kalan bulma
console.log(3 ** 2) // Üs 3 ** 2 == 3 * 3"Ben Ide olarak WebStorm kullanıyorum.
JavaScript bir web sayfasına 2 farklı şekilde eklenebilir:
- Inline script Satır İçi
- Internal script Dahili
- External script Harici
- Multiple External scripts Çoklu Harici
Aşağıdaki bölümler, web sayfanıza JavaScript kodu eklemenin farklı yollarını gösterir
Masaüstünüzde veya herhangi bir yerde bir proje klasörü oluşturun, 30DaysOfJS olarak adlandırın ve proje klasöründe bir index.html dosyası oluşturun. Ardından aşağıdaki kodu yapıştırın ve örneğin Chrome gibi bir tarayıcıda açın.
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Inline Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
</body>
</html>İlk satır içi komut dosyanızı yazdınız. alert() fonklsiyonunu kullarak bir pop up uyarı mesajı oluşturabilirsiniz
Script tagı head veya body'e yazılabilir,ancak HTML body içerisine yerleştirilmesi tercih edilir.Öncelikle head tagları arasına yazalım
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Internal Script</title>
<script>
console.log('Welcome to 30DaysOfJavaScript')
</script>
</head>
<body></body>
</html>Çoğu zaman scriptleri bu şekilde yazarız.JavaScript kodunun body tagına yazılması en çok tercih edilen seçenektir.
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Internal Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script>
console.log('Welcome to 30DaysOfJavaScript')
</script>
</body>
</html>console.log() çıktısını görmek için tarayıcı console'unu açın.
Dahili komut dosyasına benzer şekilde, harici komut dosyası bağlantısı head veya body üzerinde olabilir, ancak body tagına yerleştirilmesi tercih edilir
console.log('Welcome to 30DaysOfJavaScript')External scripts head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:External script</title>
<script src="introduction.js"></script>
</head>
<body></body>
</html>External scripts in the body:
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:External script</title>
</head>
<body>
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
<script src="introduction.js"></script>
</body>
</html>console.log() çıktısını görmek için tarayıcı console'unu açın.
Ayrıca birden fazla harici JavaScript dosyasını bir web sayfasına bağlayabiliriz. 30DaysOfJS klasörü içerisinde bir helloworld.js dosyası oluşturun ve aşağıdaki kodu yazın.
console.log('Hello, World!')<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple External Scripts</title>
</head>
<body>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
</body>
</html>main.js dosyanız diğer tüm scriptlerin altında olmalıdır. Bu çok önemlidir
JavaScript'te ve ayrıca diğer programlama dillerinde farklı veri türleri vardır. Aşağıdakiler JavaScript ilkel veri türleridir: String, Number, Boolean, undefined, Null ve Symbol.
- Integers: Tam Sayılar (negatif, sıfır ve pozitif) number Örnek: ... -3, -2, -1, 0, 1, 2, 3 ...
- Float-point numbers: Decimal number Örnek ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
İki tek tırnak, çift tırnak veya ters tik arasında bir veya daha fazla karakter koleksiyonu.
Örnek:
'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'Bir boolen değeri, Doğru veya Yanlış'tır. Herhangi bir karşılaştırma, doğru veya yanlış olan bir boole değeri döndürür. Boolean veri türü, doğru veya yanlış bir değerdir.
Örnek:
true // if the light is on, the value is true
false // if the light is off, the value is falseIn JavaScript'te bir değişkene değer atamazsak değer undefined'dır. Buna ek olarak, bir işlev hiçbir şey döndürmüyorsa, undefined döndürür.
let firstName
console.log(firstName) // undefined, çünkü değer atanmamışJavaScript'te null boş bir değer anlamına gelir.
let emptyValue = nullBelirli bir değişkenin veri tipini kontrol etmek için typeof operatörünü kullanırız. Aşağıdaki örneğe bakın
console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefinedJavaScript'te yorum yapmanın diğer programlama dillerine benzer olduğunu unutmayın. Yorumlar, kodunuzu daha okunabilir hale getirmek için önemlidir. Yorum yapmanın iki yolu vardır:
- Single line commenting - Tek Satır Yorum
- Multiline commenting - Çok Satır Yorum
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line commentMultiline commenting:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/Değişkenler veri tanımlayıcılarıdır. Değişkenler, verileri bir bellek konumunda depolamak için kullanır.Bir değişken bildirildiğinde, bir bellek konumu ayrılır. Bir değere (veri) bir değişken atandığında, bellek alanı bu verilerle doldurulacaktır. Bir değişken bildirmek için var, let, veya const anahtar sözcükleri kullanırız.
Değeri sonradan değiştirilecek olan değişlenler için let kullanırız. Sabit değeri değiştirilmeyecek değişkenler oluşturmak için const kullanırız.Örneğin Pi, ülke adı, yerçekimi değişmez ve const kullanabiliriz. Bu challenge da var kullanmayacağız ve kullanmanızı tavsiye etmiyorum.
Geçerli bir JavaScript değişken adı aşağıdaki kurallara uymalıdır:
- JavaScript değişken adı, bir sayı ile başlamamalıdır.
- JavaScript değişken adı, dolar işareti ve alt çizgi dışında özel karakterlere izin vermez.
- JavaScript değişken adı, camelCase kuralına uygun olarak yazılmalıdır.
- JavaScript değişken adı, kelimeler arası boşluk olmalıdır.
Aşağıdakiler geçerli JavaScript değişkenlerine örnekler verilmiştir.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020Listedeki birinci ve ikinci değişkenler, JavaScript'te camelCase bildirme kuralına uyar. Bu materyalde camelCase değişkenlerini (camelWithOneHump) kullanacağız. Sınıfları bildirmek için CamelCase(CamelWithTwoHump) kullanıyoruz, diğer bölümde sınıflar ve nesneler hakkında tartışacağız.
Geçersiz değişkenlere örnek:
first-name
1_num
num_#_1Değişkenleri farklı veri tipleriyle tanımlayalım. Bir değişken bildirmek için değişken adından önce let veya const anahtar sözcüğünü kullanmamız gerekir. Değişken adının ardından eşittir işareti (assignment operator) ve bir değer (assigned data) yazıyoruz.
// Syntax
let nameOfVariable = valueExamples of declared variables
// Declaring different variables of different data types
let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true
console.log(firstName, lastName, country, city, age, isMarried)Asabeneh Yetayeh Finland Helsinki 100 true// Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
console.log(gravity, boilingPoint, PI)9.81 100 3.14// Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
console.log(name, job, live)Asabeneh teacher Finland01-Day klasöründe index.html dosyasını çalıştırdığınızda şunu almalısınız:
🌕 Harikasın! 1.gün challenge'ını tamamladın ve mükemmellik yolundasın.Şimdi egzersizleri yapalım.
- Yorumların kodu okunabilir hale getirebileceğini söyleyen tek satırlık bir yorum yazın
// Yorumların kodu okunabilir hale getirir.- 30 Günde JavaScripte Hoşgeldiniz yazan başka bir yorum yazınız
// 30 Günde JavaScripte Hoşgeldiniz.- Yorumların kodu okunabilir, yeniden kullanımı kolay ve bilgilendirici hale getirebileceğini söyleyen çok satırlı bir yorum yazın
// Yorumlar kodu okunabilir,
// yeniden kullanımı kolay ve bilgilendirici hale getirir.
- Bir değişken.js dosyası oluşturun ve değişkenleri bildirin string, boolean, undefined ve null veri türleri atayın
let ad;// undefined
let fullName='Efsane';// string
let isStudent = false; // boolean
let number= 25; // number
let nullValue = null; // null
const euler = 2.71828; // number (const)
console.log(isStudent,fullName,ad,number,nullValue,euler);- datatypes.js dosyası oluşturun ve farklı veri türlerini kontrol etmek için JavaScript typeof operatörünü kullanın. Her değişkenin veri türünü kontrol edin
console.log(
typeof isStudent,
typeof fullName,
typeof ad,
typeof number,
typeof nullValue,
typeof euler
)- Değer atamadan dört değişken bildirin
let declaredVariable;
let declaredVariableTwo;
let declaredVariableThree;
let declaredVariableFour;- Atanan değerlerle dört değişken bildirin
let declaredVariable;
declaredVariable = 'Efsane';
let declaredVariableTwo;
declaredVariableTwo = 'Deneme';
let declaredVariableThree;
declaredVariableThree = 'declaredVariableThree';
let declaredVariableFour;
declaredVariableFour = 'declaredVariableFour';- Adınızı, soyadınızı, medeni durumunuzu, ülkenizi ve yaşınızı birden çok satırda saklamak için değişkenler bildirin
let firstName = 'Efsane';
let lastName = 'Günyol';
let country = 'Turkey';
let age = 25;
let isMarried = false;- Adınızı, soyadınızı, medeni durumunuzu, ülkenizi ve yaşınızı tek bir satırda saklamak için değişkenler bildirin
let firstName = 'Efsane',
lastName = 'Günyol',
country = 'Turkey',
age = 25,
isMarried = false;- myAge ve yourAge adlı iki değişkeni bildirin ve bunlara başlangıç değerlerini atayın ve tarayıcı consoleuna yazdırın.
I am 25 years old.
You are 30 years old.myAge = 25;
yourAge = 30;
console.log(`Ben ${myAge} yaşındayım`);
console.log(`Sen ${yourAge} yaşındasın`);🎉 Tebrikler ! 🎉