Javascript

---

kod sonları ( ; ) ile belirtilir, stringler alert veya console.log ( ``,''," )( option+, ) ile belirtilir // notlar tamamen Escan'a aittir Javascript de { } kullanılır.

Diziler

var names = ['Escan','sena','ada','yiğit'];
var years = [2017,1970,1990,1998];

var result = `Benim adım ${names[0]} ve yaşım ${(2020- years[0])}`);
console.log(result); // Benim adım çınar ve yaşım 3

dizi & metodlar.

//push()
var cars = ['mazda','opel','toyota'];
cars.push('bmw');  // push metodu değer atamamıza yarıyor.

//unshift()
var cars = ['mazda','opel','toyota'];
cars.unshift('bmw');  // bu metod kodun başına değeri atar

//splice()
var cars = ['mazda','opel','toyota'];
cars.splice(1, 0, 'bmw', 'mercedes'); //splice() metodunun ilk parametresi ekleme yapılacak olan konum, ikinci parametre ise kaç elemanın silinmesidir.Örneğimizde 1.indeks den itibaren hiç bir elemanı silme ve 'bmw', 'mercedes' elemanlarını ekle demiş oluyoruz.

//concat()
var cars1 = ['mazda','opel','toyota'];
var cars2 = ['mercedes','bmw'];

var cars = cars1.concat(cars2); // Bu metod iki diziyi birleştirir ve çıktı 'mazda','opel','toyota','mercedes','bmw' olur

//slice()
var cars = ['mazda','opel','toyota','bmw'];
var yenidizi = cars.slice(2);
console.log(yenidizi);    // bu metod seçtiğin sayıya göre baştan diziden eleman çıkarır.

İF/else/else if Koşulu

var a = 1;

var b = 2;

if(a < b){   // Javascript de if koşulu bu şekilde açılır

alert(`a b den küçüktür`);

}

else if (a == b){  // Javascript de else if mantığı bu şekilde 

alert(`a b ye eşittir`);

}

else{   //Javascript de bu kod hiç bir koşul tutmuyorsa işe yarar

alert(`a b den büyüktür`);

}

// notlar tamamen Escan'a aittir

Javascript Döngüler

For döngüsü

for (bölüm 1; bölüm 2; bölüm 3) {
  // tekrarlanacak kod bloğu
}

//Örnek

for (var a = 0; a<=10; a++ ){ 
alert(a);
}

For/in döngüsü

for (keyin nesne) {
   // çalıştırılacak kod blokları.
}

var user = { username:"Escan", name:"Escan Dönmez", age:25 };
var x;
for (x in user) {
  alert(user[x]);
}

ForEach döngüsü

const sayilar = [1, 2, 3];

sayilar.forEach(myFunction);

function myFunction(sayi) {
  alert(sayi);
}

For/of döngüsü

for (element of iterable) {
    // kod bloğu
}

//Örnek

const ogrenciler = ['Ali', 'Ahmet', 'Yasemin'];

for ( let ogrenci of ogrenciler ) {
    alert(ogrenci);
}

While döngüsü

while (koşul) {
  // çalıştırılacak kodlar.
}

//Örnek

let i = 1;

while (i <= 5) {
    alert(i);
    i += 1;
}

Switch

switch(ifade) {
case x:
    // kod bloğu
break;
case y:
    // kod bloğu
break;
default:
    // kod bloğu
}

//Örnek

var kategori = 'beyaz eşya';

switch(kategori){
  case 'telefon':
      console.log('telefon kategorisi');
      break;

  case 'bilgisayar':
      console.log('bilgisayar kategorisi');
      break;   

  default:
     console.log('yanlış kategori');
}

Javascript Fonksiyonlar

function fonksiyonAdi(parametre1, parametre2) {
  // fonksiyon kodları
}

//Örnek

function uyari(mesaj) {
  alert(mesaj);
  uyari(mesaj);
}
uyari("Merhaba JavaScript");

Window object

//alert
alert(`Merhaba`);

//prompt
var i = prompt(`bir sayı  gir`);

//confirm
var cikis = confirm(`emin misiniz ?`)

//location
window.location.reload(); //bu kod sonrası site kendini sürekli f5 ler

// notlar tamamen Escan'a aittir

Scope

Global Scope

var name = `Escan`;
// her yerden ulaşılabilir

if(true){
console.log(name)
}
//----------//

for(name == `Escan`){
console.log(name)*5;
}
//----------//
function logName(){
console.log(name);
}
//Hepsinin çıktısı aynı olur  Escan

Local Scope

//Fonksiyonlar kendi scope larını oluşturur o değişken sadece fonksiyonda çalışır
function logName(){
var name = `ahmet`;
var age = `12`;
console.log(`function scope `,name,age); //bu kod konsola ismi ve yaşı yazar fakat
}

console.log(`function scope `,name,age); //fonksiyon çıktığı için bu kod çalışmaz

Javascript-Dom

Tekil element seçimi

//document.getElementById()
let val;
val = document.getElementById('header'); //Bu kodla head id li etiketleri 👇
console.log(val); //val değişkeni ile konsola  yazdırdık

