JavaScript podstawy

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

 

wykorzystanie JavaScript:

• strony www
• widżety Yahoo
• Google Apps
• programy iPhone
• skrypty do programów Adobe (Acrobat, Photoshop, Illustrator, Dreamweaver
• system operacyjny Mac OS X Yosomite (automatyzowanie komputera)
• Gulp.js
• Bower
• platforma Node.js (wersja silnika JavaScript V8 – wykorzystanie skryptów JS po stronie serwera, programowanie komputerów stacjonarnych i serwerów za pomocą Node.js – wykorzystanie js po za przeglądarką)

 

 

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:

• konsola JavaScript w przeglądarce

 

komunikaty błędów:

• Unexpected token – brak zamknięcia nawiasu
• Uncaught SyntaxError: Unexpected token ILLEGAL –  brak średnika, cudzysłowa, apostrofa, zamiana apostrofu z cudzysłowem
• Uncaught ReferenceError: aler is not defined – błędnie zapisane polecenie
• Uncaught TypeError: Object [object Object] has no method 'sid’ – błędnie wstawiona nazwa funkcji jQuery

 

Elementy JS:

• instrukcje, każda zakończona ;
• funkcje (metody, polecenia)
• dane, typy: liczbowe, łańcuchowe, logiczne
• zmienne – zapis informacji którą można użyć lub zmodyfikować, deklaracja poprzez var your_nome_of_variable

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.

 

• NaN == NaN // false
• null == undefined // true
• undefined == null // true
• „3” == 3 // true – porównywanie ciągów znaków do liczby, ciąg znaków jest zamieniany na liczbę
• false == 0 // true – porownywanie wartości logicznej z wartością innego typu, wartość logiczna jest zamieniana na liczbe
• true == 1 // true
• porównywanie ciagu znaków, liczby do obiektu, próba przekształcenia obiektu na wartość podstawowego typu, jeśli nie jest to możliwe obiekt zostaje przekształcony na ciąg znaków

 

Wyświetlanie – Display

• window.alert(33 + 3);
• document.write(33 + 3);
• <button onclick=”document.write(33 + 3)”>Try</button>
• document.getElementById(„myDiv”).innerHTML = 33 + 3;
• console.log(33 + 3);

 

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