JAVAScript w dokumentach HTML (1) JavaScript

jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty

JavaScript mogą być zagnieżdżane w dokumentach HTML. Instrukcje JavaScript umieszczane są między znacznikami i . instrukcje Javascript oddzielane średnikami

Przykład: Dokument HTML wyposażony w skrypt Javascript: Cw. Javascript //to jest komentarz //obiekt document i jego metoda write pozwalają na // wypisanie tekstu w dokumencie html document.write ("To jest zwykły tekst
"); document.write("wiersz
kolejny wiersz");// w tekście mogą być znaczniki HTML x=5; //przypisujemy wartość zmiennej y=3.5; z=3e5;// a to jest zmienna o wartości 350000 czyli 3*105 suma=x+y+z; // ... i wyświetlamy jej wartość na stronie document.write("Wartość zmiennej suma : ", suma); // ... albo w okienku alert("Wartość zmiennej suma : ", suma); A to jest zwyczajny HTML poza skryptem

Uwagi: • •

Internet Explorer wymaga potwierdzenia pierwszego wykonania skryptu. Błędy w skryptach można obejrzeć w konsoli błędów uruchamianą klawiszem F12 – Narzędzia developerskie/Skrypt.

Zadanie 1. Wykonać test powyższego kodu Javascript i zrozumieć jego działanie. 2. Napisać skrypt, który po nadaniu długości dla podstawy i wysokości trójkąta obliczy i wypisze na ekranie jego pole powierzchni.

Uwagi: JavaScript rozróżnia wielkość liter. Zmienna o nazwie x i zmienna X to dwie różne zmienne. W nazwach obiektów i metod (Math, PI, document, write) nie wolno zmieniać wielkości liter. Instrukcje wykonawcze języka oddzielamy średnikami (jeśli zapisujemy w tym samym wierszu). Blok instrukcji otaczamy klamrami { } – zazwyczaj w ciele funkcji, instrukcjach warunkowych i iteracyjnych. Komentarze: od znaków // do końca wiersza, otoczone - /* tekst jedno lub wielowierszowy */

Zasady tworzenia skryptów JavaScript JavaScript rozróżnia wielkość liter. Zmienna o nazwie x i zmienna X to dwie różne zmienne. W nazwach obiektów i metod (Math, PI, document, write) nie wolno zmieniać wielkości liter. Instrukcje wykonawcze języka oddzielamy średnikami (jeśli zapisujemy w tym samym wierszu). Blok instrukcji otaczamy klamrami { } – zazwyczaj w ciele funkcji, instrukcjach warunkowych i iteracyjnych. Komentarze: • od znaków // do końca wiersza, • pomiędzy znakami /* i */

Wypisanie informacji na stronie document.write (elementy) Elementem może być zmienna o znanej wartości, wyrażenie, dowolny tekst otoczony apostrofami (') lub w cudzysłowie ("). Elementy oddzielamy przecinakami lub znakiem +. Znaczniki HTML mogą być tekstem lub fragmentem tekstu. Przykłady: z=3.456; document.write ("Tekst
"); document.write ('Wynik:'+z+"
"); //wypisz wartość zmiennej z document.write (3*z); //wypisz wartość wyrażenia document.write ("
Wartość zmiennej:", z);// tekst (też znaczniki HTML) i wartość zmiennej

Wypisanie informacji w okienku alert (elementy) Przykłady: x=12345; alert ("Tekst"); alert (x); //wartość zmiennej x alert ("Wartość x wynosi:"+ x);// teksty i wartości zawsze łączone znakiem +

Nadawanie wartości zmiennym Instrukcja przypisania (nadania wartości) zmiennej

zmienna operator przypisania wyrażenie; Obliczane jest wyrażenie (wszystkie jego elementy powinny być znane) i jego wartość nadawana zmiennej. Zmienną o określonej wartości można użyć w kolejnych wyrażeniach. Wyrażenia tworzymy podobnie jak w Excelu – stałe liczbowe, zmienne o wcześniej określonych wartościach, funkcje matematyczne – wszystko powiązane operatorami działań, dodatkowo nawiasy OKRĄGŁE. Operatory przypisania Podstawowym operatorem przypisania jest znak = Operatory dwuznakowe: += -= *= /= (zwiększ, zmniejsz o wyrażenie / pomnóż, podziel przez wyrażenie) Operatory inkrementacji i dekrementacji: ++ -(tu wyrażenie jest pomijane, bo zwiększanie i zmniejszanie jest o 1) Przykładowo: x = 7; y = –45.78; x++; //zwiększ x o 1 x–=4; //zmniejsz x o 4 y*=3; //pomnóż y przez 3 y--;//zmniejsz y o 1

Arytmetyczne operatory działań + * /

% (reszta z dzielenia)

x= (y+1)*3.5; Uwaga: znak + uzywany jest też do łączenia (konkatenacji) tekstów.

Operatory porównania wyrażeń arytmetycznych (dla konstrukcji warunków) == !=(nierówne) >= Przykłady warunków: x>0 2*x5)&&(yy)+"
"); document.write(((xzet; document.write("
wynik>zet ? "+czy);

Zadania do wykonania 1. Wykonać testy powyższych kodów JavaScript i dołączyć do projektu strony wykonywanego w czasie poprzedniego ćwiczenia. 2. Wypróbować funkcje zaokrąglania round, ceil i floor. Sprawdzić działanie skryptu: liczba= 123.1234567; document.write(Math.round(liczba)+"
"); document.write(Math.round(1E2*liczba)/1E2+"
"); document.write(Math.round(1E6*liczba)/1E6+"
");

3. Wykonać w skrypcie JavaScript obliczenia dla x=1.345 (lub podawanego w okienku prompt) i wyświetlić wynik:

3

3 − + √+3  10 +5−1

4. Napisać skrypt, w który losowana jest liczba całkowita z przedziału 100 do 200. Każde odświeżenie strony daje inną liczbę. Przykładowe pomoce internetowe do JavaScript http://www.java2s.com/Tutorial/JavaScript/CatalogJavaScript.htm http://kursy.skryptoteka.pl/kurs.php?kurs=javascript&strona=0 http://webmade.org/kursy-online/kurs-javascript.php i inne