JavaScript podstawy

JavaScript to język skryptowy, który powstał jako LiveScript, jest znany też pod nazwą ECMAScript – oficjalna specyfikacja języka.

 

wykorzystanie JavaScript:

 

 

Połączenie języka JS do tworzenia interfejsu użytkownika aplikacji (przeglądarka) i części serwerowej = stosowanie JS w pełnym zakresie.

 

 

Wykrywanie błędów:

 

komunikaty błędów:

 

Elementy JS:

use strict

rozpoczęcie od tego oznajmia przeglądarce że kod js jest zgodny z najnowszym standardem

 

koercja typów danych

pozwala na porównywanie lub łączenie danych nie zaleznie od ich typu.

 

 

Wyświetlanie – Display

 

Słowo kluczowe with

wskazuje obiekt, do którego odwołują się właściwości wskazane bez podania obiektu w zapisanym po nim blok instrukcji zawartych w {}

<input type="text" value="" placeholder="enter some text..." id="myText">
<button onClick="countText()">Count</button>
<div id="infoOutput"></div>
function countText() {
  var myText = document.getElementById('myText').value;
  document.getElementById('infoOutput').innerHTML = 'number of characters: ' + myText.length;
}

Closures – domknięcie

zasięg tworzony przez funkcję, odgradzający stworzone w niej zmienne i funkcje (poprzez var) od reszty kodu.

var a = "outside of a closure";
function myClosure() {
    var a = "inside a closure";
    console.log(a);
}
myClosure(); // inside a closure
console.log(a); // outside of a closure

 

funkcja setTimeout

nie zatrzymuje działania wywoływania kodu na dany czas a tylko instrukcji w niej zawartych, więc otrzymamy:


for(var i = 0; i < 6; i++) {
    console.log(i);
}
// 0 1 2 3 4 5

for(var i = 0; i < 6; i++) {
    setTimeout(function() {
        console.log(i);
    }, 600);
}
// 6 6 6 6 6 6

z czego 6 szóstek otrzymamy po 0.6s

 

IIFE – natychmiastowe wywołanie funkcji anonimowej ()()

Immediately-invoked function expression

nie można zadeklarować funkcji anonimowej bez kontekstu, można ją jednak zadeklarować i jednocześnie wywołać:

(function (a) { 
    console.log(a); 
})("my anonymous function"); 

gdzie parametr a przyjmuje wartość podaną w nawiasie po zdefiniowaniu funkcji.

Pozwala to na zatrzymanie wywołania w osobnych domknięciach by uzyskać ciąg cyfr 0-5:

for (var i = 0; i < 6; i++) {
    (function (e) {
        setTimeout(function () {
            console.log(e);
        }, 600);
    })(i);
}

document.getElementsByClassName – zwraca HTMLCollection

jest to obiekt tablico-podobny – „array-like” object, aby po nim iterować:


 

parameters -> functionName(a,b)

arguments -> functionName(4,5)

JavaScript is a single threaded language – wykonuje tylko jedno zadanie na raz (call stack) – first in – last out

deadlocks –

JavaScript Run-Time Environment

Memory heap – pamięc

#JavaScript

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.