PROGRAMOWANIE STRON INTERNETOWYCH JĘZYK (X)HTML. Agenda wykładu. Zaliczenie przedmiotu Kolokwium z wykładu na ostatnich zajęciach!!!

Transkrypt

1 Programowanie Stron Internetowych 2 PROGRAMOWANIE STRON INTERNETOWYCH dr inż. Łukasz Bartczuk bartczuk@kik.pcz.pl Katedra Inżynierii Komputerowej Politechnika Częstochowska p. 517 Agenda wykładu Język (X)HTML Podstawy Obsługa formularzy Kaskadowe arkusze styli Podstawy Model pudełkowy Język JavaScript Podstawy Programowanie obiektowe w JavaScript Dom obiektowy model dokumentu Biblioteki JavaScript JQuery Ajax po stronie przeglądarki Optymalizacja stron internetowych Optymalizacja rozmiaru strony SEO Search Engine Optimization Programowanie Stron Internetowych 3 Zaliczenie przedmiotu Kolokwium z wykładu na ostatnich zajęciach!!! Ocena końcowa będzie średnią arytmetyczną ocen: z laboratorium z kolokwium z wykładu wykładu JĘZYK (X)HTML Podstawy 1

2 Programowanie Stron Internetowych 6 Programowanie Stron Internetowych 7 Przeglądarki internetowe Internet Explorer - Windows Mozilla Firefox Windows, Linux/Unix, Mac Przeglądarki internetowe wrzesień-2011 wrzesień % 2% 4% 2% 23% Internet Explorer 31% 18% 31% Firefox Chrome 40% Safari 45% Opera Internet Explorer Firefox Chrome Safari Opera Opera Windows, Linux/Unix, Mac wrzesień-2009 wrzesień-2008 Google Chrome Windows, Linux/Unix, Mac Safari Windows, Mac 47% 4% 2% 7% 40% Internet Explorer Firefox Chrome Safari Opera 43% 3% 3% 2% 49% Internet Explorer Firefox Chrome Safari Opera Programowanie Stron Internetowych 8 Programowanie Stron Internetowych 9 Składowe strony internetowej Struktura strony internetowej Wygląd (CSS) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> Struktura (XHTML) Dokument Funkcjonalność (JavaScript) <html xmlns=" <head> <title>tytuł strony</title> </head> <body> Zawartość strony... </body> </html> 2

3 Programowanie Stron Internetowych 10 Programowanie Stron Internetowych 11 Deklaracja DOCTYPE Tryby renderowania w przeglądarkach <!DOCTYPE html PUBLIC Nazwa elementu głównego PUBLIC / SYSTEM "-//W3C//DTD XHTML 1.0 Transitional//EN" Identyfikator publiczny (Public Identifier) " transitional.dtd"> 1. Standard 2. Almost standard 3. Quirks Mode Adres URL dokumentu DTD (System Identifier) Programowanie Stron Internetowych 12 Programowanie Stron Internetowych 13 Tryb standard Tryb almost standard <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 3

4 Programowanie Stron Internetowych 14 Programowanie Stron Internetowych 15 Tryb Quirks Mode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> Blok <head> 1. meta 2. title 3. link 4. script 5. style Brak deklaracji DOCTYPE Programowanie Stron Internetowych 16 Programowanie Stron Internetowych 17 Blok <head> <meta name="department" content="katedra Inżynierii Komputerowej /> <meta name="author" content="jan Kowalski" /> <meta name="robots" content="noindex, follow" /> <meta name="description" content="opis strony" /> <meta name="keywords" content="xhtml,css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="refresh" content="300" /> Znaczniki HTML Podstawowe Struktura Formatowania Formularze <!DOCTYPE>,<html>,<body>,  <h1>-<h6>,<p>,<div>,<span>, <br />,<hr/> <acronym>,<abbr>,<address>,<b>, <bdo>,<big>,<blockquote>,<code>, <del>,<dfn>,<em>,<i>,<ins>,<kbd>, <pre>,<q>,<samp>,<small>,<strong>, <sub>,<sup>,<tt>,<u>,<var> <form>,<input>,<textarea>,<button>, <select>,<optgroup>,<option>, <label>,<fieldset>,<legend> Tabele <table>,<caption>,<th>,<tr>,<td>, <thead>,<tbody>,<tfoot>,<col />, <colgroup> 4

5 Programowanie Stron Internetowych 18 Programowanie Stron Internetowych 19 Znaczniki HTML Podstawowe formatowanie tekstu Listy <ul>,<ol>,<li>,<dl>,<dt>,<dd> Styl czcionki: Moduły tekstu: Programowanie <script>,<noscript>,<object>,<param /> pogrubienie <b></b> wyróżnienie <em></em> Obrazy Metadane <img />,<map>,<area /> <head>,<title>,<meta>,<base /> kursywa <i></i> podkreślenie <u></u> przekreślenie <s></s> cytowanie <cite></cite> kod maszynowy <code></code> z klawiatury <kbd></kbd> Style <style> krój maszynowy <tt></tt> przykład <samp></samp> wzmocniony <strong></strong> Linki <a>, <link /> zmienna <var></var> Programowanie Stron Internetowych 20 Programowanie Stron Internetowych 21 Elementy blokowe i liniowe Elementy blokowe są to elementy, które umieszczane są jeden pod drugim. Elementy liniowe są to elementy, które umieszczane są jeden obok drugiego. Rysunki Znacznik <img /> <img src="rys.jpg" /> <img src="rys.jpg" alt="rysunek"/> 5

6 Programowanie Stron Internetowych 22 Programowanie Stron Internetowych 23 Tabele - 1 <table border="1"> <caption>podpis</caption> <tr><th>nagłówek 1</th> <th>nagłówek 2</th> <th>nagłówek 3</th> </tr> <tr><td>11</td> <td>12</td> <td>13</td> </tr> <tr><td>21</td> <td>22</td> <td>23</td> </tr> <tr><td>31</td> <td>32</td> <td>33</td> </tr> </table> Tabele 2 (łączenie komórek) W pionie atrybut rowspan <table border="1"> <tr><td rowspan="2">11</td> <td>12</td> <td>13</td> </tr> <tr><td>22</td> <td>23</td> </tr> <tr><td>31</td> <td>32</td> <td>33</td> </tr> </table> Programowanie Stron Internetowych 24 Programowanie Stron Internetowych 25 Tabele 3 (łączenie komórek) W poziomie atrybut colspan <table border="1"> <tr><td colspan="2">11</td> <td>13</td> </tr> <tr><td>21</td> <td>22</td> <td>23</td> </tr> <tr><td>31</td> <td>32</td> <td>33</td> </tr> </table> Tabele 4 Atrybuty znacznika table: border określa grubość ramki zewnętrznej cellpadding określa obszar pomiędzy ramką i zawartością komórki cellspacing określa przestrzeń wewnątrz ramki <table border="5" cellpadding="10" cellspacing="5"> </table> 6

7 Programowanie Stron Internetowych 26 Linki zewnętrzne <a href="adres_strony.html">link</a> wewnętrzne <a href="#nazwa">link</a> do określonego miejsca na stronie FORMULARZE HTML <a href="adres_strony.html#nazwa">link</a> Programowanie Stron Internetowych 28 Programowanie Stron Internetowych 29 Składowe formularzy Znacznik <form> Elementy formularza pole tekstowe pole hasła obszar tekstowy pole wyboru pole opcji lista rozwijana pole wyboru pliku pole ukryte przyciski etykiety grupy Znacznik form Wyznacza ramy formularza Może zawierać następujące atrybuty: action najczęściej określa adres, pod który ma być wysłany formularz (pole obowiązkowe) method wyznacza metodę przesłania formularza enctype wyznacza sposób kodowania danych <form action="zatwierdz.php" method="get"> </form> 7

8 Programowanie Stron Internetowych 30 Programowanie Stron Internetowych 31 Znacznik input Odpowiada za wygenerowanie na stronie większości pól formularza. Może zawierać następujące atrybuty: type określa rodzaj pola name określa nazwę pola disabled określa aktywność pola (disabled = "disabled") Pole może zawierać również inne atrybuty w zależności od wartości atrybutu type Znacznik input type="text" Wstawia do formularza pole pozwalające na wprowadzenie jednej linii tekstu. Może zawierać następujące atrybuty: value pozwala na ustawienie domyślnej wartości pola size pozwala na określenie ile znaków będzie jednocześnie widocznych w polu maxlength pozwala na określenie ile znaków można wprowadzić do pola readonly pozwala na określenie czy pole ma być tylko do odczytu readonly="readonly" Programowanie Stron Internetowych 32 Programowanie Stron Internetowych 33 Znacznik input type="text" <form action="zapisz.php" method="post"> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" id="imie" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" id="nazwisko" maxlength="20" /> </div> </form> Znacznik input type="password" Wstawia do formularza pole pozwalające na wprowadzenie jednej linii tekstu, który będzie widoczny jako "*". Może zawierać takie same atrybuty jak pole <input type="text" /> z wyjątkiem atrybutu value. 8