val = val.id; //diyerek val değişkenindeki (header ın id sini verir)
val = val.className; //diyerek val değişkenindeki (header ın class ını verir)
val.style.fontsize='45px'; //bu kodla header etiketli yerin fontunu değiştirdik
val.style.color='purple'; //bu kodla header etiketli yerin rengini değiştirdik

val = document.getElementById('header').innerHTML='my  to do app';// 👇
//Bu kodla header daki texti my to do app le değiştirebiliriz

//--------------------------------------------------------------------------//

//document.querySelector()

console.log(document.querySelector('#header')); //Şeklindede kullanılabilir

document.querySelector('li').style.color='red';//bulduğu 1.listeyi kırmızı yapar

document.querySelector('li:nt-child(2)').style.color='red';//2. li yi red yapar

Çoklu element seçimi

//document.getElementsByClassName()
let val;                              //class etiketi//ilk elemanı  alır 
val = document.getElementsByClassName('list-group-item')[0];
																			//class etiketi//3. elemanı alır
val = document.getElementsByClassName('list-group-item')[2];

val[1].style.color'blur'; //şeklindede kullanılır 2. elemanı mavi  yapar
val[1].fontSize'25px'; // 2. elemanı 25 px yapar
val[1].textContent='new item'; //2. elemanın yazısını new item  yapar

//Örnek
for(let i=0; i<val.length; i++){
console.log(val[i].style.color='red'); //bütün val ı kırmızı yaptı
}

//document.getElementsByTagName()

val=document.getElementsByTagName('li');//bütün li etiketlerini aldı

//document.querySelectorAll()

val = document.querySelectorAll('li');//burdada li yi verir fakat Nodelist olrak
//buda bize forEach gibi yapıları kullanmamıza  yarar

Dom elementleri üzerinde oynama

let val;                            //class
let list = document.querySelector('.list-group');
val = list;
val = list.childNodes; //Nodelist leri bize gösterir
val = list.childNodes[0]; //0 ıncı nodelist i getirir
val = childNodes[0].nodeType; //node un tipini gösterir 3 gibi
val = list.children[0]; //ilk  list-group etiketli li yi gösterir
val = list.children[2].textContent='new item';// textini new item yapar 3. list i
val = list.firstElementChild;//ilk eleman gelir
val = lastElementChild; //son elemanı alır

for(let i=0; i<list.children.length; i++){ //list-group un length i kadar 
if(list.childNodes[i].nodeType===1){
console.log(list.childNodes[i]);
}
}

Element oluşturma

//create element
const li = document.createElement('li'); //bir li etiketi oluşturduk
console.log(li)
//add class
li.className='list-group';
//add attribute
li.setAttribute('title','new item');
li.setAttribute('placeholder','sayı giriniz');
//text node
const text = document.createTextNode('new item');
li.appendChild(text); //new  item text bölümüne eklendi
//add link
const a = document.createElement('a');
a.setAttribute('href','#');
a.className='list-item';

element silme

const tasklist = document.querySelector('#task-list');
tasklist.remove(); //ul listesi silindi
//belli bir eleman silme
tasklist.childNodes[7].remove(); //8. elemanı sildik
//diğer yolr
tasklist.children[0].remove(); //1. elemanı sildi
//removing attribute
tasklist.children[0].removeAttribute('class');
//örnek
for(let i=0;i<tasklist.children.length;i++){
tasklist.children[i].removeAttribute('class');
}

javascript - events

const button = document.querySelector('#btnDeleteAll');
btn.addEventListener('click',function(){
console.log('button clicked');
});
//diğer kullanımı
btn.addEventListener('click',btnClick);

function  btnClick(){
console.log('clicked');
}
//link
btn.addEventListener('click',function(e){
console.log('clicked')
e.preventDefault(); //böylece linkin görevibi yapması yerine clicked yazdı
});

// notlar tamamen Escan'a aittir

mouse events

const btn = document.querySelector('#btnDeleteAll')
const ul = document.querySelector('#task-list');
//click
btn.addEventListener('click',eventHandler);

function. eventHandler(event){
console.log(`event type: ${event.type} `);
}
//çıktı: event type: click

//double click
btn.addEventListener('dbclick',eventHandler);

function eventHandler(event){
	console.log(`event type: ${event.type}`);
}
//çıktı: event type: dbclick

keybord event

//keydown,keyup
const input = document.querySelector('#txtTaskName');

input.addEventListener('keydown',eventHandler);

function eventHandler(event){
console.log('event type:' + event.type)
}
//tuşa basdığın an keydown olur çekdiğin zaman keyup olur

//keypress
input.addEventListener('keypress',eventHandler);

function eventHandler(event){
console.log('event type:' + event.type);
}

//focus
input.addEventListener('focus',eventHandler);

function eventHandler(event){
console.log('event type:' + event.type);

event.target.style.backgroundColor='red'; //text tıkladığında arka planı red olur
}

//cut
input.addEventListener('cut',eventHandler);

function eventHandler(event){
console.log('event type:' + event.type);
}
//ctrl x yapıldığında bunu console loga yazar

// notlar tamamen Escan'a aittir

Javascript kullanıcıya girdi sormak

Javascript kullanıcıya girdi sormak prompt kodu ile yapılır

var person = prompt("Please enter your name");
alert(person);

Operatörler: