Java Script

Volkan Şengül

Yazılımcı'nın Seyir Defteri

@volkansengul

http://volkansengul.com

---

JavaScript Nedir?

Syntax

var x, y, msg;

x = 5;

y = x+10;

msg = 'Merhaba Dünya'

msg = "Merhaba Dünya"

msg = 'Merhaba' + ' '+ 'Dünya'; // satır yorumu

/* block yorum 
buraya gelebilir */

var firstName, firstname;

Veri Tipleri

// string
const message = 'Merhaba Dünya';

// number
const number  = 5;

// float
const floatNumber = 3.14;

// boolean 
const isTrue = true;

// Array
const myLit = [1,2,3,4,'elma'];

// Object
const myObject  = {firstName:'Volkan', lastName:'Şengül'};

// Undefined & Null
const firstName = null;
const surName;

let number = 5;

number.toString(); // string

number = '5';

console.log(number + 3); ???

number = parseInt(number);

parseFloat(number); // 5.0

Veri Tipi Dönüşümleri

Aritmetik Operatörler

Operatör	Açıklama
+
-
*
/
%
++
--

Atama Operatörler

Operatör	Açıklama
=	değer ata
+=	değeri ekleyerek ata
-=	değeri çıkartarak ata
*=	değeri çarparak ata
/=	değeri bölerek ata
%=	değerin modunu alarak ata

Karşılaştırma Operatörleri

Operatör	Açıklama
==	eşit
===	eşit değer & eşit veritipi
!=	eşit değil
!==	eşit değil ve veri tipi eşit değil
<	küçük
>	büyük
<=	küçük eşit
>=	büyük eşit

Mantıksal Operatörler

Operatör	Açıklama
&&	ve
\|\|	veya
!	değil

Bitwise Operatörler

Operatör	Açıklama	Örnek
&	AND	5&1	0101 & 0001	0001	1
\|	OR	5 \| 1	0101 \| 0001	0101	5
~	NOT	~ 5	~ 0101	1010	10
^	XOR	5 ^ 1	0101 ^ 0001	0100	4
<<	Zero fill left shift	5 << 1	0101 << 0001	1010	10
>>	Signed right shift	5 >> 1	0101 >> 0001	0010	2
>>>	Zero fill right shift	5 >>> 1	0101 >>> 0001	0010	2

Fonksiyonlar

function topla( sayi1, sayi2){
    return parseInt(sayi1) + parseInt(sayi2);
}

const topla = function(sayi1, sayi2){
    return parseInt(sayi1) + parseInt(sayi2);
}


function topla(sayi1, sayi2, ...digerleri){
    const araToplam = parseInt(sayi1) + parseInt(sayi2);
    let toplam = araToplam;
    for (let val of digerleri) {
        toplam += parseInt(val);
    }
    return toplam;
}


function topla(sayi1, sayi2){
    setTimeout( function(){
        toplamiGoster(parseInt(sayi1) + parseInt(sayi2));
    }, 3000);
}

function toplamGoster(sonuc){
    const sonucElm = document.getElementById('sonuc');
    sonucElm.innerHtml( sonuc );
}

Callback Fonksiyonlar


const topla = (sayi1, sayi2) => {
    return parseInt(sayi1) + parseInt(sayi2);
}

Arrow Function

Events

Event	Açıklama
onchange
onclick
onmouseover
onmouseout
onkeydown
onkeyup
onload

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

for( let i = 0; i<100; i++){
    console.log( i );
}

Döngüler

while ( i < 100 ){

    if ( i === 5 ) {
        break;
    }

    console.log( i );

    i += 1;
}

const number = 10;

if ( number > 9 ){
    console.log( 'OK' );
}

if ( number > 10 ) {
    console.log( 'OK' );
} else if ( number > 9 && number < 15 ){
    console.log( 'OK' );
} else {
    console.log( 'OK' );
}

Koşullu İfadeler

const number = 10;

switch number {
    case 5;
        console.log(' sayı 5 ');
        break;
    case 10;
        console.log(' sayı 5 ');
        break;
    default;
        console.log( 'sayı '+number );
        break;
}

const myList = ['elma', 'armut', 1, 5];

const myObj = { 
    'meyveler': ['elma', 'armut'],
    'sayilar': [1,5]
};


myList[0]; // elma

myList[3]; // 5

myObj.meyveler; // ['elma','armut'];

myObj.meyveler[0]; // elma

Array & Object <3

const myList = ['elma', 'armut', 1, 5];

const myObj = { 
    'meyveler': ['elma', 'armut'],
    'sayilar': [1,5]
};

myList.push('X'); // ['elma', 'armut', 1, 5, 'X']


myObj['meyveler']('X'); // ['elma', 'armut', 'X']

myList[0] = 'kivi'; // ['kivi', 'armut', 1, 5, 'X']

myList.shift(); // ['armut', 1, 5, 'X']

delete myList[3]; // ['armut', 1, 5]

myList.splice(0,1); //  [1, 5]