Javascript bevezető

Michelberger Tamás

Kir-Dev

2015 tavasz

HTML

CSS

Javascript

Mit tanulunk ma?

• Szintaxis, típusok, változók
• Függvények, scope-ok és closure-ök
• Module pattern
• Objektumok
• Ajax
• DOM és jQuery

Szintaxis

• C nyelvcsalád
• kapcsos zárójelek és pontosvessző
• Ismerős: if, for, while, switch, case, return
• És nem annyira ismerős: var, function, try, catch

function f() {
    var x = 42;

    reutrn function () {
        return (x++);
    };
}

var foo = f();

Típusok

A Javascript gyengén típusos nyelv

('1' + 1 == 11) == true
('2' - 1 == 1)  == true

undefined, number, string, boolean, object, function

Alaptípusok

Implicit típus konverzió

if ("42" == 42) {
    console.log('Egyenlő értékek');
} else {
    console.log('Nem egyenlő értékek');
}

vs

if ("42" === 42) {
    console.log('Egyenlő értékek');
} else {
    console.log('Nem egyenlő értékek');
}

Logikai kifejezések

Gyengén típusosság miatt nem csak a true és false értékek használhatók logikai kifejezésekben, hanem gyakorlatilag bármi.

Listák

[]

[1, 2]

[1, true, undefined, "ez egy string"]

[].lenght == 0

[1].pop() == 1 // utana ures lesz a lista

[1].push(2) == [1, 2]

[1].concat([2]) == [1, 2]

Egyszerre dinamikus tömb és stack

Objektumok

{}

{ theAnswer: 42 }

{ 'the answer': 42 }

Egyszerű kulcs-érték párok

Változók

• var kulcsszó
• nem kell előre megmondani a típusát
• a változónak nincs típusa, csak az általa reprezentált értéknek

Függvények

Függvények

function fizzbuzz(i) {
    if (i % 15 == 0) {
        console.log("FizzBuzz");
    } else if (i % 3 == 0) {
        console.log("Fizz");
    } else if (i % 5 == 0) {
        console.log("Buzz");
    } else {
        console.log(i);
    }
}

fizzbuzz(45);

var random = function () {
    return 4; // chosen by fair dice roll.
              // guaranteed to be random.
}

console.log(random());

Scope-ok

Azt határozza meg, hogy mely változókat érjük el egy adott helyen.

Globális és lokális scope

A function jelenti a scope-ot. Ha nincs scope, akkor a globális névtérben vagyunk.

Böngészőben a globális a scope a window objektumot jelenti.

var kulcsszó fontossága

function f() {
    g = 1;
}

f();
console.log(g); // => 1

vs

function f() {
    var g = 1;
}

f();
console.log(g); // => undefined

Closure

function f() {
    var x = 42;

    reutrn function () {
        return (x++);
    };
}

var foo = f();
console.log(foo()); // => 42
console.log(foo()); // => 43

Self-invoking functions

(function () {
    console.log("Magamtól hívódtam meg.")
})();

• névtelen függvény azonnali meghívása
• névterek létrehozása
• implementáció elrejtése

Module pattern

var MyModule = (function (w) {
    var privat = 42;

    return {
        publikus: function () { return privat + 1; }
    };
})(window);

MyModule.publikus() // => 43

• lényegében egy self-invoking function
• a függvény visszatérési értéke lesz a modul

Demo
Time

Objektumok és függvények

Metódus

fuction + receiver

this kulcsszó

Sometimes when I'm writing Javascript I want to throw up my hands and say "this is bullshit!" but I can never remember what "this" refers to

— Ben Halpern (@bhalp1) March 20, 2015​

new kulcsszó

új objektum példányosítása és inicializálása konstruktor függvény segítségével

Írjunk
saját new-t!

DOM

Document Object Model

DOM

Javascriptből elérhető: kereshető és módosítható.

DOM elérés

document.getElementById("idea-container")

document.querySelector("#idea-container")

// vagy

document.querySelectorAll("ul.menu > li > a")

DOM módosítás

var container = document.getElementById('idea-container');
container.style.backgroundColor = 'blue';
container.style.borderBottom = '1px solid blue';

// vagy

var link = document.getElementById('movie-link');
link.innerHTML = 'I changed this from JS';

DOM elem létrehozása

var text = document.createTextNode("hello world");
var p = document.createElement("p");
p.style.color = "white"
p.appendChild(text);
var container = document.getElementById("container");
container.appendChild(p);

DOM események

• minden DOM elemhez kapcsolhatóak különböző események: click, mouseenter, mouseleave, stb
• eseménykezelő csak egy áltagos függvény
• addEventListener metódus

Hozzuk mozgásba a világot!

avagy demo time

jQuery

DOM manipuláció, eseménykezelés megkönnyítésére

jQuery DOM

$('.post') // majdnem ugyanaz mintha 
           // document.querySelectorAll('.post')-t hivnank

// DOM elem -> jQuery elem
var post = document.getElementById('#post-1');
$(post).hide()

// pseudo selectorok
$('input:checked') // bepipált checkbox-ok

// új DOM elem
$('<p>').text('Hello world').appendTo($('#post-1'));

http://api.jquery.com/category/selectors/

jQuery események

$('button').click(function (event) {
    alert('hello world');
});

$('button').on('mouseenter', function () {
    $(this).css('background-color', 'red');
});

$(document).on('click', '#menu button', function (e) {
    console.log($(this).text() + ' was clicked');
});

http://api.jquery.com/on/

DEMO

Ajax

Asynchronous JavaScript and XML

Klasszikus flow

Ajax flow

XMLHttpRequest

jQuery.ajax

DEMO

Köszönöm!

Kérdések?