Umieszczanie skryptów w dokumencie HTML

Umieszczanie skryptów w dokumencie HTML

Umieszczanie skryptów w dokumencie HTML

Test
Test
						

Test 1

Komentarze JS

Komentarze JS

Zmienne i typy danych

Zmienne i typy danych

Nazewnictwo zmiennych

• zmiennaJeden
• zmienna2
• zmienna_3
• 4zmienna
• treść
• zmienna%tresc
• for, if, switch, itp.

Uwaga! WIELKOŚĆ LITER JEST ROZRÓŻNIANA!

zmiennaJeden != zmiennajeden

Zmienne i typy danych

Zmienne i typy danych

Typy danych

• liczby (Number)
• znaki (String)
• wartości logiczne (Boolean)
• obiekty (Object)
• tablice (Array)
• null
• undefined

Operatory

Operatory artmetyczne

• dodawanie: +
• odejmowanie: -
• dzielenie: /
• mnozenie: *
• modulo: %
• inkrementacji: ++
• dekrementacji: --

Operatory

Operatory relacyjne i porównania

• równości: ==
• różności: !=
• równości typu i wartości: ===
• różności typu i wartości: !==
• mniejszości:<
• większości: >
• mniejszości lub równości: <=
• większości lub równości: >=

Operatory

Operatory logiczne

• iloczyn logiczny: &&
• suma logiczna: ||
• negacja logiczna: !

Operatory

Operatory przypisania

n += 2; // n = n + 2
n -= 2; // n = n - 2
n *= 2; // n = n * 2
n /= 2; // n = n / 2
n %= 2; // n = n % 2
                    

Instrukcje warunkowe

if (warunek)
    instrukcja;
						

if (warunek)
{
    instrukcja1;
    instrukcja2;
}
						

if (warunek)
    instrukcja;
else
    instrikcja2;
						

if (warunek)
    instrukcja;
else if (kolejny warunek)
    instrukcja2;
else
    instrukcja3;
						

Instrukcje warunkowe

switch (a) {
case 0:
    instrukcja;
case 1:
    instrukcja2;
    break;
case 2:
    instrukcja3;
    break;
default:
    instrukcja domyslna;
    break;
}
						

Pętle

Pętla for

for (n = 0; n < 10; ++n)
    console.log(n);
						

for (n = 0; n < 10; ++n)
{
    console.log(n);
}
						

for (n = 0, k = 1; n < 10; ++n, k += 3)
    console.log(n * k);
						

for (n = 0; n < 10; ++n)
    for (k = 0; k < 10; ++k)
        console.log(n * k);
						

Pętle

Pętla while

while ( test_logiczny )
    instrukcja;
						

while ( test_logiczny )
{
    instrukcja1;
    instrukcja2;
    ...
}
						

n = 0;
while (n < 10)
{
    console.log(n);
    ++n;
}
						

Pętle

Pętla do while

do
    instrukcja;
while ( test_logiczny )
						

do
{
    instrukcja1;
    instrukcja2;
    ...
}
while ( test_logiczny );
						

n = 10;
do
{
    document.write(n);
    ++n;
}
while (n < 10);
						

Pętle

Pętla for in

for (zmienna in tablica_lub_obiekt)
    instrukcja;
						

for (zmienna in tablica_lub_obiekt)
{
    instrukcja1;
    instrukcja2;
    ...
}
						

tablica = Array( 'a', 'b', 'c', 'd' );
for (n in tablica)
{
    console.log(n);
}
						

Funkcje

function Hello(name)
{
    console.log("Hello, " + name);
}
 
Witaj("Paweł");
						

function Suma(a, b)
{
    return a + b;
}
						

function Silnia_I(n)
{
    wynik = 1;
    for (k = 1; k <= n; ++k)
    {
        wynik *= k;
    }
    return wynik;
}
						

Funkcje

Rekurencja