9 Programowanie Stron Internetowych 34 Programowanie Stron Internetowych 35 Znacznik input type="password" <form action="zapisz.php" method="post"> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" maxlength="20" /> </div> <div> <label for="haslo">hasło:</label> <input type="text" name="haslo" size="10" maxlength="20" /> </div> </form> Znacznik input type="checkbox" Wstawia do formularza pole pozwalające na wybranie zero lub więcej z n opcji. Może zawierać następujące atrybuty: value pozwala na rozróżnienie poszczególnych opcji checked pozwala na określenie czy pole ma być domyślnie zaznaczone name pola logicznie ze sobą połączone powinny mieć tę samą nazwę Programowanie Stron Internetowych 36 Programowanie Stron Internetowych 37 Znacznik input type="checkbox" Znacznik input type="radio" <form action="zapisz.php" method="post"> <div> Ulubiony sport:<br /> <input type="checkbox" name="sport" value="koszykówka" /> Koszykówka <input type="checkbox" name="sport" value="paralotnie" /> Paralotnie <input type="checkbox" name="sport" value="snowboard" /> Snowboard </div> </form> Wstawia do formularza pole pozwalające na wybranie jednej i tylko jednej z n opcji. Może zawierać następujące atrybuty: value pozwala na rozróżnienie poszczególnych opcji checked pozwala na określenie czy pole ma być domyślnie zaznaczone name pola logicznie ze sobą połączone powinny mieć tę samą nazwę 9

10 Programowanie Stron Internetowych 38 Programowanie Stron Internetowych 39 Znacznik input type="radio" <form action="zapisz.php" method="post"> <div> Ulubiony sport:<br /> <input type="radio" name="sport" value="koszykówka" /> Koszykówka <input type="radio" name="sport" value="paralotnie" /> Paralotnie <input type="radio" name="sport" value="snowboard" /> Snowboard </div> </form> Znacznik input type="file" Wstawia do formularza pole pozwalające na wybranie pliku i przesłanie go na serwer. Może zawierać następujące atrybuty: size pozwala na określenie ile znaków będzie jednocześnie widocznych w polu accept pozwala na określenie jakie pliki mogą być akceptowane przez pole (Uwaga! należy podać typ MIME) Programowanie Stron Internetowych 40 Programowanie Stron Internetowych 41 Najpopularniejsze typy MIME Rozszerzenie MIME Nazwa *.css text/css Cascading Style Sheets *.csv text/csv Comma Separated Values *.doc application/msword MS Word Document *.gif image/gif Graphic Interchange Format *.htm, *.html text/html HyperText Markup Language *.jpe,*.jpeg,*.jpg image/jpeg JPEG *.js text/javascript, application/javascript JavaScript *.json application/json JavaScript Object Notation *.mp3 audio/mpeg MPEG Audio Stream, Layer III *.mpeg, *.mpg video/mpeg MPEG Video Stream, Layer II *.pdf application/pdf Portable Document Format *.png image/png Portable Network Graphics *.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow *.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation *.rtf application/rtf, text/rtf Rich Text Format *.tif, *.tiff image/tiff Tagged Image Format File *.txt text/plain Plain Text *.xls application/vnd.ms-excel MS Excel Spreadsheet *.zip aplication/zip Compressed Archive Znacznik input type="file" <form action="zapisz.php" method="post" enctype="multipart/form-data"> <div> Wybierz zdjęcie: <input type="file" name="zdjecie" accept="image/jpg,image/gif,image/png"/> </div> </form> 10

11 Programowanie Stron Internetowych 42 Programowanie Stron Internetowych 43 Znacznik input type="file" Znacznik input type="hidden" Wstawia do formularza pole ukryte. Może zawierać następujące atrybuty: value pozwala na określenie wartości przechowywanej w polu. <form action="zapisz.php" method="post"> <input type="hidden" value="12" name="id"/> </form> Programowanie Stron Internetowych 44 Programowanie Stron Internetowych 45 Znacznik textarea Wstawia do formularza pole pozwalające na wprowadzenie tekstu zawierającego wiele linii Może zawierać następujące atrybuty: Znacznik textarea <form action="zapisz.php" method="post"> <div> Podaj treść wiadomości:<br /> <textarea name="tresc" rows="10" cols="40" ></textarea> </div> </form> cols liczba kolumn, które mogą zmieścić się w polu bez przewijania rows liczba wierszy, które mogą zmieścić się w polu bez przewijania 11

12 Programowanie Stron Internetowych 46 Programowanie Stron Internetowych 47 Znacznik select Znacznik select Wstawia do formularza pole pozwalające na wybranie jednej lub wielu opcji z dostępnej listy Może zawierać następujące atrybuty: multiple określa czy możliwy jest wybór jednej czy wielu opcji (multiple="multiple") size liczba opcji widocznych bez przewijania Poszczególne opcje wprowadzamy za pomocą znacznika <option>. Opcje domyślne oznaczamy atrybutem selected="selected". Każdej opcji można przypisać inną wartość atrybutem value Istnieje możliwość grupowania opcji. Realizuje się to przez znacznik <optgroup>, który może przyjmować jeden atrybut label, określający nazwę grupy. Programowanie Stron Internetowych 48 Programowanie Stron Internetowych 49 Znacznik select Znacznik select <form action="zapisz.php" method="post"> <div>wybierz rok:<br /> <select name="rok"> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011" selected="selected">2011</option> </select> </div> </form> <form action="zapisz.php" method="post"> <div>wybierz rok:<br /> <select name="rok" multiple="multiple"> <option value="2009">2009</option> <option value="2010" selected="selected">2010</option> <option value="2011" selected="selected">2011</option> </select> </div> </form> 12

13 Programowanie Stron Internetowych 50 Programowanie Stron Internetowych 51 Przyciski Przyciski Do generowania przycisków można wykorzystać dwa znaczniki: <input> - w tym przypadku atrybut type należy ustawić wartość: submit, reset, button. Atrybut wartość ustawia w tym przypadku tekst na przycisku. <button> - rodzaj przycisku określa atrybut type. Zawartość przycisku podajemy pomiędzy znacznikami otwierającym i zamykającym. <form action="zapisz.php" method="post"> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" maxlength="20" /> </div> <input type="submit" value="zatwierdź" /> <button type="reset">wyczyść</button> </form> Programowanie Stron Internetowych 52 Programowanie Stron Internetowych 53 Grupowanie Grupowanie <form action="zapisz.php" method="post"> <fieldset> <legend>formularz do wypełnienia</legend> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" maxlength="20" /> </div> <input type="submit" value="zatwierdź" /> <button type="reset">wyczyść</button> </fieldset> </form> 13

14 Programowanie Stron Internetowych 55 PODSTAWY CSS Programowanie Stron Internetowych 56 Programowanie Stron Internetowych 57 Podstawowa reguła CSS Łączenie reguł selektor właściwość : wartość; właściwość : wartość; właściwość : wartość; sel1,sel2, właściwość : wartość; właściwość : wartość; właściwość : wartość; h1,h2,h3 color:blue; text-decoration:underline; h1 color:blue; text-decoration:underline; 14

15 Programowanie Stron Internetowych 58 Programowanie Stron Internetowych 59 Selektory Selektory HTML Selektory HTML Klasy ID h1 color:blue; text-decoration:underline; p color:black; text-style:italic; zależne niezależne Programowanie Stron Internetowych 60 Programowanie Stron Internetowych 61 Selektory klasy niezależne.news color:blue; text-decoration:underline; <h1 class="news">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> Selektory klasy zależne h1.news color:blue; text-decoration:underline; p.news color:black; text-style:italic; <h1 class="news">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> 15

