1 / 15

Wstęp do JavaScriptu

Wstęp do JavaScriptu. Marek Magiera. Październik 2003r. JavaScript Interpretowany przez klienta Tworzy skrypty, które mogą być bezpośrednio wstawiane do stron HTML Zorientowany obiektowo Łatwy. Java Wykonywany przez klienta

jermaine-conrad
Download Presentation

Wstęp do JavaScriptu

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Wstęp do JavaScriptu Marek Magiera Październik 2003r.

  2. JavaScript Interpretowany przez klienta Tworzy skrypty, które mogą być bezpośrednio wstawiane do stron HTML Zorientowany obiektowo Łatwy Java Wykonywany przez klienta Tworzy "aplety", które są wywoływane ze strony HTML, ale nie umieszczane w niej Oparty na obiektach Wymaga doświadczenia programistycznego JavaScript a Java

  3. Język zorientowany obiektowo – co to znaczy?(1) Obiekty Elementy występujące w danym środowisku • koty, komputery, samochody itp. Obiekty powinny posiadać indywidualne nazwy (nie kot1 a np. mruczek) Obiekty w JavaScript Elementy występujące w oknie przeglądarki www • okna, formularze, przyciski itp. posiadające indywidualne nazwy (nie przycisk1 a np. przyciskZamknij)

  4. Język zorientowany obiektowo – co to znaczy?(2) Właściwości Obiekty mają właściwości • koty – futerko, pazurki, brzuch • komputery – myszkę, klawiaturę itp. Obiekty można zmieniać modyfikując ich właściwości. Niektóre właściwości mogą być obiektami. Przykładowa właściwość o nazwana pusty może być stosowana tam gdzie ma sens. Brzuch może być pusty, ale futerko – już niebardzo (co to byłby za kot?). Właściwości w JavaScript • formularze - elementy itp. • okna – PasekStanu, PasekNarzędzi

  5. Język zorientowany obiektowo – co to znaczy?(3) Metody Obiekty potrafią coś robić i to nazywamy metodami • koty – mruczą, drapią • komputery – liczą, zawieszają się itp. Obiekty i właściwości to rzeczowniki a metody czasowniki. Metody w JavaScript • okna – otworzyć( ), zminimalizować( ) Nawiasy ( ) oznaczają, że jest mowa o metodzie, a nie o właściwości.

  6. Język zorientowany obiektowo – co to znaczy?(4) Łączenie obiektów, właściwości i metod stosowane jest aby lepiej opisać obiekt lub proces. • kot.mrucz( ) • kot.łapy.przednie.lewa.drap( ) A w JavaScript • okno.zamknij( ) • formularz.elementy.przyciskOpcji.kliknij( ) • dokument.obrazek.nazwa.ukryj( ) • dokument.wypisz( ) Zapis taki nazywamy składnią kropkową.

  7. Język zorientowany obiektowo – co to znaczy?(5) Zdarzenia Jeśli kot „obsługuje” zdarzenie przyGłaskaniu( ) może wykonać • kot.mrucz( ) • kot.łapy.przednie.lewa.nieDrap( ) A w JavaScript Zdarzenia to czynności wykonywane przez użytkownika podczas odwiedzania strony www. Przesłanie formularza wywoła zdarzenie onClick( ) • formularz.elementy.przyciskOpcji.kliknij( )

  8. Jak umieszcza się skrypty w dokumencie HTML?(1) W znacznikach SCRIPT <script language="JavaScript" type="text/javascript"> <!-- Tutaj polecenia skryptu... // --> </script>Cały skrypt jest objęty znakami komentarza (<!-- i -->), co gwarantuje, że kod nie zostanie wyświetlony na ekranie nawet przez stare przeglądarki nie obsługujące JS.

  9. Jak umieszcza się skrypty w dokumencie HTML?(2) Z atrybutem np. onClick itp. W zasadzie wszystkie elementy dokumentu HTMLgenerują pewne zdarzenia, gdy wystąpią określoneokoliczności. Z tymi zdarzeniami można powiązać polecenia JS. A to inne zdarzeniaonMouseOver onMouseOut (najechanie i zjazd z obiektu) onMouseDownonMouseUp (wcisnięcie i puszczenie przycisku)onFocus onBlur (wybranie i opuszczenie danego pola formularza)onLoad onUnload onAbort <IMG SRC=„obraz.gif" onClick="polecenie 1;polecenie 2; polecenie 3">

  10. Jak umieszcza się skrypty w dokumencie HTML?(3) Z osobnego pliku stosujemy gdy skrypt, którego chcemy używać ma dosyć dużą objętość, a korzystamy z niego na kilku podstronach naszego serwisu www • większa czytelność kodu • łatwiejsza modyfikacja skryptu • mniejsza objętość serwisu <script src="plik.js" language="JavaScript"></script>

  11. Przykłady skryptów (1) <HTML><HEAD> <TITLE>Mój pierwszy skrypt</TITLE></HEAD><BODY BGCOLOR=WHITE> <H2> <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> document.write("Elo Ziom!") </SCRIPT> </H2></BODY></HTML>

  12. Przykłady skryptów (2) <HTML><HEAD> <TITLE>Mój drugi skrypt</TITLE></HEAD><BODY BGCOLOR=#FFCCAA> <H2> <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> document.write ("<FONT COLOR=Red><B>Witaj </B> </FONT>"); </SCRIPT> </H2></BODY></HTML>

  13. Przykłady skryptów (3) <HTML><HEAD> <TITLE>Mój trzeci skrypt</TITLE></HEAD><BODY BGCOLOR=#FFCCAA> <H2> Data ostatniej poprawki <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">document.write (document.lastModified); </SCRIPT> </H2></BODY></HTML>

  14. Przykłady skryptów (4) <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> <!-- Ukrycie skryptu przed starszymi przeglądarkamiif (navigator.appName == "Netscape") { document.write("Korzystasz z Netscape Navigatora.") } else { document.write("Nie używasz Netscape'a - może powinieneś?") } // Koniec ukrywania skryptu przed starszymi przeglądarkami --></SCRIPT>

  15. Przykłady skryptów (5) <HTML><HEAD> <TITLE>Mój czwarty skrypt</TITLE></HEAD> <BODY> <p align="center"> <FORM> <INPUT TYPE="button" VALUE="Napisz do mnie" onClick="parent.location.href='mailto:twoj@adres.pl'"> </FORM> </p></BODY></HTML>

More Related