Cw.12 JAVAScript w dokumentach HTML
Transkrypt
Cw.12 JAVAScript w dokumentach HTML
Cw.12 JAVAScript w dokumentach HTML Wstawienie skryptu do dokumentu HTML JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.Skrypty JavaScript mogą być zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są między znacznikami <SCRIPT> i </SCRIPT>. <SCRIPT LANGUAGE="JavaScript"> instrukcje Javascript oddzielane średnikami </SCRIPT> Przykład: Najprostsze wykorzystanie skryptu Javascript w dokumencie HTML: <HTML><HEAD><TITLE>Cw. Javascript</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> //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>"); </SCRIPT> <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: <SCRIPT LANGUAGE="JavaScript"> 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 </SCRIPT> 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: ++ -- += -= 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 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) <= < > >= Przykładowo: 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. Przykładowo: 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) Pierwiastek kwadratowy Potęga (uwaga: posiada dwa argumenty, może też służyć do wyznaczania pierwiastków wyższych stopni Funkcja ewykł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 -∞ Number (tekst) Zamiana tekstu na liczbę (o ile poprawny jest zapis liczby) Zadanie Wypróbować w skrypcie i przeanalizować jego działanie: <SCRIPT LANGUAGE="JavaScript"> 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; document.write("<BR />wynik>zet ? "+czy); </SCRIPT> 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: <SCRIPT LANGUAGE="JavaScript"> 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/>"); </SCRIPT> 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. <SCRIPT LANGUAGE="JavaScript"> 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"); </SCRIPT> 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: <SCRIPT LANGUAGE="JavaScript"> for (i=0; i<20; i++) { document.write(i+"<BR />"); } </SCRIPT> Zagnieżdżanie pętli for: <SCRIPT LANGUAGE="JavaScript"> for (i=1; i<6; i++) for( k=1; k<4; k++) { document.write(i*k+"<BR />"); } </SCRIPT> 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 900 z krokiem 10 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