Cw.12 JAVAScript w dokumentach HTML Wstawienie skryptu do dokumentu HTML JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.skrypty Java- Script mogą być zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są między znacznikami <SCRIPT> i. instrukcje Javascript oddzielane średnikami Przykład: Najprostsze wykorzystanie skryptu Javascript w dokumencie HTML: <HTML><HEAD><TITLE>Cw. Javascript</TITLE></HEAD> <BODY> //to jest komentarz do końca wiersza //obiekt document i jego metoda write pozwalają na // wypisanie tekstu w dokumencie html document.write ("To jest zwykły tekst<br />"); document.write("wiersz <BR /> kolejny wiersz"); document.write ("<BR />"); // wysyłamy znacznik html x=5; //przypisujemy wartość zmiennej y=3.5; z=3e5;// a to jest zmienna o wartości 350000 suma=x+y+z; //... i wyświetlamy jej wartość document.write("wartość zmiennej <I>suma</I> : "+suma); document.write ("<P>To jest liczba PI:"+Math.PI+"</P>"); <P style="color:navy;font-size:17px">a to jest zwyczajny HTML poza skryptem</p> </P> </BODY> </HTML> Zadanie Wykonać w przeglądarce test powyższego kodu Javascript i zrozumieć jego działanie. Uwagi: Internet Explorer wymaga potwierdzenia pierwszego wykonania skryptu. Błędy w skryptach można obejrzeć w konsoli błędów po kliknięciu w ikonkę ekranu (lub F12 Narzędzia developerskie/skrypt). w lewym dolnym rogu 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) Przykłady: document.write ("Tekst"); document.write (z); //wartość zmiennej z document.write (3*z); //wartość wyrażenia document.write ("<BR />Wartość zmiennej:", z);// tekst (też znaczniki HTML) i wartość zmiennej Uwaga: elementy w nawiasie oddzielamy przecinkami lub znakami + Wypisanie informacji w okienku alert (elementy) Przykłady: x=12345; alert ("Tekst"); alert (x); //wartość zmiennej x alert ("Wartość x wynosi:"+ x);// tekst i wartość (połączone znakiem +) Interaktywne podawanie wartości zmienna = prompt ("Tekst zachęty"); Metoda prompt powoduje otwarcie okienka do wpisania wartości. Wartość zmiennej jest typu tekstowego, aby wykonywać działania arytmetyczne należy skonwertować ją na liczbę wykorzystując funkcję Number. Prześledzić i zrozumieć przykład: x= prompt ("Podaj x:"); y= prompt ("Podaj y:"); z=x+y; document.write(z, "<BR>"); //tu zadziała "sklejenie" v=number(x)+number(y); document.write(v, "<BR>");//tu dodawanie arytmetyczne 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 = ale też operatory dwuznakowe: ++ -- += -= *= /= x = 7; y = 45.78; x++; //zwiększ x o 1 x =4; //zmniejsz x o 4 y*=3; //pomnóż y przez 3 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 ==!=(nierówne) <= < > >= x>3 y!=(x+2) Porównanie dwóch wyrażeń arytmetycznych (wyrażenie logiczne - warunek) przyjmuje wartość logiczną: true (prawda) lub false (fałsz). Operatory logiczne koniunkcja && alternatywa negacja! Tymi operatorami łączymy dwa lub więcej warunków. document.write((x>5)&&(y<=8)); /*prawda, jeśli obydwa warunki prawdziwe, czyli jeśli wartość zmiennej x należy do przedziału (5, 8] */ Funkcje arytmetyczne wbudowane (metody obiektu Math) Math.sin (kąt w radianach) Math.cos (kąt w radianach) Funkcje trygonometryczne Math.tan (kąt w radianach) Math.sqrt(wyrażenie) Math.pow(podstawa, wykładnik) Math.exp(wykładnik) Math.log(wyrażenie) Math.abs(wyrażenie) Math.random() Math.round(wyrażenie) Math.ceil(wyrażenie) Math.floor(wyrażenie) Number (tekst) Pierwiastek kwadratowy Potęga (uwaga: posiada dwa argumenty, może też służyć do wyznaczania pierwiastków wyższych stopni Funkcja e wykładnik Logarytm naturalny Wartość bezwzględna Generator liczby losowej z przedziału (0, 1) Zaokrąglenie do najbliższej całkowitej Zaokrąglenie do całkowitej w kierunku + Zaokrąglenie do całkowitej w kierunku - Zadanie Wypróbować w skrypcie i przeanalizować jego działanie: x=2; y=4; document.write(x+"<br />"); z= Math.sin(30*Math.PI/180); document.write("wartosc sin(30 stopni):"+z+"<br />"); document.write((x==y)+"<br />"); document.write((x>y)+"<br />"); document.write(((x<=y)&&(x<1)) +"<BR />"); document.write(!(y!=4)+"<br />"); x++; zet=math.pow(y,1/2); alert("zet="+zet); tekst="125.678"; liczba=number(tekst); wynik=math.ceil(liczba); document.write("wartosc obliczona: "+wynik); czy=wynik>zet; Zamiana tekstu na liczbę (o ile poprawny jest zapis liczby)
document.write("<br />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)+"<br/>"); document.write(math.round(1e2*liczba)/1e2+"<br/>"); document.write(math.round(1e6*liczba)/1e6+"<br/>"); 3. Wykonać w skrypcie JavaScript obliczenia dla x=1.345 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ę. Instrukcja warunkowa Stosowana do podejmowania decyzji alternatywne operacje w zależności od wartości sprawdzanego warunku(-ów). Postać instrukcji warunkowej if if (warunek1) { kod wykonywany jeżeli warunek1 spełniony else { kod wykonywany jeżeli warunek2 spełniony Można zagnieżdżać if w innym if celem sprawdzenia kilku warunków. liczba= Math.log(3); if ((liczba>0)&&(liczba<1)) document.write(">0"); else if ((liczba>=1)&&(liczba<2)) document.write(">=1 i < 2"); else document.write(">=2"); Sprawdzić i zrozumieć działanie powyższego skryptu. Instrukcja iteracyjna ("pętla") for Umożliwia wielokrotne wykonanie bloku instrukcji liczba powtórzeń uzależniona od zmian wartości zmiennej będącej licznikiem Schemat uproszczonej postaci instrukcji: for (licznik=wart_pocz; warunek kontynuacji; sposób zmiany licznika) {instrukcje powtarzane Sprawdzić i zrozumieć działanie skryptu: for (i=0; i<20; i++) {
document.write(i+"<br />"); Zagnieżdżanie pętli for: for (i=1; i<6; i++) for( k=1; k<4; k++) { document.write(i*k+"<br />"); Sprawdzić i zrozumieć działanie powyższych skryptów. Zadania do wykonania 1. Dla dowolnych wartości współczynników równania kwadratowego: a, b, c obliczyć deltę i wypisać na ekranie komunikat czy jest ona ujemna, równa zero czy dodatnia (wykorzystać instrukcję if). 2. Wykonać pętlę w której na stronie wypisywane są liczby parzyste od 0 do 100. 3. Wykonać pętlę która utworzy przy pomocy znaczników HTML obramowaną tabelę o 1 wierszu i 20 komórkach w wierszu. W komórkach umieścić liczby naturalne od 1 do 20. 4. Wykonać pętlę wypisującą wszystkie wartości funkcji sin(x) dla kątów od 0 d 90 0 z krokiem 1 0 spełniające warunek sin(x) (0.3, 0.6). 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