Scribd
Upload
17 views61 pages

Java Script

Uploaded by

v.popoilyk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views61 pages

Java Script

Uploaded by

v.popoilyk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 61

JavaScript

Programowanie aplikacji internetowych


Programowanie aplikacji internetowych
• Dynamiczna zmiana treści lub zachowania strony.
• Technologie wykorzystywane: JavaScript, DOM(Document Object
Model, CSS, HTML).
DOM – Document Object Model
DOM – jest sposobem reprezentacji dokumentów XML i HTML w
postaci modelu obiektowego.
Jest on niezależny od języka programowania.
Standard zdefiniowany dla DOM przez organizację W3C opiera się
na zespole klas i interfejsów. Za ich pomocą jest możliwy dostęp do
dokumentu oraz możliwa jest jego modyfikacja.
Interfejsy DOM definiuje się tylko dla języków JavaScript oraz Java.
Krótko o obiektowości
Przykład użycia DOM
Języki skryptowe
• Języki interpretowalne, zaprojektowane z myślą o interakcji z
użytkownikiem.
• Skrypty są wykonywane wewnątrz określonej aplikacji.
• Język skryptowy działający po stronie przeglądarki jest
najważniejszym elementem dynamicznego HTML.
HTML, CSS i co dalej? - JavaScript
Jest obiektowym, skryptowym językiem programowania
nawiązującym do języka C.
Jest językiem interpretowalnym, co oznacza, że efekty jego użycia
możemy zobaczyć bez konieczności kompilowania kodu.
Potrzebna jest tylko przeglądarka internetowa, która obsługuje język
JavaScript.
Tworzony skrypty zapewniają interaktywność strony internetowej
poprzez reagowanie na zdarzenia, budowanie elementów nawigacji
oraz sprawdzanie poprawności formularzy.
HTML, CSS i co dalej? - JavaScript
Typowe zastosowania jężyka JavaScript:
• Modyfikowanie wyglądu bieżącego dokumentu.
• Wyświetlanie prostych okien dialogowych.
• Kontrola poprawności wypełniania formularza.
• Manipulowanie informacją dotyczącą daty i czasu.
• Lokalne generowanie dokumentów HTML.
JavaScript w HTML
Kod źródłowy napisany w języku JavaScript może być umieszczony
wewnątrz dokumentu HTML między znacznikami <script> i
</script>.
Znaczniki skryptu mogą być wstawiane w dowolnym miejscu
dokumentu, ale zalecane jest umieszczanie ich na początku strony
w sekcji <head> . W obrębie strony można używać znaczników
skrypt wielokrotnie np w sekcjach <head> i <body>.
Skrypt umieszczony w dokumencie HTML
Instrukcja document.write()
Instrukcja document.write() zapisuje ciąg tekstowy w
dokumencie HTML i najczęściej jest używana do testowania.
Dokument jest to obiekt JavaScript, który reprezentuje aktualnie
wyświetlaną stronę, natomiast write() to jego metoda, czyli funkcja
wykonująca określone działania na obiekcie– w tym wypadku
wypisuje ona tekst.
Tekst umieszczamy w nawiasach, to argument wywołania metody.
obiekt.metoda(argumenty metody);
Dodawanie nagłówka h1
Dodawanie linku za pomocą JavaScript
Dodawanie liczby całkowitoliczbowej lub
zmiennoprzecinkowej
Argumentem metody write() może być ciąg powstały z połączenia tekstu i
wartości zmiennych
Składnia języka JavaScript

Składnia języka jest ściśle określonym zbiorem


