JavaScript Programlama Eğitimi

JavaScript Hakkında

JavaScript: genellikle web programlama için kullanılan, kodun tarayıcı tarafından yorumlandığı, aynı anda bir tane iş parçacığı çalıştıran (single threaded), asenkron programlanabilen, nesne yönelimli programlamayı destekleyen, prototip tabanlı, çok paradigmalı ve dinamik yapılı bir programlama dilidir.

Web sitelerinin yaklaşık olarak %97'si JavaScript dilini kullanarak dinamik hale gelmiştir. En çok kullanılan programlama dilleri listesinde ilk 3 sırada yer almaktadır. Çok sayıda gelişmiş kütüphane (library) ve framework'ü mevcuttur. Örnek kütüphaneler: jQuery, Anime.js, Chart.js, React.js Örnek framework'ler: Vue.js, Angular.js, Node.js, Next.js

JavaScript programlama dilini: kısa bir sürede öğrenebilir ve projelerinizi hızlı bir şekilde hayata geçirebilirsiniz. Temel seviyede: Html ve Css bilmeniz, JavaScript dilini öğrenmenize yardımcı olacaktır.

Uygulama Alanları

• Web Programlama
• Sunucu Programlama (Node.js)
• 2 ve 3 Boyutlu Oyun/Animasyon Geliştirme (Canvas API, Three.js)
• Masaüstü Uygulama (Electron.js)
• Makine Öğrenimi ve Yapay Zeka (TensorFlow.js, ML5.js)
• Mobil Uygulama (WebView, React Native)

Program ve Eklentiler

• Google Chrome Tarayıcı
• Visual Studio Code
• JavaScript (ES6) Code Snippets
• Live Server

* Visual Studio Code için görseldeki 2 eklentiyi kurmanız gerekmektedir.
* Github hesabı oluşturmanız ve bir adet Alan Adına (Domain) sahip olmanızı tavsiye ederim.

Eğitimin Amacı

JavaScript programlama dilindeki Türkçe kaynak sayısını arttırmak. Öğrencilere daha yüksek performanslı kod geliştirme becerisini kazandırmak. Web site tasarımı, tarayıcı oyunları geliştirme, mobil uygulama geliştirme, web sitelerde bulunan açıkların nasıl keşfedibileceği anlamak ve yapay zeka destekli kod yazımını iyileştirmek vb. konulardaki içerikleri çoğaltmak.

Konu Başlıkları

• (1) JavaScript Diline Giriş
• 1a- JavaScript Kodunu Tarayıcıda Çalıştırma Yöntemleri
• 1b- Yazım Kuralları (Syntax)

• (2) Değişken Tanımlama ve Stil Kuraları
• 2a- var, let, const
• 2b- Snake, Camel, Pascal

• (3) Veri Tipleri
• 3a- İlkel (Primitive) Veri Tipleri
• String (Metinsel İfadeler)
• Template Literal
• Kaçış Karakterleri (Escape Characters)
• Number (Sayısal İfadeler)
• BigInt (Büyük Tamsayılar)
• Boolean (true / false)
• Undefined (Tanımlanmamış)
• Null (Boş Değer)
• Symbol
• 3b- İlkel Olmayan (Reference) Veri Tipleri
• Array (Dizi)
• Function
• Date (Tarih)
• Object (Nesne)
• Map & Set

• (4)Tip Dönüşümleri
• Tipini Öğrenme (typeof)
• String() & toString()
• Number(), parseInt(), parseFloat()
• Boolean()

• (5) Operatörler
• 5a- Atama Operatörü (Assignment Operator)
• 5b- Aritmetik Operatörler
• + Toplama Operatörü
• - Çıkarma Operatörü
• * Çarpma Operatörü
• / Bölme Operatörü
• ** Üs Alma Operatörü
• % Mod Operatörü (Remainder)
• ++ Arttırma Operatörü
• -- Azaltma Operatörü
• 5c- Karşılaştırma Oparatörleri (Comparison Operators)
• == Eşitse
• === Hem eşit hem de aynı türdeyse
• != Eşit değilse
• !== Hem eşit değil hem de aynı türde değilse
• < Küçükse
• >= Küçük veya eşitse
• > Büyükse
• >= Büyük veya eşitse
• 5d- Mantıksal Oparatörler (Logical Operators)
• && Ve Operatörü
• || Veya Operatörü
• ! Değilse Operatörü