16 Programowanie Stron Internetowych 62 Programowanie Stron Internetowych 63 Selektory klasy h1.news color:blue; text-decoration:underline; h1.newsdnia border:1px solid red p.news color:black; text-style:italic; <h1 class="news newsdnia">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> Selektory ID #newssuperwazny color:blue; text-decoration:underline; #news color:black; text-decoration:underline; <h1 id="newssuperwazny">jakiś tytuł 1</h1> <p id="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> Programowanie Stron Internetowych 64 Programowanie Stron Internetowych 65 Selektory - atrybutów Są dopasowywane do elementów posiadających określone atrybuty lub ich wartości Selektory - atrybutów input[readonly] color:blue; <input type="text" readonly="readonly" /> [atrybut] reguła jest dopasowana, gdy element ma przypisaną wartość dla atrybutu "atrybut" [atrybut=wartość] reguła jest dopasowywana, gdy atrybut "atrybut" ma dokładnie wartość "wartość". [atrybut~=wartość] reguła jest dopasowana, gdy atrybut "atrybut" ma przypisaną listę wartości oddzielonych spacjami, z których jedna jest równa "wartość" [atrybut =wartość] reguła jest dopasowana, gdy atrybut ma wartość "wartość" lub, gdy rozpoczyna się od wartości "wartość" po której występuje znak "-". a[href=" color:blue; <a href=" img[alt~="opis"] border:1px solid red; <img alt="jakiś opis" /> 16

17 Programowanie Stron Internetowych 66 Programowanie Stron Internetowych 67 Selektory - kontekst kontekst Strona jako drzewo <html> <head> <title>przykładowa strona internetowa</title> </head> element pochodny dzieci rodzeństwo <body> <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> </body> </html> Programowanie Stron Internetowych 68 Programowanie Stron Internetowych 69 Strona jako drzewo Kontekst element pochodny p span color:orange; p span text-decoration:underline; <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> 17

18 Programowanie Stron Internetowych 70 Programowanie Stron Internetowych 71 Kontekst dzieci Kontekst dzieci p span color:orange; p>span color:red; <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> Programowanie Stron Internetowych 72 Programowanie Stron Internetowych 73 Kontekst rodzeństwo Kontekst rodzeństwo span color:orange; span+span color:red; <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> 18

19 Programowanie Stron Internetowych 74 Programowanie Stron Internetowych 75 Pseudo-klasy i pseudo-elementy Pseudo-klasy połączeń Pseudo - a:link color:blue; a:visited color:orange; a:hover color:red; a:active color:green; Klasy połączeń Klasy dynamiczne Elementy <a href=" Programowanie Stron Internetowych 76 Programowanie Stron Internetowych 77 Pseudo-klasy elementów input:hover color:blue; input:active color:orange; input:focus color:red; <input type="text" /> Pseudo-elementy p:first-letter font-size:50px; color:red; float:left; margin-right:10px; p:first-line color:yellow; <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim nulla eget neque pellentesque ut vehicula massa blandit. Donec mattis condimentum pharetra. Donec nec enim sit amet arcu pretium congue eget eu neque. Donec metus enim, dignissim aliquet tempus ac, rhoncus at elit. Vivamus in felis libero, et semper elit. Quisque non orci ut sapien ultrices consectetur non nec arcu. </p> 19

20 Programowanie Stron Internetowych 78 Programowanie Stron Internetowych 79 Pseudo-elementy Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS w tagu HTML w części HEAD w osobnym pliku Programowanie Stron Internetowych 80 Programowanie Stron Internetowych 81 Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS w tagu HTML w części HEAD w osobnym pliku w tagu HTML w części HEAD w osobnym pliku <p style="color:blue;">...</p> <p style="color:blue;">...</p> <head> <style type="text/css"> p color: blue; </style> </head> 20

21 Programowanie Stron Internetowych 82 Programowanie Stron Internetowych 83 Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS w tagu HTML w części HEAD w osobnym pliku <link rel="stylesheet" type="text/css" href="/css/style.css" /> all braille embossed handheld print projection screen speech tty tv Programowanie Stron Internetowych 84 Programowanie Stron Internetowych 85 Style alternatywne Style alternatywne <link rel="stylesheet" type="text/css" href="/css/glowny.css" media="all"> <link rel="alternate stylesheet" type="text/css" href="/css/uklad1.css" media="all" title="zestaw1"> <link rel="alternate stylesheet" type="text/css" href="/css/wyglad1.css" media="all" title="zestaw1"> <link rel="alternate stylesheet" type="text/css" href="/css/uklad2.css" media="all" title="zestaw2"> <link rel="alternate stylesheet" type="text/css" href="/css/wzglad2.css" media="all" title="zestaw2"> 21

22 Programowanie Stron Internetowych 86 Programowanie Stron Internetowych 87 Rodzaje wartości akceptowanych przez CSS Rodzaje wartości akceptowanych przez CSS Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL np. bold, center, itp. text-align: center; text-align: "center"; Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL względne em ex px bezwzględne mm cm in pt pc Programowanie Stron Internetowych 88 Programowanie Stron Internetowych 89 Rodzaje wartości akceptowanych przez CSS Rodzaje wartości akceptowanych przez CSS Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL 22

23 Programowanie Stron Internetowych 90 Programowanie Stron Internetowych 91 Rodzaje wartości akceptowanych przez CSS Komentarze Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL notacja heksadecymalna: color: #808000; notacja dziesiętna: color: rgb(128,128,0); słowa kluczowe: olive CSS dopuszcza komentarze w formie: /*... */ Inne formy komentarzy np: //...,  nie są akceptowane Programowanie Stron Internetowych 93 Dziedziczenie Dziedziczenie - proces, w którym właściwości są przekazywane z elementu rodzica do elementu pochodnego div.artykul font-size: 12px; KASKADOWOŚĆ CSS <div class="artykul"> <h1>tytuł artykułu</h1> <p>lorem <b>ipsum</b> dolor sit amet,...</p> <a href="/artykul.html">pokaż cały tekst</a> </div> 23

24 Programowanie Stron Internetowych 94 Programowanie Stron Internetowych 95 Dziedziczenie Dziedziczenie - proces, w którym właściwości są przekazywane z elementu rodzica do elementu pochodnego div.artykul font-size: 120%; <div class="artykul"> <h1>tytuł artykułu</h1> <p>lorem <b>ipsum</b> dolor sit amet,...</p> <a href="/artykul.html">pokaż cały tekst</a> </div> Dziedziczenie - inherit Dziedziczenie - proces, w którym właściwości są przekazywane z elementu rodzica do elementu pochodnego div color: black; div a color: inherit; <div class="artykul"> <h1>tytuł artykułu</h1> <p>lorem <b>ipsum</b> dolor sit amet,...</p> <a href="/artykul.html">pokaż cały tekst</a> </div> p background: white inherit left top; Programowanie Stron Internetowych 96 Programowanie Stron Internetowych 97 Kolejność występowania "Ostatnie wystąpienie danej reguły zostanie zastosowane na stronie" Szczegółowość "Im bardziej szczegółowo zostanie określony selektor reguły tym większe prawdopodobieństwo jej zastosowania." div.artykul font-size: 12px; color:red div.artykul font-size: 50px; div.artykul font-size: 12px;.artykul font-size: 50px; 24

25 Programowanie Stron Internetowych 98 Programowanie Stron Internetowych 99 Szczegółowość - algorytm Szczegółowość - algorytm 1. Deklaracja atrybutu style w tagu HTML ma najwyższy stopień szczegółowości. Jeżeli nie ma takich deklaracji przejdź do kroku Oblicz liczbę selektorów ID. Reguła z największą sumą ma najwyższy priorytet. Jeżeli dwie lub więcej reguł posiada taką samą liczbę selektorów ID, przejdź do kroku Oblicz liczbę selektorów klas i pseudo-klas. Reguła z największą sumą ma najwyższy priorytet. Jeżeli dwie lub więcej reguł posiada taką samą liczbę selektorów klas i pseudo-klas przejdź do kroku Oblicz liczbę selektorów HTML i pseudo-elementów. Deklaracja z największą sumą ma najwyższy priorytet. #domowa div.artykul h2.naglowek font-size:12px; #domowa div.artykul h2 font-size:12px; w tagu HTML selektory ID selektory klas selektory HTML Programowanie Stron Internetowych 100 Programowanie Stron Internetowych 101 Szczegółowość -!important "deklaracja!important jest wykorzystywana w celu dodania dodatkowej wagi do reguły CSS." p font-size: 20px!important; color: red; Kaskadowość styli HTML Wysoki!important media kolejność w tagu HTML szczegółowość domyślny styl przeglądarki dziedziczenie Niski.zaznaczenie margin: 10px 10px 10px 10px!important 25

