Programowanie obiektowe ćw.1 JAVAScript w dokumentach HTML - przypomnienie JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Instrukcje JavaScript umieszczane są między znacznikami <SCRIPT> i. instrukcje Javascript oddzielane średnikami Przykład: Dokument HTML wyposażony w skrypt Javascript: <HTML><HEAD><TITLE>Cw. Javascript</TITLE></HEAD> <BODY> //to jest komentarz //obiekt document i jego metoda write pozwalają na // wypisanie tekstu w dokumencie html Uwagi: document.write ("To jest zwykły tekst<br />"); document.write("wiersz <BR /> kolejny <I>wiersz</I>");// w tekście znaczniki 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ść na stronie document.write("wartość zmiennej <I>suma</I> : ",suma); //... albo w okienku alert("wartość zmiennej <I>suma</I> : "+suma); <P style="color:navy;font-size:17px">a to jest zwyczajny HTML poza skryptem</p> </BODY> </HTML> 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 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 zestaw instrukcji definicji funkcji, instrukcjach warunkowych i iteracyjnych. Komentarze: jednowierszowy - od // do końca wiersza, wielowierszowy - /* komentarz */
Instrukcja przypisania (nadania wartości) zmiennej zmienna operator przypisania [wyrażenie]; (Wyrażenie jest pomijane dla operatorów ++ i ==). 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ń w wyrażeniu arytmetycznym + - * / % (reszta z dzielenia) Uwaga: znak + używany 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*x<=y x!=6 Warunki dają wartość logiczną (true lub false). Operatory logiczne (złączenie warunków) koniunkcja && alternatywa negacja! Instrukcje Istrukcja if...else Instrukcja if sprawdza warunek - jeśli jest on prawdziwy wykonywane są instrukcje; używamy (opcjonalnie, może nie występować) klauzuli else aby wykonać inne instrukcje jeśli warunek jest fałszywy. Instrukcja if ma postać: if (warunek) { instrukcje else { inne instrukcje Przykład: <HTML> x=5; if (x==0)
x++; else document.write("x różne od 0"); if (x==5) x--; document.write(x); </BODY> </HTML> Instrukcja for Pętla for jest powtarzana aż do momentu, kiedy testowany warunek staje się fałszywy. W JavaScript pętla for jest składniowo podobna do pętli w Java i C. Instrukcja pętli for wygląda następująco: for (przypisanie; warunek; zmiana) { Instrukcje Wykonywane są kolejno: 1. Inicjalizacja wyrażenia przypisanie. 2. Obliczenie wyrażenia warunek. Jeśli wartość warunek jest prawdziwa, instrukcja jest wykonana. Jeśli wartość warunek jest fałszywa, pętla for jest przerwana. 3. Wykonywanie instrukcji wewnętrznych. 4. Aktualizacja wyrażenia zmiana, i przejście do kroku drugiego. Przykład: Wykonać i zrozumieć działanie skryptu: for (i=1;i<11;i++) document.write( (i%3),"<br>"); for (i=10;i>=0;i--) document.write( (i%2),"<br>"); Instrukcja while Działa identycznie jak pętla while w Pascalu. Instrukcja while wykonuje instrukcje tak długo, dopóki warunek będzie prawdziwy. Instrukcja pętli while wygląda następująco: while (warunek) { instrukcje Test warunku ma miejsce przed wykonaniem instrukcji. Jeśli warunek będzie prawdziwy, instrukcje są wykonywane i ponownie jest badany warunek. Jeśli warunek będzie fałszywy, wykonywanie pętli jest zatrzymanie i następuje przejście o następnej instrukcji po instrukcji while. Przykład Następująca pętla while wykonuje iterację (powtarza) gdy warunek jest spełniony (n jest mniejsze od 10): n = 0; x = 0; while( n < 10 ) { n ++; x += n; document.write(x+"<br>"); Obiekt Math Obiekt Math przechowuje wartości matematyczne, gromadzone jako właściwości i metody. Są tutaj przechowywane pewne stałe i funkcje matematyczne. Składnia: Math.property lub Math.method, gdzie property lub method jest jednym z podanych niżej elementów.
Właściwości (stałe): E e - stała Eulera, która wynosi ok. 2.718 LN2 logarytm naturalny dwóch, tj. ok. 0.693 LN10 logarytm naturalny z dziesięciu, tj. ok. 2.302 LOG2E logarytm o podstawie 2 z liczby Eulera, czyli ok. 1.442 LOG10E logarytm o podstawie 10 z liczby Eulera, czyli ok. 0.434 PI wartość liczby π, czyli ok. 3.14159 SQRT1_2 pierwiastek kwadratowy z 0.5, czyli ok. 0.707 SQRT2 pierwiastek kwadratowy z 2, czyli ok. 1.414 Funkcje arytmetyczne (metody predefiniowanego obiektu Math) Math.sin (kąt w radianach) Math.cos (kąt w radianach) 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) Funkcje trygonometryczne Pierwiastek kwadratowy Potęga (uwaga: posiada dwa argumenty, może też służyć do wyznaczania pierwiastków wyższych stopni Funkcja e x Logarytm naturalny Wartość bezwzględna Generator losowy - losuje liczbę 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 - 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; document.write("<br />wynik>zet? ",czy); Zadania do wykonania 1. Wykonać testy powyższych kodów JavaScript. Zamiana tekstu na liczbę (o ile poprawny jest zapis liczby)
2. Wypróbować właściwości (stałe) obiektu Math E, LOG2E, LN10 i inne. 3. 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/>"); 4. Wykonać w skrypcie JavaScript obliczenia dla x=1.345 i wyświetlić wynik: 3 3 + +3 10 +5 1 5. 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ę. Definicja i wykonanie własnej funkcji Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy definiować metody obiektowe. Funkcje definiowane zawierają pewien kod, który może być wielokrotnie wykonywany z różnymi argumentami. Zwykle umieszczamy je między znacznikami <SCRIPT> w sekcji HEAD. Pozwala to na załadowanie ich na samym początku, aby dowolny skrypt na stronie mógł rozpocząć pracę, gdy użytkownik zacznie przeglądać stronę. Można jednak definiować funkcje w ramach jednego znacznika <SCRIPT> i tam je wykorzystywać. Mogą być również zapisane w osobnym pliku, np. plik.js wówczas należy w dokumencie HTML w sekcji HEAD umieścić zapis: <SCRIPT type="text/javascript" src="./plik.js" /> Funkcje są definiowane przez określenie ich nazwy, argumentów i sposobu działania. Przykład Funkcja o nazwie srednia ma obliczyć średnią arytmetyczną podanych ogólnie liczb a i b: function srednia(a,b){ x=(a+b)/2; return x; //a teraz dwukrotne wykonanie funkcji document.write(srednia(5, 9)); document.write(srednia(3.6, 3.8)); To co funkcja ma zrobić po wywołaniu, jest zdefiniowane między nawiasami {. Po słowie kluczowym return określamy co ma zwrócić wykonanie funkcji (tu:obliczoną wartość x), stąd w dalszej części skryptu zwróconą wartość funkcji wyświetlamy z wykorzystaniem document.write. Funkcja może oczywiście niczego nie zwracać, jedynie wykonać jakąś akcję, np.: function komunikat(a){ alert(a); document.write(komunikat("uwaga!!")); Tu odbyło się przekazanie tekstu do funkcji. Zadanie Utworzyć skrypt, którego zadaniem będzie wykorzystanie własnej funkcji obliczającej sumę kolejnych N liczb naturalnych. Obliczyć te sumy dla N=20 i N=40;
Interakcyjne wykonywanie funkcji Można wykonać funkcję na rozkaz użytkownika, umieszczając ją w atrybucie onclick dowolnego elementu (znacznika): Przykład Sprawdzić działanie skryptu wykorzystującego własną funkcję nacisnij, wykonywaną bez argumentów. <HTML> <HEAD> <SCRIPT language="javascript"> //definicja funkcji function nacisnij( ) { document.write("witaj!"); </HEAD> <BODY> <FORM> //wykorzystanie funkcji <INPUT type="button" name="button1" value="ok" onclick="nacisnij( );"> </FORM> </BODY> </HTML> Zwróćmy uwagę na przypisanie wykonania funkcji do atrybutu onclick obiektu INPUT. Zadanie Wypróbować powyższy przykład oraz wzbogacić definicję funkcji dowolny argument (tekstowy, numeryczny) przekazywany do funkcji i stworzyć dwa przyciski wykorzystujące funkcję z różnymi wartościami argumentów. Metoda alert powinna wyświetlać wartość przekazanego argumentu.