Prezentacja z wykładu o javascript, który poprowadziłem 17 stycznia 2009 roku na PG w Gdańsku.

1. JavaScript
jako przykład obiektowego języka
zorientowanego na prototypy
(c) 2008/9 - Rafał Piekarski

2. Plan prezentacji
Przykłady podstawowych zastosowań.
Historia powstania, języki pochodne i wersje.
Informacje o literałach i podstawach składni.
Tablice i obiekty.
Specyficzne konstrukcje języka oraz wyjątki.
Tworzenie obiektów i mechanizm wyzwalania atrybutów.
Domknięcia (ang. clousures), czyli this, a może that?
Zakresy zmiennych (symulacja private).
Usuwanie obiektów: operator delete, wartość undefined, null, oraz
GarbageCollector.
Aplikacje internetowe i przykłady zaawansowanego
wykorzystania JavaScriptu - frameworki.

3. Przykład podstawowego
wykorzystania
otwieranie okien - pop-upy
prosta podmiana styli elementów
ładowanie danych z innych stron
dynamicznie

4. Historia
JScript
AJAX
Java Flash i ActionScript 3
Przeglądarki
ECMAScript
internetowe
prototypowanie
inne podobne języki (lua, Self, Object Lisp.... )

5. Składnia języka
Definiowanie zmiennych
var liczba = 123;
var napis = “jakiś tekst”;
var innaLiczba = 1.23;
Działania
liczba = liczba * 2 + 2; / 248
/
napis += “ jest”; / “jakiś tekst jest”
/
innaLiczba = innaLiczba - 3; / -1.77
/
napis = -1 + “ tekst”; / “-1 tekst”
/
liczba = parseFloat(“1.23”) + 2; / 3.23
/

6. Prawda czy fałsz?
var prawda = true;
var falsz = false;
$ $ $ falsz = 0; / zero
/
$ $ $ falsz = quot;quot;; / pusty napis
/
$ $ $ falsz = undefined;
/ niezdefiniowana zmienna
/
$ $ $ falsz = null; / pusty obiekt
/
$ $ $ falsz = NaN; / nieliczba (not a number)
/
$ $ $ falsz = !prawda; / zanegowana prawda
/
$ $ $ falsz = !![]; / /podwójna negacja pustej
/ tablicy
/

7. Operatory
< > <= >= === == !== !=
porównania=>
jednoargumentowe=> ! -- ++ +-*/ <=matematyczne
+= -= *= /= =
przypisania=>
<< >> & ^ | && ||
bitowe i logiczne=>
?:
trójargumentowy=>
Porównywanie wartości
false == 0; / true
/
false === undefined; / false
/
true === !!null; / true
/
true === true; / true
/

8. Instrukcje warunkowe i pętle
var x = 10;
var x = 10;
switch(x) {
var y = quot;11quot;;
case 9:
if ( x < 11) {
case 10:
$ x++;
x++;
}
case 11:
else if (y === 11) {$ / false (niezgodność typów)
/
break;
y--;$$
case 12:
}
x--;
else if (y <= 11) {$/ true (domyślna konwersja
/
default:
/ do innego typu, może być
/
x = “”;
/ niebezpieczne)
/
}
} var i = 10;
else { } while (i--) { }
$$$ $$$
for (var i=10 ; i>0 ; i--) {$
}
$$$
do {
$ i++;
} while(i < 5);

9. Funkcje
function suma (a1, a2) {$ var suma2 = function (a, b, c) {
$ var e = -1;$ $ return a + b + c;
$ }$
$ return ++a1 + a2 + e;
suma2(1,2, 3);$ / 6
/
}
suma(1,2, 3); / 3
/
Funkcja jako zmienna
var policz = function (funkcja, a1, a2) {
$ return funkcja(a1, a2);
}
policz(suma, 2, 4); / 6
/
policz(suma2, 3, 1); / 4
/

