JavaScript - krótki wstęp do tematu

• stworzony w roku 1995 na potrzeby przeglądarki Netscape Navigator 2 (Mocha),
• najbardziej rozpowszechniony,
• z jedną z najgorszych reputacji w tzw. "środowisku",
• "trzon" języka (semantyka, podstawowe typy) określony przez standard ECMA,
• DOM API, Local Storage API, Geolocation API i inne - standardy W3C,
• to nie tylko jQuery i operacje na DOM'ie,
• to nie tylko przeglądarka (node.js, Rhino, ...).

JavaScript, a inne języki

• oparty składniowo na C,
• nie jest to Java!
• dynamiczny język programowania,
• słabe typowanie zmiennych (Scheme),
• funkcje anonimowe lambda (Scheme),
• szybkie wyrażenia regularne (Perl),
• brak klas, pól i metod prywatnych (możliwość emulacji),
• dziedziczenie oparte o prototype (Self).

Scope, czyli o zasięgu zmiennych słów kilka

var i = 5, foo = 'bar',
bar = function() {
  var i = 42;
  ajax('/addToCart/cake', function(data) {
    console.log(data.result);
  });
};

• zasięg wewnętrzny "widzi" zewnętrzne
• globalny scope → problem jego
  "zaśmiecania" (obiekt window)

  var i = 42;
  (function() {
    i = 'test'; // zmienna globalna :(
  })(); // "immediate function"
  console.log(i); // na pewno 42?

  

Scope, czyli o zasięgu zmiennych ciąg dalszy...

• zasięg funkcyjny, a nie blokowy → var hoisting

  var x = 5;
  (function () {
    console.log(x); // na pewno 5?
    var x = 42;
  })();

• powyższy kod to:

  var x = 5;
  (function () {
    var x;
    console.log(x); // undefined
    x = 42;
  })();

Referencje

• zmienne typów "nieprostych" przekazywane jako referencje

  var a, b;
  a = b = {foo: true}; // a i b odnoszą się do tego samego obiektu!
  a.foo = false;
  console.log(b.foo); // też false

• przekazywanie parametrów funkcji jako referencje

  var a = {foo:true};
  (function(obj) {
    obj.foo = false;
  })(a);
  console.log(a.foo); // false

Być obiektem czy tablicą, oto jest pytanie...

• dane z indeksem numerycznym? → używajmy tablicy

• var a = [1,2];
  a[100] = 3;
  console.log(a.length); // 3? nie, 101

• pomocnicze metody: push i pop,

• var a = [1,2,3,4];
  a.length = 2;
  console.log(a); // [1,2] - "obcięcie" tablicy

• tworzenie tablic i obiektów - literale [] i {},
  szybsze niż konstruktory new Array() i new Object().

Operator ==, a ===

• wartości falsy: "", 0, false, undefined, null, NaN
• operator == rzutuje zmienne:
• > 0 == '' true
• > 0 == false true
• operator === porównuje również typy zmiennych:
• > (0 === '') || (0 === false) false
• porównywanie obiektów:
• > ({foo: true}) === ({foo: true}) false

eval is evil i słów kilka o with

• eval daje możliwość uruchomienia podanego kodu,
• wolny, potencjalna "dziura" w kodzie,
• eval('({"foo":42})'); 73 ms / 1000 iteracji
• JSON.parse('{"foo":42}'); 2 ms / 1000 iteracji
• with - "zmiana" scope'a na podany obiekt

  var x = 42;
  with(obj) {
  	x = 5; // przypisanie do x czy do obj.x?
  }

• użycie obu zabronione w trybie strict ECMAScript5

O jeden przecinek za daleko (IE7 i IE8)

var foo = {
  test: true,
  bar: 32,
};

Kwestia średnika

function getObject() {
  return
  {
    foo: 42
  }
}

getObject(); // powinniśmy otrzymać obiekt, ale czy na pewno?

• interpreter JS kończy każdą linię kodu średnikiem,
• return undefined;
• zminifikowany kod daje inne
  wyniki niż kod wyjściowy!

JSLint na ratunek

Wskazuje najczęstsze błędy w kodzie JS:

• użycie eval oraz with,
• przypisanie do zmiennej z globalnego scope'a w funkcji,
• brakujące średniki na końcach linii,
• brakujące breaki w case'ach switchy,
• niezamknięte w {} bloki kodu (np. if, for, while),
• return w środku bloku (tak, to się zdarza ;)
  
  
• nie traktujmy wskazówek pana Crockforda jak wyroczni,
• mniej restrykcyjne forki: JSHint / @github.

JSLint w Wikii

• ponad 370 sprawdzanych plików JS (łącznie 1762 - wtyczki jQuery, CKEditor, MediaWiki, ...),
• codzienny raport z JSLinta (generowany w node.js) w postaci pliku HTML,
• skrypt PHP'owy do sprawdzania wybranych katalogów (w czasie tworzenia projektu).
• 

The Good Parts, czyli nie taki diabeł straszny...

• dynamiczność języka → poly-filling:
• > String.prototype.trim
• > Array.prototype.indexOf
• operator ||
• > options = options || {}
• format JSON wywodzi się z obiektowej notacji w JS'ie,
• funkcje anonimowe (lambda),
• brak instrukcji goto :)
• asynchroniczna "filozofia".

"use strict"

• część ECMAScript 5 - Fx 4.0+, Chrome 13.0+, Safari 5.1+ (pojawi się w IE 10.0 oraz Opera 12)
• wprowadza interpreter JS w bardziej rygorystyczny tryb,
• zgłasza błąd lub wyjątek w przypadku:
• użycia eval lub with,
• przypisania do zmiennej z globalnego scope'a (brak var),
• zdefiniowania obiektu ze zduplikowanym kluczem,
• użycia notacji ósemkowej: 012,
• ...
• przygotowanie terenu pod kolejne wersje ECMAScript.

Lektura uzupełniająca

• Douglas Crockford, JavaScript: The Good Parts, O'Reilly Media / Yahoo Press 2008 (szczególnie dodatki)
• David Flanagan, JavaScript: The Definitive Guide
• JavaScript: The World's Most Misunderstood Programming Language (javascript.crockford.com)

Pytania?