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

#tools