10. Tablice i obiekty
var tablica = [1, 2, quot;3quot;, 4.00001];
tablica.length; / 4
/
tablica[4] = tablica[0] - tablica[1] + tablica[2]; / quot;-13quot;
/
tablica.length; / 5
/
tablica[9] = false;
tablica.length; / 10
/
Typy
tablica[8]; / undefined
/ typeof 123;$ $ $ / “number”
/
typeof quot;napisquot;; $ / “string”
/
typeof true;$$ $ / “boolean”
/
typeof tablica; / “object”
/ typeof null;$ $ $ / “object”
/
typeof undefined;$ / “undefined”
/
typeof 3.14;$$ $ / “number”
/

11. var obiekt = { };
Tablica, a może obiekt?
obiekt.x = 10;
var tablica = [1, 2, quot;3quot;, 4.00001];
obiekt.tytul = 'jakis tekst';
var tablica = {
obiekt['klass'] = {
0: 1,
! x: 11, 1: 2,
! nazwa: 'jakas nazwa', 2: quot;3quot;,
! f: function (a, b, c) { 3: 4.00001,
length: 4
!!
};
! },
! ole: [1,2,3,4,5,6] obiekt['klass'].x; / 11
/
} obiekt.klass['nazwa']; / 'jakas nazwa'
/
obiekt.klass.f(3,4,5);
var podobiekt = obiekt['klass'];
podobiekt.nazwa; / 'jakas nazwa'
/
podobiekt.f(1,2,3);

12. Obiektowość
Wbudowane typy a obiekty
String(“Napis”); / “Napis”
/
String(quot;Napisquot;); / równoznaczne z: quot;Napisquot;
/ Number(123); / 123
/
Array(2,3,4); / [2,3,4]
/
quot;Componentsquot;.toUpperCase()$ // quot;COMPONENTSquot;
Boolean(1); / true
/
.replace('N', '?')$ $ $ $ $ // quot;COMPO?ENTSquot;
Function(quot;xquot;, quot;yquot;,quot;return x+y;quot;);
.replace('O', '0')$ $ $ $ $ // quot;C0MPO?ENTSquot;
.substr(1, 3)$ $ $ $ $ $ // quot;0MPquot; / function(x,y){ return x+y; }
/
.indexOf('M');$ $ $ $ $ // 1 Object();
Wyjątki Math; / itd...
/
try {
$ throw {message: quot;oops!quot;}; var myRandomValue = function(max) {
}
$ return Math.ceil(Math.random()
catch(e if e instanceof Object) { }
* max % max);
catch(e) {
}(10);$ $ $ / np. 3
/
$ document.writeln(e.message); / quot;oops!quot;
/
}

13. Operowanie na obiektach
Zamiana wartości
var obiekt = {
var a = 5, b = 6;
! x: 123,
[a, b] = [b, a];
! n: quot;napisquot;,
a; / 6
/
! f: function() { return this.x+this.n; }
b; / 5
/
}
var z = quot;spoza obiektu `obiekt`quot;;
with(obiekt){
! document.writeln(x);! ! / 123
/
! document.writeln(n);! ! / quot;napisquot;
/
! document.writeln(f);! ! / quot;function () { return this.x + this.n; }quot;
/
! document.writeln(f()); ! / quot;123napisquot;
/
! document.writeln(z);! ! / quot;spoza obiektu `obiekt`quot;
/
}
for (var key in obiekt) {
! if(obiekt.hasOwnProperty(key)) {
! ! document.writeln(key + quot;: quot; + obiekt[key]);
! }
}

14. Tworzenie obiektów
i prototypy
A może java?
Konstruktory
public class Kot {
$ public String imie;
var Kot = function(imie) {
$ public Integer dl_ogona = 20;
$ this.imie = imie;$
$
$ this.dl_ogona = arguments[1] || 20;
$ public Kot(String imie) {
}
$ $ this.imie = imie;
$}
var mruczek = new Kot(“mruczek”);
$
$$$
$ public Kot(String imie, Integer ogon) {
mruczek.imie; / “mruczek”
/
$ this.imie = imie;
mruczek. dl_ogona; / 20
/
$ dl_ogona = ogon;
$}
var innyKot = new Kot(“wojtuś”, 25);
}
innyKot. dl_ogona; / 25
/