Skrótowo...

Poniżej zamieszczam bardzo skrótowe informacje na temat JavaScriptu. Jeżeli ci się śpieszy możesz traktować to jako okrojoną wersję tego kursu :)

Ogólna postać skryptu

Ogólna postać skryptu ma wygląd:

	//dla HTML5
	<script>
			...instrukcje skryptu
	</script>
	
	//dla HTML4
	<script type="text/javascript">
			...instrukcje skryptu
	</script>

Każda para znaczników może mieć dodatkowe atrybuty:

src - wskazuje plik, w którym znajdują się skryptu (musi mieć rozszerzenie .js)
charset - określa kodowanie jakie zostało zastosowane dla skryptu
language = x - wskazuje wersję języka zastosowaną między znacznikami - znacznik przestarzały, niezalecany w użyciu

W praktyce poza src reszty się nie używa.

W XHTML dla uniknięcia zamiany znaków < i & na encje otaczamy skrypt blokiem DATA.

	<script type="text/javascript">
		//<![CDATA[
		...	
		//]]>
	</script>

Znacznik <noscript> ... </noscript>, wyświetla treść dla przeglądarek, które, które nie obsługują Javascriptu.

Więcej na ten temat możesz dowiedzieć się tutaj.

Komentarze

Komentarze stosujemy w dwóch formach:

	//komentarz 1 linijkowy
	

	/* 
	------------
	to
	jest
	komentarz 
	kilku 
	linijkowy
	------------
	*/

Więcej na temat komentarzy możesz dowiedzieć się tutaj.

Zmienne

Deklarowanie zmiennej:

	var zmienna = 10;
	var zmienna = "to jest tekst";
	var ob = document.Formularz.poleTekstowe;

Dla uniknięcia przypadkowych błędów, deklarację zmiennych poprzedzamy słowem var (nie jest wymagane).
Zmienne dzielą się na globalne i lokalne. Globalne są deklarowane poza funkcjami, a lokalne wewnątrz funkcji. Lolakne zmienne są dostępne tylko dla danej funkcji, a globalne są dostępne dla całego skryptu.

Więcej na ten zmiennych możesz dowiedzieć się tutaj.

Pętle

Pętla wykonuje pewien kod określoną ilość razy.

Wyróżniamy rodzaje pętli:

	while (warunek) {
		...
	}

	do {
		...
	} while (warunek)
	
	for (x=0; x<maksymalna_wartosc_x; x++) {
		...
	}

Pętle możemy zagnierzdzać (pętla w pętli):

	for (x=0; x<10; x++) {
		for (j=0; j<10; j++) {
			...
		}
	}

Więcej na temat pętli możesz dowiedzieć się tutaj.

Funkcje

Deklaracja funkcji ma postać:

	function nazwa_funkcji(parametry) {
		...
	}

Każda funkcja posiada właściwość arguments, która jest tablicą parametrów, które przekazane zostały do tej funkcji.

W funkcji możemy korzystać ze słowa this, które wskazuje na obiekt, który wywołał daną funkcję

Możemy zwrócić wartość z funkcji poprzez zastosowanie słowa return.

Więcej na temat funckji możesz dowiedzieć się tutaj.

Tablice

Deklaracja tablicy ma postać:

	var nazwa_tablicy = new Array(elementy oddzielone przecinkami)
	
	//lub
	
	var nazwa_tablicy = []

Tablice indeksowane są od 0.
Każda tablica ma właściwość length która zwraca nam długosć tablicy. Możemy tworzyć tablice wielowymiarowe (czyli tablice w tablicach):

	var Tablica = new Array()
	Tablica[0] = Array('Marcin','183')
	Tablica[1] = Array('Ania','173')
	
	//lub
	
	Tablica = [['Marcin','183'], ['Ania','173']]
	
	//...

	alert('Imie pierwszej osoby to: ' + Tablica[0][0]);

Więcej na temat tablic możesz dowiedzieć się tutaj.

Obiekty

Aby utworzyć nowy obiekt musimy stworzyć dla niego formę:

	function forma_obiektu(imie,wiek) {
		this.imie = imie
		this.wiek = wiek
	}
	var osoba = new forma_obiektu('Marcin',24)
	
	//lub
	
	osoba = {
		imie : 'Marcin',
		wiek : 24
	}

Aby dodać nową metodę lub właściwość do obiektu skorzystamy z instrukcji prototype

	function forma_obiektu(imie,wiek) {
			this.imie = imie
			this.wiek = wiek
	}
	
	forma_obiektu.prototype.pisz = function pisz() {
		document.write(this.imie)
	}
	
	var osoba = new forma_obiektu('Marcin',24)

Więcej na temat obiektów możesz dowiedzieć się tutaj.

Okienka dialogowe

Istnieją trzy okienka dialogowe:

	alert('tresc')
	confirm('tresc')
	prompt('tresc', 'domyslna wartosc')

Okienko alert służy tylko do podawania informacji.
Okienko confirm słuzy do potwierdzania informacji (zwraca true albo false).
Okienko prompt służy do pobierania informacji (zwraca wartość albo null gdy jego wartość została usunięta).

Więcej na temat okienek dialogowych możesz dowiedzieć się tutaj.

Ramki

Do odwołania się do dokumentu z zestawem ramek skorzystamy z instrukcji parent. Aby odwołać się do ramki z nazwą menu skorzysatmy z instrukcji:

	parent.menu

Aby np. wypisać coć w dokumencie w ramce tresc skorzystamy z kodu:

	parent.tresc.document.write('to jest tekst dopisany');

Aby ramka była nadpisywana musimy skorzystać z metody close() dokumentu:

	parent.tresc.document.write('to jest tekst nadpisany');
	parent.tresc.document.close()

Można odwoływać się do funkcji i zmiennych znajdujących sie w poszczególnych ramkach. Odwołania takie są analogiczne do powyższych.

Więcej na temat ramek możesz dowiedzieć się tutaj.

Zdarzenia

Możemy zadeklarować zdarzenie dla obiektu wewnętrznie (wewnątrz elementu) (niezalecane):

	<div onclick="alert('tekst')"></div>

lub z poziomu skryptu:

	<div id="div"></div>
	<script type="text/javascript">
	function wypisz() {
		alert('Test');
	}

	//starsza metoda
	document.getElementById('div').onclick = wypisz;

	//nowsza metoda
	document.getElementById('div').element.addEventListener('click', wypisz, false);
	</script>

Aby odczytać zdarzenie skorzystamy z pseudo argumentu funkcji lub ze zdarzenia window.event (IE):

	function zrobCos(e) {
		if (!e) var e = window.event;
		//e daje ci dostęp do zdarzenia
		alert(e.target);
	}

Więcej na temat zdarzeń możesz dowiedzieć się tutaj.