• (6) Karar Yapıları
• 6a- if else
• 6b- Ternary Operatörü
• 6c- switch case

• (7) Döngüler
• 7a- while & do while
• 7b- for
• 7c- break & contiune
• 7d- for in & for of

• (8) Fonksiyonlar
• 8a- Fonksiyon Tanımlama, Çalıştırma, Değer Döndürme ve Özyineleme
• 8b- Varsayılan (Default) Parametre Tanımlama
• 8c- Rest (...) Operatörü ve Destructuring
• 8d- Ok (Arrow) Fonksiyon
• 8e- IIFE Fonksiyon ve Closure Fonksiyon

• (9) Matematik (Math) Metodları
• 9a- abs() & sign()
• 9b- ceil() & floor() & round() & trunc()
• 9c- pow() & sqrt() & cbrt()
• 9d- max() & min()
• 9e- random()
• 9f- hypot()
• 9g- cos() & sin() & tan()
• 9h- log() & exp()
• Math Properties -> E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2

• (10) Metin (String) Metodları
• 10a- at() & charAt() & charCodeAt() & codePointAt()
• 10b- fromCharCode() & fromCodePoint() & raw()
• 10c- isWellFormed() & toWellFormed() & normalize()
• 10d- concat() & (+) operatörü
• 10e- slice() & substr() & substring()
• 10f- split()
• 10g- includes() & search()
• 10h- indexOf() & lastIndexOf()
• 10i- startsWidth() & endsWith()
• 10j- padStart() & padEnd()
• 10k- trim() & trimStart() & trimLeft() & trimEnd() & trimRight()
• 10l- replace() & replaceAll()
• 10m- toLowerCase() & toLocaleLowerCase()
• 10n- toUpperCase() & toLocaleUpperCase()
• 10o- localeCompare()

• (11) Array Metodları
• 11a- concat() & (...) spread operatörü
• 11b- flat() & join() & toString() & toLocaleString()
• 11c- keys() & values() & entries()
• 11d- push() & pop() & unshift() & shift()
• 11e- sort() & toSorted()
• 11f- reverse() & toReversed()
• 11g- slice() & splice() & toSpliced()
• 11h- with() & coptWithin() & fill()
• 11i- reduce() & reduceRight()
• 11j- find() & findIndex() & findLast() & findLastIndex()
• 11k- includes() & indexOf() & lastIndexOf()
• 11l- forEach()
• 11m- map()
• 11n- filter()
• 11o- every() & some()

• (12) Nesne Yönelimli Programlama

• (13) Modül Kullanımı

• (14) Hata Yönetimi

• (15) Katı Mod (Strict Mode)

• (16) Düzenli İfadeler (Regular Expressions)

• (17) Tarih (Date) Nesnesi
• 16a- now() & parse() & UTC()
• 16b- getDate()
• 16c- getFullYear() & getMonth() & getDay()
• 16d -getHours() & getMinutes() & getSeconds() & getMilliseconds()

• (18) Asenkron Programlama

• (19) Belge Nesne Modeli (Document Object Model / DOM)

• (20) Tarayıcı Nesne Modeli (Browser Object Model / BOM)
• 20a- Window
• 20b- Screen
• 20c- Location
• 20d- History
• 20e- Navigator
• 20f- Pop-up Alert
• 20g- Timing (Zamanlayıcılar)
• setTimeout
• setInterval

• (21) Veri ve Oturum Depolama
• 21a- localStorage
• 21b- sessionStorage
• 21c- Çerezler (cookies)

• (22) Tuval (Canvas)
• 22a- Html Sayfasında Çizim Alanı oluşturmak
• 22b- Şekil Çizdirmek
• Kare & Dikdörtgen
• Üçgen & Çokgen
• Yay & Çember & Daire
• 22c- Şekilleri Renklendirmek
• 22d- Metin Eklemek
• 22e- Resim Eklemek ve Manipüle Etmek
• 22f- Fiziksel Özellik Eklemek
• Döndürme (Rotate)
• Konum Değiştirme (Translate)
• Boyutlandırma (Scaling)
• 22d- Animasyon Oluşturma (requestAnimationFrame)

Kaynak Siteler

• developer.mozilla.org/en-US/docs/Web/JavaScript
• digitalocean.com/community/tutorial-series/how-to-code-in-javascript
• javascript.info
• javascripttutorial.net
• javascripture.com
• masteringjs.io
• tutorialspoint.com/javascript/
• w3schools.com/js/