function Silnia_R(n)
{
    if (n == 0)
        return 1;
    else
        return n * Silnia_R(n - 1);
}
						

Tablice

pusta tablica

var tablica = [ ];
//lub
var tablica = new Array();
						

tablica z jednym elementem

var tablica = [ 10 ];
//lub
var tablica = new Array('10');
						

tablica z wieloma elementami

var tablica = [ 1, 'dwa', 3.14, 'cztery' ];
//lub
var tablica = new Array(1, 'dwa', 3.14, 'cztery');
						

Tablice

Tablice asocjacyjne

var tablica = [];
tablica['indeks'] = "wartość";
tablica['indeksDwa'] = "wartośćDwa";

for (i in tablica) {
    console.log('Wartosc klucza ' + i + ' wynosi ' + tablica[i]);
}

Tablice

Tablice wielowymiarowe

var tablica = [];
tablica[0] = ['tab2' , 'kolejna wartość w tab2'];
tablica[1] = ['tab3' , 'kolejna wartość w tab3'];

for (i in tablica) {
    console.log('Wartosc klucza ' + i + ' wynosi ' + tablica[i]);
}

Obiekty

Pojedynczy obiekt

var obiekt = {
    wlasciwosc: "wartość",
    metoda : function() {
        console.log("To jest wartość właściwości: "+this.wlasciwosc)
    }
}
obiekt.metoda();
obiekt.wlasciwosc = "inna wartość";
obiekt.metoda();
						

Dodawanie metod lub właściwości

obiekt.wlasciwosc2 = "wartość właściwości 2";					
obiekt.metoda2 = function(){
 console.log("to jest ciało nowej metody z dołączoną drugą właściwością: " + this.wlasciwosc2);
};
						

Usuwanie metod lub właściwości

delete obiekt.wlasciwosc2;
						

Obiekty

Obiekt uniwersalny

function NowyPunkt(_pktX,_pktY) {
    this.pktX = _pktX;
    this.pktY = _pktY;
    this.wypisz = function() {
        console.log("Współrzędne: x: " + this.pktX + ', y: ' + this.pktY);
    }
}
var punkt1 = new NowyPunkt(15, 24);
punkt1.wypisz();
						

Obiekty

Prototype

NowyPunkt.prototype.wypiszX = function(){
	console.log("Współrzędna X = " + this.pktX);
}
						

Zdarzenia i ich obsługa

Zdarzenia myszy

• onclick - pojedyncze kliknięcie (naciśnięcie i zwolnienie klawisza myszki)
• ondblclick - podwójne kliknięcie
• onmousedown - wciśnięcie klawisza myszki
• onmouseup - zwolnienie klawisza myszki
• onmouseover - kursor myszki znalazł się w obszarze obiektu
• onmousemove - kursor myszki został przesunięty
• onmouseout - kursor myszki opuścił obszar obiektu

Zdarzenia i ich obsługa

Zdarzenia klawiatury

• onkeypress - klawisz został wciśnięty
• onkeydown - klawisz został naciśnięty
• onkeyup - klawisz został zwolniony

Zdarzenia i ich obsługa

Zdarzenia formularza

• onsubmit - formularz będzie wysłany
• onreset - zawartość formularza jest czyszczona
• onfocus - kontrolka otrzymała fokus
• onblur - kontrolka straciła fokus
• onselect - kontrolka została wybrana
• onchange - zawartość kontrolki się zmieniła

Zdarzenia i ich obsługa

Obsługa zdarzeń

Podstawowy model obsługi zdarzeń

document.getElementById('przycisk').onclick = function() {
    alert('Click!');
}
//lub
var element = document.getElementById('przycisk');
element.onclick = funkcja;
					

Zdarzenia i ich obsługa

Nowy model obsługi zdarzeń

var element = document.getElementById('przycisk');
element.addEventListener('click', funkcja, false);
element.addEventListener('click', function() {
    console.log('Wykonanie funkcji anonimowej.');
}, false);