Prezentowane materiały są przeznaczone dla uczniów szkół ponadgimnazjalnych Autor artykułu: mgr Jerzy Wałaszek |
©2016 mgr
Jerzy Wałaszek
|
JavaScript jest pełnoprawnym językiem programowania, który można z powodzeniem wykorzystywać do wszelkich obliczeń o rozsądnej złożoności. Typowy program obliczeniowy działa wg poniższego schematu:
Chcąc zaprojektować stronę WWW, która za pomocą JavaScript przeprowadza jakieś obliczenia, musimy rozwiązać trzy problemy:
|
|||||||||||||||||||||||||||||||||||||||||||||
Tworzenie przykładowej strony ze skryptemDo odczytania danych ze strony WWW wykorzystamy tzw. formularze. Formularz jest obiektem HTML, który udostępnia różnego rodzaju pola tekstowe dla użytkownika. W polach tych można umieszczać swoje dane. Uruchom edytor Microsoft Expression Web 4. W menu wybierz opcję
Site → New Site
W okienku dialogowym, które się pojawi, wybierz One Page Site, a następnie w polu Location ustal katalog, gdzie ma powstać nowa witryna. Gdy zakończysz, kliknij przycisk OK. Zostanie utworzona witryna w podanym katalogu. Pojawi się w nim również plik o nazwie default.html. Kliknij ten plik prawym przyciskiem myszki i wybierz z menu kontekstowego opcję Rename (zmiana nazwy), a następnie zmień nazwę na index.html. Kliknij dwukrotnie myszką w nazwę pliku, co spowoduje jego załadowanie do edytora. W edytorze wybierz na spodzie zakładkę Code, aby uzyskać dostęp do kodu strony.
Teraz krok po kroku utworzymy odpowiedni kod dla strony. Nasza strona będzie odczytywała od użytkownika dwie wartości liczbowe, które posłużą do wygenerowania na stronie ciągu kolejnych liczb naturalnych. Specjalnie nie tworzymy skomplikowanego kodu, aby skupić się na elementach interfejsu. Z menu wybierz opcję: Format → Properties... Pojawi się okienko własności strony. Wypełnij pola wg poniższego obrazka: Location: określa położenie edytowanej strony na dysku komputera. Tego pola nie zmieniaj. Title: definiuje tytuł strony, który pojawi się na zakładce strony w przeglądarce. Page description: zawiera opis strony. Informacje te są wykorzystywane przez różne serwisy wyszukiwawcze w Internecie, np. przez Google. Keywords: zawiera słowa kluczowe, które ułatwią użytkownikom znalezienie twojej strony w sieci. Po wypełnieniu pól kliknij zakładkę Language. Wypełnij pola wg poniższego obrazka:
Zatwierdź okienko, klikając w przycisk OK. Kod strony powinien się zmienić następująco:
Zapisz plik strony, naciskając klawisze Ctrl+S. Teraz przejdziemy do tworzenia treści naszej strony. Ustaw kursor pomiędzy znacznikami <body> i </body> i wpisz <div></div>. Znacznik ten obejmuje obszar strony, w którym możesz umieszczać inne znaczniki.
Teraz zdefiniujemy sobie styl znacznika, czyli wygląd objętego przez niego obszaru strony WWW. Edytor Expression Web posiada wygodne narzędzia do umieszczania stylów na stronach WWW. Dzięki nim nie musisz pamiętać nazw stylów ani ich składni. Kliknij znacznik <div> prawym przyciskiem myszki i z menu kontekstowego wybierz opcję Tag properties... Pojawi się okienko modyfikacji stylu znacznika. Kliknij przycisk Format i wybierz opcję Paragraf.... Pojawi się nowe okienko dialogowe, w którym możesz zdefiniować sposób wyświetlania tekstu w obszarze objętym znacznikiem <div>. W polu Alignment (ułożenie) ustaw Center (na środku). Zatwierdź zmiany przyciskiem OK. Okienko zniknie i wrócisz do okna modyfikacji stylu. Oprócz ułożenia tekstu zmodyfikujemy również kolor tła obszaru objętego znacznikiem <div>. Ponownie kliknij w przycisk Format, a następnie wybierz Borders and Shading.... W nowym okienku wybierz zakładkę Shading i w polu Background Color zdefiniuj jakiś delikatny kolor dla tła: Zatwierdź okienko przyciskiem OK i tak samo zrób z okienkiem modyfikacji stylu. W kodzie strony pojawi się:
Efekt tych operacji możesz podglądnąć przełączając na dole zakładkę na Design. Pomiędzy znacznikami <div> i </div> wpisujemy znacznik <form>, w którym dodatkowo umieszczamy atrybut name określający jego nazwę w dokumencie strony:
Znacznik <form> tworzy na stronie WWW tzw. formularz. W formularzu możesz umieszczać różne pola danych oraz przyciski, którymi steruje użytkownik. Za pomocą formularza będziemy pobierać dane od użytkownika. Pomiędzy znacznikami <form> i </form> wpisz znacznik <p> z następującą treścią:
Efekt możesz zobaczyć, przełączając się u dołu na zakładkę Design lub wyświetlając stronę w przeglądarce, np. Firefox. Zapisz stronę na dysku (Ctrl+S), po czym kliknij u góry ekranu w strzałeczkę obok ikony przeglądarki i z listy wybierz odpowiednią przeglądarkę stron WWW. W efekcie zostanie uruchomiona wybrana przeglądarka stron WWW i zobaczysz w niej swoją stronę:
Teraz dodamy do formularza elementy czynne. Będzie nam potrzebny panel z elementami formularza (można je wpisywać ręcznie, ale wtedy musisz znać ich składnię, dlatego lepiej korzystać z gotowych narzędzi). Z menu wybierz opcję: Insert → HTML → More HTML Tags... Powinien pojawić się panel Toolbox, w którym znajdziesz tzw. kontrolki formularza (Form Controls), czyli elementy, za pomocą których użytkownik może wprowadzać informację. Pod wpisanym akapitem wpisz kolejny akapit z tekstem Od:
Po słówku Od wpisz jedną spację, po czym kliknij w dwukrotnie w ikonę Input (Text) na panelu Toolbox. Na pozycji kursora zostanie wstawiony znacznik <input ...>, który oznacza pole tekstowe formularza.
Kliknij ten znacznik prawym przyciskiem myszki i z menu kontekstowego wybierz opcję Tag Properties.... W okienku dialogowym wypełnij pola wg poniższego obrazka: Pole Name pozwoli ci na dostęp do tego pola formularza z poziomu skryptu JS. Pole Initial Value określa tekst, który pojawi się początkowo w tym polu. Oczywiście użytkownik będzie go mógł sobie zmienić. Zatwierdź okienko przyciskiem OK. Kod powinien teraz wyglądać następująco:
Przejdź kursorem na koniec znacznika, wciśnij klawisz Enter i w nowym wierszu dopisz dalszą część formularza. Wpisz słowo do ze spacją, po czym ponownie kliknij w ikonę Input (Text). Wejdź do własności znacznika i zmień nazwę na inp_to, a wartość początkową (ang. Initial Value) na 100. Po zatwierdzeniu przyciskiem OK powinieneś otrzymać kod:
Dokonaj podglądu swojej strony WWW. Zapisz plik (Ctrl+S), przejdź do przeglądarki WWW i odśwież widok strony (F5). Powinno to wyglądać następująco:
Teraz do formularza dodamy przycisk, którego kliknięcie wywoła funkcję o nazwie Show(). Samą funkcję zdefiniujemy za chwilę. Umieść kursor za znacznikiem </p> drugiego paragrafu i wciśnij klawisz Enter, aby dodać pusty wiersz. Następnie w panelu Toolbox kliknij ikonę Input (Button). W kodzie strony pojawi się następny znacznik <input...>, który reprezentuje przycisk.
Kliknij ten znacznik prawym przyciskiem myszki i z menu kontekstowego wybierz opcję Tag Properties.... Ustaw pola wg poniższego obrazka: Zatwierdź okienko przyciskiem OK. Następnie na końcu znacznika dopisz obsługę zdarzenia onclick:
Formularz jest prawie gotowy. Pozostało nam jedynie dodanie na końcu akapitu, w którym będziemy umieszczali wynik działania skryptu. Nie można tutaj zastosować metody write, ponieważ działa ona tylko przy ładowaniu strony. Dopisz ostatni akapit:
W paragrafie tym umieściliśmy atrybut id, który określa identyfikator dla znacznika. Dzięki temu identyfikatorowi będziemy mogli łatwo odwołać się do niego w naszym skrypcie. Interfejs jest gotowy i powinien wyglądać następująco: Teraz przystąpimy do tworzenia skryptu, który po kliknięciu w przycisk Pokaż ciąg odczyta dane z elementów formularza i wyświetli ciąg liczb naturalnych w podanych granicach. W pod formularzem wpisz znacznik <script>:
Wewnątrz skryptu wpisujemy kod funkcji Show(), która będzie wywołana po kliknięciu przycisku Pokaż ciąg na naszym formularzu:
Przyjrzyjmy się elementom, które pojawiły się w tym skrypcie:
Zapisz plik na dysku, przejdź do strony WWW, odśwież ją, wpisz w pola wybrane wartości i kliknij przycisk Pokaż ciąg.
|
|||||||||||||||||||||||||||||||||||||||||||||
Bardziej użyteczny skrypt – obliczanie pierwiastków równania kwadratowegoWstaw do kodu strony następujący formularz (do utworzenia formularza wykorzystaj poprzedni przykład):
Formularz nazwij eq2. Linię rozdzielającą uzyskasz za pomocą znacznika <hr>. Na formularzu eq2 powinny się znaleźć następujące elementy:
Na końcu strony wstaw skrypt:
Zasada działania operatora +: Jeśli wszystkie argumenty są liczbami, to operator wykonuje dodawanie arytmetyczne: 1 + 55 = 56 Jeśli jeden z argumentów jest tekstem, operator przekształca wszystkie liczby w tekst i łączy znaki w jeden wspólny ciąg: 1 + "abc" = "1abc" |
I Liceum Ogólnokształcące |
Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl
W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe