JavaScript - Instytut Informatyki

JavaScript
Wstęp do podstaw elementów
Wprowadzenie
► Historia
► Netscape (LiveScript, 1995)
► JavaScript (Netscape), JScript (Microsoft), ActionScript
(Adobe)
► przekazany do ECMA (European Computer Manufacturers
Association) celem standaryzacji
► ECMAScript 1996 r.
► Aktualna wersja to ECMAScript 6 (2015 r.)
► Zastosowania
► najczęściej uruchamiany po stronie klienta (w przeglądarce)
► może być uruchamiany po stronie serwera (node.js)
► można także pisać „zwykłe” aplikacje
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
2
Zmienne typowane dynamicznie
► Ta sama zmienna może raz przechowywać liczby, a innym
razem łańcuchy znaków
► Skąd wiedzieć jaki jest aktualny typ zmiennej? duck typing
Jeżeli coś wygląda jak kaczka, pływa jak kaczka i kwacze jak
kaczka to prawdopodobnie jest kaczką
Sprawdzamy na etapie wykonania, czy obiekt ma odpowiednie
metody
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
3
Komentarze, operatory
► Komentarz
► Blokowy
/* To jest
Komentarz */
► Liniowy
var a = 5; // to jest komentarz
► Operatory
► porównanie wartości == (np. true dla 1=="1")
► porównanie wartości i typu === (np. false dla 1==="1")
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
4
Zmienne, funkcje
► Zmienne
var x = 10; // nie ma typu
► Funkcje – dwie metody deklaracji
function isOK1(obj) {
…
}
var isOK2 = function(obj) {
…
}
► Wywołanie funkcji – różne parametry lub ich brak
isOK(100);
isOK();
isOK("aa");
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
5
Tablice
►
Deklaracja
var samochody = ["AUDI", "BMW"];
for (s in samochody) {
// for (var i=0; i < samochody.length; i++) {
…
}
var x = new Array();
x[0]
x[1]
x[2]
x[3]
►
=
=
=
=
2008;
"FIAT";
{model: "126S"}
function(stawka) {return stawka/100;};
Dostęp do elementów
console.log(x[0]);
console.log(x[1]);
console.log(x[2].model);
console.log(x[3](150));
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
6
Obiekty (1)
►
Obiekty to kontenery nazwanych wartości (ang. properties)
►
Tworzenie obiektów
var osoba = new Object();
osoba.imie = "Rysiu";
osoba.obliczWiek = function(aktualnaData) {
return …; };
// lub (wersja object literal)
var osoba = {
imie: "Rysiu",
obliczWiek: function(aktualnaData) { return …; }
}
// lub (wersja z konstruktorem obiektowym)
function osoba(im) { // osoba to konstruktor
this.imie = im;
}
var rysiek = new osoba("Rysiu");
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
7
Obiekty (2)
►
Dostęp do pól
console.log(osoba.imie);
console.log(osoba.obliczWiek(new Date()));
//lub
console.log(osoba.imie);
console.log(osoba.obliczWiek(new Date()));
►
Usuwanie pól
delete osoba.imie;
delete osoba["imie"];
►
Wbudowane konstruktory, m.in.:
new
new
new
new
►
Object();
String();
Number();
Date();
W praktyce lepiej unikać używania operatora new (i stosować tzw.
prymitywy) – bardziej wydajne
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
8
Prototypy
► Każdy obiekt ma prototyp
► Z prototypu dziedziczone są pola i metody
function osoba(im) { // prototyp – konstruktor obiektowy
this.imie = im;
this.obliczWiek() {return …};
}
► Dodawanie pól i metod do prototypu
► zmiana definicji albo
► wykorzystanie słówka prototype
osoba.prototype.wzrost = 190;
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
9
Zasięg zmiennych
► Zmienne w JavaScript – także obiekty i funkcje
► Zasięg (scope) to zmienne, obiekty i funkcje, do których
mamy dostęp
► Rodzaje zasięgu
► lokalny – zmienne w funkcjach, dostęp tylko z tych funkcji,
niszczone wraz z funkcją
Uwaga: zmienne niezadeklarowane w funkcjach, stają się
zmiennymi globalnymi!
► globalny – zmienne poza funkcjami, dostęp ze wszystkich
skryptów i funkcji, niszczone np. po zamknięciu strony
► Parametry funkcji – zachowują się jak zmienne lokalne w
funkcjach
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
10
Zakres widoczności (1)
var x = 1;
f1();
function f1() {
var x = 2;
f2();
}
function f2() {
console.log(x);
}
var x = 1;
f1();
function f1() {
console.log(x);
f2();
}
function f2() {
console.log(x);
}
// wynik
1
//wynik
1
1
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
var x = 1;
f1();
function f1() {
console.log(x);
var x = 2;
console.log(x);
f2();
}
function f2() {
console.log(x);
}
//wynik
undefined
2
1
11
Zakres widoczności (2)
var x = 1;
f1();
function f1() {
x = 2;
f2();
}
function f2() {
console.log(x);
}
// wynik
2
var x = 1;
f1();
function f1() {
console.log(x);
var x = 2;
f2();
}
function f2() {
console.log(x);
}
//wynik
1
2
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
12
Domknięcie
► Chcemy zrobić licznik, który będzie dostępny dla
wszystkich, a jednocześnie będzie mógł być zmieniany
tylko przez jedną funkcję
► Globalna zmienna nie zapewnia ochrony przed zmianą
przez kogokolwiek
► Rozwiązanie: closure
► W JavaScript funkcje mogą być zagnieżdżone
► Funkcje mają dostęp do zakresu „ponad” nimi
► Zagnieżdżone funkcje mogą być dostępne na zewnątrz
var increment = (function f1() {
var counter = 0; //wykonywane tylko raz!
return function () {return counter+=1;}
}) ();
increment(); increment();
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
13
Wykorzystanie DOM
► Możliwa nawigacja po drzewie DOM
► Dostęp do
► window – kontekst globalny
► document – drzewo dokumentu
getElementById("id_prac_10");
getElementsByTagName("div");
querySelector(".klasa div");
© Paweł Boiński, Instytut Informatyki, Politechnika Poznańska
14