Jemný úvod do JavaScriptu

• Webová interaktivní prezentace
• Klávesa "?" zobrazí krátkou nápovědu
• Tisk jako obykle
• Pro pokračování stiskněte mezerník

JavaScript

• Regulérní interpretovaný programovací jazyk
• Jednoduchá syntaxe podobná C a Javě
• Plně objektový model
• Mnoho intepretů (alespoň jeden na každém PC)

JavaScript a Web

• Interpret JS v každém prohlížeči
• Samotný jazyk moc nedokáže
• API pro přístup k dokumentu (DOM) – zdroj obtíží
• Další objekty poskytované prohlížečem

Obtíže s JavaScriptem

• Nejasně implementované rozhraní DOM
  • Řadu let použití omezené na kontrolu formulářů
• Chybí 100% podpora prohlížečů
• Některé problematické jazykové konstrukce
  • null vs. undefined
  • Metody nejsou implicitně svázány s objektem
• Programovací jazyk pro HTML kodéry

Co je třeba znát

• Syntaxe
• Objektový model
• DOM

Syntaxe I. - Datové typy

• "Jednoduché" - předávané hodnotou

  var a = 7;        /* Number */
  var b = "ahoj";   /* String */
  var c = true;     /* Boolean */
  

• "Složitější" - předávané odkazem

  var d = [1, 2, 3];                    /* Array */
  var e = {hello:"world", foo:"bar"};   /* Object */
  var f = function() {};                /* Function */
  

• Speciální
  • Spadají do kategorie složitějších
  • Date, RegExp, Error

Syntaxe II. - Řídící struktury

• if - else

  if (1 > 2) { } else { }
  

• for

  for (var i=7; i < 8; i++) { }
  

• while

  while (3 < 4) { }
  do { } while (3 < 4)
  

Objektový model I. - Základy

• Všechno je objekt
  • Proměnná je instancí třídy datového typu
  • 7 == new Number(7); "ahoj" == new String("ahoj");
• Datové typy poskytují řadu metod
  • .toString() pro převod na řetězec
  • "ahoj".toUpperCase(), [1, 2, 3].pop(), …
• Typ Object je základní prázdná třída

  var obj = {};   /* var obj = new Object(); */
  obj.vlastnost = 5;
  obj.metoda = function() {};
  for (var p in obj) { alert(p); }
  

Objektový model II. - Třídy

• Instance se vytváří klíčovým slovem new
• Třída je reprezentována svým konstruktorem = funkcí

  var mojeTrida = function() {};
  var mojeInstance = new mojeTrida();
  

• Metody lze do třídy přidat např. pomocí vlastnosti prototype

  mojeTrida.prototype.metoda = function() { }
  

• V metodách třídy je dostupné klíčové slovo this
  • Zpravidla představuje referenci na konkrétní instanci

  • mojeTrida.prototype.metoda = function() {
        this.vlastnost = 7;
    }
    

DOM

• DOM = Document Object Model
• API pro přístup ke stránce
• Reprezentace stránky stromem (XML)
• Nejviditelnější vazba - proměnné window a document
• Ohromné množství nových objektů, vlastností a metod

DOM - Události I.

• Jedno z nejproblematičtějších míst propojení JS a DOM
• Událost = důsledek interaktivity (zpravidla iniciovaná uživatelem)
  • Co? - kliknutí, stisk klávesy, focus, …
  • Kde? - když kliknu na obrázek, klikl jsem i na odstavec, ve kterém je umístěn?
• Definice toho, v jakou chvíli pustit nějakou JS funkci

DOM - Události II.

Tři vývojové stupně práce s událostmi

1. <input type="button" onclick="nejakaFunkce();" />

2. var cudlik = document.getElementById("mujButton");
   cudlik.onclick = nejakaFunkce;

3. var cudlik = document.getElementById("mujButton");
   cudlik.addEventListener("click", nejakaFunkce);   /* Firefox */
   cudlik.attachEvent("onclick", nejakaFunkce);      /* IE */
   

Další četba

• MDC JavaScipt - http://developer.mozilla.org/en/docs/JavaScript
• MDC DOM - http://developer.mozilla.org/en/docs/DOM
• Windows Interpret JS + Apache module - http://www.wxjavascript.net/
• v8cgi - http://code.google.com/p/v8cgi/
• ...

Konec

Díky za pozornost ☺