Temat: Wprowadzenie do JavaScript
Język JavaScript to język do dynamicznej zmiany treści, wyglądu, zachowania się dokumentu HTML. Umożliwia interakcję z użytkownikiem. W skłąd dynamicznego HTML wchodzą technologie:
- DOM
- CSS
- HTML
- SVG
DOM – to sposób reprezentacji dokumentów XML i HTML w postaci modelu obiektowego. Jest on niezależny od platformy i języka programowania.
SVG – to uniwersalny format grafiki wektorowej, stworzony z myślą o zastosowaniu na stronach internetowych.
Języki skryptowe – to języki zaprojektowane z myślą o interakcji z użytkownikiem. JavaScript jest obiektowym i skryptowym językiem nawiązującym do języka C.
- Typowe zastosowanie tego języka:
- Modyfikowanie wyglądu bieżącego dokumentu.
- Wyświetlanie prostych okien dialogowych
- Kontrola poprawności wypełniania formularza
- Manipulowanie informacją daty i czasu
- Lokalne generowanie dokumentu HTML.
Umieszczanie kodu JavaScript w dokumencie HTML:
<script>
document.write("Napisz skrypt w języku JavaScript");
</script>
Aby rozpocząć tworzenie skryptu należy zastosować otwarty i zamknięty znacznik <script>. Jeżeli chcemy wyświetlić jakąś treść na stronie wykorzystujemy konstrukcję: document.write(„…”);
Dokument HTML z dołączonym plikiem js:
<script src="skrypt1.js">
</script>
</head>
<body>
<p>Skrypt znajduje się w pliku: "skrypt1.js"</p>
</body>
Znaczniki HTML w document.write
W JavaScript znacznik HTML w document.write jest używany do wstawiania treści HTML bezpośrednio do dokumentu podczas ładowania strony. Metoda document.write jest często używana do dynamicznego generowania treści HTML w czasie rzeczywistym za pomocą JavaScript. Jednak zaleca się jej ostrożne użycie z powodu pewnych potencjalnych problemów.
document.write("<a href = 'spis.html'>Spis treści</a>");Temat: Ogólne zasady oraz tworzenie zmiennych
W języku JavaScript rozróżnia się wielkość liter oraz wspierany jest standard znaków Unicode. W skryptach obowiązują zasady:
- Słowa kluczowe pisane są z małej litery
- Nazwy obiektów wbudowanych pisane są od dużej litery, a pozostałe są małe na przykład Date
- Nazwy obiektów DOM zapisane są małymi literami, ale w nazwach metod tych obiektów dopuszczane są małe i duże litery np.: to LowerCase
- Białe znaki, typu: spacja, tabulacji są nieistotne
Zmienne służą do przechowywania danych i wyników w celu dalszego ich wykorzystania. W języku JavaScript deklaruje się zmienne za pomocą słowa var poprzedzającego nazwę zmiennej. Nazwa zmiennej może zawierać litery, cyfry, oraz znak podkreślenia, natomiast nie może zaczynać się od cyfry. Wielkość liter ma znaczenie. Do przypisania wartości zmiennej używamy znaku =
<script>
var miasto = "Poznań";
var odleglosc = 50;
document.write("Grodzisk leży w okolicach miasta: "+miasto+" znajduje się: " +odleglosc+" km od nas");
</script>
<script>
var miasto = "Poznań";
var odleglosc = 50;
document.write("Grodzisk leży w okolicach miasta: "+miasto+" znajduje się: " +odleglosc+" km od nas");
</script>Literały to liczby lub ciągi tekstowe. Nazwy powinny być tworzone według następujących zasad:
- Oprócz liter można w nich stosować cyfry, znaki podkreślenia lub znak dolara
- Nazwa może zaczynać się literą, znakiem podkreślenia lub znakiem dolara.
- Pierwszym znakiem nazwy nie może być liczba
- W nazwach rozróżnia się wielkość liter
- Nazwą nie może być słowo zarezerwowane
Zmienne dwuwyrazowe zapisujemy: Data_urodzenia, dataUrodzenia.
Temat: Skalarne typy danych.
Dopuszczane są następujące typy danych:
- Typ liczbowy number:
var a = 12; dziesiętny
var b = 037; ósemkowy
var c = 0xACB; szesnastkowy
var d = 0.12e-2; notacja wykładnicza- Typ łańcuchowy string
var a = "Grodzisk Wlkp.";
var b = "Poznań";- Typ logiczny boolean – Przyjmuje jedną z dwóch wartości prawda lub fałsz. Wartości typu logicznego są wykorzystywane przy budowaniu wyrażeń logicznych, porównywaniu danych, określaniu czy wykonana operacja zakończyła się sukcesem.
var a = true;
var b = false;
- Typ null – Jest to typ specjalny określający wartość pustą. Nie przechowuje żadnej wartości. W języku JavaScript ten typ danych jest obiektem.
- Typ undefied – Jest to typ zawierający zmienne, którym nie została przypisana żadna wartość. Wartość oraz typ zmiennej są nieznane np.: var X;
Złożone typy danych:
- Obiekty – służą do reprezentacji obiektów. Wykorzystywane są do przedstawiania zmiennych w postaci złożonej. Właściwości obiektów są zapisywane w nawiasach klamrowych jako para: nazwa: wartość;
var osoba = {nazwisko: "Jankowski", imie:"Bartek", wiek: 10};- Tablice – służą do przechowywania wielu wartości. Tablice są zapisywane w nawiasach KWADRATOWYCH, elementy tablicy są oddzielone PRZECINKAMI.
var liczba = [12, 23, 54, 64, 32];Temat: Operatory.
- Operatory matematyczne – Służą do wykonywania operacji matematycznych. W tej grupie znajdują się też operatory inkrementacji (zwiększanie) dekrementacji(zmniejszanie).
| Operator | Działanie | Przykład |
| + | Dodawanie | a+b |
| – | Odejmowanie | a-b |
| * | Mnożenie | a*b |
| / | Dzielenie | a/b |
| % | Modulo(reszta z dzielenia) | a % b |
| ++ | Inkrementacja | a++ ; ++a; |
| — | Dekrementacja | a– ; –a |
2. Operatory porównania – porównują argumenty. Wynikiem tej operacji jest wartość logiczna true lub false.
| Operator | Działanie | Przykład |
| == | Wynik true gdy argumenty są równe | a==b |
| != | Wynik true gdy argumenty są różne | a!=b |
| === | Wynik true gdy argumenty są tego samego typu i są równe | a===b |
| !== | Wynik true gdy argumenty są różne lub różnego typu | a!==b |
| > | Wynik true gdy argument pierwszy jest większy od drugiego | a>b |
| < | Wynik true gdy argument pierwszy jest mniejszy od drugiego | a<b |
| >= | Wynik true gdy argument pierwszy jest większy od drugiego lub jest równy | a>=b |
| <= | Wynik true gdy argument pierwszy jest mniejszy od drugiego lub jest równy | a<=b |
3. Operatory bitowe:
| Operator | Działanie | Wyróżnienie | Przykład | Wynik |
| & | Iloczyn bitowy (AND) | a & b | 0101 & 0001 | 0001 |
| | | Suma bitowa (OR) | a|b | 0101 | 0001 | 0101 |
| ~ | Negacja bitowa (NOT) | ~a | ~0101 | 1010 |
| ^ | Bitowa różnica symetryczna | a ^ b | 0101 ^0001 | 0100 |
4 Operatory przypisania:
| Operator | Przykład | Znaczenie |
| = | x = y | x = y |
| += | x + = y | x= x + y |
| -= | x – = y | x= x – y |
| *= | x *= y | x = x * y |
| /= | x/=y | x /= x/y |
| %= | X %= y | X= x % y |
Operatory logiczne:
| Operator | Działanie | Przykład |
| && | Iloczyn logiczny AND | a && b |
| || | Suma logiczna OR | a || b |
| ! | Negacja logiczna | ! a |
Temat: Instrukcje sterujące.
Instrukcje sterujące pozawalają zmienić kolejność wykonywania poleceń zapisanych w skrypcie w zależności od spełnienia lub niespełnienia określonych warunków.
- Instrukcja warunkowa – pozwala na sprawdzenie w programie warunku i w zależności od tego, czy wynik jest prawdą, czy fałszem, dalsze wykonywanie instrukcji. Do takie sprawdzenia służy instrukcja if …else
<script>
var a = 2;
var b = 2;
if(a>b) {
document.write("Zmienna a: "+ a + " jest większa od zmiennej b: "+b);
} else {
if(a<b){
document.write("Zmienna a: "+ a + " jest mniejsza od zmiennej b: "+b);
}else {
document.write("Zmienna a: "+ a + " jest równa zmiennej b: "+b);
}
}
</script>
Przykład porównujący znaki trzech liczb:
<script>
var a = -4;
var b = 7;
var c = 10;
if(a>0 && b>0 && c>0){
document.write("Wszystkie liczby mają dodatnie znaki");
} else {
if(a<0 && b<0 && c<0) {
document.write("Wszystkie liczby mają znaki ujemne");
}else {
document.write("Liczby mają różne znaki");
}
}
</script>
- Instrukcja switch – to instrukcja wyboru. Pozwala sprawdzić zestaw warunków i wykonać różne działania w zależności od wyników porównania.