reguł, których należy przestrzegać. W języku
JavaScript instrukcje zawierają wyrażenia, słowa
kluczowe i komentarze wyrażeniach występują
zmienne, operatory. Do elementów języka należy
również zbiór predefiniowanych obiektów i funkcji
na przykład tablica data funkcje matematyczne.
Instrukcje
Instrukcje w języku JavaScript mogą być pisane pojedynczo, w jednym
wierszu lub w kilku wierszach. Średnik odgrywa rolę ogranicznika
instrukcji ale nie jest wymagany, jeżeli po instrukcji wystąpi znak nowego
wiersza. Jeśli kilka instrukcji zostanie zapisanych w jednym wierszu,
muszą być one oddzielone średnikiem.
Język javascript ignoruje powtarzające się spacja. Spacje można
umieszczać w dowolnych miejscach, aby zwiększyć czytelność skryptu.
Wskazany jest wstawianie spacji wokół operatorów =, +, -, *, /.
var c = a + b;
Instrukcje mogą być grupowane w bloki za pomocą nawiasów
klastrowych {}. Instrukcje zgrupowane w bloki są wykonywane razem
jedna po drugiej.
Wielkość liter
w języku javascript rozróżniana jest wielkość liter oraz wspierany
jest standard znaków unicode. w kodzie skryptu przy zapisywaniu
nazw stosuje się następujące zasady:
• słowa kluczowe pisane są małymi literami na przykład for.
• nazwy obiektów wbudowanych pisane są od dużej litery, a
pozostałe litery są małe, na przykład Date.
• nazwy obiektów DOM zapisywane są małymi literami, ale w
nazwach metod tych obiektów dopuszczane są małe i duże
litery, na przykład toLowerCase.
• białe znaki, typu spacja, znak tabulacji itp., są nieistotne.
Słowa kluczowe
Słowa kluczowe określają czynności, które powinny zostać
wykonywane przez instrukcję zawierającą te słowa słowa kluczowe
są słowami zastrzeżonymi i nie mogą być nazwami zmiennych.
Komentarze
komentarze są ignorowane w trakcie przetwarzania kodu mogą być
umieszczane w dowolnym miejscu kodu komentarzem jest każdy
wiersz rozpoczynający się od znaku //.
//Tu znajduje się komentarz
a = b + c; //suma wartości
Komentarze wieloliniowe
Jeśli komentarz zawiera wiele wierszy, można użyć ograniczników /*
( do rozpoczęcia komentarza) i */ ( do zakończenia komentarza).
tak zapisany komentarza dopuszczane są tylko wewnątrz
znaczników <script></script>
Najczęściej stosowane są komentarze jedno wiersza owe.
Natomiast komentarze blokowe są wykorzystywane w
dokumentacjach.
Zmienne
Zmienne służy do przechowywania danych i wyników w celu dalszego ich
wykorzystania. W języku javascript zmienne deklaruje się za pomocą
słowa kluczowego var poprzedzającego nazwę zmiennej można również
stosować nowy sposób deklaracji zmiennej za pomocą słowa
kluczowego let. Nazwa zmiennej może zawierać litery, cyfry oraz znak
podkreślenia, natomiast nie może zaczynać się od cyfry.
wielkość liter używanych w nazwach ma znaczenie tworzone zmienne nie
mają określonego typu. Typ jest przepisywany do zmiennej po nadaniu jej
wartości. Typ danych nie jest przypisany do zmiennej na stałe i może
ulegać zmianie. Dobrą praktyką jest deklarowanie wszystkich zmiennych
na początku skryptu.
Po deklaracji zmienna nie ma wartości do przepisania i wartości służy
operator =.
Zmienne
W podanym przykładzie zmiennym x i y zostały
przypisane ciągi znaków i połączony ciąg
znaków został wyświetlony na ekranie.
Następnie zmiennej y przypisano wartość
liczbową i ponownie połączony ciąg znaków
został wyświetlony na ekranie zmienna y
zmienia swój typ w zależności od typu
przepisanych wartości.
Zadanie
Utwóz zmienne: nazwisko, imie, wiek, klasa. Przypisz tym zmiennym
przykładowe dane. Wyświetl w przeglądarce internetowej
informację o treści:
Uczeń naszej szkoły nazywa się (tu powinno pojawić się imię i
nazwisko).
Uczęszcza do klasy (tu powinna pojawić się klasa).
Ma (tu powinien pojawić się wiek) lat.
Skalarne typy danych
Język javascript jest językiem słabo typowa, co oznacza, że w
momencie deklarowania zmiennej nie trzeba określać jej typu.
Dopuszczane są następujące typy danych:
• typ liczbowy number,
• typ łańcuchowy string,
• typ logiczny boolean,
• typ null,
• typ undefined.
string:
var a = "warszawa";
var b = 'Kraków';
boolean:
var k = true;
var l = false;
null:
Typ określa wartość pustą. Nie przechowuje żadnej wartości. W języku JavaScript ten typ
danych jest obiektem.
undefined:
Jest to typ zawierający zmienne, którym nie została nadana żadna wartość. Wartość oraz typ
zmiennej są nieznane, na przykład var x.
Zmiennej x nie przypisano wartości. Ma typ i wartość undefined.
Złożone typy danych
W języku javascript zostały zdefiniowane również złożone typy
danych oznacza to, że wewnątrz nich można przechowywać więcej
niż jedną wartość. Takie zmienne są obiektami i są typu
referencyjnego. Zmienne obiektowe nie mają przypisanej
bezpośrednio wartości, tylko wskazują adres w pamięci, gdzie dane
są przechowywane.
Obiekty
Służą do reprezentacji obiektów. Wykorzystywane są obiekty
wbudowane oraz udostępnione przez przeglądarkę właściwości
obiektów są przepisywane w nawiasach klastrowych jako para
nazwa:wartość i są oddzielane przecinkami.
Tablice
Służą do przechowywania wielu wartości. Tablice są zapisywane w
nawiasach kwadratowych, a elementy tablicy są oddzielone
przecinkami.
Operatory arytmetyczne
Operatory arytmetyczne
Operatory porównania
Porównanie i identyczność
Instrukcje warunkowe
Pętle - for
Pętle typu for wykorzystuje się, gdy znana jest liczba wykonań pętli
oraz znany jest warunek, który musi zostać spełniony, aby kolejny
raz wykonać pętlę.
Składnia instrukcji:
for(wyrażenie początkowe; wyrażenie końcowe; wyrażenie
modyfikujące){
blok instrukcji;
}
Użycie pętli for
Zagnieżdżone pętle for
Zadanie: Liczby parzyste w przedziale
Napisz program, który wypisze wszystkie liczby parzyste w
przedziale od 1 do 100.
Zadanie: Liczby parzyste w przedziale
Napisz program, który wypisze wszystkie liczby parzyste w
przedziale od 1 do 100.
Zadanie FizzBuzz
Napisz program, który dla liczb od 1 do 50:
• wypisze "Fizz" dla liczb podzielnych przez 3,
• wypisze "Buzz" dla liczb podzielnych przez 5,
• wypisze "FizzBuzz" dla liczb podzielnych przez 3 i 5 jednocześnie,
• wypisze samą liczbę w innych przypadkach.
Zadanie: FizzBuzz
Zadanie: Suma liczb naturalnych
Napisz program, który obliczy sumę liczb naturalnych od 1 do 100.
Zadanie: Suma liczb naturalnych
Napisz program, który obliczy sumę liczb naturalnych od 1 do 100.
Zadanie: Tabliczka mnożenia (Pętla
zagnieżdżona)
Napisz program, który wypisze tabliczkę mnożenia od 1 do 10.
Zadanie: Tabliczka mnożenia (Pętla
zagnieżdżona)
Napisz program, który wypisze tabliczkę mnożenia od 1 do 10.
Zadanie: Znajdź liczby pierwsze
Napisz program, który znajdzie wszystkie liczby pierwsze w
przedziale od 2 do 50. Liczba pierwsza to taka, która dzieli się tylko
przez 1 i samą siebie.
Zadanie: Znajdź liczby pierwsze
Napisz program, który znajdzie wszystkie liczby pierwsze w
przedziale od 2 do 50. Liczba pierwsza to taka, która dzieli się tylko
przez 1 i samą siebie.
Zadanie: Wypisz liczby nieparzyste z pętli
zagnieżdżonej
Napisz program, który dla każdej liczby od 1 do 10, sprawdzi, czy
jest nieparzysta. Jeśli tak, wypisze wszystkie liczby od 1 do tej liczby.
Zadanie: Wypisz liczby nieparzyste z pętli
zagnieżdżonej
Napisz program, który dla każdej liczby od 1 do 10, sprawdzi, czy
jest nieparzysta. Jeśli tak, wypisze wszystkie liczby od 1 do tej liczby.
Zadanie: Znajdź największą liczbę
Napisz program, który znajdzie największą liczbę w tablicy liczb [10,
25, 8, 15, 42, 17].
Zadanie: Znajdź największą liczbę
Napisz program, który znajdzie największą liczbę w tablicy liczb [10,
25, 8, 15, 42, 17].
Zadanie: Kalkulator potęg
Napisz program, który dla danej liczby x i potęgi n, obliczy wartość
x^n.
Zadanie: Kalkulator potęg
Napisz program, który dla danej liczby x i potęgi n, obliczy wartość
x^n.
Zadanie: Obliczanie średniej z liczb w tablicy
indeksowej
Opis zadania:
Napisz program, który:
1. Utworzy tablicę indeksową zawierającą różne typy danych
(liczby, napisy, wartości logiczne).
2. Obliczy średnią wszystkich liczb w tej tablicy, ignorując inne typy
danych.
3. Wyświetli wynik.
Zadanie: Wyszukiwanie elementów o
konkretnym typie w tablicy indeksowej
Opis zadania: Napisz program, który:
1. Utworzy tablicę indeksową zawierającą różne typy danych.
2. Wyświetli wszystkie napisy (typ string) z tej tablicy.
Zadanie: Wyszukiwanie elementów o
konkretnym typie w tablicy indeksowej
Opis zadania: Napisz program, który:
1. Utworzy tablicę indeksową zawierającą różne typy danych.
2. Wyświetli wszystkie napisy (typ string) z tej tablicy.
Zadanie: Dodawanie i usuwanie elementów z
tablicy indeksowej
Opis zadania: Napisz program, który:
1. Utworzy tablicę indeksową zawierającą różne typy danych.
2. Doda dwa nowe elementy do tablicy (liczbę i napis).
3. Usunie ostatni element z tablicy za pomocą metody .pop().
4. Wyświetli zawartość tablicy.
Zadanie: Zliczanie wystąpień danego typu
danych w tablicy indeksowej
Opis zadania: Napisz program, który:
1. Utworzy tablicę indeksową zawierającą różne typy danych.
2. Zliczy, ile w tej tablicy znajduje się liczb, napisów oraz wartości
logicznych.
3. Wyświetli wynik zliczania.

You might also like