Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje przykłady ich użycia w języku JavaScript, zna deklarację tablicy. b) Umiejętności Uczeń potrafi: stosować funkcje i właściwie używać typów danych, dokonywać konwersji typów znaków na liczby, liczb na tekst, stosować pętle i tablice. 2. Metoda i forma pracy Wykład, dyskusja, praca przy komputerze w grupach dwuosobowych. 3. Środki dydaktyczne Prezentacje multimedialne: JavaScript. Dane, zmienne i instrukcje i JavaScript. Język programowania stron HTML. 4. Przebieg lekcji a) Faza przygotowawcza Nauczyciel odczytuje listę obecności, podaje temat i cele zajęć. Uczniowie zapoznają się z typami danych, operatorami i funkcjami oraz pętlami i możliwościami języka JavaScript. Zapisują temat lekcji oraz logują się do systemu Windows. b) Faza realizacyjna Nauczyciel rozpoczyna dyskusję, zadając pytania: - Jakie są zasady umieszczania skryptów na stronach WWW? Uczniowie odpowiadają: Stosuje się kilka sposobów umieszczania skryptów na stronach WWW: umieszczanie kodu JS w pliku zewnętrznym, umieszczanie kodu JS bezpośrednio w kodzie HTML wewnątrz poleceń:
<SCRIPT LANGUAGE=JavaScript TYPE= text/javascript >... </SCRIPT> kodu JS jako obsługa zdarzenia, lub kodu JS jako adresu URL, do którego odwołuje się polecenie HTML. - W jaki sposób można wprowadzać dane na stronę internetową za pomocy języka html? Uczniowie odpowiadają: Obiektem umożliwiającym wprowadzanie danych jest Formularz, zadanie to realizuje się poleceniem: <form> </form>. Nauczyciel wyjaśnia, że jednym ze sposobów uzyskania dynamiczności strony WWW, jest zastosowanie skryptów języka JavaScript. Nauczyciel udostępnia uczniom prezentację JavaScript. Język programowania stron HTML z poleceniem powtórzenia wiadomości o zasadach. Uczniowie pracują samodzielnie przez 5-7 minut i w tym czasie: powtarzają wiadomości o zasadach wprowadzania i umieszczania skryptów, zapisują najważniejsze cechy języka JavaScript: JavaScript to skryptowy język programowania, efekty wykonania są widoczne w oknie przeglądarki internetowej, dzięki zastosowaniu skryptów strona staje się dynamiczna, istnieje możliwość reagowania na zdarzenia np. kliknięcie obiektu, wpisania danych formularza, język JavaScript posiada kolekcję obiektów i działa na obiektach. Nauczyciel przypomina przykłady zastosowania skryptów na stronach: sprawdzenie poprawności wprowadzanych danych, stworzenie listy kontaktów. Nauczyciel wyjaśnia konstrukcje języka, omawia: pętle, operatory, funkcje, korzystając z prezentacji multimedialnej: JavaScript. Dane, zmienne i instrukcje. Następnie nauczyciel prezentuje skrypty do wykonywania obliczeń na stronie WWW. Przypomina algorytm Euklidesa. Omawia zadanie dla uczniów, zawarte na karcie pracy (załącznik). Uczniowie wykonują polecenia i zapisują efekty swojej pracy w pliku. c) Faza podsumowująca Nauczyciel podsumowuje wiadomości o funkcjach i pętlach języka JavaScript. Uczniowie zapisują notatkę:. Właściwości określają pewne atrybuty obiektów. Metoda definiuje akcje (czynności), jakie można wykonać na obiekcie. Każdy obiekt może reagować na zdarzenia zdefiniowane dla danego obiektu. 5. Bibliografia 1. Negrino T., Smith D., Po prostu JavaScript, Helion, Gliwice 1999. 2. strony www: http://www.diversity.pl/index.php?option=com_content&task=view&id=53&itemid=121
http://js.webinside.pl/. 6. Załączniki a) Karta pracy ucznia Funkcje i instrukcje języka JavaScript 1. Przygotuj w podanych niżej krokach sprawdzanie poprawności wprowadzanych danych podobne do przykładu: 2. Otwórz notatnik i wpisz polecenia początku strony WWW oraz tytuł wyświetlający napis: Algorytm Euklidesa w kolorze granatowym, dużą czcionką. 3. Posiłkując się poleceniami zapisanymi poniżej, utwórz formularz. <FORM NAME="formularz"> <INPUT TYPE="text" NAME="wartoscA" VALUE="0" SIZE=4><BR> <INPUT TYPE="text" NAME="wartoscB" VALUE="0" SIZE=4> <INPUT TYPE="button" VALUE="NWP" onclick="nwp(this.form)"> <INPUT TYPE="text" NAME="wynik" SIZE=6><BR> </FORM> 4. W polu HEAD wpisz skrypt: <SCRIPT language="javascript"> function nwp(formularz) {
var a, b, c, d; c=formularz.wartosca.value; a=parseint(c); d=formularz.wartoscb.value; b=parseint(d); while (a!=b) {if (a<b) {b=b-a else {a=a-b document.formularz.wynik.value=a; //koniec kodu JavaScript --> </SCRIPT> 5. Zapisz plik pod nazwą: algorytm_euklidesa_nazwisko.html w folderze wskazanym przez nauczyciela. b) Zadanie domowe Zaplanuj możliwość wykonania kalkulatora w języku JavaScript. Skorzystaj z funkcji dodawania: function dodaj (formularz) { var a, b; a=formularz.wartosca.value; b=formularz.wartoscb.value; document.formularz.wynik.value=parseint(a)+parseint(b); oraz formularza: <FORM NAME="formularz"> <table width=30%><tr><td>liczba1<td> <INPUT TYPE="text" NAME="wartoscA" VALUE="0" SIZE=4><tr><td>liczba2<td> <INPUT TYPE="text" NAME="wartoscB" VALUE="0" SIZE=4><tr><td> <td> <INPUT TYPE="button" VALUE="Sumuj" onclick="dodaj(this.form)"><tr><td>wynik:<td> <INPUT TYPE="text" NAME="wynik" SIZE=6></table> </FORM> 7. Czas trwania lekcji 2 x 45 minut 8. Uwagi do scenariusza Uczniowie powinni znać już język HTML oraz znać sposoby tworzenia formularzy w HTML. Do pełnego wykorzystania środków dydaktycznych wskazany jest projektor multimedialny.