26 Ustawienia czcionek krój czcionki PODSTAWOWE WŁAŚCIWOŚCI CSS font-family font-family:arial,"times new roman",verdana; font-family:serif, sans-serif, monospace, handwritten, fantasy; Ustawienia czcionek krój czcionki Ustawienia czcionek rozmiar czcionki Rdzenne czcionki sieciowe Bezpieczne czcionki sieciowe font-size długość [px/em] % rozmiaru czcionki rodzica smaller larger small x-small xx-small medium large x-large xx-large font-size:12px; font-size:1.2em; font-size:x-large 26

27 Ustawienia czcionek grubość czcionki font-weight normal bold bolder lighter font-weight:bold; Ustawienia czcionek kształt czcionki font-style font-style:italic; normal italic oblique Ustawienia czcionek wariant czcionki Ustawienia czcionek font-variant font-variant:small-caps; font: <font-weight> <font-style> <font-variant> <font-size>/<line-height> <font-family> normal small-caps p font: italic normal 2em/1.5em times,serif; 27

28 Ustawienia czcionek kolor czcionki color Ustawienia tekstu wyrównanie tekstu w poziomie text-align notacja heksadecymalna color: #808000; notacja dziesiętna color: rgb(128,128,0); słowa kluczowe color: olive; left center right justify text-align:left; Ustawienia tekstu wyrównanie tekstu w pionie Ustawienia tekstu wysokość linii vertical-align line-height baseline sub super top text-top middle bottom text-bottom % wysokości linii długość vertical-align:top; normal liczba długość % rozmiaru czcionki line-height:1.2; 28

29 Ustawienia tekstu dekoracja tekstu (dodatkowy styl) Ustawienia tekstu wcięcie pierwszej linii tekstu text-decoration none line-through underline overline blink text-decoration:underline; text-indent długość % szerokości text-indent:12px; Ustawienia tekstu transformacja tekstu Ustawienia tekstu odstęp pomiędzy znakami text-transform lowercase capitalize uppercase none text-transform:lowercase; letter-spacing długość % rozmiaru czcionki letter-spacing:12px; 29

30 Ustawienia tekstu odstęp pomiędzy wyrazami word-spacing normal długość word-spacing:12px; MODEL PUDEŁKOWY Programowanie Stron Internetowych 120 Rodzaje pudełek Elementy blokowe Rodzaje pudełek Elementy blokowe generowane są jeden pod drugim i domyślnie zajmują całą szerokość pudełka "zawierającego" (np. okna przeglądarki). Blokowe Liniowe Typowe elementy blokowe to: h1-h6 p ul, ol, li div 30

31 Programowanie Stron Internetowych 123 Elementy liniowe Elementy liniowe generowane są jeden obok drugiego. Jeżeli element liniowy nie mieści się w szerokości pudełka "zawierającego" jest przenoszony do nowej linii. Ramka (border) Linia zewnętrzna (outline) Typowe elementy liniowe to: b, i, a img span Zawartość Margines (margin) Dopełnienie (padding) Programowanie Stron Internetowych 124 Programowanie Stron Internetowych 125 Model pudełkowy - właściwości Zawartość W3C bottom, clear, display, float, height, left, margin, max-height, max-width, min-hegiht, max-height, outline, overflow, padding, position, right, top, visibility, width, z-index, IE 31

32 Właściwości pudełek w CSS display inline, block, list-item, inline-block, none display:block; Właściwości pudełek w CSS width height max-width min-width max-height min-height height:10px; width:50%; compact, run-in, marker, table-header-group, table-footer-group, table, inline-table, table-caption, table-cell, table-row, table-row-group, table-column, table-column-group długość % szerokości pudełka zawierającego Właściwości pudełek w CSS overflow hidden visible scroll auto Właściwości pudełek w CSS padding długość % szerokości pudełka padding-top padding-right padding-bottom padding-left padding:10px; padding:10px 5px; padding:10px 5px 10px 5px; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; 32

33 Właściwości pudełek w CSS Właściwości pudełek w CSS margin długość % szerokości pudełka zawierającego margin-top margin-right margin-bottom margin-left margin:10px; margin:10px 5px; margin:10px 5px 10px 5px; margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; border-width Długość [px em], thin, medium, thick border-color kolor, transparent border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset Właściwości pudełek w CSS border <border-width> <border-style> <border-color> border-top border-right border-bottom border-left Właściwości pudełek w CSS background-color kolor, transparent background-image url(<adres>), none background-attachment scroll, fixed background-repeat repeat, no-repeat, repeat-x, repeat-y background-position długość, %(szer.+dop.), top, bottom, left, right, center 33

34 Właściwości pudełek w CSS background <background-color> <background-image> <background-repeat> <background-attachment> <background-position> background: yellow url(tlo.jpg) repeat-x fixed 0 left; Łączenie marginesów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <style type="text/css"> h1 margin:10px 5px 40px 5px; p margin: 50px 5px 10px 5px; </style> </head> <body> <h1>artykuł 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero. </p> </body> </html/> Łączenie marginesów Łączenie marginesów 34

35 Łączenie marginesów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <style type="text/css"> h1 margin:10px 5px 40px 5px; p margin: 50px 5px 10px 5px; div border-top:1px solid black; </style> </head> <body> <h1>artykuł 1</h1> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero. </p> </div> </body> </html/> Łączenie marginesów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <style type="text/css"> div.pojemnik margin:10px;.p11 background-color:yellow; </head> <body> <div class="pojemnik p11"> <div class="pojemnik p12"> <div class="pojemnik p13"> <div class="pojemnik p14"> <div class="pojemnik p15"> Lorem ipsum dolor sit amet,... </div> </div> </div> </div> </div> </body> </html/> Łączenie marginesów 35

36 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <style type="text/css"> div.pojemnik margin:9px; padding:1px;.p11 background-color:yellow; </head> <body> <div class="pojemnik p11"> <div class="pojemnik p12"> <div class="pojemnik p13"> <div class="pojemnik p14"> <div class="pojemnik p15"> Lorem ipsum dolor sit amet,... </div> </div> </div> </div> </div> </body> </html/> Łączenie marginesów Właściwości pudełek w CSS float left, right, none clear left, right, both, none <body> <div id="pierwszy"> <img src="duffy.png"/> <span>lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero.</span> Aliquam erat volutpat. </div> <div id="drugi"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero. Aliquam erat volutpat. Ut ornare, augue sed mollis aliquam, sem tortor semper nisi, quis egestas sem... </div> </body> 36

37 "Pływaki" "Pływaki" <img src="duffy.png" style="float:left"/> "Pływaki" "Pływaki" <div style="clear:both"/> 37

38 Właściwości pudełek w CSS position, top, left, bottom, right position static, relative, absolute, fixed top right bottom left auto, długość, % szerokości pudełka zawierającego position, top, left, bottom, right position, top, left, bottom, right 38

39 position, top, left, bottom, right Właściwości pudełek w CSS z-index auto, liczba z-index z-index

40 Programowanie Stron Internetowych 159 Stworzenie przykładowego układu Stworzenie przykładowego układu Stworzenie przykładowego układu Nagłówek Stworzenie przykładowego układu #naglowekstrony width:800px; height:50px; margin:auto; padding:10px 0px 10px 30px; background-color:rgb(255,250,166); position:relative; Kolumna lewa Kolumna prawa Kolumna lewa Kolumna prawa #naglowekstronylogo font-family:verdana; font-size:30px; Stopka ul position:absolute; right:20px; bottom:-8px; li display : inline; font-size:12px; font-family:verdana; 40

41 Stworzenie przykładowego układu Stworzenie przykładowego układu #zawartoscstrony width:800px; margin:auto; #lewakolumna width:470px; float:left; #prawakolumna width:329px; float:left; Stworzenie przykładowego układu Stworzenie przykładowego układu h2.naglowek font-family:verdana; font-size:18px; div.info font-family:verdana; font-size:11px; font-style:italic; color:rgb(150,150,150); img.fotoartykul float:left; margin:0px 10px 5px 0px; p font-family:verdana; font-size:12px; text-align:justify; padding:10px 30px 10px 10px; 41

