04 Javascript
Uploaded by
umutoyun0404 Javascript
Uploaded by
umutoyun04JavaScript
Javascript nedir?
Compiler & Interpreter
Kullanım amaçları
Sürümleri
Javascript Popülarite
İlk kodlar
Introduction
Javascript nedir? INTERV
IEW
Yüksek seviyeli, nesne yönelimli, yorumlayıcı tabanlı ve dinamik bir
programlama dilidir.
Yüksek Seviyeli Nesne Yönelimli Yorumlayıcı Tabanlı
Hafıza yönetimi gibi Nesne özelliklerinin Derleyicide olduğu gibi
karmaşık görevleri (kalıtım, çok şekillilik tüm komutların bir kere de
düşünmemize gerek v.b) kullanılmasına makine koduna çevirmek
yoktur. imkan sağlamaktadır. yerine tek-tek alınıp
makine koduna çevrilip
çalıştırılmasını sağlar.
Nerede kullanılır?
HTML JAVASCRIPT CSS
Neden Javascript
Front-end Dev Back-end Dev
React, Svelte, Vue, Angular gibi JS NodeJs ile sunucu
framework ve kütüphanleri ile tarafında uygulamalar
web ve mobil uygulamalar geliştirilebilmektedir.
geliştirilebilmektedir.
Facebook, Netflix, Dropbox, AirBnb Netflix, Uber, E-Bay
Neden Javascript
Mobile Dev Desktop Dev
React Native, Ionic, Native Script Electron kütüphanesi ile
gibi kütüphaneler ile mobile masaüstünde çalışacak
uygulama geliştirilebilir. uygulamalar geliştirilebilir.
Facebook, Instagram, VSCode, Whatsapp,
Skype, Uber, Pinterest Slack, Skype, Twitch,
Teams
Java Script in Gelişimi
ES ES ES ES ES ES
Mocha
1 2 3 4 5 6
1995 1997 1998 2000 2008 2009 2015
ES ES ES ES ES ES ES
7 8 9 10 11 12 13
2016 2017 2018 2019 2020 2021 2022
ES
14
2023
Google Trends
Swift 2.64
TypeScript 3.04
R 4.4
PHP 4.91
C/C++ 6.54
C# 6.67
JavaScript 9.36
Java 15.9
Python 27.99
0 5 10 15 20 25 30
[Link]
A Survey
C# 27.62
Typescript 38.87
Java 30.55
SQL 48.66
Python 49.28
HTML/CSS 52.9
Javascript 63.61
0 10 20 30 40 50 60 70
[Link]
Github repos
2 milyar civarındaki internet sitesinde %95 oranında Javascript kullanılmaktadır.
Neden popüler?
Kurulum Object End to end
gerekmez Oriented programming
Library & Community
Framework
İlk kodlar
Javascript in test amaçlı kullanımı
Boş bir chrome sayfasında sağ tıklayıp inspect (incele) dedikten sonra
2 1
Snippets tıklanır Sources (Kaynaklar)
tıklanır
3 4
New snippet a
tıklanıp isim verilir. 5 Kodlar yazılır
Ctrl+Enter ile
çalıştırılır
İlk kodlar
<html> Javascript kodlarını yazmak için
<head> script tagı kullanılır.
Tüm javascript kodları script tagları
</head> arasına yazılır
<body>
Script taglarının body kapanmadan
hemen önce konulması tavsiye edilir.
<script> Bu kullanıma internal script denir ve
… javascript kodları sadece mevcut
</script> sayfa için geçerli olur.
</body>
</html>
İlk kodlar
Javascript kodları harici bir
<html>
dokümana konularak kullanılırsa
<head>
buna external script denir
</head> Bu dosyayı kullanan tüm html
<body> sayfalarında kullanılabilir hale gelir.
<script src="assets/js/[Link]">
</body>
</html>
Kodların çalıştırılması
1 2
Web sayfalarında bulunan VSCode Live Server
Javascript kodları, tarayıcı eklentisi ile çalıştırılırsa,
tarafından çalıştırıldığı için html yapılan değişiklikler de
dosyasına dosyaya çift tıklayarak anında yansıtılmış olur. Ve
açmak javascript dosyalarının gerçeğe yakın bir ortamda
çalışması için yeterlidir. geliştirme yapılabilir.
Syntax
Console
Alert, confirm, prompt
JavaScript Comment
Variables and
constants
Operators
Fundamentals
Javascript syntax INTERV
IEW
• Case sensitive bir dildir.
• Satır sonlarına genellikle
noktalı virgül (;) konulur.
• Identifier lar(variables,
constants, functions) harf,
_ veya $ ile başlayabilir.
• Identifier lar camel case
ile yazılır.
Case Types
camelCase snake_case kebab-case
Train-Case P PascalCase
M MACRO_CASE
Console
Javascript ile tarayıcıların console bölümüne birşeyler
yazdırmak için console object kullanılır.
[Link]("bla bla bla");
Console
Console object inin farklı kullanımları vardır.
[Link]("Hello World");
[Link]("Sayılar eşit");
[Link]("ID alanı boş olamaz");
Alert, Confirm, Prompt
Alert
Bilgilendirme yapmak için kullanılır
alert("Silmeye yetkiniz yok");
Confirm
Soru sormak için kullanılır.
confirm("Silmek istediği….");
Prompt
Bilgi almak için kullanılır.
prompt("Adınızı giriniz");
Comment INTERV
IEW
// Bu bir comment satırıdır.
/*
Bu şekilde birden çok satırı aynı
anda comment içine alabilirsiniz.
*/
Variables (Değişkenler), Constants (Sabitler)
Programlama dillerinde geçici olarak değerleri saklamak için
kullanılan yapılara değişken ya da sabit adı verilir.
Variables - Constants INTERV
IEW
Javascript te değişken veya sabit tanımlamak için 3
farklı ifade kullanılır
ES ES
6 6
var let const
Değişken sabit
Variables - Constants
• case sensitive yani büyük
var sayi; küçük harf duyarlıdır.
var Sayi;
• Sabitler tanımlanırken
var genelOrtalama; değerleri de verilmelidir.
const kdv = 1.18; • Değişkenler camelCase olarak
tanımlanır.
• İçinde saklayacağı veriyi
anımsatacak bir isim verilir.
Variables - Constants
KURALLAR
Değişken isimlendirilirken hem harfler hem de sayılar kullanılabilir. Ancak sayılar başa
gelmez. Örneğin sayi1 doğru bir isimlendirmeyken 1sayi doğru bir isimlendirme değildir.
Değişken isimlendirilirken alt tire (_ ve $) kullanılabilir. Ancak boşluk ve diğer özel
karakterler (?,%,!, ., + vb.) kullanılmaz. Örneğin ev adresi ya da kimlik%no gibi değişken
isimleri kurallara aykırı olduğundan hataya neden olacaktır.
Değişken isimlendirilirken özel kullanım için ayrılmış olan if, for, true vb. ifadeler
kullanılmamalıdır.
İngiliz alfabesinde bulunmayan karakterler (ç,ğ,ı,ö,ş,ü) kullanılamaz.
Variables - Constants
ders 1not gen_ort
$maas ilk sayi son_şekil
gun% harf-bir dGunu
Data types (Veri tipleri) INTERV
IEW
ES
11
String Number BigInt Boolean
var adi="Ali"; var yas=18; var x = 100n; var emekli=true;
Tam sayı: ± 253-1
Decimal: ± 21024
ES
6
Symbol Undefined null Object
var id= Symbol(); var isim; var isim = null; array, object
! typeof ! isNaN
var
var degisken = "Ali";
!
[Link](degisken); Ali var ile değişken
[Link](typeof(degisken)); String tanımlandığında, aynı
isimde başka bir
değişken
var degisken = 50; tanımlanmasına izin
[Link](degisken); 50 verir.
[Link](typeof(degisken)); number
var degisken = true;
[Link](degisken); true
boolean
[Link](typeof(degisken));
let
let isim = "Ali";
[Link](isim); Ali
[Link](typeof(isim)); string
let puan = 50;
[Link](puan); 50
[Link](typeof(puan)); number
let emekli = true;
[Link](emekli); true
[Link](typeof(emekli)); boolean
const
const degisken = "Ali";
!
[Link](degisken); Ali const veya let ile
[Link](typeof(degisken)); string değişken
tanımlandığında, aynı
scope içinde aynı
var degisken = 50; Burada isimde başka bir
[Link](degisken); hata verir değişken
tanımlanmasına izin
[Link](typeof(degisken));
vermez.
Undefined, empty, null INTERV
IEW
Variable with value Empty variable Null variable undefined
let x = "Hello"; let x = ""; let x=null; let x;
Operatörler
=
Aritmetik Karşılaştırma Mantıksal Atama
Operatörler Operatörleri Operatörler Operatörler
Aritmetik operatörler
Operatör Sembol Örnek
Toplama + 45+6
Çıkarma - 35-7
Çarpma * 25*2
Bölme / 16/5
Üs Alma ** 5**3
Mod Alma % 12%5
Bir artırma ++ x++
Bir azaltma -- y--
Aritmetik operatörler (+)
const ekmek = 2;
const yumurta = 30;
const peynir = 40;
const toplamHarcama = ekmek + peynir + yumurta;
[Link]("HARCAMA:" + toplamHarcama + " TL"); ÇIKTI
HARCAMA: 72 TL
const ad = 'Ali';
const soyAd = 'Gel';
ÇIKTI ÖNEMLİ
[Link](ad + soyAd);
AliGel + operatörü ile
[Link](ad + ' ' + soyAd); Ali Gel string birleştirme de
gerçekleştirilebilir .
const x = 5;
ÇIKTI
const y = "5";
55
const birlestir = x + y;
[Link](birlestir);
ÇIKTI
[Link](x-y); 0
Tip dönüşümleri
const para = "100";
ÇIKTI ÖNEMLİ
[Link](para + 15); 10015
[Link](Number(para) + 15); Number() fonksiyonu
ÇIKTI tip çevrimi yapılabilir.
115
const dil = "Javascript"; ÇIKTI ÖNEMLİ
NaN Number() fonksiyonu harfleri sayıya
[Link](Number(dil));
çeviremeyeceği için NaN (Not a number –
[Link](Number("123abc")); ÇIKTI Sayı değil) döndürüyor.
NaN
const para = 5400; ÇIKTI ÖNEMLİ
[Link](para+15); 5415 String() fonksiyonu ile verilen
[Link](String(para)+15); ÇIKTI İfadeyi string’e çevirmek mümkündür.
540015
Tip dönüşümleri
ÖNEMLİ
const s1 = 5;
0, null, undefined, NaN, ve " "
const s2 = -7;
Javascript tarafından false olarak
const isim = "John"; ÇIKTI kabul edilir.
[Link](Boolean(isim)); true
[Link](Boolean(s1)); true Diğer değerler Boolean’a
[Link](Boolean(s2)); true çevrildiğinde true olarak kabul edilir.
const sifir = 0, nal = null;
const tanimsiz = undefined;
const bos = "", sayiDegil = NaN;
ÇIKTI
[Link](Boolean(sıfır),Boolean(nal)); false
[Link](Boolean(tanımsız), Boolean(boş)); false
[Link](Boolean(sayıDeğil)); false
İşlem önceliği
Aritmetik işlemler yapılırken
bilgisayar operatör önceliğine ( ) Parantez
göre işlem yapar.
** Üs alma
Çarpma / Bölme
! Öncelik seviyesi aynıysa
soldaki ifadeyi önce yapar.
*
+ Toplama - Çıkarma
İşlem önceliği
8/2*(2+2) 16
30 – 3**2 / 3 + 10 37
16 / 2 * 3 – 2**(4 / 2) 20
( 14 * 2 / 7 )**2 / 4 + 5 9
String literals ES
Metinleri daha dinamik bir şekilde birleştirmek için string şablonları (string
literals, template literals ) kullanabiliriz. Bu birleştirme işlemine de string
interpolation denir.
let isim = "Ali"; let isim = "Ali";
let soyisim = 'Gel'; [Link](`Merhaba ${isim}`);
Tek tırnak veya çit tırnak string interpolation bactick ile yapılır
! Backtick multiline text
tanımlamaya da izin verir.
Aritmetik operatörler (-)
const yil = 2021;
const dogumTarihi = 1980;
const yas = yil - dogumTarihi; ÇIKTI
[Link]("YAŞ:" + yas); YAŞ: 41
[Link]("YAŞ:" + yil - dogumTarihi); NaN
ÖNEMLİ
Ekstra parantez kullanılmaz ise string birleştirme yapmaya çalışır. – den dolayı
birleştiremez ve NaN döndürür.
NaN = Not a Number (Sayı değil)
Aritmetik operatörler (*, **)
const pi = 3;
const r = 3;
const alan = pi*r**2;
const çevre = 2*pi*r ÇIKTI
[Link](çevre, alan); 18 27
[Link]("ÇEVRE:" + çevre, "ALAN:"+ alan); ÇEVRE:18 ALAN:27
Aritmetik operatörler (++, --, %)
let a = 3; let b = ++a; let c = --a; ÇIKTI
[Link](a,b,c); 343
a += 5;
[Link](a); ÇIKTI
8
const z = 3;
HATA
let k = z++; const değişkenin değeri arttırılamaz.
[Link](k);
let sayi = 123; ÇIKTI
[Link]("Birler Basamağı:" + sayi%10); Birler Basamağı: 3
[Link](sayi++);
ÇIKTI
123
Karşılaştırma operatörleri INTERV
IEW
Operatör Sembol Örnek
Eşittir == veya === Not==75
Eşit değildir != veya !== Not != 45
Büyüktür > Yas > 45
Küçüktür < Yas < 18
Büyük veya eşit >= Ort >=80
Küçük veya eşit <= Ort<=90
! Karşılaştırma işlemlerinin sonucu TRUE veya FALSE olur
Karşılaştırma operatörleri
ÖNEMLİ:
const s1 = 5; === ve !== operatörleri hem veriyi hem de
[Link](s1 == 5); true veri tipini k ontrol eder.
[Link](s1 == "5"); true == ve != operatörleri ise sadece veriyi kontrol
ederler.
[Link](s1 === "5"); false
[Link](s1 !== 5); false
[Link](s1 != "5"); false
[Link](s1 !== "5"); true
ÖNEMLİ:
[Link](s1 > 5); false Büyük eşit ve küçük eşit işlemlerinde veri
[Link](s1 > "4"); tipi kontrolü yapılmıyor.
true
[Link](s1 >= 5); true
[Link](s1 > "6"); false
Mantıksal operatörler
Operatör Sembol Örnek
And && ort > 50 && ort < 70
Or || yas < 16 || yas > 70
Not ! ! ( yas > 45 )
A B A && B A || B
A !A
1 1 1 1
1 0 0 1 1 0
0 1 0 1
0 1
0 0 0 0
Mantıksal operatörler
let s2 = true; ÖNEMLİ:
0, FALSE, NULL, undefined, "" ve
let s3 = true; NaN dışındaki durumlar TRUE
[Link](s2 && true); true kabul edilir.
[Link](s2 && s3); true
[Link](s2 && s3 && false); false
s3 = false;
[Link](s2 || s3 || false); true
[Link](s3 || (s2 && s3) ); false
s3 = null;
[Link](s2 && s3); null
[Link](s2 || s3); true
Mantıksal operatörler
s2 = "kuş"; ÖNEMLİ:
s3 = "kedi";
[Link](s2 || s3); kuş • VEYA işleminde ilk TRUE değerin
[Link](s2 && s3); bulunması yeterlidir. Diğerlerinin kontrolüne
kedi
gerek yoktur. Bu yüzden, ilk true olan
değişkenin değeri döndürülür. Hiçbiri true
s2 = true; değilse en sondaki değer döndürülür.
s3 = false;
• VE işleminde ilk FALSE değerin bulunması
[Link](!s2); false
yeterlidir. Diğerlerinin kontrolüne gerek
[Link](!s3); true yoktur. Bu sebeple ilk false olan değişkenin
değeri döndürülür. Hiçbiri false değilse en
sondaki değer döndürülür.
s3 = null;
[Link](!s3); true
Mantıksal Operatörler
not1
not2
50
60
T not1 > 30 && not1 < 70
not3 70
F not2 >= 60 && not3 != 70
T not3 < 100 || not2 > 80
F not1 + not2 < not3 || not1 < 50
T not1 < 30 || not2 > 50 && not3 == 70
Atama operatörleri
Operatör Örnek Açıklama
= x=y Sağdaki değişkenin değerini soldakine kopyalar.
+= x += 1 x= x+1 işlemi gerçekleştirir.
-= x -= 2 x= x-2 işlemi gerçekleştirir.
*= x *= 3 x= x*3 işlemi gerçekleştirir.
/= x /= 4 x= x/4 işlemi gerçekleştirir.
2
**= x **= 2 x= x işlemi gerçekleştirir.
%= x %= 3 x = x mod 3 işlemi gerçekleştirir.
&= x &= y x = x VE y işlemi gerçekleştirir.
|= x |= y x = x VEYA y işlemi gerçekleştirir.
Atama operatörleri
let x = 22;
let y = 5;
x += 4; x=x+4 x=22+4 x=26
x /= 2; x=x/2 x=26/2 x=13
x %= y; x=x%y x=13%5 x=3
y = x; y=x y=3
x *= y; x=x*y x=3*3 x=9
y **= 2; y=y2 x=32 y=9
[Link](x-y); 0
Referans type VS value type INTERV
IEW
Value Type Variables Reference Type Variables
let score1 = 25
let star1 = { size: 3, color: "red" }
let score2 = score1;
let star2 = star1;
score2 = 21
[Link] = "blue"
25 21 star1
star2
score2
score1
document object
querySelector
innerText
innerHtml
JavaScript value
onclick
Temel DOM İşlemleri
Document object
Bir web sayfasındaki diğer tüm nesnelerin sahibi olan ana nesneye document
object denir. Document nesnesi web sayfamızı temsil eder. Eğer sayfa içindeki bir
nesneye erişmek istenilirse document nesnesi kullanılır.
[Link](selector);
Selectorle css selectorleri
eşleşen ilk kullanılır.
elemanı seçer (.menü li)
Document object
[Link](selector);
Selectorle css selectorleri
eşleşen tüm kullanılır.
elemanları (.menü li)
seçer ve bir
dizi içinde
tutar.
Document object
innerText Bir elementin içindeki yazıyı okumak veya değiştirmek için kullanılır
innerHTML Bir elementin içindeki HTML’i okumak veya değiştirmek için kullanılır
classList Bir elementin sahip olduğu class ları manipüle etmek için kullanılır
add Elemente bir class eklemek için kullanılır
remove Elementin sahip olduğu bir class ı kaldırmak için kullanılır
querySelector
<h1 class="name">Ali Gel</h1>
<p class="mesaj"></p>
let isim = [Link]('.name').innerText;
[Link]('.mesaj').innerText = `Merhaba ${isim}`;
[Link]('.mesaj').innerHTML = `<b>Merhaba ${isim}</b>`;
querySelector
<h1 class="name blue">Ali Gel</h1>
<p class="mesaj"></p>
[Link]('.name').[Link]('red');
[Link]('.name').[Link]('blue');
querySelector
value Bir form elemanının değerini okumak ya da değiştirmek için kullanılır
<input type="text" id="name">
<input type="text" id="mesaj">
let isim = [Link]('#name').value;
[Link]('#mesaj').value = `Merhaba ${isim}`;
onclick
<p onclick="sayHello()">Merhaba Dünya</p>
function sayHello(){
alert("Hello World!");
}
DOM PRACTI
SE
Textbox lardan alınan iki sayıyı, butona basılınca
toplayan ve sonucu bir label içinde gösteren sayfayı
yapınız
Sayı 1 Sayı 2 Topla
Sonuç:
if
if-else
if elseif
JavaScript switch
ternary
|| and &&
Optional chaning
Nullish coalescing
Conditional Statements
Conditional Statements
• Programlamada program
akışını çeşitlendirmek için
kullanılır.
• Javascript te bunun için if
veya switch blokları
kullanılır.
if
Mantıksal ifade
doğruysa buraya
gelir if (x>5){
D }
Mantıksal Y
ifade
if PRACTI
SE
Bir Textbox tan alınan 500₺ den büyük fiyatlar için
%10 indirim uygulayan programı yapınız.
if PRACTI
SE
null
undefined
if (…) { NaN
5
"Hello"
true
false
{name: ‘John’}
} {}
[5,3,1,5]
[]
if-else
if (x>5){
Mantıksal ifade
doğruysa buraya }
gelir
else{
D }
Mantıksal Y Mantıksal ifade
yanlışsa buraya
ifade gelir
if-else PRACTI
SE
Bir Textbox tan alınan fiyat bilgisi 500 den büyükse
%10 indirim uygulayıp sonucu yazan, değilse %5
indirip uygulayıp sonucu yazan programı yapınız.
DOM PRACTI
SE
Dark-light mode switcher uygulaması yapınız.
Dark Mode Light Mode
Page background color black White
Page text color white Black
Button background color white Black
Button text color black White
if-elseif-else
1. D 1. Mantıksal ifade
doğruysa buraya
Mantıksal
gelir
ifade
if (x>5){
Y }
elseif(x<3){
2. D 2. Mantıksal ifade
doğruysa buraya
}
else{
Mantıksal gelir
ifade
}
Y
[Link]ıksal ifade
yanlışsa buraya
gelir
if-elseif-else PRACTI
SE
Bir Textbox tan alınan fiyat bilgisi 500 den büyükse
%10 indirim uygulayıp sonucu yazan, 300 den
büyükse %7 indirip uygulayıp sonucu yazan,
değilse %5 indirip uygulayıp sonucu yazan
programı yapınız.
switch
1. D 1. Mantıksal ifade
Mantıksal doğruysa buraya
ifade gelir
switch(true){
Y case(x>3):
…
break;
D 2. Mantıksal ifade
2. doğruysa buraya case(x>20):
Mantıksal gelir …
ifade
break;
Y case(x>30):
…
break;
3. D default:
Mantıksal 2. Mantıksal ifade
ifade doğruysa buraya …
gelir }
Y Hiçbir case e
girmezse buraya
default gelir
switch PRACTI
SE
Bir Textbox tan alınan fiyat bilgisi
1500 den büyükse %15,
1000 den büyükse %13,
700 den büyükse %10,
500 den büyükse %7,
300 den büyükse %5,
Diğer durumlarda %2 indirim uygulayıp sonucu
yazan programı yapınız.
Ternary ES
if-else bloğunun tek satırda basit bir şekilde yazılmasıdır
mantıksal_ifade ? doğruysa : yanlışsa
let maas = 15000;
[Link]( maas>13000 ? "Normal" : "Az" );
Ternary PRACTI
SE
• Şekildeki gibi form oluşturunuz.
Çalışan seçildiğinde tam, emekli
ise %10 kesinti uygulayarak maaşı
gösteriniz. Bunu ternary
kullanarak yapınız.
|| ve &&
if bloğunun tek satırda basit bir şekilde
yazılmasıdır
mantıksal_ifade && doğruysa
mantıksal_ifade || yanlışsa
var x = 15
x == 10 && alert("x is 10");
x == 10 || alert("x is not 10");
Optional Chaining ES
11
Object yapılarında, object in olmayan elemanlarına
erişim sağlandığında hata almamak için kullanılır
const user = { const user = {
name : 'John’, name : 'John’,
age: 23 age: 23
} }
[Link]([Link]); [Link](user?.salary);
Type error: Cannot read property ‘salary’ of undefined undefined
Nullish Coalescing ES
11
Sadece Null ve undefined durumlarını kontrol ederek buna göre aksiyon
almamızı sağlayan bir operatördür. Eğer ilk parametre null veya undefined
değilse ilk parametreyi, yoksa ikinci parametreyi döndürür
const user;
alert(user ?? "Anonymous");
nullish coalescing
const user;
alert(user !== null && user !== undefined ? user : "Anonymous");
ternary
Nullish Coalescing PRACTI
SE
Dikdörtgenin alanını bulun bir
fonksiyona gönderilen kenar
uzunluklarını nullish coalescing
ile kontrol ederek default değer
atayınız.
Hesap Makinesi HOME
WORK
Şekildeki gibi bir hesap
makinesi tasarlayınız
Logical Assignment Operators TASK
ES
Nullish Assignment And Assignment Or Assignment 12
??= &&= ||=
for
while
do-while
JavaScript
Basic Loops
Döngüler
Tekrarlanan işlemleri daha az kod yazarak
gerçekleştirmek için döngüler kullanılır.
for while do-while
For
Mantıksal ifade
True doğru olduğu
Check sürece buradaki
condition kodlar sürekli
tekrarlanır
False
for
for(var i=0; i<10; i++){ • En temel döngü türüdür.
. • Tekrar ettirilecek kodun baştan kaç defa
tekrar ettirileceği biliniyorsa bu tür
. döngüler kullanılabilir.
}
for(let i = 1 ; i<= 10 ; i++){
Döngünün Doğru Artış
başlangıç olduğu miktarı [Link]("Merhaba");
sayısı sürece
döngü tekrar }
eder
for PRACTI
SE
Bir ul listesinde ürün isimleri
ve fiyat bilgileri
bulunmaktadır. Textbox a
girilen indirim oranı kadar
listeye indirim uygulayan
programı yazınız.
While
Mantıksal ifade
True doğru olduğu
Check sürece buradaki
condition kodlar sürekli
tekrarlanır
False
while
while(a<50){ • Döngünün ne kadar döneceği
döngü bloğunun içindeki kodlara
… bağlı ise bu durumda while
} Doğru döngüleri kullanılabilir.
olduğu
sürece
döngü tekrar
eder
while PRACTI
SE
Bir textbox tan alınan sayının, sayı değerini
hesaplayıp sonucu bir h3 içinde gösteren programı
yapınız.
8291 => 8+2+9+1 = 20
Do-While
True
Mantıksal ifade doğru olduğu Check
sürece buradaki kodlar sürekli condition
tekrarlanır
False
do-while
do{ • Do while da kontrol sonda olduğu
Doğru için döngü içindeki kodlar en az
… olduğu bir kere icra edilir.
sürece
} döngü tekrar
while(a<50) eder
Do-while PRACTI
SE
Textbox tan alınan sayının faktöriyelini bulan
programı yapınız.
Fonksiyon nedir?
Nasıl çalışır?
Fonksiyon tanımlama
JavaScript Scope
Hoisting
Anonymous fonksiyon
var-let-const
Functions
Fonksiyon nedir?
Fonksiyon, programda tekrar tekrar çalıştırılabilecek alt programlara denir.
Kod tekrarlarının önüne geçer
Problemler küçük parçalara ayrılarak daha kolay çözülür.
Parçalara ayrılan sorun, daha fazla insan tarafından aynı anda çözülür.
Hata ayıklama daha kolay olur
Nasıl çalışır
Ana program
kodları
.
.
. fonksiyon(){
. .
fonksiyon(); .
. .
. }
.
.
.
.
.
Fonksiyon tanımlama
Function declaration
Fonksiyona dışarıdan
function fonksiyonIsmi(param1, param2, …){ gelen parametreler
// işlemler
// …
Fonksiyonun çağrıldığı
return donenDeger;
yere döndürdüğü değer
}
var x = fonksiyonIsmi(paramValue1, paramValue2, …); Fonksiyonun çağrılması
Fonksiyon tanımlama
Yaş hesaplayan bir fonksiyon yazınız.
function yasHasapla(){
Bu fonksiyon hep aynı yaşı
[Link](`Benim yaşım ${2022 - 1990}`);
gösteriyor. Farklı doğum
}
tarihlerine göre daha
modüler hale getirilebilir
yasHasapla();
mi?
yasHasapla();
Fonksiyon tanımlama
Yaş hesaplayan bir fonksiyon yazınız.
function yasHasapla(dogumTarihi){
[Link](`Benim yaşım ${2022 - dogumTarihi}`); Eğer yaş bilgisi ana
} programda kullanılmak
istenirse ne yapılabilir?
yasHasapla(1980);
yasHasapla(2001);
Fonksiyon tanımlama
Yaş hesaplayan bir fonksiyon yazınız.
function yasHasapla(dogumTarihi){
return 2022 - dogumTarihi;
}
var yas = yasHasapla(1980);
if(yas >= 65){
…
}
Fonksiyon PRACTI
SE
Bir sayının asal olup olmadığını bulan fonksiyonu
yazınız.
Homework HOME
WORK
• Bir sayının palindrome olup olmadığını bulan
programı yapınız
• 12221 -> palindrome
• 4556 -> palindrome değil
Fonksiyon tanımlama
Declaration yöntemi Expression yöntemi
function yasHasapla(dogumTarihi){ const yasHasapla = function(dogumTarihi){
return 2022 - dogumTarihi; return 2022 - dogumTarihi;
} }
yasHesapla(); yasHesapla();
Hoisting
Anonymous
Function
Immediately
Invoke Function
Callback
Function
Fonksiyon tanımlama ES
Arrow function => Expression yönteminin biraz daha sade halidir
Eğer fonksiyon içeriği
const yasHasapla = (dogumTarihi) => 2022-dogumTarihi;
tek satır ise {}
kullanmadan
doğrudan değer
let yas = yasHesapla(2000);
döndürülebilir.
const yasHasapla = (dogumTarihi) => { Eğer fonksiyon içeriği
if(!dogumTarihi) return; birden fazla satır ise,
return 2022-dogumTarihi; {} ve return
} kullanılmalıdır.
let yas = yasHesapla(2000);
Fonksiyon tanımlama
Arrow function Expression
const topla = function(a, b){
const topla = (a, b) => a+b; return a+b;
}
Declaration
function topla(a, b){
return a+b;
}
Fonksiyon PRACTI
SE
Ürün fiyatı, kdv oranı ve indirim oranı parametre olarak
alıp son fiyatı hesaplayan fonksiyonu arrow function ile
yazınız. Ürün fiyatı 1500 üzerinde ise extra 10% indirim
uygulanacaktır.
İndirim uygulanmamış ise kdv hesaba katılmayacaktır.
Scope INTERV
IEW
Değişken ve sabitlerin yaşam alanına scope denir
function scope global scope block scope
Fonksiyon içinde Her yerden Sadece tanımlandığı
tanımlanan erişilebilen blok içinde (if, for,
değişkenler sadece değişkenler, en while…) geçerlidir.
fonksiyon içinde tepede tanımlanır.
geçerlidir.
Function Scope
const fonk1 = function () {
sayi1 değişkeni fonk1 içinde tanımlandığı
let sayi1 = 22;
için, sadece fonk1 fonksiyonu içinde
[Link](sayi1);
geçerlidir. Fonksiyon dışından erişilmeye
};
çalışıldığında hata alınır.
fonk1();
[Link](++sayi1);
Global Scope
let sayi = 5; sayi değişkeni fonk dışında
const fonk = function (){ tanımlandığı için, her yerden
sayi = 10; erişilebilir. Örnekte hem fonk
[Link](`Fonk. İçi: ${sayi}`); isimli fonksiyondan hem de
} dışındaki kodlar üzerinden
erişilebilmektedir.
fonk();
[Link](`Fonk. Dışı: ${++sayi}`);
Global vs Function Scope
let sayi = 3; Hem global he de function
const fonk = function () { scope da aynı isimde değişken
let sayi = 7; tanımlandığında bunları farklı
[Link](`Fonk. İçi: ${sayi}`); değişkenler olarak algılanır.
};
fonk();
[Link](`Fonk. Dışı: ${++sayi}`);
Block Scope ES
Block scope değişkenler sadece
const fonk = function (sayi) { bulundukları { } blok içinde
if (sayi < 0){ geçerlidir.
let negatif = true; Blok dışından erişim yapılamaz.
} Block scope sadece let ve const
[Link](negatif); için geçerlidir.
};
fonk(-4);
Hoisting INTERV
IEW
Javascript te default bir davranış olarak tanımlanan değişkenler ve function lar
bulundukları scope ta default olarak en tepeye alınır. Böylece tanımlama
yapılmadan önce kullanılabilirler. Buna hoisting denir.
Sadece declaration hoist edilir,
yasHasapla(2000); initializations edilmez
[Link](a);
var a = 5;
let ve const ile yapılan tanımlamalar da
function yasHasapla(dogumTarihi){ hoist edilmektedir ancak tanımlamadan
return 2022 - dogumTarihi; önce kullanıma izin vermediklerinden
} dolayı, kullanılırsa ReferenceError
vermektedirler
Anonymous Function
Fonksiyonların herhangi bir isim vermeden tanımlanmasına anonymous function
denir
const yasHasapla = function(dogumTarihi){
return 2022 - dogumTarihi;
}
yasHesapla();
var vs let vs const
var let const
Değiştirilebilir
Global scope
Function scope
Block scope
Hoisting
Re-declaration
Scope PRACTI
SE
«Oyuna Başla» butonuna basıldığında 1-100 arasında rasgele sayı
tutulsun. Textbox içine tahmini sayı girilip «tahmin et» butonuna
basıldığında tutulan sayıyla girilen sayıyı kontrol edip doğru tahmin
olup olmadığını ve büyüklük küçüklük durumunu gösteren programı
yapınız.
45 Tahmin Et Oyunu Başlat
Yanlış tahmin! Daha büyük bir sayı giriniz.
İpucu let sayi = [Link]([Link]() * (max - min + 1)) + min
Event handler nedir?
Nasıl tanımlanır?
Handler çeşitleri
JavaScript
Event Handlers
Event handler
Bir programda olabilecek olayların yakalanması ve olay gerçekleştiğinde istenilen
kodların çalıştırılması işlemine event handling, bu işlemi yapan kodlara da event
handler denir.
event throwing
event listening
event [Link] = sayHello();
Click Me
event triggerirng event handling
function sayHello(){
Hello alert("Hello");
}
Tanımlama (1.Yöntem)
<button onclick="sayHello()">Tıkla</button>
event listener event handler
function sayHello(e){
alert("Hello");
}
Tanımlama (2.Yöntem)
<button id="btnMsg">Tıkla</button>
event listener event handler
[Link]("#btnMsg").onclick = sayHello;
function sayHello(e){
alert("Hello");
}
Tanımlama (3.Yöntem)
<button id="btnMsg">Tıkla</button>
event listener event handler
[Link]("#btnMsg").addEventListener("click", function(e){
alert("Hello");
});
[Link]("#btnMsg").addEventListener("click", (e) => {
alert("Hello");
});
arrow function
Function PRACTI
SE
Butona basıldığında, iki textbox içinde 100 lük sistemde
girilen notları kontrol edip, ortalamasını bulan ve bunu
harf sistemine çeviren fonksiyonu yazınız.
Aralık Not
[90-100] A
[80-90) B
[70-80) C
[50-70) D
[0-50) F
Object nedir?
Object tanımlama
Array nedir?
Array tanımlama
JavaScript Array of objects
Array Methods
Array iterations & search
for-in
forEach
map
Objects & Arrays filter
reduce
every
some
Object nedir?
{…}
• Programımızda bir çalışana ait çeşitli özellikleri
saklamak istiyoruz. Bu durumda, değişken
kullanırsak;
const firstName = 'Ali'; Eğer çalışanın
const lastName= 'Gel'; çok daha fazla
const birthDate = '1.1.1990'; bilgisi
const salary = 7000; saklanacksa?
Object yapıları kullanılarak bir nesneye ait özellikler ve değerleri gruplandırılabilir.
Object nedir? INTERV
IEW
{…}
Javascript te basit object tanımı { } ile yapılır.
const employee = {
firstName : 'Ali',
lastName : 'Gel',
birthDate : '1.1.1990',
salary : 7000
}
[Link](employee);
[Link]([Link]);
Object methods
Nesnedeki alanları ve/veya değerleri bir dizi içinde döndürmek (iteration) ve
üzerlerinde işlem yapmak için kullanılır
entries keys values
Nesnedeki alanlar ve Nesnedeki alanlar bir Nesnedeki değerler bir
değerleri bir dizi içinde dizi içinde döndürülür dizi içinde döndürülür
döndürülür
Objects PRACTI
SE
• Bir object
içinde key e
göre arama
yapıp value
döndüren
uygulamayı
yapınız
Array nedir?
[…]
• Programımızda araba isimlerini saklamak
istiyoruz. Bu durumda, değişken kullanırsak;
const araba1 = 'Mercedes’; Saklanacak
const araba2 = 'TOFAŞ’; yüzlerce araba
const araba3 = 'Anadol’; ismi olsaydı?
const araba4 = 'Ferrari';
Diziler, bir veri yapısı (data structure) olup bir veya çok daha fazla veriyi saklamak için
kullanılır.
Array tanımlama INTERV
IEW
Javascript te basit dizi tanımı [ ] ile yapılır.
let kurslar = ["Javascript","HTML","CSS","Bootstrap"];
0 1 2 3
Dizi tanımlama için bir diğer yöntem
let kurslar = new Array("Javascript","HTML","CSS","Bootstrap");
Dizilerden veri okumak
var kurslar = ["Javascript","HTML","CSS","Bootstrap"];
Dizi elemanlarına erişim
Dizi elemanları sıralı
kurslar[1]; olarak belleğe
kaydedilirler.
Dizi uzunluğu
[Link] Sıra numaraları 0 ile
başlar ve dizinin
eleman sayısının bir
[Link](kurslar[1]); eksiğine (length-1)
kadar devam eder.
[Link](kurslar[[Link]-1]);
Dizilere veri yazmak
const kurslar = ["Javascript","HTML","CSS","Bootstrap"];
kurslar[1]="React"; Dizi const ile
tanımlanmış olsa da
kurslar[0]="Java"; dizinin elemanlarını
değiştirebildik. Çünkü
non-primitive veri
[Link](kurslar); türlerinin içerikleri
değiştirilebilir. Ancak,
tamamen bir başka dizi
kurslar = ["Ali","Veli]; ile değiştirilemez.
Diziler
• Bir dizi içindeki var sayilar =
en büyük sayıyı [12,56,14,67,89,33,22];
bulan programı
yazınız.
Diziler PRACTI
SE
const fiyatlar = [123, 5666, 126, 67];
Şeklindeki dizi elemanlarının değerini %20 artıran
fonksiyonu yazınız.
Array of Objects
const arabalar =[{
marka:'Mercedes', Elemenaları object olan dizilere array
model:'S500', of object denir.
renk:'Bej',
vites:'Otomatik'
},
{
marka:'BMW',
model:'i8',
renk:'Mavi',
vites:'Otomatik’
},
…
]
Array Methods
Dizi elemanlarına erişmek, bunları manipüle etmek veya iterasyon
yapmak için çeşitli hazır methodlar bulunmaktadır
mutator access iterator
methods methods methods
Dizi içeriğinin Dizi elemanlarına Dizi elemanları
değiştirilmesini erişmek için döngü yoluyla
sağlarlar kullanılırlar dolaşmak için
kullanılır
Mutator methods
RETURN ARRAY METHOD MUTATED ARRAY
4 .push( )
.pop()
.shift()
4 .unshift( )
.sort()
.reverse()
.splice(1, 2, )
Mutator methodlar
const meyveler = ["Elma", "Armut", "Muz", "Kivi"];
[Link](); Kivi silindi
[Link]('Ananas'); Sona Ananas eklendi
[Link](); Elma silindi
[Link]('Çilek'); Başa Çilek eklendi
[Link](); Tersine çevrildi
[Link](); Harfe göre sıralandı
[Link](1,0,'Kiraz'); 1.İndex e Kiraz eklendi
[Link](3, 1 ,'Kayısı'); 3.İndex e Kayısı eklendi, Muz silindi
HOME
Mutator methodlar WORK
Şekildeki gibi bir uygulama yapınız
Access methods
RETURN ARRAY METHOD
.concat( )
true .includes( )
1 .indexOf( )
2 .lastIndexOf ( )
" - - " .join("-")
" , , " .toString()
.slice( 0, 2 )
Access methods
const hayvanlar = ['fil','kuş','deve','fare','kedi’];
[Link]('fil'); true
[Link](3); false
[Link]("at")); false
[Link]([Link]()); fil,kuş,deve,fare,kedi
[Link]([Link]("")); filkuşdevefarekedi
[Link]([Link]("-")); Fil-kuş-deve-fare-kedi
[Link]([Link](2)); ["deve", "fare", "kedi"]
[Link]([Link](2, 4)); ["deve", "fare"]
[Link]([Link](1, 5)); ["kuş", "deve", "fare", "kedi"]
[Link]([Link]()); fil,kuş,deve,fare,kedi
Access methods
const hayvanlar = ['fil','kuş','deve','kuş','kedi','kuş'];
[Link]([Link]('kuş')); 1
[Link]([Link]('kuş')); 5
[Link]([Link]('at')); -1
const harfler = ['a', 'b', 'c'];
const rakamlar = [1, 2, 3];
const birlesik = [Link](rakamlar, 4, [5,6]);
[Link](birlesik); ['a', 'b', 'c', 1, 2, 3, 4, 5, 6];
Iteration - for PRACTI
SE
ÖRNEK:
Bir dizideki sayıların const rakamlar = [-5, 15, 22, -4, 45, 78, -25];
toplamını hesaplayan
uygulamayı For döngüsü ile let toplam = 0;
yazınız.
for (let i = 0 ; i < [Link] ; i++) {
toplam += rakamlar[i];
}
[Link](toplam);
Iteration - for PRACTI
SE
Bir dizideki pozitif ve negatif sayıların toplamını
hesaplayıp, bu toplamların farkını bulan uygulamayı
for döngüsü ile yazınız.
hesapla adında bir fonksiyonda hesaplamayı yapınız.
Iteration – for in
For döngüsünün kısaltılmış halidir. (sayaç ve koşul kullanmaya gerek yok.)
Özellikle dizi ve nesnelerin iterasyonu için geliştirilmiştir. Değişken içine
otomatik olarak elemanın indis numarası gelir.
for ( degisken in diziAdi) {
// Döngü içi
}
Iteration – for in
const adlar = ["Ahmet", "Can","Mustafa","Ayşe","Elif"];
const soyAdlar= ["Öztürk", "Yılmaz", "Arı", "Çalı", "Yazı"]; ÖRNEK:
İki ayrı dizideki
const birlestir = (x,y) => { eşleşen indis
let adVeSoyadlar = []; elemanları
for (let i in x) { birleştirerek ayrı
adVeSoyadlar[i] = `${x[i]} ${y[i]}`; bir diziye
} saklayan
return adVeSoyadlar; uygulamayı FOR
}; IN ile yazınız.
[Link](birlestir(adlar, soyAdlar));
Iteration – for of
ES
FOR OF, bir çok veri yapısı üzerinde çalışabildiği için FOR IN’e göre daha
geniş kullanım alanına sahiptir. Diziler, Stringler v.b bir çok veri yapısında
kullanılabilir. Değişken içine otomatik olarak elemanın değeri gelir.
for ( degisken of diziAdi) {
// Döngü içi
}
Iteration – for of
let arabalar = ["BMW", "Volvo", "Mini"]; ÖRNEK:
let yazi = ""; Dizideki elemanları
birleştirerek tek bir String
for (let x of arabalar) { haline getiren uygulamayı
yazi += x + " "; FOR OF ile yazınız.
}
[Link](yazi);
For - of PRACTI
SE
Harici ülke listesi datasını alarak bir select içinde
ülkeleri gösteriniz.
Iteration – for each
FOR OF döngüsüne benzemektedir. Sadece diziler üzerinde çalışır. For of’ tan
sonra popülerliğini yitirmeye başlamıştır.
[Link]( (item, index)=> {
// Döngü içi
});
Iteration – for each
const dizi = [-5, 24, -13, 7]; ÖRNEK:
const yeniDizi = []; Belirtilen dizinin her bir
elamanının 5 katını alarak ayrı
[Link]((item, index) => { bir dizide saklayan
yeniDizi[index] = item * 5; uygulamayı forEach() metodu
}); ile yazınız.
[Link](yeniDizi);
Iteration – map
Mevcut bir dizi içinde iterasyon yapıp, orijinal dizinin kopyası üzerinde
elemanlarının değerlerini değiştirmeyi sağlar. Değişiklik yapılmış diziyi geri
verir. Map methodu orijinal diziyi değiştirmez.
[Link]( (item, index) => item * 5);
Iteration – map
const isimler = ["Mustafa", "Murat", "Ahmet", "Mustafa", "Ayşe", ÖRNEK:
"canan"]; Bir dizideki tüm
isimleri BÜYÜK
const buyukIsimler = [Link]((x) => [Link]()); harfe dönüştüren
uygulamayı
[Link](buyukIsimler); yazınız.
Iteration – map
tlFiyatlar dizisindeki fiyatların Euro ve dolar karşılıklarını
hesaplatarak yeni dizlere kaydediniz.
const euro = 21.10;
const dolar = 20.35;
const tlFiyatlar = [100, 150, 100, 50, 80];
Iteration
ÖRNEK:
tlFiyatlar dizidekisindeki ürünlere fiyatı 100 TL den fazla
olanlara %10 zam, 100 TL den az olanlara ise %15 zam
yapılmak isteniyor.
Ayrıca, zamlı olan yeni değerleri yeni bir diziye saklamak
istiyoruz.
Iteration – filter
Mevcut bir dizi içinde iterasyon yapıp, orijinal dizinin kopyası üzerinde
filtreleme yapar. Filtrelenmiş diziyi geri verir. Filter methodu orijinal diziyi
değiştirmez.
[Link]( (item, index) => item > 5);
Iteration – filter
ÖRNEK:
Koordinatlar dizisindeki negatif koordinatları alıp yeni bir dizide saklayan uygulamayı
filter() ile yapınız.
const koordinatlar = [-100, 150, -32, 43, -20];
const negatifKoordinatlar = [Link]((x) => x < 0);
[Link](negatifKoordinatlar);
Iteration – filter
const bireyler = ["Mustafa", "Murat", "Ahmet", "mustafa", "Ayşe", ÖRNEK:
"Canan"]; Bireyler
dizisindeki
const filtrele = function (harf) { kişilerden adı
const h = [Link](); "Belirtilen" harf
const filtrelenmiş = [Link]((t) => [Link](h)); ile başlayanları
return filtrelenmiş; seçerek ayrı bir
}; diziye saklayan
uygulamayı
[Link](filtrele("m"));
yazınız.
[Link](filtrele("A"));
Iteration – filter
ÖRNEK:
Koordinatlar dizisindeki negatif koordinatları seçerek bunları pozitife çevirip alt alta konsola
bastıran uygulamayı yazınız.
const koordinatlar = [-100, 150, -32, 43, -20];
Iterasyon methodlarının
[Link](x => x < 0)
peşpeşe kullanılmasına
.map(t => t * -1)
.forEach(y => [Link](y));
pipeline denir
Filter PRACTI
SE
Tablo içine yerleştirilen ülkelerden biri seçildiğinde
seçilen ülkeye ait bilgileri gösteren uygulamayı
filter ile yapınız.
Iteration – reduce
Mevcut bir dizi içinde iterasyon yapıp, yapılan işlemlere göre tek bir
hesaplanmış değer döndürür.
[Link]( (total, x) => total + x, 0 );
Her bir işlem
sonucunu
saklayacak
Her bir dizi
olan değer İlk değer
elamanı
Iteration – reduce
ÖRNEK:
Koordinatlar
dizisindeki
const koordinatlar = [-100, 150, -32, 43, -20];
değerlerin
toplamını, ara
const toplam = [Link]( (tp, koordinat ) => {
[Link](`iterasyon ${tp} ${koordinat}`);
değerleri de
return tp + koordinat;
göstererek
},0); konsola bastıran
[Link](toplam); uygulamayı
reduce() ile
yazınız.
Iteration – reduce
ÖRNEK:
Koordinatlar dizisindeki değerlerin ortalamasını hesaplayarak konsola bastıran uygulamayı
reduce() ile yazınız.
const koordinatlar = [-100, 150, -32, 43, -20];
let ortalama = [Link]((toplam, koordinat) => toplam + koordinat );
ortalama /= [Link];
[Link]("Koordinatların Ortalaması:" + ortalama);
Iteration – reduce
ÖRNEK:
Bir Firma, 3000 TL den az olan maaşlara %10 zam yapmak istiyor ve zam yapılan bu kişilere
toplam kaç TL ödeneceğini bilmek istiyor. İlgili programı yazınız.
const maaslar = [3000, 2891, 3500, 4200, 7000, 2500];
const zamliToplam = maaslar
.filter((maas) => maas < 3000)
.map((maas) => maas * 1.1)
.reduce((toplam, maas) => toplam + maas);
[Link]([Link](2));
Reduce PRACTI
SE
Ülke listesinin altına ülke toplam yüzölçümlerini
reduce kullanarak yazdırınız.
Iteration – every
Mevcut bir dizi içinde tüm elemanların istenilen kriteri sağlayıp sağlamadığını
döndürür. Sağlıyorsa true, değilse false döner.
[Link]( (item) => item > 33 );
Iteration – some
Mevcut bir dizi içinde en az bir elemenın istenilen kriteri sağlayıp
sağlamadığını döndürür. Sağlıyorsa true, değilse false döner.
[Link]( (item) => item > 33 );
DOM nedir?
DOM yapısı
DOM erişim
JavaScript DOM güncelleme
DOM
(Document Object Model)
DOM Nedir?
DOM (Document Object Model), dokümanlarının stillerinin,
yapısının, içeriğinin erişilmesine ve güncellenmesine olanak
sağlayan bir nesne modelidir.
Objects Properties Styles Methods Events
HTML HTML HTML HTML HTML
elemanları elemanlarının elemanlarının elemanlarına elemanları
özellikleri CSS özellikleri erişmeyi üzerinde
(attribute) sağlayan gerçekleşen
methodlar olaylar
DOM Yapısı
Bir web sayfası yüklendiğinde tarayıcı, ilgili
HTML sayfasının DOM’unu oluşturur.
DOM ağaç yapısı ise HTML dosyası içerisinde
bulunan tüm nesnelerin (node) hiyerarşik bir
biçimde gösterimidir.
DOM Yapısı
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<h1>DOM Temelleri</h1>
<section>
<img src="./img/js_logo.png" alt="Javascript">
<p>Javascript öğrenmek için link
<a href="[Link]">Javascript</a>
</p>
<button>Tıkla</button>
</section>
<script src="[Link]"></script>
</body>
</html>
DOM’a Erişim INTERV
IEW
Method Açıklama
getElementById Bir elemanı id sinden bulur
getElementsByTagName Bir elemanı Tag (Etiket) adına göre bulur
getElementsByClassName Bir elemanı Class (Sınıf) adına göre bulur
Bir elemanı id, class, özellik, tür ve değere
querySelector göre seçmek için kullanılır. Eşleşen ilk elemanı
seçer.
Bir elemanı id, class, özellik, tür ve değere
querySelectorAll göre seçmek için kullanılır. Eşleşen
elemanların listesini döndürür.
DOM erişim PRACTI
SE
Puanı belli bir
değerden aşağıda
olan kişilerin
rengini kırmızı
yapan programı
yapınız.
DOM’a Erişim
Method Açıklama
closest En yakın elemanı seçer, yukarı doğru çalışır
children Bir elementin çocuklarını seçer
Bir elementin ilk çocuğunu veya son çocuğunu
firstElementChild, lastElementChild
seçer.
parentElement Bir elemanın parent ını seçmek için kullanılır.
nextElementSibling, Bir elemanın önceki veya sonraki kardeşini
previousElementSibling (aynı seviye) seçmek için kullanılır.
DOM erişim PRACTI
SE
Her satırın
sonundaki Sil
butonlarına
basıldığında satır
başındaki ismi
alarak uyarı veren
programı yazınız.
DOM güncelleme
Method Açıklama
Bir elemanın içindeki metni getirir veya içine
innerText
metin yerleştirir.
Bir elemanın içindeki html i getirir veya içine
innerHTML
HTML yerleştirir.
innerText ile aynıdır. Tek farklı stil
textContent özelliklerinden dolayı gizlenmiş olan text leri de
getirir
DOM Styles
Method Açıklama
classList Bir elemanın class listesine erişim sağlar.
add("class") classList e bir class ekler
remove("class") classList teki bir class ı siler
toggle("class") classList te yoksa class ı ekler, varsa class ı siler
classList te bir class ın olup olmadığını kontrol
contains("class")
eder.
replace("class1", "class2") classList te class1 i siler, yerine class2 yi koyar
DOM Styles PRACTI
SE
Bir tablonun satırlarına bir kere tıklandığında seçili hale
getiren tekrar aynı satıra tıkladığında seçili olmaktan
çıkaran programı yapınız.
DOM Attributes
Method Açıklama
getAttribute("attribute") Bir elemanın attribute unu getirir.
setAttribute("attribute", "value") Bir elemana attribute ekler/değiştirir
removeAttribute("attribute") Bir elemanın attribute unu siler
attributes Bir elemanın tüm attribute larını getirir.
DOM Attributes PRACTI
SE
Default olarak disabled
olan bir buton, textbox
içine bir şey yazılınca aktif,
silinince pasif olacak.
DOM güncelleme
Method Açıklama
Yeni bir element oluşturur. Document objesinin
createElement("h1")
bir methodudur.
Bir elemanın içinde en sona başka bir eleman
appendChild(element)
ekler
Bir elemanın içinde en sona başka bir elemanı
append(element, "metin") veya text i ekler. Tek seferde birden fazla
ekleme yapabilir.
Bir elemanın içinde en başa başka bir elemanı
prepend(element, "metin") veya text i ekler. Tek seferde birden fazla
ekleme yapabilir.
remove() Bir elemanı siler
DOM PRACTI
SE
Tablodaki
satırların
sonundaki sil
butonuna
basıldığında satırı
silen programı
yapınız.
HOME
DOM WORK
Type name… Point + Add Dizi kullanılmadan
yapılacak
# Name Point
1 Ali Gel 80
2 Ayşe Koş 70
3 Mehmet Git 90
Average 70
Error handling
Debugging
Timeout , Interval
Web storage
JavaScript Rest & spread operatör
Destructuring
Syncrounous &
Asyncronous
Callbacks
Modules
Advanced JavaScript
Promises
Error handling INTERV
IEW
Hata olması muhtemel kodlarda, hataların programın akışını
engellememesini sağlamak ve kullanıcıya daha kontrollü ve anlaşılır
uyarılar vermek için yapılan işlemdir.
Genellikle kullanıcıdan bilgi alırken veya bir API dan bilgi çekerken
kullanılırlar.
Try – Catch - Finaly
Error handling
try{
Hata olması beklenen kodlar try
bloğu içine yazılır.
}
catch(ex){ Try bloğu içinde bir hata
olduğunda program akışı catch
bloğuna geçer ve hata ile ilgili
bilgi ex object içinde bulunur.
}
finally {
Hata olsa da olmasa da çalıştırılan
bir bloktur. Kullanılması zorunlu
değildir.
}
Error handling PRACTI
SE
Bir login formu oluşturup, form
handling yapınız
Debugging INTERV
IEW
Programdaki hataların ayıklanması işlemine debugging denir.
Debugging için chrome developer tools kullanılabileceği gibi
Vscode gibi programlardaki debuger da kullanılabilir.
Debugging
1
Debugging
bölümü
açılır
2
Run and
Debug
butonuna
basılır
3
Hangi ortamda
çalıştırılacağı seçilir
Debugging
Program işleyişini belli bir noktada kesmek
için breakpoint ler kullanılır.
Program akışı o noktaya geldiğinde kesilecek
ve programın adım adım çalıştırılabilmesi için
debuging başlayacaktır.
Breakpoint eklemek için satır numaralarının
sol tarafındaki boşluğa tıklanır. Kırmızı
noktalar breakpoint leri temsil eder.
Debugging
Step Step Step
Değişken Continue Over Into Out Restart Stop
takip alanı
Timeout INTERV
IEW
Gecikmeli olarak çalışması istenilen kodlar, timeout oluşturularak ve
belli bir gecikme zamanı belirlenerek çalıştırılabilir.
setTimeout( ()=> { setTimeout methodu
// Gecikmeli ile bir zamanlayıcı clearTimeout()
// çalışacak oluşturulur. methodu ile
// kodlar timer
// burada Gecikme zamanı ms durdurulabilir.
// olacak cinsinden tanımlanır
}, 500);
Timeout PRACTI
SE
Bir metin kutusunda anlık arama yapılırken data
sorgusunun geciktirilmesi ve böylece gereksiz
sorguların engellenip performansın artırılması
hedefleniyor.
Bu şekilde çalışan bir metin kutusu tasarlayınız.
Interval
Belli periyotlarla çalışması istenilen kodlar, interval oluşturularak ve
belli bir zaman belirlenerek çalıştırılabilir.
setInterval( ()=> { setInterval methodu
// Belli aralıklarla ile bir zamanlayıcı clearInterval()
// çalışacak oluşturulur. methodu ile
// kodlar timer
// burada Period ms cinsinden durdurulabilir.
// olacak tanımlanır
}, 500);
Timeout PRACTI
SE
Çalışan digital saat uygulaması yapınız
Storing data
Kullanıcı tarafında (browser) data saklayabilmek için iki yol bulunmakadır.
Storege API Cookies
Storing data
Cookie Storage API
Kapasite 4KB / cookie 5MB / web site
Yaşam süresi Expire olana veya silinene kadar Browser kapanana veya silinene kadar
Güvenlik Çok güvenli değil Daha güvenli
Erişim Her yerden erişim Sadece mevcut siteden erişim
Kota Kotasız 5MB
Senkronizasyon Yok Var
Erişim hızı Yavaş Hızlı
Web Storage API INTERV
IEW
Kullanıcı tarafında data saklayabilmek için çerezler(cookie) veya HTML5 ile
birlikte gelen Storage API kullanılır. Veri, browser üzerinde saklanır.
localStorage sessionStorage
Veri, kullanıcı veya app silene Veri, oturum bazlı saklanır.
kadar saklanır. Tarayıcı kapatıldığında veri silinir.
Veriye farklı sekmeler ve Veriye farklı sekmeler ve
pencerelerden ulaşılır. pencerelerden ulaşılamaz
Web Storage API
localStorage ve sessionStorage de data manipülasyonu için
kullanılan methodlar
setItem getItem removeItem
Veri saklamak için Veriyi almak için Veriyi silmek için
[Link]("counter", 1);
Web Storage API PRACTI
SE
Sayfa her ziyaret edildiğinde, ziyaretçiye siteye
kaçıncı kez girdiğini söyleyen programı yazınız.
Web Storage API PRACTI
SE
Sayfaya girildiğinde alt taraftan offcanvas şeklinde
açılacak bir privacy policy uyarı penceresi gösteriniz.
Accept butonuna basılınca kapansın ve bir daha
sormasın.
Rest & Spread Operator IEW
…
INTERV
ES
6
Rest ve Spread operatörleri 3 nokta ile ifade edilirler ancak
birbirinden farklıdırlar.
REST SPREAD
Farklı değişkenlerden gelen Dizi veya object içindeki
verileri bir dizi içinde toplar verileri ayrı değişkenlere açar.
Rest Operator
Örnek: Toplama işlemi yapan bir fonksiyon yapınız. Ancak bu fonksiyona farklı miktarda
sayı parametre olarak gönderilebilmelidir.
Gelen tüm
parametreleri
function topla(...sayilar){ sayilar isimli dizi
return [Link]( (toplam, x)=> toplam + x); içinde alacaktır.
}
[Link](topla(3,5,6));
[Link](topla(13,5,16,3,56,76,1));
Rest Operator
Örnek: Öğrencinin adını ve soyadı ile belirsiz sayıda notu parametre olarak alan ve
notların ortalamasını bulup, öğrenci adı ile birlikte ortalamayı döndüren fonksiyonu
yazınız.
İlk iki parametre
haricide geri
function ortalama(ad, soyad, ...notlar){ kalan tüm
let ort = [Link]( (toplam, x)=> toplam + x); parametreleri bir
return `${ad} ${soyad} ortalaması: ${ort/[Link]}` dizi içine
} alacaktır
[Link](ortalama("Ali","Gel",3,5,6));
[Link](topla(("Ayşe","Koş", 13,5,16,3,56,76,1));
Spread Operator
Örnek: Bir dizi içindeki sayıları ayrı ayrı parametre olarak topla fonksiyonuna gönderen
kodları yazınız.
Sayılar dizisini
genişletip her bir
function topla(s1, s2, s3){ elemanını ayrı bir
return s1 + s2+ s3; değişken haline
} getirdi.
const sayilar = [12,56,17];
…
[Link](topla( sayilar));
Spread Operator
numberStore
dizisi başka bir
dizi içinde
açılarak ve yeni
let numberStore = [0, 1, 2]; elemanlar
let newNumber = 12; eklenerek
numberStore = [...numberStore, newNumber, 15]; güncellendi.
Spread Operator
student
const student = { nesnesini
firstName: "Ali", genişletip,
lastName: "Gel", firstName
no:"234", özelliğinin değeri
phone:"23423423423" değiştirip yeni bir
}; nesne
oluşturuyor.
let newStudent = {...student, firstName:"Veli"};
[Link](student, newStudent);
Destructuring INTERV
IEW
ES
Bir nesnenin değerlerinin değişkenlere açılması işlemine 6
destructuring denir.
let { variable1, variable2 } = object;
Destructuring
Student nesnesi
const student = {
içindeki, "Ali" ve
firstName: "Ali",
"Gel" değerlerini
lastName: "Gel",
ayrı ayrı
no:"234",
firstName ve
phone:"23423423423"
lastName
};
değişkenlerine
aktarmış
const { firstName, lastName } = student;
[Link](firstName);
Destructuring
const student = { Fonksiyon
firstName: "Ali", parametre olarak
lastName: "Gel", nesne alırken,
no:"234", eğer süslü
phone:"23423423423" parantezler
}; içinde nesnenin
key leri yazılırsa
function sayHello({firstName, lastName}){ yine
[Link](`Hello ${firstName} ${lastName}`); destructuring
} yapılmış olur.
sayHello(student);
Modules INTERV
IEW
Moduller, JS kodlarını bölerek farklı farklı dosyalardan çağırmak ve
böylece büyük projelerde kod karmaşasının önüne geçmek için
kullanılan bir yöntemdir.
export import
Dışarı aktarma İçeri alma
Dışarı aktarılan kodlar içeri alınabilir.
Modules
[Link] [Link]
import {showAlert, showConfirm} export const showAlert = () => {
from "./[Link]";
}
showAlert();
export const showConfirm = () => {
}
Modules
[Link] [Link]
import {showAlert, showConfirm} const showAlert = () => {
from "./[Link]";
}
showAlert();
const showConfirm = () => {
export {showAlert, showConfirm};
Modules
[Link] [Link]
import showAlert, {showConfirm} const showAlert = () => {
from "./[Link]";
}
showAlert();
const showConfirm = () => {
export default showAlert;
export {showConfirm};
Module PRACTI
SE
Aşağıdaki methodları içeren bir modüle yazınız.
sOrderASC()
sOrderDESC()
nOrderASC()
nOrderDESC()
Synchronous vs Asynchronous
Synchronous
İşlem 1 İşlem 2 İşlem 3 İşlem 4
2sn 5sn 1sn 3sn
11sn
Synchronous vs Asynchronous
Asynchronous
İşlem 1 2sn
İşlem 2 5sn
İşlem 3 1sn
İşlem 4 3sn
5sn
Synchronous vs Asynchronous
Javscript senkron bir yapıda çalışır. Yani kodlar sırayla
çalıştırılmaktadır. Ancak bazı durumlarda asenkron moda geçerek
gereksiz beklemelerin önüne geçer.
Event listeners setTimeout setInterval Promise
fetch XmlHttpRequest Stream Worker
Synchronous vs Asynchronous
function getData(){
setTimeout( ()=> {
[Link]("ok2");
},500);
}
[Link]("ok1"); ok1
getData(); ok3
[Link]("ok3"); ok2
Callbacks INTERV
IEW
Asenkron çalışan fonksiyonlardan veri döndürmek için callback
fonksiyonlar kullanılır.
Callbacks
.
.
.
function siparisVer(callback){
siparisVer( (sonuc)=> {
...
callback("lahmacun");
}
});
Callbacks
function siparisVer(callback){
siparisVer( (sonuc)=> { [Link]("sipariş verdim");
[Link](sonuc); setTimeout( ()=> {
}); callback("lahmacun hazır");
[Link]("ayakkabı aldım"); },3000)
}
Callback Chains
Asenkron yapıların birbirini bekleyere çalıştırmak için callback
fonksiyonlardan oluşan bir zincir yapılır. Buna callback chain denir.
siparisVer( (sonucSiparis)=> {
yemekYe( (sonucYemek)=>{
sinemadaFilmIzle( (sonucFilm)=> {
});
});
});
[Link]("ayakkabı aldım");
Promises INTERV
IEW
Promise yapıları, callback ler gibi asenkron sonuçları işleyebilmek için kullanılan,
callback lerdeki bazı sorunların da ortadan kaldırıldığı daha güvenilir yapılardır.
İç içe callback çağrıldığında oluşan callback sorunları
Callback’in beklenenden erken çağırılması
Callback’in hiç çağırılmaması
Callback’in beklenilenden az veya çok çağırılması
Gerekli parametreleri doğru bir şekilde alamaması
Hataların yutulması
Promises
Hamburger Indicator, hamburger
siparişi verdik. hazır olunca haber
Bize söz verdiler. verecek. Bekliyoruz.
(Promise)
1 2 (Pending)
Hamburger yerine bir Hamburger başarılı bir
sorun oluşursa şekilde gelirse
(rejected) (resolved)
4 3
Promises
Defining Promise Function Calling Promise Function
const soz1 = ()=> {
return new Promise( (resolve, reject)=>{
if (herseyYolunda) { soz1().then( cevap=>{
resolve('İşlem tamam!'); [Link](cevap);
} else { }).catch( hata=>{
reject('Bir sıkıntı var...'); [Link](hata);
} })
})
}
Resolve ile dönüşler then tarafında, reject ile dönüşler catch tarafında yakalanır.
Promise PRACTI
SE
Javascript te bulunan confirm method unu async
hale getiriniz.
Promise Chain
Calling Promise Chain
Promise zincirleri peş peşe çalışması
soz1().then( (cevap1)=>{
gereken asenkron işlemler için kullanılır.
return soz2(cevap1)
}) Bir asenkron işlemin cevabı geldiğinde bir
.then(cevap2=> { sonraki asenkron işlem çağrılır.
return soz3(cevap2);
})
.then(cevap3=> {
[Link](cevap3);
})
.catch( hata=>{
[Link](hata);
})
Awaiting Promises
Promise yapılarında senkron kod üretmek ve then yapılarındaki kod
okunabilirliği sorununu gidermek için await keyword u kullanılabilir.
Awaiting Promises
const f1 = () => {
return new Promise( (resolve, reject)=> {
const init = async () => {
setTimeout(() => resolve("hello2"), 1000);
[Link]("hello1");
})
const msg1 = await f1();
}
[Link](msg1);
[Link]("hello3");
const f2 = () => {
const msg2 = await f2();
return new Promise( (resolve, reject)=> {
[Link](msg2);
setTimeout(() => resolve("hello4"), 2000);
}
})
}
You might also like
- Java Program Lama Dili TCOBAN WwwJavaDiliCom100% (3)Java Program Lama Dili TCOBAN WwwJavaDiliCom438 pages
- PROGRAMLAMA DİLLERİ II - Java - Ders NotlariNo ratings yetPROGRAMLAMA DİLLERİ II - Java - Ders Notlari68 pages
- Java Bi̇lgi̇sayar Di̇li̇yle ProgramlamaNo ratings yetJava Bi̇lgi̇sayar Di̇li̇yle Programlama565 pages
- Python Nesne Tabanlı Programlama - Dr. Cahit Karakuş100% (1)Python Nesne Tabanlı Programlama - Dr. Cahit Karakuş102 pages
- TR Her Yönüyle HTML 2020 Erol Mesut Gün KodlabNo ratings yetTR Her Yönüyle HTML 2020 Erol Mesut Gün Kodlab313 pages
- C-Programlama - Atatürk Üniversitesi Ders Notları (Slayt)100% (3)C-Programlama - Atatürk Üniversitesi Ders Notları (Slayt)281 pages
- Mobil Uygulama Geliştirme Yüksek Lisans Ödevi FulNo ratings yetMobil Uygulama Geliştirme Yüksek Lisans Ödevi Ful109 pages