42 Stworzenie przykładowego układu Stworzenie przykładowego układu div.zdjecia margin-bottom:10px; h2.zdjecianaglowek font-family:verdana; font-size:16px; div.zdjecie float:left; width:100px; border:1px solid gray; margin-right:5px; margin-bottom:5px; text-align:center; Stworzenie przykładowego układu Stworzenie przykładowego układu div.pusty clear:both; 42

43 Stworzenie przykładowego układu Stworzenie przykładowego układu #stopkastrony width:800px; margin:auto; font-size:10px; font-family:verdana; background-color:rgb(255,250,166); padding:10px 30px; Stworzenie przykładowego układu Mechanizm CSS Sprite 43

44 Mechanizm CSS Sprite Mechanizm CSS Sprite div.przycisk width : 50px; height : 50px; float : left; background image : url (ikony.jpg); margin left : 5px; border: 1px solid rgb (200, 200, 200); #nowy background position : 65px 7px; #zapisz background position : 9px 7px; #pogrubienie background position : 234px 225px; #kursywa background position : 290px 225px; #podkreslenie background position : 345px 225px; Programowanie Stron Internetowych 177 Historia JavaScript PODSTAWY JAVASCRIPT pierwsza połowa lat 90 - Netscape tworzy język LiveScript; 1995r. - pojawia się nazwa JavaScript; marzec 1996 r. - Netscape 2.0 z pierwszą oficjalną wersją języka; sierpień 1996 r. - IE 3.0 z językiem JScript; czerwiec 1997r. - organizacja ECMA (European Computer Manufacturers Association) zaakceptowała dokumentację Netscape i rozpoczeła proces standaryzacji. Wersja języka zgodna ze standardem nazywana jest ECMAScript v.1; czerwiec 1998 r. - poprawiona edycja standardu ECMAScript v.2; grudzień 1999 r. - nowa wersja standardu ECMAScript v.3; ECMAScript v.4 - została zarzucona; ECMAScript v.5 - prace trwają; 44

45 Programowanie Stron Internetowych 178 Programowanie Stron Internetowych 179 Zastosowania JavaScript Czego nie zrobimy w JavaScript? tworzenie rozbudowanego, webowego interfejsu użytkownika; walidacja danych wprowadzonych przez użytkownika; dynamiczne generowanie treści strony oraz obsługa efektów graficznych i animacji; otwieranie i zamykanie okien; komunikacja z obiektami Silverlight, Flash i Java; obsługa komunikacji z serwerem; pobieranie nowych obiektów na stronę internetową, bez konieczności przeładowywania całej strony (AJAX). Manipulować plikami w systemie plików; komunikować się bezpośrednio ze sprzętem; bezpośrednio operować na pamięci; komunikować się poprzez sieć (poza protokołem HTTP); otwierać okna o zbyt małym rozmiarze; ustawiać wartości pola <input type="file"/>; uzyskać dostępu do multimediów bez dodatkowych pluginów. Programowanie Stron Internetowych 180 Programowanie Stron Internetowych 181 Cechy JavaScript 1. Język interpretowany, a nie kompilowany 2. programy JavaScript najczęściej wykonywane są po stronie przeglądarki, aczkolwiek istnieje również możliwość ich stosowania po stronie serwera; a także do automatyzacji pracy w środowisku Windows. 3. Język posiada cechy następujących paradygmatów programowania: imperatywnego obiektowego funkcyjnego 4. jest to język o dynamicznym systemie typów 5. składnia podobna do języków C++, C#, Java Kod JavaScript w dokumencie HTML wewnątrz dokumentu HTML Miejsce umieszczenia kodu JavaScript W osobnym pliku 45

46 Programowanie Stron Internetowych 182 Programowanie Stron Internetowych 183 Kod JavaScript w dokumencie HTML Miejsce umieszczenia kodu JavaScript Kod JavaScript w dokumencie HTML Miejsce umieszczenia kodu JavaScript wewnątrz dokumentu HTML W osobnym pliku wewnątrz dokumentu HTML W osobnym pliku <head> <script type="text/javascript">... </script> </head> <script type="text/javasript" src="skrypty/skrypty.js"> </script> Programowanie Stron Internetowych 184 Programowanie Stron Internetowych 185 Znacznik <script> może wystąpić zarówno w nagłówku, jak i ciele strony; strona może zawierać dowolną liczbę bloków <script></script> skrypty będą wykonywane w kolejności pojawiania się na stronie, przy czym bloki skryptów, które zawarte są w nagłówku strony, będą pobrane (jeśli jest taka konieczność) i wykonane przed wygenerowaniem zawartości strony; generowanie strony zostanie wstrzymane do czasu zakończenia wykonywania skryptów. Podstawy składni JavaScript rozróżniana jest wielkość znaków; instrukcja może być zakończona średnikiem, lub znakiem nowej linii instrukcja1; instrukcja2; instrukcja3 instrukcja4 blok instrukcji musi być zawarty pomiędzy nawiasami klamrowymi ; nazwy zmiennych: mogą zawierać litery, cyfry i znak podkreślenia muszą zaczynać się od litery lub znaku podkreślenia nie mogą być słowami kluczowymi języka JavaScript 46

47 Programowanie Stron Internetowych 186 Programowanie Stron Internetowych 187 Podstawowe typy danych JavaScript typy numeryczne: całkowity, zmiennoprzecinkowy łańcuchy znaków logiczny (boolean): wartości true lub false null - wartość pusta undefined - wartość niezdefiniowana funkcje obiektowy operator typeof Typ wartości można w języku JavaScript sprawdzić za pomocą operatora typeof np: var zmienna = 12; if(typeof zmienna == "number") alert("to jest zmienna typu całkowitego"); var nazwatypu = typeof zmienna; alert(typeof nazwatypu); Programowanie Stron Internetowych 188 Programowanie Stron Internetowych 189 Instrukcje warunkowe i wyboru Instrukcja warunkowa: Wyrażenie warunkowe: Instrukcja wyboru: if(warunek) else (warunek)? wyr_tak : wyr_nie switch(wyrazenie) case wart1 : wyrazenie1; break; case wart2 : wyrazenie2; break; default : wyrazeniedom; Instrukcje interacyjne while do while for while(warunek) do while(warunek) for(inicjacja; warunek; ostatnia_inst) 47

48 Programowanie Stron Internetowych 190 Programowanie Stron Internetowych 191 Tablice Tablice Tworzenie tablicy za pomocą operatora [] var tablica = []; var tablicaliczb = [12,13,14]; var tablicaimion = ["Jan","Adam","Ewa"]; var tablicarozne = [12,"Adam",13.4] ; Tworzenie tablicy za pomocą obiektu Array var tablica1 = new Array(); var tablica2 = new Array(10); var tablica3 = new Array("Jan", 10); Dostęp do elementu tablicy za pomocą operatora [] Tablice są numerowane od 0 tablica[0] = 1; tablica[1] = 4; Tablice wielowymiarowe są tworzone jako tablice tablic: var tablicaww = [[1,2,3],[4,5,6],[7,8,9]]; alert(tablicaww[1][2]); Tablice są przekazywane do funkcji zawsze przez referencję. Programowanie Stron Internetowych 192 Programowanie Stron Internetowych 193 Tablice funkcja IE FF Deklaracja concat Array.concat(wart1, wart2,...) every Array.every(funkcja) filter Array.filter(funkcja) foreach Array.forEach(funkcja) join Array.join(ogranicznik) indexof Array.indexOf(wartość, indeks) lastindex Of Array.lastIndexOf(wartość, indeks) map Array.map(funkcja) pop Array.pop() push Array.push(wartość1, wartość2,...) Tablice funkcja IE FF Deklaracja reverse Array.reverse() shift Array.shift() slice Array.slice(poczatek, koniec) some Array.some(funkcja) sort Array.sort(funkcja) splice Array.splice(poczatek, ile, w1, w2,...) tostring Array.toString() unshift Array.unShift(wartość1, wartość2,...) valueof Array.valueOf() 48

49 Programowanie Stron Internetowych 194 Programowanie Stron Internetowych 195 Funkcje Funkcje można definiować na trzy sposoby: 1. za pomocą słowa kluczowego function function NazwaFunkcji(param1, ) 2. za pomocą wyrażenia funkcyjnego function [nazwa] (param1, ) var dodaj = function(a,b) alert(a+b); Funkcje Funkcje można definiować na trzy sposoby: 3. jako obiekt new Function("param1","param2",,"cialoFunkcji") var funkcja = new Function( "x","a,b","alert(x);" ) ; Programowanie Stron Internetowych 196 Programowanie Stron Internetowych 197 Funkcje - argumenty Do argumentów funkcji można odwołać się za pomocą nazw lub za pomocą automatycznie generowanej tablicy arguments function Dodaj(a,b) alert(a+b) function Dodaj() alert(arguments[0]+arguments[1]) Funkcje - argumenty Umożliwia to tworzenie funkcji o zmiennej liczbie argumentów: function Dodaj() var suma = arguments[0]; for(var i=1; i<arguments.length; i++) suma += arguments[i]; alert(suma); Dodaj(1,2,3); Dodaj(1,2,3,4,5,6); Dodaj("Ala", "ma", "kota"); 49

50 Programowanie Stron Internetowych 198 Programowanie Stron Internetowych 199 Funkcje - argumenty Przeciążanie funkcji: function Komunikat(tresc, oknoid) if(arguments.length == 1) alert(tresc); else var okno = document.getelementbyid(oknoid); okno.innertext = tresc; Funkcje - wartość zwracana Rezultat działania funkcji zwraca się za pomocą słowa kluczowego return function Parzysta(liczba) return (liczba%2 == 0)? true : false; Programowanie Stron Internetowych 200 Programowanie Stron Internetowych 201 Funkcje jako wartości pierwszej klasy W Scheme możliwe było: (define Funkcja (lambda (x y) (x y))) (Funkcja (lambda (s) (+ s 3)) 3) Podobny efekt można uzyskać w JavaScript: var Funkcja = function(x, y) return x(y); Funkcja (function (s) return s+3;, 3); Funkcje jako wartości pierwszej klasy function map(tablica, funkcja) for(var i=0; i < tablica.length; i++) funkcja(tablica[i], i); function pokaz(element, indeks) alert(element+" "+indeks); var tablica = [1,2,3,4,5]; map(tablica, pokaz); map(tablica, function(x) alert(x);) ; 50

51 Programowanie Stron Internetowych 202 Programowanie Stron Internetowych 203 Funkcje jako wartości pierwszej klasy function funkcjazewnetrzna() function funkcjawewnetrzna() alert("to jest funkcja wewnętrzna"); alert("to jest funkcja zewnętrzna"); funkcjawewnetrzna(); funkcjazewnetrzna(); funkcjawewnetrzna(); W tym przypadku dostaniemy błąd: "funkcjawewnetrzna is not defined" w linii 12 Domknięcia var zmiennaglobalna = 1; function jakasfunkcja(parametr) var zmiennalokalna = 2; var funkcja = function() alert("jestem");; return function (parametrwewnetrzny) var zmiennalokalnawewnetrzna = 3; funkcja(); return zmiennaglobalna + zmiennalokalna + zmiennalokalnawewnetrzna + parametr + parametrwewnetrzny; var funkcjawynikowa = jakasfunkcja(4); alert(funkcjawynikowa(5)); //"jestem" 15 Programowanie Stron Internetowych 204 Programowanie Stron Internetowych 205 Deklarowanie zmiennych Jako język o dynamicznym systemie typów, zmienne w JavaScript nie posiadają typu przypisanego na stałe. Można je zdefiniować na dwa sposoby: za pomocą słowa kluczowego var bez słowa kluczowego var Zmienne lokalne function Test() var zmienna1 = true; if(zmienna1) var zmienna2 = "ta zmienna " + "będzie widziana poza blokiem"; alert(zmienna2); 51

52 Programowanie Stron Internetowych 208 Obiekty w JavaScript OBIEKTOWA JAVASCRIPT Właściwość 1 : wartość 1 Właściwość 2 : wartość 2 Właściwość 3 : wartość 3 Właściwość 4 : wartość 4 Właściwość n : wartość n proto : null/obiekt Tworzenie obiektów w JavaScript Metoda literalna (notacja JSON) Tworzenie obiektów w JavaScript Za pomocą funkcji i operatora new var trojkat = wysokosc : 12, dlugoscpodstawy : 10, obliczpole : function() return 0.5*this.wysokosc *this.dlugoscpodstawy;, ustawienia : kolortla : "czerwony", kolorramki : "niebieski" ; function Adres() this.nazwa = "Katedra Inżynierii Komputerowej"; this.ulica = "Armii Krajowej"; this.numer = 36; this.pokazadres = function () alert(this.nazwa); var AdresKIK = new Adres(); AdresKIK.pokazAdres(); 52

53 Tworzenie obiektów w JavaScript Za pomocą funkcji i operatora new Tworzenie obiektów w JavaScript Za pomocą obiektu zdefiniowanego przez funkcję function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica; this.numer = numer; this.pokazadres = function () alert(this.nazwa); var AdresKIK = new Adres("KIK","Armii Krajowej",36); AdresKIK.pokazAdres(); function Adres(nazwa, ulica, numer) var obiekt = new Object(); obiekt.nazwa = nazwa; obiekt.ulica = ulica; obiekt.numer = numer; obiekt.pokazadres = function() alert(obiekt.nazwa); return obiekt; var adreskik = Adres("KIK","Armii Krajowej",36); adreskik.pokazadres(); Programowanie Stron Internetowych 214 Programowanie Stron Internetowych 215 Dostęp do właściwości W języku JavaScript do właściwości i metod obiektów można odwoływać się w dwojaki sposób: za pomocą notacji z kropką za pomocą notacji z nawiasami kwadratowymi trojkat.wysokosc = 4; trojkat["dlugoscpodstawy"] = 5; var pole = trojkat.obliczpole(); var pole = trojkat["obliczpole"](); trojkat["ustawienia"].kolortla = "zielony"; Nazwy właściwości obiektów W przeciwieństwie do innych języków programowania nazwy właściwości nie muszą przestrzegać konwencji nazewnictwa zmiennych var trojkat = "wysokosc trojkata"= 12, dlugoscpodstawy = 11; "!@#\$%^& " = 10 "1obliczPole" = function() return 0.5 this["wysokosc trojkata"] this.dlugoscpodstawy ; Nazwę właściwości należy ująć w cudzysłów, gdy: jest to słowo zarezerwowane w języku JavaScript zawiera spacje lub znaki specjalne, rozpoczyna się od cyfry 53

54 Programowanie Stron Internetowych 216 Programowanie Stron Internetowych 217 Dodawanie właściwości i metod Właściwości i metody można dodawać do obiektu w dowolnym momencie Usuwanie właściwości i metod Właściwości i metody można usuwać z obiektu w dowolnym momencie za pomocą operatora delete var trojkat = ; trojkat.wysokosc = 12; trojkat.dlugoscpodstawy = 10; trojkat.obliczpole = function() return 0.5 this.wysokosc this.dlugoscpodstawy; var trojkat = ; trojkat.wysokosc = 12; trojkat.pokaz = function () alert ( this.wysokosc ); ; trojkat.pokaz(); //12 delete trojkat.wysokosc; trojkat.pokaz(); //"undefined" delete trojkat.pokaz; trojkat.pokaz(); //obiekt.pokaz is not a function Programowanie Stron Internetowych 218 Programowanie Stron Internetowych 219 Słowo kluczowe this Służy do odwoływania się do obecnej instancji obiektu function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer; this.pokazdane = function() alert( this.nazwa ); var adreskik = new Adres("KIK", "Armii Krajowej", 36); adreskik.pokazdane(); Słowo kluczowe this function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer;... var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adreskik = Adres("KIK", "Armii Krajowej", 36); adreskik.pokazdane(); Jeżeli wywołamy "funkcję tworzącą" obiekt bez słowa kluczowego new, wtedy this odnosi się do obiektu globalnego window. 54

55 Programowanie Stron Internetowych 220 Programowanie Stron Internetowych 222 Właściwości i metody prywatne Właściwości i metody prywatne w JavaScript można symulować przy wykorzystaniu closures. function Adres(nazwa, ulica, numer) var zmiennaprywatna = 12; this.nazwa = nazwa;... this.pokazdane = function () alert(zmiennaprywatna); alert(this.nazwa); var adreskik = new Adres("KIK", "Armii Krajowej", 36); adreskik.pokazdane(); alert(adreskik.zmiennaprywatna); //undefined Listowanie właściwości W JavaScript jest możliwość przejścia po wszystkich właściwościach obiektu za pomocą specjalnej postaci funkcji for for(var klucz in obiekt) alert(klucz); Nie wszystkie właściwości da się przejrzeć w ten sposób Programowanie Stron Internetowych 223 Programowanie Stron Internetowych 224 Metoda hasownproperty Właściwość constructor Każdy obiekt w JavaScript ma dostęp do właściwości constructor, która wskazuje na funkcję tworzącą tego obiektu Metoda hasownproperty pozwala sprawdzić, czy dana właściwość pochodzi bezpośrednio z obiektu, czy też z jednego z obiektów znajdujących się w łańcuchu obiektów var adreskik = new Adres("KIK", "Armii Krajowej", 36); alert(adreskik.constructor); var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adresicis = new adreskik.constructor( "ICIS", "Dąbrowskiego", 73); adresicis.pokazdane(); 55

56 Programowanie Stron Internetowych 225 Programowanie Stron Internetowych 226 Właściwość prototype Właściwość prototype function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer; this.miasto = "Częstochowa "; this.pokazdane = function() alert ( this.nazwa ); var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adresicis = new Adres("ICIS", "Dąbrowskiego", 73); adreskik.pokazdane(); adresicis.pokazdane(); :adreskik nazwa ulica numer miasto pokazdane :adresicis nazwa ulica numer miasto pokazdane Programowanie Stron Internetowych 227 Programowanie Stron Internetowych 228 Właściwość prototype Właściwość prototype Właściwości i metody mogą być dodawane również do specjalnej właściwości "funkcji tworzącej" prototype function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer; Adres.prototype.pokazDane = function() alert (this.nazwa); Adres.prototype.miasto = "Częstochowa"; 56

57 Programowanie Stron Internetowych 229 Programowanie Stron Internetowych 230 Właściwość prototype Właściwość prototype var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adresicis = new Adres("ICIS", "Dąbrowskiego", 73); alert(adreskik.miasto); alert(adresicis.miasto); adreskik.pokazdane(); alert(adreskik.miasto); alert(adresicis.miasto); adreskik.pokazdane(); :adreskik nazwa ulica numer :adresicis nazwa ulica numer :Adres prototype :obiekt miasto pokazdane alert(alertkik.constructor.prototype.miasto); adreskik.constructor.prototype.pokazdane(); Programowanie Stron Internetowych 231 Programowanie Stron Internetowych 232 Właściwość proto Właściwość constructor alert(adreskik.hasownproperty("constructor")); //false :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :obiekt miasto pokazdane alert(adres.prototype.hasownproperty("constructor")); //true :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :obiekt miasto pokazdane constructor 57

58 Programowanie Stron Internetowych 233 Programowanie Stron Internetowych 234 Właściwość hasownproperty alert(adreskik.hasownproperty("constructor")); //false alert(adres.prototype.hasownproperty("constructor")); //true Właściwość proto var adreskik = new Adres("KIK", "Armii Krajowej", 36); Adres.prototype = new String("ALA"); var adresicis = new Adres("ICIS","Dąbrowskiego",73); :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :obiekt miasto pokazdane constructor proto Object hasownproperty :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :String( Ala ) constructor :obiekt miasto pokazdane constructor proto :String Object hasownproperty Programowanie Stron Internetowych 235 Programowanie Stron Internetowych 236 Dziedziczenie Dziedziczenie :STransportu proto :Samochod proto :Hatchback proto :Toyota proto function SrodekTransportu() this.predkosc_maksymalna = 100; this.paliwo = "benzyna"; this.uruchom = function () alert("działam");; function Samochod() this.liczbakol = 4; this.pojemnoscsilnika = 1.6; function Hatchback() this.liczbadrzwi = 3; this.pokazliczbedrzwi = function() alert("liczbadrzwi : " + pokazliczbadrzwi);; 58

59 Programowanie Stron Internetowych 237 Programowanie Stron Internetowych 238 Dziedziczenie Dziedziczenie var st = new STransportu(); var s = new Samochod(); var h = new Hatchback(); Samochod.prototype = new STransportu(); Hatchback.prototype = new Samochod(); :st proto :Object constructor :STransportu prototype Toyota.prototype = new Hatchback(); :s proto :Object constructor :Samochod prototype :h proto :Object constructor :Hatchback prototype Programowanie Stron Internetowych 239 Programowanie Stron Internetowych 240 Dziedziczenie :tmp proto :s proto :Object var tmp = new Stransportu(); Samochod.prototype = tmp; var s = new Samochod(); constructor :Object constructor :STransportu prototype :Samochod prototype Dziedziczenie :tmp proto constructor :s proto var tmp = new Stransportu(); Samochod.prototype = tmp; Samochod.prototype.constructor = Samochod; var s = new Samochod(); :Object constructor :Object constructor :STransportu prototype :Samochod prototype 59

60 Programowanie Stron Internetowych 241 Właściwości i metody statyczne function Adres(nazwa, ulica, numer) this.nazwa = nazwa;... this.pokazdane = function() alert(this.constructor.zmstatyczna); alert(this.nazwa) ; OBIEKTOWY MODEL STRONY INTERNETOWEJ Adres.zmStatyczna = "jakaś wartość"; Programowanie Stron Internetowych 243 Programowanie Stron Internetowych 244 Model DOM Model DOM DOM (ang. Document Object Model) Model umożliwiający obiektowy opis strony internetowej oraz podstawowe API pozwalające na wykonywanie operacji na strukturze dokumentu W modelu tym strona przedstawiana jest w postaci drzewa, gdzie: Węzłami wewnętrznymi, są zawsze tagi HTML Liśćmi drzewa są tagi HTML, lub elementy tekstowe <html> <head> <title>przyklad</title> <style> h color:red </style> </head> <body> <h1>naglowek</h1> <p>jakis tekst <span>cos</span> <a href="adres"> link </a> </p> </body> </html> title head document style h1 body span p a 60

61 Programowanie Stron Internetowych 245 Programowanie Stron Internetowych 246 Model DOM Model DOM document Atrybuty elementów HTML są również traktowane jako węzły drzewa title head style h1 body p class text text text span a h1 text text text id Programowanie Stron Internetowych 247 Programowanie Stron Internetowych 248 Model DOM wybieranie elementów Do węzłów drzewa DOM można dostać się za pomocą dwóch funkcji: Model DOM wybieranie elementów Każdy węzeł drzewa DOM zawiera dodatkowo zestaw właściwości umożliwiających poruszanie się po drzewie document.getelementbyid(identyfikator) document.getelementbytagname(nazwatagu) Dostęp do elementów drzewa DOM jest możliwy dopiero po całkowitym załadowaniu się dokumentu!!! firstchild lastchild childnodes[] parentnode nextsibling previoussibling title head style document h1 body p p span a img 61

62 Programowanie Stron Internetowych 249 Programowanie Stron Internetowych 250 Model DOM - węzeł Każdy węzeł posiada m. in następujące właściwości i metody Właściwości Metody attributes[] appendchild classname clonechild id createtextnode innerhtml hasattribute / hasattributes nodename getattribute / getattributes nodetype haschildnodes nodevalue insertafter / insertbefore style removeattribute removechild replacechild Model DOM właściwość nodetype Wartość Stała 1 ELEMENT_NODE 2 ATTRIBUTE_NODE 3 TEXT_NODE 4 CDATA_SECTION_NODE 5 ENTITY_REFERENCE_NODE 6 ENTITY_NODE 7 PROCESSING_INSTRUCTION_NODE 8 COMMENT_NODE 9 DOCUMENT_NODE 10 DOCUMENT_TYPE_NODE 11 DOCUMENT_FRAGMENT_NODE 12 NOTATION_NODE Programowanie Stron Internetowych 251 Programowanie Stron Internetowych 252 Model DOM właściwość nodetype <div id="jakisdiv"><b>bla, bla, bla</b></div> <script type="text/javascript"> alert(document.getelementbyid("jakisdiv").nodetype) alert(document.getelementbyid("jakisdiv").firstchild.nodetype) </script> Model DOM właściwość nodetype <div id="jakisdiv"> <b>bla, bla, bla</b></div> <script type="text/javascript"> alert(document.getelementbyid("jakisdiv").nodetype) alert(document.getelementbyid("jakisdiv").firstchild.nodetype) </script> Internet Explorer: Mozilla Firefox / Chrome: Internet Explorer: Mozilla Firefox / Chrome:

63 Programowanie Stron Internetowych 253 Programowanie Stron Internetowych 254 Model DOM - przykład function pobierzelementwgklasy(class) if(document.all) var elementy = document.all; else var elementy = document.getelementsbytagname(" "); var elementyzklasa = new Array(); var wzor = new RegExp("(^ )" + class + "( $)"); for(var i=0; i<elementy.length; i++) if(wzor.test(elementy[i].classname)) elementyzklasa.push(elementy[i]); return elementyzklasa; Modyfikowanie wyglądu elementu Każdy węzeł drzewa DOM, który odpowiada elementowi HTML, posiada atrybut style, za pomocą którego, można dostać się do właściwości CSS przypisanych do tego elementu: var element = document.getelementbyid("naglowek"); element.style.color = "orange"; element.style.fontfamily = "verdana, arial" Programowanie Stron Internetowych 255 Programowanie Stron Internetowych 256 Zmiana klasy function SprawdzKlase(element, klasa) var wzor = new RegExp("(^ )" + klasa + "( $)"); return wzor.test(element.classname); function DodajKlase(element, klasa) if(!sprawdzklase(element, klasa)) if(element.classname == "") element.classname = klasa; else element.classname += " " + klasa; function UsunKlase (elem, klasa) var wzor = new RegExp("(^ )" + klasa + "( $)"); elem.classname = elem.classname.replace(wzor, "$1"); elem.classname = elem.classname.replace(/ $/, ""); Zdarzenia Zdarzenie - umożliwia obiektowi powiadomić inne obiekty o zmianie swego stanu. Procedura obsługi zdarzenia - funkcja, której kod ma się wykonać w momencie wystąpienia danego zdarzenia. Akcja domyślna - działanie, które przeglądarka normalnie wykonuje, w momencie wystąpienia danego zdarzenia. Akcje domyślne przypisane są do takich zdarzeń, jak: naciśnięcie linku przez użytkownika zatwierdzenie formularza przeniesienie "focus" do następnego elementu, gdy użytkownik naciśnie klawisz TAB. 63

64 Programowanie Stron Internetowych 257 Programowanie Stron Internetowych 258 Przypisanie procedury do zdarzenia Procedurę obsługi zdarzenia można przypisać do elementu, bezpośrednio w kodzie HTML: <script type="text/javascript"> function linkonclick() alert("komunikat"); </script> <a id="link" click="linkonclick" href="inna_strona.html">link</a> Przypisanie procedury obsługi zdarzenia element.onzdarzenie = proceduraobslugizdarzenia Przykład: function linkonclick() alert("komunikat"); var link = document.getelementbyid("link"); link.onclick = linkonclick; <a id="link" click="alert( komunikat );" href="inna_strona.html">link</a> Uwaga! Procedury obsługi zdarzeń mogą być przypisane do elementów dopiero, gdy strona zostanie całkowicie załadowana. Programowanie Stron Internetowych 259 Programowanie Stron Internetowych 260 Słowo kluczowe this Do właściwości i metod obiektu, który wywołał dane zdarzenie, można dostać się za pomocą słowa kluczowego this. function onclick() alert(this.firstchild.nodevalue); return false; function Poczatek () var element1 = document.getelementbyid("link1"); var element2 = document.getelementbyid("link2"); element1.onclick = onclick; element2.onclick = onclick; window.onload = Poczatek; <a href=" id="link1">link do onet.pl</a> <a href=" id="link2">link do wp.pl</a> Ograniczenia uchwytów zdarzeń Z tradycyjnym modelem obsługi zdarzeń w JavaScript wiąże się kilka problemów: brak możliwości przypisania więcej niż jednej funkcji do danego zdarzenia. w sytuacji, gdy użytkownik kliknie na link w stronie: function kliknieciediv() alert("kliknieciediv"); function kliknieciea() alert("kliknieciea") ; <div onclick="kliknieciediv() "> <a href="strona.html" onclick=" kliknieciea()">link</a> </div> 64

65 Programowanie Stron Internetowych 261 Programowanie Stron Internetowych 262 Event Listeners Za pomocą tzw. "Event listeners" można, do pojedynczego elementu, przypisać wiele procedur obsługi zdarzeń. Model W3C element.addeventlistener("zdarzenie", procobslugi, przechwytuj) Model Internet Explorer element.attachevent("onzdarzenie", procobslugi); Event Listeners rozwiązanie uniwersalne if(typeof element.addeventlistener!= "undefined") element.addeventlistener("zdarzenie", procobslugi, false); else if(typeof event.attachevent!= "undefined") element.attachevent("onzdarznie", procobslugi); else alert("przeglądarka nie obsługuje Event Listeners"); Programowanie Stron Internetowych 263 Programowanie Stron Internetowych 264 Event Listeners odłączenie procedur Model W3C element.removeeventlistener("zdarzenie", procobslugi, przechwytuj) Model Internet Explorer element.detachevent("onzdarzenie", procobslugi); Obiekt event Obiekt event umożliwia dostęp do dodatkowych informacji dotyczących się danego zdarzenia. Model W3C function onzdarzenie(event) Model Internet Explorer function onzdarzenie() window.event; Rozwiązanie wspólne function onzdarzenie ( event ) if(typeof event == "undefined") event = window.event; 65

66 Programowanie Stron Internetowych 265 Programowanie Stron Internetowych 266 Obiekt event metody i właściwości Internet Explorer Obiekt event metody i właściwości Mozilla Firefox Właściwości altkey, ctrlkey, shiftkey button* cancelbubble clientx, clienty keycode returnvalue srcelement type Metody Właściwości altkey, ctrlkey, shiftkey Bubbles button* cancelable charcode clientx, clienty keycode eventphase target Metody preventdefault() stoppropagation() *(1=lewy, 4=środkowy, 2=prawy) type *(0=lewy, 1=środkowy, 2=prawy) Programowanie Stron Internetowych 267 Programowanie Stron Internetowych 268 Blokowanie zdarzeń domyślnych Najprostszą metodą aby zablokować przeglądarce możliwość wykonywania akcji domyślnej jest zwrócenie z przypisanej procedury wartość false function linkonclick() if(confirm("czy chcesz opuścić tę stronę?")) return true; else return false; var link = document.getelementbyid("link"); link.onclick = linkonclick; Blokowanie zdarzeń domyślnych Model W3C klikniecie : function(event) if(!confirm("...?")) event.preventdefault(); Model Internet Explorer klikniecie : function() if(!confirm("...?")) event.returnvalue = false; 66

67 Programowanie Stron Internetowych 269 Programowanie Stron Internetowych 270 Propagowanie zdarzeń Propagowanie zdarzeń Propagowanie zdarzeń polega na przekazywaniu zdarzeń poprzez elementy drzewa DOM. Proces ten składa się z trzech faz: fazy przechwytywania ("capture phase") fazy wywoływania zdarzenia ("target phase") fazy powrotu ("bubbling phase") function kliknieciep() alert("kliknieciep"); function kliknieciea() alert("kliknieciea"); <p onclick="kliknieciep()"> <a href="strona.html" onclick="kliknieciea()">link</a> </p> Programowanie Stron Internetowych 271 Programowanie Stron Internetowych 272 Propagowanie zdarzeń document html Propagowanie zdarzeń Model Netscape przechwytywanie document title head style h1 body p head html body zdarzenie przechwytujące span a title style h1 p zdarzenie span a 67

68 Programowanie Stron Internetowych 273 Programowanie Stron Internetowych 274 Propagowanie zdarzeń Model Internet Explorer bąbelkowanie Propagowanie zdarzeń Model W3C document document head html body zdarzenie powracające head html body title style h1 p title style h1 p span a span a zdarzenie zdarzenie Programowanie Stron Internetowych 276 Asynchronous JavaScript + XML AJAX pozwala na tworzenie aplikacji internetowych w taki sposób aby odczucia użytkownika były jak najbardziej zbliżone do aplikacji desktopowych. AJAX W skład AJAX wchodzą: Standardowa reprezentacja internetowa HTML + CSS Document Object Model XML JavaScript XMLHttpRequest 68

69 Programowanie Stron Internetowych 277 Programowanie Stron Internetowych 278 Przykłady aplikacji AJAX Przykłady aplikacji AJAX Programowanie Stron Internetowych 279 Programowanie Stron Internetowych 280 Klasyczny model aplikacji webowej KLIENT Interfejs Interakcja synchroniczna KLIENT aktywność użytkownika aktywność użytkownika aktywność użytkownika żądanie HTTP HTML + CSS Serwer HTTP CZAS Systemy dodatkowe przetwarzanie przetwarzanie SERWER SERWER 69

Pokazać jeszcze