HTML5 - szybki przewodnik

HTML5 jest kolejną dużą poprawką standardu HTML zastępującą HTML 4.01, XHTML 1.0 i XHTML 1.1. HTML5 to standard strukturyzacji i prezentacji treści w sieci WWW.

HTML5 to współpraca między konsorcjum World Wide Web Consortium (W3C) a Grupą Roboczą Technologii Hipertekstowych Aplikacji Sieciowych (WHATWG).

Nowy standard obejmuje funkcje, takie jak odtwarzanie wideo i przeciąganie i upuszczanie, które wcześniej zależały od wtyczek do przeglądarek innych firm, takich jak Adobe Flash, Microsoft Silverlight i Google Gears.

Wsparcie przeglądarki

Najnowsze wersje Apple Safari, Google Chrome, Mozilla Firefox i Opera obsługują wiele funkcji HTML5, a Internet Explorer 9.0 również obsługuje niektóre funkcje HTML5.

Mobilne przeglądarki internetowe, które są preinstalowane na iPhone'ach, iPadach i telefonach z Androidem, mają doskonałą obsługę HTML5.

Nowe funkcje

HTML5 wprowadza szereg nowych elementów i atrybutów, które mogą pomóc w tworzeniu nowoczesnych witryn internetowych. Oto zestaw niektórych z najważniejszych funkcji wprowadzonych w HTML5.

  • New Semantic Elements - Są to takie jak <header>, <footer> i <section>.

  • Forms 2.0 - Ulepszenia formularzy internetowych HTML, w których wprowadzono nowe atrybuty dla tagu <input>.

  • Persistent Local Storage - Aby osiągnąć bez uciekania się do wtyczek innych firm.

  • WebSocket - Dwukierunkowa technologia komunikacyjna nowej generacji dla aplikacji internetowych.

  • Server-Sent Events - HTML5 wprowadza zdarzenia, które przepływają z serwera WWW do przeglądarek internetowych i nazywane są zdarzeniami wysłanymi przez serwer (SSE).

  • Canvas - Obsługuje dwuwymiarową powierzchnię rysunkową, którą można programować za pomocą JavaScript.

  • Audio & Video - Możesz osadzać dźwięk lub wideo na swoich stronach internetowych bez korzystania z wtyczek innych firm.

  • Geolocation - Teraz odwiedzający mogą udostępniać swoją fizyczną lokalizację w aplikacji internetowej.

  • Microdata - Pozwala to tworzyć własne słowniki poza HTML5 i rozszerzać strony internetowe o niestandardową semantykę.

  • Drag and drop - Przeciągnij i upuść elementy z jednego miejsca do drugiego na tej samej stronie internetowej.

Kompatybilność wsteczna

HTML5 został zaprojektowany, aby w miarę możliwości był wstecznie zgodny z istniejącymi przeglądarkami internetowymi. Nowe funkcje zostały oparte na istniejących funkcjach i umożliwiają udostępnianie zawartości zastępczej dla starszych przeglądarek.

Zaleca się wykrycie obsługi poszczególnych funkcji HTML5 za pomocą kilku wierszy JavaScript.

Jeśli nie jesteś zaznajomiony z żadną poprzednią wersją HTML, polecam przejrzenie naszego HTML Tutorial przed poznaniem funkcji HTML5.

Język HTML 5 ma „niestandardową” składnię HTML, która jest zgodna z dokumentami HTML 4 i XHTML1 publikowanymi w Internecie, ale nie jest zgodna z bardziej ezoterycznymi funkcjami SGML w HTML 4.

HTML 5 nie ma tych samych reguł składni, co XHTML, gdzie potrzebowaliśmy nazw znaczników pisanych małymi literami, cytowania naszych atrybutów, atrybut musiał mieć wartość i zamykać wszystkie puste elementy.

HTML5 zapewnia dużą elastyczność i obsługuje następujące funkcje -

  • Nazwy znaczników pisane wielkimi literami.
  • Cytaty są opcjonalne dla atrybutów.
  • Wartości atrybutów są opcjonalne.
  • Zamykanie pustych elementów jest opcjonalne.

DOCTYPE

DOCTYPE w starszych wersjach HTML były dłuższe, ponieważ język HTML był oparty na SGML i dlatego wymagał odniesienia do DTD.

Autorzy HTML 5 używaliby prostej składni do określenia DOCTYPE w następujący sposób -

<!DOCTYPE html>

W powyższej składni nie jest rozróżniana wielkość liter.

Kodowanie znaków

Autorzy HTML 5 mogą użyć prostej składni, aby określić kodowanie znaków w następujący sposób -

<meta charset = "UTF-8">

W powyższej składni nie jest rozróżniana wielkość liter.

Tag <script>

Powszechną praktyką jest dodawanie atrybutu typu o wartości „text / javascript” do elementów skryptu w następujący sposób -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 usuwa dodatkowe wymagane informacje i możesz użyć po prostu następującej składni -

<script src = "scriptfile.js"></script>

Tag <link>

Do tej pory pisałeś <link> w następujący sposób -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 usuwa dodatkowe wymagane informacje i możesz po prostu użyć następującej składni -

<link rel = "stylesheet" href = "stylefile.css">

Elementy HTML5

Elementy HTML5 są oznaczane za pomocą tagów początkowych i końcowych. Znaczniki są rozdzielane nawiasami ostrymi z nazwą znacznika pomiędzy.

Różnica między tagami początkowymi i końcowymi polega na tym, że te ostatnie zawierają ukośnik przed nazwą tagu.

Poniżej znajduje się przykład elementu HTML5 -

<p>...</p>

W nazwach tagów HTML5 wielkość liter nie jest rozróżniana i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest trzymanie się małych liter.

Większość elementów zawiera jakąś treść, np. <p> ... </p> zawiera akapit. Jednak niektóre elementy nie mogą w ogóle zawierać treści i są one znane jako elementy void. Na przykład,br, hr, link, metaitp.

Oto pełna lista elementów HTML5 .

Atrybuty HTML5

Elementy mogą zawierać atrybuty używane do ustawiania różnych właściwości elementu.

Niektóre atrybuty są definiowane globalnie i mogą być używane w dowolnym elemencie, podczas gdy inne są definiowane tylko dla określonych elementów. Wszystkie atrybuty mają nazwę i wartość i wyglądają tak, jak pokazano poniżej w przykładzie.

Poniżej znajduje się przykład atrybutu HTML5, który ilustruje, jak oznaczyć element div atrybutem o nazwie class, używając wartości „przykład” -

<div class = "example">...</div>

Atrybuty można określać tylko w tagach początkowych i nigdy nie można ich używać w tagach końcowych.

W atrybutach HTML5 nie jest rozróżniana wielkość liter i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest używanie małych liter.

Oto pełna lista atrybutów HTML5 .

Dokument HTML5

Dla lepszej struktury wprowadzono następujące tagi -

  • section- Ten tag reprezentuje ogólny dokument lub sekcję aplikacji. Może być używany razem z h1-h6 do wskazania struktury dokumentu.

  • article - Ten znacznik reprezentuje niezależny fragment treści dokumentu, na przykład wpis na blogu lub artykuł w gazecie.

  • aside - Ten tag reprezentuje fragment treści, który jest tylko nieznacznie powiązany z pozostałą częścią strony.

  • header - Ten tag reprezentuje nagłówek sekcji.

  • footer - Ten tag reprezentuje stopkę sekcji i może zawierać informacje o autorze, informacje o prawach autorskich itp.

  • nav - Ten tag reprezentuje sekcję dokumentu przeznaczoną do nawigacji.

  • dialog - Tego tagu można użyć do zaznaczenia rozmowy.

  • figure - Tego znacznika można użyć do powiązania podpisu z pewną zawartością osadzoną, taką jak grafika lub wideo.

Znaczniki dokumentu HTML 5 wyglądałyby następująco -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>
<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

To da następujący wynik -

Jak wyjaśniono w poprzednim rozdziale, elementy mogą zawierać atrybuty używane do ustawiania różnych właściwości elementu.

Niektóre atrybuty są definiowane globalnie i mogą być używane w dowolnym elemencie, podczas gdy inne są definiowane tylko dla określonych elementów. Wszystkie atrybuty mają nazwę i wartość i wyglądają tak, jak pokazano poniżej w przykładzie.

Poniżej znajduje się przykład atrybutów HTML5, który ilustruje, jak oznaczyć element div atrybutem o nazwie class, używając wartości „przykład” -

<div class = "example">...</div>

Atrybuty można określić tylko w start tags i nigdy nie może być używane w end tags.

W atrybutach HTML5 nie jest rozróżniana wielkość liter i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest używanie małych liter.

Atrybuty standardowe

Wymienione poniżej atrybuty są obsługiwane przez prawie wszystkie tagi HTML 5.

Atrybut Opcje Funkcjonować
klucz dostępu Określony przez użytkownika Określa skrót klawiaturowy umożliwiający dostęp do elementu.
wyrównać prawo, lewo, środek Poziomo wyrównuje etykiety
tło URL Umieszcza obraz tła za elementem
bgcolor wartości numeryczne, szesnastkowe, RGB Umieszcza kolor tła za elementem
klasa Określony przez użytkownika Klasyfikuje element do użycia z kaskadowymi arkuszami stylów.
Zadowolony prawda fałsz Określa, czy użytkownik może edytować zawartość elementu, czy nie.
menu kontekstowe Identyfikator menu Określa menu kontekstowe elementu.
data-XXXX Określony przez użytkownika Atrybuty niestandardowe. Autorzy dokumentu HTML mogą definiować własne atrybuty. Musi zaczynać się od „data-”.
przeciągalny prawda, fałsz, auto Określa, czy użytkownik może przeciągać element.
wysokość Wartość numeryczna Określa wysokość tabel, obrazów lub komórek tabeli.
ukryty ukryty Określa, czy element powinien być widoczny, czy nie.
ID Określony przez użytkownika Nazywa element do użycia z kaskadowymi arkuszami stylów.
pozycja Lista elementów Służy do grupowania elementów.
itemprop Lista rzeczy Służy do grupowania przedmiotów.
sprawdzanie pisowni prawda fałsz Określa, czy element musi mieć sprawdzoną pisownię lub gramatykę.
styl Arkusz stylów CSS Określa wbudowany styl elementu.
Przedmiot Identyfikator zdefiniowany przez użytkownika Określa odpowiedni element elementu.
tabindex Numer karty Określa kolejność tabulacji elementu.
tytuł Określony przez użytkownika Tytuł „Pop-up” dla Twoich elementów.
valign góra, środek, dół Ustawia tagi w pionie w elemencie HTML.
szerokość Wartość numeryczna Określa szerokość tabel, obrazów lub komórek tabeli.

Aby uzyskać pełną listę tagów HTML5 i powiązanych atrybutów, sprawdź nasze odniesienie do tagów HTML5 .

Atrybuty niestandardowe

Nowością wprowadzoną w HTML 5 jest dodanie niestandardowych atrybutów danych.

Niestandardowy atrybut danych zaczyna się od data-i zostanie nazwany na podstawie Twoich wymagań. Oto prosty przykład -

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

Powyższy kod będzie całkowicie poprawny HTML5 z dwóch atrybutów niestandardowych nazwie datasubject i danych poziomie . Możesz uzyskać wartości tych atrybutów za pomocą JavaScript API lub CSS w podobny sposób, jak w przypadku standardowych atrybutów.

Kiedy użytkownicy odwiedzają Twoją witrynę, wykonują różne czynności, takie jak klikanie tekstu, obrazów i linków, najeżdżanie kursorem na zdefiniowane elementy itp. Oto przykłady wywołań JavaScript events.

Możemy napisać nasze programy obsługi zdarzeń w Javascript lub VBscript i możesz określić te programy obsługi zdarzeń jako wartość atrybutu tagu zdarzenia. Specyfikacja HTML5 definiuje różne atrybuty zdarzeń wymienione poniżej -

Możemy użyć następującego zestawu atrybutów, aby wywołać dowolny plik javascript lub vbscript kod podany jako wartość, gdy istnieje jakiekolwiek zdarzenie, które ma miejsce dla dowolnego elementu HTML5.

Omawialiśmy wydarzenia związane z elementami, omawiając te elementy szczegółowo w kolejnych rozdziałach.

Atrybut Wartość Opis
offline scenariusz Uruchamia się, gdy dokument przechodzi w tryb offline
onabort scenariusz Wyzwalacze w przypadku przerwania zdarzenia
onafterprint scenariusz Wyzwalacze po wydrukowaniu dokumentu
onbeforeonload scenariusz Wyzwalacze przed załadowaniem dokumentu
onbeforeprint scenariusz Wyzwalacze przed wydrukowaniem dokumentu
onblur scenariusz Uruchamia się, gdy okno traci ostrość
oncanplay scenariusz Uruchamia się, gdy multimedia mogą zacząć się odtwarzać, ale mogą zostać zatrzymane w celu buforowania
oncanplaythrough scenariusz Uruchamia się, gdy multimedia mogą być odtwarzane do końca, bez zatrzymywania się w celu buforowania
onchange scenariusz Uruchamia się, gdy element się zmienia
na kliknięcie scenariusz Wyzwalacze po kliknięciu myszą
oncontextmenu scenariusz Uruchamia się po wywołaniu menu kontekstowego
ondblclick scenariusz Wyzwalacze po dwukrotnym kliknięciu myszą
ondrag scenariusz Uruchamia się, gdy element jest przeciągany
ondragend scenariusz Wyzwalacze na końcu operacji przeciągania
ondragenter scenariusz Uruchamia się, gdy element został przeciągnięty do prawidłowego miejsca docelowego upuszczania
ondragleave scenariusz Uruchamia się, gdy element opuszcza prawidłowy cel upuszczania
ondragover scenariusz Uruchamia się, gdy element jest przeciągany na prawidłowy cel upuszczania
ondragstart scenariusz Wyzwalacze na początku operacji przeciągania
ondrop scenariusz Wyzwalacze, gdy przeciągany element jest upuszczany
ondurationchange scenariusz Wyzwalane w przypadku zmiany długości nośnika
onemptied scenariusz Uruchamia się, gdy element zasobów multimedialnych nagle staje się pusty.
onended scenariusz Uruchamia się, gdy media dobiegły końca
onerror scenariusz Uruchamia się, gdy wystąpi błąd
skupienie scenariusz Uruchamia się, gdy okno staje się aktywne
onformchange scenariusz Wyzwalacze, gdy formularz ulega zmianie
onforminput scenariusz Wyzwalacze, gdy formularz otrzymuje dane wejściowe użytkownika
onhaschange scenariusz Uruchamia się, gdy dokument ulega zmianie
oninput scenariusz Uruchamia się, gdy element otrzymuje dane wejściowe użytkownika
oninvalid scenariusz Wyzwalacze, gdy element jest nieprawidłowy
onkeydown scenariusz Wyzwalane po naciśnięciu klawisza
onkeypress scenariusz Uruchamia się po naciśnięciu i zwolnieniu klawisza
onkeyup scenariusz Wyzwalacze po zwolnieniu klucza
onload scenariusz Uruchamia się po załadowaniu dokumentu
onloadeddata scenariusz Wyzwalane po załadowaniu danych multimedialnych
onloadedmetadata scenariusz Wyzwalane, gdy czas trwania i inne dane multimedialne elementu multimedialnego są ładowane
onloadstart scenariusz Uruchamia się, gdy przeglądarka zaczyna ładować dane multimedialne
onmessage scenariusz Uruchamia się po wyzwoleniu wiadomości
onmousedown scenariusz Uruchamia się po naciśnięciu przycisku myszy
onmousemove scenariusz Uruchamia się, gdy porusza się wskaźnik myszy
onmouseout scenariusz Uruchamia się, gdy wskaźnik myszy wychodzi poza element
onmouseover scenariusz Uruchamia się, gdy wskaźnik myszy przesuwa się nad elementem
onmouseup scenariusz Wyzwalane po zwolnieniu przycisku myszy
onmousewheel scenariusz Wyzwalacze podczas obracania kółka myszy
onoffline scenariusz Uruchamia się, gdy dokument przechodzi w tryb offline
onoine scenariusz Uruchamia się, gdy dokument jest dostępny w trybie online
ononline scenariusz Uruchamia się, gdy dokument jest dostępny w trybie online
onpagehide scenariusz Uruchamia się, gdy okno jest ukryte
onpageshow scenariusz Uruchamia się, gdy okno staje się widoczne
onpause scenariusz Uruchamia się, gdy dane multimedialne są wstrzymane
onplay scenariusz Wyzwalacze, gdy rozpocznie się odtwarzanie danych multimedialnych
gra scenariusz Wyzwalane, gdy zaczną się odtwarzać dane multimedialne
onpopstate scenariusz Uruchamia się, gdy zmienia się historia okna
w trakcie scenariusz Uruchamia się, gdy przeglądarka pobiera dane multimedialne
onratechange scenariusz Wyzwalane, gdy zmieniła się szybkość odtwarzania danych multimedialnych
onreadystatechange scenariusz Uruchamia się, gdy zmienia się stan gotowości
onredo scenariusz Wyzwalane, gdy dokument wykonuje ponowienie
onresize scenariusz Wyzwalacze po zmianie rozmiaru okna
onscroll scenariusz Uruchamia się, gdy przewijany jest pasek przewijania elementu
onseeked scenariusz Uruchamia się, gdy atrybut wyszukiwania elementu multimedialnego nie jest już prawdziwy i wyszukiwanie zostało zakończone
poszukujący scenariusz Uruchamia się, gdy atrybut wyszukiwania elementu multimedialnego jest prawdziwy i wyszukiwanie się rozpoczęło
onselect scenariusz Uruchamia się po wybraniu elementu
zainstalowany scenariusz Uruchamia się, gdy wystąpi błąd podczas pobierania danych multimedialnych
przechowywanie scenariusz Uruchamia się po załadowaniu dokumentu
onsubmit scenariusz Wyzwalacze po przesłaniu formularza
onsuspend scenariusz Wyzwalacze, gdy przeglądarka pobierała dane multimedialne, ale zatrzymała się przed pobraniem całego pliku multimedialnego
ontimeupdate scenariusz Uruchamia się, gdy media zmieniają swoją pozycję odtwarzania
onundo scenariusz Wyzwalacze, gdy dokument wykonuje cofnięcie
onunload scenariusz Uruchamia się, gdy użytkownik opuszcza dokument
onvolumechange scenariusz Uruchamia się, gdy multimedia zmieniają głośność, także gdy głośność jest ustawiona na „wyciszenie”
oczekiwanie scenariusz Uruchamia się, gdy multimedia przestały być odtwarzane, ale oczekuje się ich wznowienia

Web Forms 2.0 to rozszerzenie funkcji formularzy w HTML4. Elementy i atrybuty formularzy w HTML5 zapewniają większy stopień znaczników semantycznych niż HTML4 i uwalniają nas od wielu żmudnych skryptów i stylów, które były wymagane w HTML4.

Element <input> w HTML4

Elementy wejściowe HTML4 używają rozszerzenia type atrybut do określenia typu danych. HTML4 udostępnia następujące typy -

Sr.No. Typ i opis
1

text

Dowolne pole tekstowe, nominalnie wolne od podziałów wierszy.

2

password

Dowolne pole tekstowe na poufne informacje, nominalnie wolne od podziałów wierszy.

3

checkbox

Zestaw zawierający zero lub więcej wartości ze wstępnie zdefiniowanej listy.

4

radio

Wyliczona wartość.

5

submit

Dowolna forma przycisku inicjuje przesłanie formularza.

6

file

Dowolny plik z typem MIME i opcjonalnie nazwą pliku.

7

image

Współrzędna odnosząca się do rozmiaru konkretnego obrazu, z dodatkową semantyczną informacją, że musi to być ostatnia wybrana wartość i inicjuje przesłanie formularza.

8

hidden

Dowolny ciąg, który normalnie nie jest wyświetlany użytkownikowi.

9

select

Wyliczona wartość, podobnie jak typ radia.

10

textarea

Dowolne pole tekstowe, nominalnie bez ograniczeń podziału wiersza.

11

button

Dowolna forma przycisku, który może zainicjować dowolne zdarzenie związane z przyciskiem.

Poniżej znajduje się prosty przykład użycia etykiet, przycisków opcji i przycisków przesyłania -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

Element <input> w HTML5

Oprócz wyżej wymienionych atrybutów, elementy wejściowe HTML5 wprowadziły kilka nowych wartości dla typeatrybut. Są one wymienione poniżej.

NOTE - Wypróbuj wszystkie poniższe przykłady przy użyciu najnowszej wersji Opera przeglądarka.

Sr.No. Typ i opis
1 datetime

Data i czas (rok, miesiąc, dzień, godzina, minuta, sekunda, ułamki sekundy) zakodowane zgodnie z ISO 8601 ze strefą czasową ustawioną na UTC.

2 datetime-local

Data i czas (rok, miesiąc, dzień, godzina, minuta, sekunda, ułamki sekundy) zakodowane zgodnie z ISO 8601, bez informacji o strefie czasowej.

3 data

Data (rok, miesiąc, dzień) zakodowana zgodnie z ISO 8601.

4 miesiąc

Data składająca się z roku i miesiąca zakodowana zgodnie z ISO 8601.

5 tydzień

Data składająca się z roku i numeru tygodnia zakodowana zgodnie z ISO 8601.

6 czas

Czas (godzina, minuta, sekundy, ułamki sekund) zakodowany zgodnie z ISO 8601.

7 numer

Przyjmuje tylko wartość liczbową. Atrybut step określa dokładność, domyślnie 1.

8 zasięg

Typ zakresu jest używany w przypadku pól wejściowych, które powinny zawierać wartość z zakresu liczb.

9 e-mail

Akceptuje tylko wartość e-mail. Ten typ jest używany do pól wejściowych, które powinny zawierać adres e-mail. Jeśli spróbujesz przesłać prosty tekst, wymusza to podanie tylko adresu e-mail w formacie [email protected].

10 url

Akceptuje tylko wartość adresu URL. Ten typ jest używany do pól wejściowych, które powinny zawierać adres URL. Jeśli spróbujesz przesłać prosty tekst, wymusza to wprowadzenie tylko adresu URL w formacie http://www.example.com lub http://example.com.

Element <output>

W HTML5 wprowadzono nowy element <output>, który jest używany do reprezentowania wyników różnych typów danych wyjściowych, takich jak dane wyjściowe napisane przez skrypt.

Możesz użyć foratrybut, aby określić związek między elementem wyjściowym a innymi elementami w dokumencie, które wpłynęły na obliczenia (na przykład jako dane wejściowe lub parametry). Wartość atrybutu for to rozdzielona spacjami lista identyfikatorów innych elementów.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

To da następujący wynik -

Atrybut zastępczy

HTML5 wprowadził nowy atrybut o nazwie placeholder. Ten atrybut w elementach <input> i <textarea> stanowi wskazówkę dla użytkownika, co można wprowadzić w polu. Tekst zastępczy nie może zawierać znaków powrotu karetki ani znaków nowego wiersza.

Oto prosta składnia atrybutu zastępczego -

<input type = "text" name = "search" placeholder = "search the web"/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

To da następujący wynik -

Atrybut autofocus

Jest to prosty, jednostopniowy wzorzec, który można łatwo zaprogramować w JavaScript w momencie ładowania dokumentu, automatycznie skupia się na jednym określonym polu formularza.

HTML5 wprowadził nowy atrybut o nazwie autofocus który zostałby użyty w następujący sposób -

<input type = "text" name = "search" autofocus/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Wymagany atrybut

Teraz nie musisz mieć JavaScript do walidacji po stronie klienta, np. Puste pole tekstowe nigdy nie zostanie przesłane, ponieważ HTML5 wprowadził nowy atrybut o nazwie required który byłby używany w następujący sposób i nalegałby na posiadanie wartości -

<input type = "text" name = "search" required/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

To da następujący wynik -

SVG oznacza Skalable Vector Graphics i jest to język do opisu grafiki 2D i aplikacji graficznych w XML, a XML jest następnie renderowany przez przeglądarkę SVG.

SVG jest szczególnie przydatny w przypadku diagramów wektorowych, takich jak wykresy kołowe, dwuwymiarowe wykresy w układzie współrzędnych X, Y itp.

SVG stało się rekomendacją W3C 14 stycznia 2003, a najnowszą wersję specyfikacji SVG można sprawdzić na Specyfikacji SVG .

Przeglądanie plików SVG

Większość przeglądarek internetowych może wyświetlać SVG tak samo, jak mogą wyświetlać pliki PNG, GIF i JPG. Użytkownicy Internet Explorera mogą być zmuszeni do zainstalowania Adobe SVG Viewer, aby móc oglądać SVG w przeglądarce.

Osadzanie SVG w HTML5

HTML5 umożliwia osadzanie SVG bezpośrednio przy użyciu <svg>...</svg> tag, który ma następującą prostą składnię -

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7 wprowadził również opcję konfiguracji („about: config”), w której możesz włączyć HTML5, wykonując następujące czynności -

  • Rodzaj about:config na pasku adresu przeglądarki Firefox.

  • Kliknij przycisk „Będę ostrożny, obiecuję!” w wyświetlonym komunikacie ostrzegawczym (i upewnij się, że go przestrzegasz!).

  • Rodzaj html5.enable do paska filtru u góry strony.

  • Obecnie byłby wyłączony, więc kliknij go, aby przełączyć wartość na true.

Teraz parser Firefox HTML5 powinien być włączony i powinieneś móc poeksperymentować z następującymi przykładami.

HTML5 - SVG Circle

Poniżej znajduje się wersja HTML5 przykładu SVG, który rysowałby okrąg za pomocą tagu <circle> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
		
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

HTML5 - prostokąt SVG

Poniżej znajduje się wersja HTML5 przykładu SVG, który rysowałby prostokąt za pomocą tagu <rect> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

HTML5 - linia SVG

Poniżej znajduje się wersja HTML5 przykładu SVG, który rysowałby linię za pomocą tagu <line> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

Możesz użyć style atrybut, który pozwala ustawić dodatkowe informacje o stylu, takie jak kolory obrysu i wypełnienia, szerokość obrysu itp.

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

HTML5 - elipsa SVG

Poniżej znajduje się wersja HTML5 przykładu SVG, który rysowałby elipsę za pomocą tagu <ellipse> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

HTML5 - wielokąt SVG

Poniżej znajduje się wersja HTML5 przykładu SVG, który rysowałby wielokąt za pomocą tagu <polygon> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

HTML5 - polilinia SVG

Poniżej znajduje się wersja HTML5 przykładu SVG, który rysowałby polilinię za pomocą tagu <polyline> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

HTML5 - Gradienty SVG

Poniżej przedstawiono wersję HTML5 przykładu SVG, który rysowałby elipsę za pomocą znacznika <ellipse> i używałby znacznika <radialGradient> do zdefiniowania gradientu radialnego SVG.

Podobnie, możesz użyć znacznika <linearGradient>, aby utworzyć gradient liniowy SVG.

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

HTML5 - Gwiazda SVG

Poniżej znajduje się wersja HTML5 przykładu SVG, który rysowałby gwiazdę za pomocą tagu <polygon>.

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

Dałoby to następujący wynik w najnowszej wersji przeglądarki Firefox obsługującej HTML5.

Składnia HTML5 HTML5 pozwala na użycie elementów MathML wewnątrz dokumentu przy użyciu tagów <math> ... </math>.

Większość przeglądarek internetowych może wyświetlać tagi MathML. Jeśli Twoja przeglądarka nie obsługuje MathML, proponuję użyć najnowszej wersji Firefoksa.

Przykłady MathML

Poniżej znajduje się prawidłowy dokument HTML5 z językiem MathML -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo> = </mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>
   </body>
</html>

To da następujący wynik -

Używanie znaków MathML

Weź pod uwagę, że poniżej znajduje się znacznik, który wykorzystuje znaki & InvisibleTimes; -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>			
            <mrow>
				
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
					
               <mo>+</mo>
					
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>
   </body>
</html>

Dałoby to następujący wynik. Jeśli nie widzisz odpowiedniego wyniku, takiego jak x 2 + 4x + 4 = 0, użyj przeglądarki Firefox 3.5 lub nowszej.

To da następujący wynik -

Przykłady prezentacji macierzy

Rozważmy następujący przykład, który zostałby użyty do przedstawienia prostej macierzy 2x2 -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open = "[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>

   </body>
</html>

To da następujący wynik -

Dałoby to następujący wynik. Jeśli nie widzisz prawidłowego wyniku, użyj przeglądarki Firefox 3.5 lub nowszej.

HTML5 wprowadza dwa mechanizmy, podobne do plików cookie sesji HTTP, do przechowywania ustrukturyzowanych danych po stronie klienta i przezwyciężania następujących wad.

  • Pliki cookie są dołączane do każdego żądania HTTP, spowalniając tym samym Twoją aplikację internetową, przesyłając te same dane.

  • Pliki cookie są dołączane do każdego żądania HTTP, wysyłając w ten sposób niezaszyfrowane dane przez Internet.

  • Pliki cookie są ograniczone do około 4 KB danych. Za mało do przechowywania wymaganych danych.

Te dwa magazyny to session storage i local storage i byłyby używane w różnych sytuacjach.

Najnowsze wersje prawie każdej przeglądarki obsługują pamięć HTML5, w tym Internet Explorer.

Przechowywanie sesji

Bagażu Sesja przeznaczona jest dla scenariuszy, w których użytkownik jest przeprowadzenie pojedynczej transakcji, ale może być przeprowadzenie wielu transakcji w różnych oknach jednocześnie.

Przykład

Na przykład, jeśli użytkownik kupuje bilety lotnicze w dwóch różnych oknach, korzystając z tej samej witryny. Gdyby witryna korzystała z plików cookie, aby śledzić, który bilet kupował użytkownik, to gdy użytkownik klikałby ze strony na stronę w obu oknach, aktualnie kupowany bilet „wyciekałby” z jednego okna do drugiego, potencjalnie powodując kup dwa bilety na ten sam lot, nie zauważając tego.

HTML5 wprowadza atrybut sessionStorage, który byłby używany przez strony do dodawania danych do pamięci sesji i będzie dostępny dla każdej strony z tej samej witryny otwartej w tym oknie, tj.session a gdy tylko zamkniesz okno, sesja zostanie utracona.

Poniżej znajduje się kod, który ustawiłby zmienną sesji i uzyskał dostęp do tej zmiennej -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

To da następujący wynik -

Lokalny magazyn

Local Storage przeznaczony jest do przechowywania, który obejmuje wiele okien i trwa poza bieżącej sesji. W szczególności aplikacje sieci Web mogą chcieć przechowywać megabajty danych użytkownika, takich jak całe dokumenty utworzone przez użytkownika lub skrzynka pocztowa użytkownika, po stronie klienta ze względu na wydajność.

Ponownie, pliki cookie nie radzą sobie dobrze z tym przypadkiem, ponieważ są przesyłane z każdym żądaniem.

Przykład

HTML5 wprowadza atrybut localStorage, który byłby używany do uzyskiwania dostępu do lokalnego obszaru przechowywania strony bez ograniczeń czasowych, a ten lokalny magazyn będzie dostępny za każdym razem, gdy będziesz korzystać z tej strony.

Poniżej znajduje się kod, który ustawiłby lokalną zmienną pamięci i miał dostęp do tej zmiennej za każdym razem, gdy ta strona jest otwierana, nawet następnym razem, gdy otworzysz okno -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

To da następujący wynik -

Usuń magazyn internetowy

Przechowywanie poufnych danych na komputerze lokalnym może być niebezpieczne i pozostawić lukę w zabezpieczeniach.

Przechowywanie danych sesji będzie usunięty przez przeglądarkę zaraz po sesji zostanie zakończony.

Aby wyczyścić ustawienia lokalnej pamięci, musisz zadzwonić localStorage.remove('key'); gdzie „klucz” jest kluczem wartości, którą chcesz usunąć. Jeśli chcesz wyczyścić wszystkie ustawienia, musisz zadzwonićlocalStorage.clear() metoda.

Poniżej znajduje się kod, który wyczyści całą pamięć lokalną -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

To da następujący wynik -

Interfejs API Web SQL Database nie jest w rzeczywistości częścią specyfikacji HTML5, ale jest oddzielną specyfikacją, która wprowadza zestaw interfejsów API do manipulowania bazami danych po stronie klienta przy użyciu języka SQL.

Zakładam, że jesteś świetnym programistą sieciowym i jeśli tak jest, to bez wątpienia byłbyś dobrze świadomy koncepcji SQL i RDBMS. Jeśli nadal chcesz mieć sesję z SQL, możesz przejść przez nasz samouczek SQL .

Baza danych Web SQL będzie działać w najnowszej wersji Safari, Chrome i Opera.

Podstawowe metody

Istnieją trzy podstawowe metody zdefiniowane w specyfikacji, którą omówię w tym samouczku:

  • openDatabase - Ta metoda tworzy obiekt bazy danych przy użyciu istniejącej bazy danych lub tworząc nową.

  • transaction - Ta metoda daje nam możliwość kontrolowania transakcji i wykonywania zatwierdzania lub wycofywania w zależności od sytuacji.

  • executeSql - Ta metoda służy do wykonywania rzeczywistego zapytania SQL.

Otwieranie bazy danych

Metoda openDatabase dba o otwarcie bazy danych, jeśli ona już istnieje, ta metoda utworzy ją, jeśli jeszcze nie istnieje.

Aby utworzyć i otworzyć bazę danych, użyj następującego kodu -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Powyższa metoda przyjęła pięć następujących parametrów -

  • Nazwa bazy danych
  • Numer wersji
  • Opis tekstowy
  • Rozmiar bazy danych
  • Tworzenie wywołania zwrotnego

Ostatni i piąty argument, wywołanie zwrotne kreacji zostanie wywołane, jeśli baza danych jest tworzona. Jednak bez tej funkcji bazy danych są nadal tworzone w locie i poprawnie wersjonowane.

Wykonywanie zapytań

Aby wykonać zapytanie, użyj funkcji database.transaction (). Ta funkcja wymaga pojedynczego argumentu, który jest funkcją, która faktycznie wykonuje zapytanie w następujący sposób -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

Powyższe zapytanie utworzy tabelę o nazwie LOGS w bazie danych „mydb”.

Operacja INSERT

Aby utworzyć wpisy do tabeli, dodajemy proste zapytanie SQL w powyższym przykładzie w następujący sposób -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

Podczas tworzenia wpisu możemy przekazać wartości dynamiczne w następujący sposób -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

Tutaj e_id i e_log są zmiennymi zewnętrznymi, a executeSql odwzorowuje każdy element argumentu tablicy na znaki „?”.

Operacja READ

Aby odczytać już istniejące rekordy, używamy wywołania zwrotnego w celu przechwycenia wyników w następujący sposób -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

Ostatni przykład

Na koniec zatrzymajmy ten przykład w pełnoprawnym dokumencie HTML5 w następujący sposób i spróbujmy uruchomić go w przeglądarce Safari.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

To da następujący wynik -

Konwencjonalne aplikacje internetowe generują zdarzenia, które są wysyłane do serwera WWW. Na przykład proste kliknięcie łącza żąda nowej strony z serwera.

Zdarzenia przesyłane z przeglądarki do serwera WWW można nazwać zdarzeniami wysyłanymi przez klienta.

Wraz z HTML5, WHATWG Web Applications 1.0 wprowadza zdarzenia, które przepływają z serwera WWW do przeglądarek internetowych i nazywane są zdarzeniami wysłanymi przez serwer (SSE). Korzystając z SSE, możesz w sposób ciągły wypychać zdarzenia DOM z serwera WWW do przeglądarki odwiedzającego.

Podejście do przesyłania strumieniowego zdarzeń otwiera trwałe połączenie z serwerem, wysyłając dane do klienta, gdy dostępne są nowe informacje, eliminując potrzebę ciągłego odpytywania.

Zdarzenia wysyłane przez serwer standaryzują sposób, w jaki przesyłamy dane z serwera do klienta.

Aplikacja internetowa dla SSE

Aby użyć zdarzeń wysyłanych przez serwer w aplikacji internetowej, trzeba dodać element <eventsource> do dokumentu.

Plik src atrybut elementu <eventsource> powinien wskazywać na adres URL, który powinien zapewniać trwałe połączenie HTTP, które wysyła strumień danych zawierający zdarzenia.

Adres URL wskazywałby na skrypt PHP, PERL lub dowolny skrypt w Pythonie, który zadbałby o spójne przesyłanie danych o zdarzeniach. Poniżej znajduje się prosty przykład aplikacji internetowej, która wymagałaby czasu serwera.

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Skrypt po stronie serwera dla SSE

Powinien wysłać skrypt po stronie serwera Content-typenagłówek określający typ tekstu / strumień zdarzenia w następujący sposób.

print "Content-Type: text/event-stream\n\n";

Po ustawieniu typu zawartości skrypt po stronie serwera wyśle ​​plik Event: tag, po którym następuje nazwa zdarzenia. Poniższy przykład wyśle ​​czas serwera jako nazwę zdarzenia zakończoną znakiem nowego wiersza.

print "Event: server-time\n";

Ostatnim krokiem jest przesłanie danych zdarzenia za pomocą Data: znacznik, po którym następowałaby liczba całkowita będąca wartością ciągu zakończona znakiem nowego wiersza w następujący sposób -

$time = localtime();
print "Data: $time\n";

Wreszcie, poniżej znajduje się kompletny ticker.cgi napisany w Perlu -

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

Obsługa zdarzeń wysłanych przez serwer

Zmodyfikujmy naszą aplikację internetową, aby obsługiwała zdarzenia wysyłane przez serwer. Oto ostatni przykład.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>

Przed przetestowaniem zdarzeń wysłanych z serwera sugerowałbym, aby upewnić się, że Twoja przeglądarka internetowa obsługuje tę koncepcję.

WebSockets to dwukierunkowa technologia komunikacyjna nowej generacji dla aplikacji internetowych, która działa w jednym gnieździe i jest udostępniana za pośrednictwem interfejsu JavaScript w przeglądarkach zgodnych z HTML 5.

Po uzyskaniu połączenia Web Socket z serwerem internetowym możesz wysyłać dane z przeglądarki do serwera, wywołując plik send() i odbierać dane z serwera do przeglądarki za pomocą pliku onmessage moduł obsługi zdarzeń.

Poniżej znajduje się API, które tworzy nowy obiekt WebSocket.

var Socket = new WebSocket(url, [protocal] );

Tutaj pierwszy argument, url, określa adres URL, z którym należy się połączyć. Drugi atrybut, protokół, jest opcjonalny i jeśli jest obecny, określa protokół podrzędny, który serwer musi obsługiwać, aby połączenie się powiodło.

Atrybuty WebSocket

Poniżej znajduje się atrybut obiektu WebSocket. Zakładając, że utworzyliśmy obiekt Socket, jak wspomniano powyżej -

Sr.No. Atrybut i opis
1

Socket.readyState

Atrybut readonly readyState reprezentuje stan połączenia. Może mieć następujące wartości -

  • Wartość 0 oznacza, że ​​połączenie nie zostało jeszcze nawiązane.

  • Wartość 1 oznacza, że ​​połączenie zostało nawiązane i komunikacja jest możliwa.

  • Wartość 2 oznacza, że ​​połączenie przechodzi przez uzgadnianie zamykające.

  • Wartość 3 oznacza, że ​​połączenie zostało zamknięte lub nie można go było otworzyć.

2

Socket.bufferedAmount

Atrybut tylko do odczytu bufferedAmount reprezentuje liczbę bajtów tekstu UTF-8, które zostały umieszczone w kolejce przy użyciu metody send ().

Wydarzenia WebSocket

Poniżej przedstawiono zdarzenia związane z obiektem WebSocket. Zakładając, że utworzyliśmy obiekt Socket, jak wspomniano powyżej -

Zdarzenie Obsługa zdarzeń Opis
otwarty Socket.onopen To zdarzenie występuje po ustanowieniu połączenia przez gniazdo.
wiadomość Socket.onmessage To zdarzenie występuje, gdy klient odbiera dane z serwera.
błąd Socket.onerror To zdarzenie występuje, gdy wystąpi jakikolwiek błąd w komunikacji.
blisko Socket.onclose To zdarzenie występuje, gdy połączenie jest zamknięte.

Metody WebSocket

Poniżej przedstawiono metody powiązane z obiektem WebSocket. Zakładając, że utworzyliśmy obiekt Socket, jak wspomniano powyżej -

Sr.No. Metoda i opis
1

Socket.send()

Metoda send (data) przesyła dane za pomocą połączenia.

2

Socket.close()

Metoda close () zostanie użyta do zakończenia dowolnego istniejącego połączenia.

Przykład WebSocket

WebSocket to standardowe dwukierunkowe gniazdo TCP między klientem a serwerem. Gniazdo jest uruchamiane jako połączenie HTTP, a następnie „uaktualnia” do gniazda TCP po uzgodnieniu HTTP. Po uzgodnieniu dane mogą wysyłać obie strony.

Kod HTML i JavaScript po stronie klienta

W chwili pisania tego samouczka tylko kilka przeglądarek internetowych obsługuje interfejs WebSocket (). Możesz wypróbować poniższy przykład z najnowszą wersją Chrome, Mozilla, Opera i Safari.

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Zainstaluj pywebsocket

Zanim przetestujesz powyższy program kliencki, potrzebujesz serwera obsługującego WebSocket. Pobierz mod_pywebsocket-xxxtar.gz z pywebsocket, który ma na celu udostępnienie rozszerzenia Web Socket dla serwera Apache HTTP i zainstaluj go, wykonując następujące kroki.

  • Rozpakuj i rozpakuj pobrany plik.

  • Wejdź do środka pywebsocket-x.x.x/src/ informator.

  • $ python setup.py build

  • $ sudo python setup.py install

  • Następnie przeczytaj dokument przez -

    • $ pydoc mod_pywebsocket

Spowoduje to zainstalowanie go w twoim środowisku Pythona.

Uruchom serwer

Przejdź do pywebsocket-x.x.x/src/mod_pywebsocket folder i uruchom następujące polecenie -

$sudo python standalone.py -p 9998 -w ../example/

Spowoduje to uruchomienie nasłuchiwania serwera na porcie 9998 i użycie rozszerzenia handlers katalog określony opcją -w, w którym znajduje się nasze echo_wsh.py.

Teraz za pomocą przeglądarki Chrome otwórz plik HTML, który utworzyłeś na początku. Jeśli Twoja przeglądarka obsługuje WebSocket (), to otrzymasz ostrzeżenie informujące, że Twoja przeglądarka obsługuje WebSocket, a na koniec, kiedy klikniesz „Uruchom WebSocket”, otrzymasz wiadomość Goodbye wysłaną przez skrypt serwera.

Element HTML5 <canvas> umożliwia łatwe i wydajne rysowanie grafiki przy użyciu JavaScript. Może być używany do rysowania wykresów, tworzenia kompozycji zdjęć lub wykonywania prostych (i nie tak prostych) animacji.

Oto prosty element <canvas>, który ma tylko dwa określone atrybuty width i height plus wszystkie podstawowe atrybuty HTML5, takie jak identyfikator, nazwa i klasa itp.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Możesz łatwo znaleźć ten element <canvas> w DOM za pomocą metody getElementById () w następujący sposób -

var canvas = document.getElementById("mycanvas");

Zobaczmy prosty przykład użycia elementu <canvas> w dokumencie HTML5.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

To da następujący wynik -

Kontekst renderowania

Element <canvas> jest początkowo pusty i aby coś wyświetlić, skrypt musi najpierw uzyskać dostęp do kontekstu renderowania i na nim narysować.

Element canvas ma metodę DOM o nazwie getContext, używany do uzyskania kontekstu renderowania i jego funkcji rysowania. Ta funkcja przyjmuje jeden parametr, typ kontekstu2d.

Poniżej znajduje się kod umożliwiający uzyskanie wymaganego kontekstu wraz ze sprawdzeniem, czy Twoja przeglądarka obsługuje element <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Wsparcie przeglądarki

Najnowsze wersje przeglądarek Firefox, Safari, Chrome i Opera obsługują format HTML5 Canvas, ale IE8 nie obsługuje płótna natywnie.

Możesz użyć ExplorerCanvas, aby mieć obsługę kanwy przez Internet Explorer. Wystarczy dołączyć ten JavaScript w następujący sposób -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Przykłady HTML5 Canvas

Ten samouczek obejmuje następujące przykłady związane z elementem HTML5 <canvas>.

Sr.No. Przykłady i opis
1 Rysowanie prostokątów

Dowiedz się, jak narysować prostokąt za pomocą elementu HTML5 <canvas>

2 Rysowanie ścieżek

Dowiedz się, jak tworzyć kształty za pomocą ścieżek w elemencie HTML5 <canvas>

3 Rysowanie linii

Dowiedz się, jak rysować linie za pomocą elementu HTML5 <canvas>

4 Rysunek Beziera

Dowiedz się, jak narysować krzywą Beziera za pomocą elementu HTML5 <canvas>

5 Rysunek kwadratowy

Dowiedz się, jak narysować krzywą kwadratową za pomocą elementu HTML5 <canvas>

6 Korzystanie z obrazów

Dowiedz się, jak używać obrazów z elementem HTML5 <canvas>

7 Utwórz gradienty

Dowiedz się, jak tworzyć gradienty za pomocą elementu HTML5 <canvas>

8 Style i kolory

Dowiedz się, jak stosować style i kolory za pomocą elementu HTML5 <canvas>

9 Tekst i czcionki

Dowiedz się, jak narysować niesamowity tekst przy użyciu różnych czcionek i ich rozmiaru.

10 Wzór i cień

Dowiedz się, jak rysować różne wzory i rzucać cienie.

11 Stany na płótnie

Dowiedz się, jak zapisywać i przywracać stany kanwy podczas wykonywania złożonych rysunków na kanwie.

12 Tłumaczenie na płótnie

Ta metoda służy do przenoszenia płótna i jego początku do innego punktu siatki.

13 Obrót płótna

Ta metoda służy do obracania obszaru roboczego wokół aktualnego początku.

14 Skalowanie płótna

Ta metoda służy do zwiększania lub zmniejszania jednostek w siatce płótna.

15 Canvas Transform

Metody te pozwalają na modyfikacje bezpośrednio w macierzy transformacji.

16 Skład płótna

Ta metoda służy do maskowania niektórych obszarów lub usuwania sekcji z płótna.

17 Animacja płótna

Dowiedz się, jak tworzyć podstawowe animacje przy użyciu kanwy HTML5 i JavaScript.

Funkcje HTML5 obejmują natywną obsługę audio i wideo bez konieczności używania Flasha.

Tagi HTML5 <audio> i <video> ułatwiają dodawanie multimediów do witryny internetowej. Musisz ustawićsrc atrybut identyfikujący źródło multimediów i zawierający atrybut sterujący, dzięki czemu użytkownik może odtwarzać i wstrzymywać multimedia.

Osadzanie wideo

Oto najprostsza forma osadzenia pliku wideo na swojej stronie internetowej -

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

Obecna wersja robocza specyfikacji HTML5 nie określa, które formaty wideo przeglądarki powinny obsługiwać w tagu wideo. Ale najczęściej używane formaty wideo to -

  • Ogg - Pliki Ogg z kodekiem wideo Thedora i kodekiem audio Vorbis.

  • mpeg4 - Pliki MPEG4 z kodekiem wideo H.264 i kodekiem audio AAC.

Możesz użyć znacznika <source>, aby określić nośnik wraz z jego typem i wieloma innymi atrybutami. Element wideo umożliwia korzystanie z wielu elementów źródłowych, a przeglądarka będzie używać pierwszego rozpoznanego formatu -

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

To da następujący wynik -

Specyfikacja atrybutów wideo

Tag wideo HTML5 może mieć wiele atrybutów umożliwiających sterowanie wyglądem i sposobem działania oraz różnymi funkcjami kontrolki -

Sr.No. Atrybut i opis
1

autoplay

Jeśli ten atrybut boolowski zostanie określony, wideo rozpocznie się automatycznie, gdy tylko będzie to możliwe, bez zatrzymywania w celu zakończenia ładowania danych.

2

autobuffer

Ten atrybut logiczny, jeśli jest określony, rozpocznie się automatyczne buforowanie wideo, nawet jeśli nie jest ustawiony na automatyczne odtwarzanie.

3

controls

Jeśli ten atrybut jest obecny, umożliwia użytkownikowi sterowanie odtwarzaniem wideo, w tym głośnością, wyszukiwaniem i wstrzymaniem / wznowieniem odtwarzania.

4

height

Ten atrybut określa wysokość obszaru wyświetlania wideo w pikselach CSS.

5

loop

Ten atrybut boolowski, jeśli zostanie określony, umożliwi automatyczne przeszukiwanie wideo z powrotem do początku po osiągnięciu końca.

6

preload

Ten atrybut określa, że ​​wideo zostanie załadowane podczas wczytywania strony i będzie gotowe do uruchomienia. Ignorowane, jeśli obecne jest autoodtwarzanie.

7

poster

To jest adres URL obrazu, który będzie wyświetlany, dopóki użytkownik nie odtworzy lub nie zacznie szukać.

8

src

Adres URL filmu do osadzenia. To jest opcjonalne; zamiast tego możesz użyć elementu <source> w bloku wideo, aby określić wideo do osadzenia.

9

width

Ten atrybut określa szerokość obszaru wyświetlania wideo w pikselach CSS.

Osadzanie dźwięku

HTML5 obsługuje znacznik <audio>, który jest używany do osadzania zawartości dźwiękowej w dokumencie HTML lub XHTML w następujący sposób.

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

Obecna wersja robocza specyfikacji HTML5 nie określa, jakie formaty audio powinny obsługiwać przeglądarki w tagu audio. Ale najczęściej używanymi formatami audio sąogg, mp3 i wav.

Możesz użyć <source & ggt; do określenia mediów wraz z ich typem i wieloma innymi atrybutami. Element audio umożliwia korzystanie z wielu elementów źródłowych, a przeglądarka będzie używać pierwszego rozpoznanego formatu -

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

To da następujący wynik -

Specyfikacja atrybutów audio

Znacznik audio HTML5 może mieć wiele atrybutów do kontrolowania wyglądu i działania oraz różnych funkcji kontrolki -

Sr.No. Atrybut i opis
1

autoplay

Ten atrybut boolowski, jeśli jest określony, dźwięk będzie automatycznie odtwarzany, gdy tylko będzie to możliwe, bez zatrzymywania w celu zakończenia ładowania danych.

2

autobuffer

Ten atrybut boolowski, jeśli jest określony, dźwięk automatycznie rozpocznie buforowanie, nawet jeśli nie jest ustawiony na automatyczne odtwarzanie.

3

controls

Jeśli ten atrybut jest obecny, umożliwia użytkownikowi sterowanie odtwarzaniem dźwięku, w tym głośnością, wyszukiwaniem i wstrzymywaniem / wznawianiem odtwarzania.

4

loop

Ten atrybut boolowski, jeśli zostanie określony, umożliwi automatyczne przeszukiwanie audio z powrotem do początku po osiągnięciu końca.

5

preload

Ten atrybut określa, że ​​dźwięk zostanie załadowany podczas ładowania strony i będzie gotowy do uruchomienia. Ignorowane, jeśli obecne jest autoodtwarzanie.

6

src

Adres URL dźwięku do osadzenia. To jest opcjonalne; zamiast tego możesz użyć elementu <source> w bloku wideo, aby określić wideo do osadzenia.

Obsługa wydarzeń medialnych

Znacznik audio i wideo HTML5 może mieć wiele atrybutów umożliwiających sterowanie różnymi funkcjami kontrolki za pomocą JavaScript -

S.No. Opis wydarzenia
1

abort

To zdarzenie jest generowane po przerwaniu odtwarzania.

2

canplay

To zdarzenie jest generowane, gdy dostępna jest wystarczająca ilość danych, aby można było odtworzyć multimedia.

3

ended

To zdarzenie jest generowane po zakończeniu odtwarzania.

4

error

To zdarzenie jest generowane, gdy wystąpi błąd.

5

loadeddata

To zdarzenie jest generowane, gdy zakończy się ładowanie pierwszej klatki nośnika.

6

loadstart

To zdarzenie jest generowane po rozpoczęciu ładowania nośnika.

7

pause

To zdarzenie jest generowane po wstrzymaniu odtwarzania.

8

play

To zdarzenie jest generowane podczas rozpoczynania lub wznawiania odtwarzania.

9

progress

To zdarzenie jest generowane okresowo w celu poinformowania o postępie pobierania mediów.

10

ratechange

To zdarzenie jest generowane, gdy zmienia się prędkość odtwarzania.

11

seeked

To zdarzenie jest generowane po zakończeniu operacji wyszukiwania.

12

seeking

To zdarzenie jest generowane, gdy rozpoczyna się operacja wyszukiwania.

13

suspend

To zdarzenie jest generowane, gdy ładowanie nośnika jest zawieszone.

14

volumechange

To zdarzenie jest generowane, gdy zmienia się głośność dźwięku.

15

waiting

To zdarzenie jest generowane, gdy żądana operacja (taka jak odtwarzanie) jest opóźniona w oczekiwaniu na zakończenie innej operacji (takiej jak wyszukiwanie).

Poniżej znajduje się przykład, który pozwala odtworzyć dany film -

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

To da następujący wynik -

Konfigurowanie serwerów dla typu nośnika

Większość serwerów domyślnie nie obsługuje nośników Ogg lub mp4 z poprawnymi typami MIME, więc prawdopodobnie będziesz musiał dodać odpowiednią konfigurację.

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

Interfejs API geolokalizacji HTML5 umożliwia udostępnianie lokalizacji w ulubionych witrynach internetowych. JavaScript może przechwytywać Twoją szerokość i długość geograficzną i może być wysyłany do serwera WWW zaplecza i wykonywać wymyślne funkcje uwzględniające lokalizację, takie jak znajdowanie lokalnych firm lub pokazywanie Twojej lokalizacji na mapie.

Obecnie większość przeglądarek i urządzeń mobilnych obsługuje interfejs API geolokalizacji. Interfejsy API geolokalizacji działają z nową właściwością obiektu globalnego nawigatora, tj. Obiekt geolokalizacyjny, który można utworzyć w następujący sposób -

var geolocation = navigator.geolocation;

Obiekt geolokalizacji to obiekt usługowy, który umożliwia widgetom pobieranie informacji o położeniu geograficznym urządzenia.

Metody geolokalizacji

Obiekt geolokalizacji udostępnia następujące metody -

Sr.No. Metoda i opis
1 getCurrentPosition ()

Ta metoda pobiera bieżącą lokalizację geograficzną użytkownika.

2 watchPosition ()

Ta metoda pobiera okresowe aktualizacje dotyczące bieżącej lokalizacji geograficznej urządzenia.

3 clearWatch ()

Ta metoda anuluje trwające wywołanie watchPosition.

Przykład

Poniżej znajduje się przykładowy kod do użycia dowolnej z powyższych metod -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

Tutaj showLocation i errorHandler są metodami wywołań zwrotnych, które zostałyby użyte do uzyskania rzeczywistej pozycji, jak wyjaśniono w następnej sekcji, i do obsługi błędów, jeśli takie istnieją.

Właściwości lokalizacji

Metody geolokalizacji getCurrentPosition () i getPositionUsingMethodName () określają metodę wywołania zwrotnego, która pobiera informacje o lokalizacji. Te metody są wywoływane asynchronicznie z obiektemPosition który przechowuje pełne informacje o lokalizacji.

Plik Positionobiekt określa aktualne położenie geograficzne urządzenia. Lokalizacja jest wyrażona jako zbiór współrzędnych geograficznych wraz z informacją o kursie i prędkości.

W poniższej tabeli opisano właściwości obiektu Position. W przypadku właściwości opcjonalnych, jeśli system nie może podać wartości, wartość właściwości jest ustawiana na null.

własność Rodzaj Opis
coords obiekty Określa położenie geograficzne urządzenia. Lokalizacja jest wyrażona jako zbiór współrzędnych geograficznych wraz z informacją o kursie i prędkości.
coords.latitude Numer Określa szacunkową szerokość geograficzną w stopniach dziesiętnych. Zakres wartości to [-90,00, +90,00].
coords.longitude Numer Określa szacunkową długość geograficzną w stopniach dziesiętnych. Zakres wartości to [-180,00, +180,00].
coords.altitude Numer [Opcjonalnie] Określa szacunkową wysokość w metrach nad elipsoidą WGS 84.
coords.accuracy Numer [Opcjonalnie] Określa dokładność szacunków szerokości i długości geograficznej w metrach.
coords.altitudeAccuracy Numer [Opcjonalnie] Określa dokładność oszacowania wysokości w metrach.
coords.heading Numer [Opcjonalnie] Określa bieżący kierunek ruchu urządzenia w stopniach, licząc zgodnie z ruchem wskazówek zegara względem prawdziwej północy.
coords.speed Numer [Opcjonalnie] Określa aktualną prędkość urządzenia w metrach na sekundę.
znak czasu data Określa czas, w którym pobrano informacje o lokalizacji i utworzono obiekt Position.

Przykład

Poniżej znajduje się przykładowy kod, który wykorzystuje obiekt Position. Tutaj metoda showLocation jest metodą wywołania zwrotnego -

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

Obsługa błędów

Geolokalizacja jest skomplikowana i jest bardzo wymagana, aby wyłapać każdy błąd i poradzić sobie z nim z wdziękiem.

Metody geolokalizacji getCurrentPosition () i watchPosition () wykorzystują metodę wywołania zwrotnego obsługi błędów, która daje PositionErrorobiekt. Ten obiekt ma następujące dwie właściwości -

własność Rodzaj Opis
kod Numer Zawiera numeryczny kod błędu.
wiadomość Strunowy Zawiera czytelny dla człowieka opis błędu.

W poniższej tabeli opisano możliwe kody błędów zwracane w obiekcie PositionError.

Kod Stały Opis
0 NIEZNANY BŁĄD Metoda nie mogła pobrać lokalizacji urządzenia z powodu nieznanego błędu.
1 PERMISSION_DENIED Metoda nie może pobrać lokalizacji urządzenia, ponieważ aplikacja nie ma uprawnień do korzystania z usługi lokalizacji.
2 POSITION_UNAVAILABLE Nie można określić lokalizacji urządzenia.
3 KONIEC CZASU Metoda nie mogła pobrać informacji o lokalizacji w określonym maksymalnym przedziale czasu.

Przykład

Poniżej znajduje się przykładowy kod, który wykorzystuje obiekt PositionError. Tutaj metoda errorHandler jest metodą wywołania zwrotnego -

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

Opcje pozycji

Poniżej przedstawiono rzeczywistą składnię metody getCurrentPosition () -

getCurrentPosition(callback, ErrorCallback, options)

Tutaj trzecim argumentem jest PositionOptions obiekt, który określa zestaw opcji pobierania lokalizacji geograficznej urządzenia.

Poniżej znajdują się opcje, które można określić jako trzeci argument -

własność Rodzaj Opis
enableHighAccuracy Boolean Określa, czy widget chce otrzymywać możliwie najdokładniejsze oszacowanie lokalizacji. Domyślnie jest to fałsz.
koniec czasu Numer Właściwość timeout to liczba milisekund, które aplikacja internetowa jest gotowa czekać na pozycję.
maksymalny wiek Numer Określa czas wygaśnięcia w milisekundach dla informacji o lokalizacji w pamięci podręcznej.

Przykład

Poniżej znajduje się przykładowy kod, który pokazuje, jak korzystać z wyżej wymienionych metod -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

Mikrodane to ustandaryzowany sposób zapewniania dodatkowej semantyki na stronach internetowych.

Mikrodane umożliwiają zdefiniowanie własnych dostosowanych elementów i rozpoczęcie osadzania niestandardowych właściwości na stronach internetowych. Na wysokim poziomie mikrodane składają się z grupy par nazwa-wartość.

Grupy są nazywane items, a każda para nazwa-wartość to property. Elementy i właściwości są reprezentowane przez zwykłe elementy.

Przykład

  • Aby utworzyć element, plik itemscope atrybut jest używany.

  • Aby dodać właściwość do elementu, plik itemprop atrybut jest używany na jednym z elementów potomnych elementu.

Tutaj są dwa elementy, z których każdy ma właściwość „name” -

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

To da następujący wynik -

Właściwości zazwyczaj mają wartości, które są ciągami, ale mogą mieć następujące typy danych -

Atrybuty globalne

Microdata wprowadza pięć globalnych atrybutów, które byłyby dostępne dla każdego elementu do wykorzystania i dają maszynom kontekst dotyczący twoich danych.

Sr.No. Atrybut i opis
1

itemscope

Służy do tworzenia przedmiotu. Atrybut itemscope jest atrybutem logicznym, który informuje, że na tej stronie znajdują się mikrodane i od tego się zaczyna.

2

itemtype

Ten atrybut jest prawidłowym adresem URL, który definiuje element i zapewnia kontekst właściwości.

3

itemid

Ten atrybut jest globalnym identyfikatorem produktu.

4

itemprop

Ten atrybut określa właściwość przedmiotu.

5

itemref

Atrybut ten zawiera listę dodatkowych elementów do przeszukania w celu znalezienia par nazwa-wartość elementu.

Właściwości typów danych

Właściwości zazwyczaj mają wartości będące ciągami znaków, jak wspomniano w powyższym przykładzie, ale mogą również mieć wartości będące adresami URL. Poniższy przykład ma jedną właściwość „image”, której wartością jest adres URL -

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

Właściwości mogą również mieć wartości, które są datami, godzinami lub datami i godzinami. Osiąga się to za pomocątime element i jego datetime atrybut.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

To da następujący wynik -

Właściwości mogą również same być grupami par nazwa-wartość, przez umieszczenie atrybutu itemscope na elemencie, który deklaruje właściwość.

Obsługa Microdata API

Jeśli przeglądarka obsługuje interfejs API mikrodanych HTML5, w globalnym obiekcie dokumentu będzie dostępna funkcja getItems (). Jeśli przeglądarka nie obsługuje mikrodanych, funkcja getItems () będzie niezdefiniowana.

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr nie obsługuje jeszcze sprawdzania interfejsu API mikrodanych, więc musisz użyć funkcji takiej jak wymieniona powyżej.

Standard mikrodanych HTML5 obejmuje zarówno znaczniki HTML (głównie dla wyszukiwarek), jak i zestaw funkcji DOM (głównie dla przeglądarek).

Możesz umieszczać znaczniki mikrodanych na swoich stronach internetowych, a wyszukiwarki, które nie rozumieją atrybutów mikrodanych, po prostu je zignorują. Ale jeśli chcesz uzyskać dostęp do mikrodanych lub manipulować nimi za pośrednictwem DOM, musisz sprawdzić, czy przeglądarka obsługuje interfejs DOM API mikrodanych.

Definiowanie słownictwa mikrodanych

Aby zdefiniować słownik mikrodanych, potrzebujesz adresu URL przestrzeni nazw, który wskazuje na działającą stronę internetową. Na przykład https://data-vocabulary.org/Person może służyć jako przestrzeń nazw dla osobistego słownika mikrodanych z następującymi nazwanymi właściwościami -

  • name - Imię osoby jako prosty ciąg

  • Photo - Adres URL do zdjęcia osoby.

  • URL - Witryna internetowa należąca do osoby.

Korzystanie z właściwości mikrodanych osoby może wyglądać następująco -

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

To da następujący wynik -

Google obsługuje mikrodane w ramach programu Rich Snippets. Gdy robot sieciowy Google analizuje Twoją stronę i znajduje właściwości mikrodanych zgodne ze słownikiem http://datavocabulary.org/Person, analizuje te właściwości i zapisuje je wraz z pozostałymi danymi strony.

Powyższy przykład możesz przetestować za pomocą narzędzia do testowania fragmentów rozszerzonych, używając http://www.tutorialspoint.com/html5/microdata.htm

Dalszy rozwój mikrodanych można znaleźć w mikrodanych HTML5 .

Przeciągnij i upuść (DnD) to zaawansowana koncepcja interfejsu użytkownika, która ułatwia kopiowanie, zmianę kolejności i usuwanie elementów za pomocą kliknięć myszą. Dzięki temu użytkownik może kliknąć i przytrzymać przycisk myszy nad elementem, przeciągnąć go w inne miejsce i zwolnić przycisk myszy, aby upuścić element w tym miejscu.

Aby osiągnąć funkcjonalność przeciągania i upuszczania w tradycyjnym HTML4, programiści musieliby albo używać złożonego programowania JavaScript, albo innych struktur JavaScript, takich jak jQuery itp.

Teraz HTML 5 wymyślił API Drag and Drop (DnD), które zapewnia natywną obsługę DnD w przeglądarce, znacznie ułatwiając kodowanie.

HTML 5 DnD jest obsługiwany przez wszystkie główne przeglądarki, takie jak Chrome, Firefox 3.5 i Safari 4 itp.

Przeciągnij i upuść wydarzenia

Istnieje wiele zdarzeń uruchamianych na różnych etapach operacji przeciągania i upuszczania. Te wydarzenia są wymienione poniżej -

Sr.No. Wydarzenia i opis
1

dragstart

Pożary, gdy użytkownik zacznie przeciągać obiekt.

2

dragenter

Uruchamiane, gdy mysz zostanie po raz pierwszy najechana na element docelowy podczas przeciągania. Odbiornik tego zdarzenia powinien wskazać, czy dozwolone jest upuszczenie w tej lokalizacji. Jeśli nie ma detektorów lub słuchacze nie wykonują żadnych operacji, domyślnie upuszczanie nie jest dozwolone.

3

dragover

To zdarzenie jest uruchamiane, gdy wskaźnik myszy jest przesuwany nad elementem podczas przeciągania. W większości przypadków operacja wykonywana podczas nasłuchiwania będzie taka sama, jak w przypadku zdarzenia dragenter.

4

dragleave

To zdarzenie jest wywoływane, gdy mysz opuszcza element podczas przeciągania. Słuchacze powinni usunąć wszelkie znaczniki podświetlania lub wstawiania używane do upuszczania opinii.

5

drag

Uruchamia się za każdym razem, gdy mysz jest poruszana podczas przeciągania obiektu.

6

drop

Zdarzenie upuszczania jest uruchamiane na elemencie, w którym nastąpiło upuszczenie pod koniec operacji przeciągania. Słuchacz byłby odpowiedzialny za pobranie danych, które są przeciągane i wstawienie ich w miejscu upuszczenia.

7

dragend

Pożary, gdy użytkownik zwolni przycisk myszy podczas przeciągania obiektu.

Note- Zwróć uwagę, że uruchamiane są tylko zdarzenia przeciągania; zdarzenia myszy, takie jak przesunięcie myszy, nie są uruchamiane podczas operacji przeciągania.

Obiekt DataTransfer

Akceptują metody detektora zdarzeń dla wszystkich zdarzeń typu „przeciągnij i upuść” Event obiekt, który ma atrybut tylko do odczytu o nazwie dataTransfer.

Plik event.dataTransfer zwroty DataTransfer obiekt powiązany ze zdarzeniem w następujący sposób -

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

Obiekt DataTransfer przechowuje dane dotyczące operacji przeciągania i upuszczania. Te dane można pobrać i ustawić w kategoriach różnych atrybutów związanych z obiektem DataTransfer, jak wyjaśniono poniżej -

Sr.No. Atrybuty DataTransfer i ich opis
1

dataTransfer.dropEffect [ = value ]

  • Zwraca rodzaj aktualnie wybranej operacji.

  • Ten atrybut można ustawić, aby zmienić wybraną operację.

  • Możliwe wartości to none, copy, link i move.

2

dataTransfer.effectAllowed [ = value ]

  • Zwraca rodzaje operacji, które mają być dozwolone.

  • Ten atrybut można ustawić, aby zmienić dozwolone operacje.

  • Możliwe wartości to none, copy, copyLink, copyMove, link, linkMove, move, all i uninitialized.

3

dataTransfer.types

Zwraca DOMStringList zawierający listę formatów, które zostały ustawione w zdarzeniu dragstart. Ponadto, jeśli przeciągane są jakiekolwiek pliki, jednym z typów będzie ciąg „Pliki”.

4

dataTransfer.clearData ( [ format ] )

Usuwa dane o określonych formatach. Usuwa wszystkie dane, jeśli argument zostanie pominięty.

5

dataTransfer.setData(format, data)

Dodaje określone dane.

6

data = dataTransfer.getData(format)

Zwraca określone dane. Jeśli nie ma takich danych, zwraca pusty ciąg.

7

dataTransfer.files

Zwraca FileList przeciąganych plików, jeśli takie istnieją.

8

dataTransfer.setDragImage(element, x, y)

Używa danego elementu, aby zaktualizować informację zwrotną dotyczącą przeciągania, zastępując wszelkie wcześniej określone opinie.

9

dataTransfer.addElement(element)

Dodaje dany element do listy elementów używanych do renderowania informacji zwrotnej o przeciągnięciu.

Przeciągnij i upuść

Poniżej przedstawiono kroki, które należy wykonać, aby zaimplementować operację przeciągnij i upuść -

Krok 1 - Umożliwienie przeciągania obiektu

Oto kroki, które należy podjąć -

  • Jeśli chcesz przeciągnąć element, musisz ustawić draggable przypisują true dla tego elementu.

  • Ustaw nasłuchiwanie zdarzeń dla dragstart który przechowuje przeciągane dane.

  • Odbiornik zdarzeń dragstart ustawi dozwolone efekty (kopiowanie, przenoszenie, łączenie lub kombinacja).

Poniżej znajduje się przykład umożliwiający przeciąganie obiektu -

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

To da następujący wynik -

Krok 2 - Upuszczenie obiektu

Aby zaakceptować upuszczenie, cel upuszczenia musi nasłuchiwać co najmniej trzech zdarzeń.

  • Plik dragenterzdarzenie, które służy do określenia, czy cel upuszczenia ma zaakceptować upuszczenie. Jeśli drop ma zostać przyjęty, to wydarzenie musi zostać odwołane.

  • Plik dragoverzdarzenie, które służy do określenia, jakie informacje zwrotne mają być wyświetlane użytkownikowi. Jeśli zdarzenie zostanie anulowane, informacja zwrotna (zazwyczaj kursor) jest aktualizowana na podstawie wartości atrybutu dropEffect.

  • Wreszcie drop zdarzenie, które pozwala na wykonanie rzeczywistego zrzutu.

Poniżej znajduje się przykład upuszczenia obiektu do innego obiektu -

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

To da następujący wynik -

JavaScript został zaprojektowany do działania w środowisku jednowątkowym, co oznacza, że ​​wiele skryptów nie może działać w tym samym czasie. Rozważ sytuację, w której musisz obsługiwać zdarzenia interfejsu użytkownika, wykonywać zapytania i przetwarzać duże ilości danych API oraz manipulować modelem DOM.

JavaScript zawiesi Twoją przeglądarkę w sytuacji, gdy wykorzystanie procesora jest wysokie. Weźmy prosty przykład, w którym JavaScript przechodzi przez dużą pętlę -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         function bigLoop() {
            
            for (var i = 0; i <= 10000; i += 1) {
               var j = i;
            }
            alert("Completed " + j + "iterations" );
         }
         
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
      
   </head>
   
   <body>
      <input type = "button" onclick = "bigLoop();" value = "Big Loop" />
      <input type = "button" onclick = "sayHello();" value = "Say Hello" />
   </body>
</html>

To da następujący wynik -

Po kliknięciu przycisku Big Loop wyświetla się następujący wynik w przeglądarce Firefox -

Co to są pracownicy sieci?

Sytuację wyjaśnioną powyżej można obsłużyć za pomocą Web Workers który wykona wszystkie kosztowne obliczeniowo zadania bez przerywania interfejsu użytkownika i zazwyczaj będzie działał w oddzielnych wątkach.

Web Workers pozwalają na długotrwałe skrypty, które nie są przerywane przez skrypty, które reagują na kliknięcia lub inne interakcje użytkownika, i pozwalają na wykonywanie długich zadań bez ustępowania, aby strona była responsywna.

Pracownicy sieciowi to skrypty działające w tle, są stosunkowo ciężkie i nie są przeznaczone do stosowania w dużych ilościach. Na przykład niewłaściwe byłoby uruchamianie jednego pracownika na każdy piksel czteromegapikselowego obrazu.

Kiedy skrypt jest wykonywany w module roboczym sieci Web, nie może uzyskać dostępu do obiektu okna strony internetowej (window.document), co oznacza, że ​​pracownicy sieci Web nie mają bezpośredniego dostępu do strony internetowej i interfejsu API DOM. Chociaż pracownicy sieciowi nie mogą blokować interfejsu użytkownika przeglądarki, nadal mogą zużywać cykle procesora i zmniejszać szybkość reakcji systemu.

Jak pracują pracownicy sieciowi?

Pracownicy sieci Web są inicjowani za pomocą adresu URL pliku JavaScript, który zawiera kod, który zostanie wykonany przez proces roboczy. Ten kod ustawia nasłuchiwania zdarzeń i komunikuje się ze skryptem, który uruchomił go ze strony głównej. Poniżej znajduje się prosta składnia -

var worker = new Worker('bigLoop.js');

Jeśli określony plik javascript istnieje, przeglądarka utworzy nowy wątek roboczy, który jest pobierany asynchronicznie. Jeśli ścieżka do pracownika zwróci błąd 404, pracownik po cichu zawiedzie.

Jeśli Twoja aplikacja ma wiele obsługiwanych plików JavaScript, możesz je zaimportować importScripts() metoda, która przyjmuje nazwy plików jako argumenty oddzielone przecinkami w następujący sposób -

importScripts("helper.js", "anotherHelper.js");

Po pojawieniu się narzędzia Web Worker komunikacja między narzędziem pracy sieciowej a jego stroną nadrzędną odbywa się za pomocą rozszerzenia postMessage()metoda. W zależności od przeglądarki / wersji, postMessage () może zaakceptować ciąg znaków lub obiekt JSON jako pojedynczy argument.

Dostęp do wiadomości przekazanej przez Web Workera uzyskuje się za pomocą onmessagewydarzenie na stronie głównej. Teraz napiszmy nasz przykład bigLoop przy użyciu narzędzia Web Worker. Poniżej znajduje się strona główna (hello.htm), która spowoduje powstanie pracownika sieciowego w celu wykonania pętli i zwrócenia końcowej wartości zmiennejj -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Poniżej znajduje się zawartość pliku bigLoop.js. To wykorzystujepostMessage() API do przekazywania komunikacji z powrotem na stronę główną -

for (var i = 0; i <= 1000000000; i += 1) {
   var j = i;
}
postMessage(j);

To da następujący wynik -

Zatrzymywanie pracowników sieci Web

Pracownicy sieciowi nie zatrzymują się sami, ale strona, która ich uruchomiła, może ich powstrzymać, dzwoniąc terminate() metoda.

worker.terminate();

Zakończony pracownik sieciowy nie będzie już odpowiadać na wiadomości ani wykonywać żadnych dodatkowych obliczeń. Nie możesz ponownie uruchomić pracownika; zamiast tego możesz utworzyć nowego pracownika przy użyciu tego samego adresu URL.

Obsługa błędów

Poniżej przedstawiono przykład funkcji obsługi błędów w pliku JavaScript procesu roboczego sieci Web, która rejestruje błędy w konsoli. Z kodem obsługi błędów powyższy przykład wyglądałby następująco -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         worker.onerror = function (event) {
            console.log(event.message, event);
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Sprawdzanie obsługi przeglądarki

Poniżej przedstawiono składnię służącą do wykrywania obsługi funkcji Web Worker dostępnej w przeglądarce -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      <script src = "/js/modernizr-1.5.min.js"></script>
      
      <script>
      function myFunction() {
         
         if (Modernizr.webworkers) {
            alert("Congratulation!! you have web workers support." );
         } else {
            alert("Sorry!! you do not have web workers support." );
         }
      }
      </script>
   </head>
   
   <body>
      <button onclick = "myFunction()">Click me</button>
   </body>
</html>

To da następujący wynik -

Indexeddb to nowa koncepcja HTML5 do przechowywania danych w przeglądarce użytkownika. indexeddb to większa moc niż lokalna pamięć masowa i przydatna w aplikacjach, które wymagają przechowywania dużej ilości danych. Te aplikacje mogą działać wydajniej i szybciej się ładować.

Dlaczego warto korzystać z indexeddb?

Organizacja W3C ogłosiła, że ​​baza danych Web SQL jest przestarzałą specyfikacją lokalnego magazynu, więc twórcy stron internetowych nie powinni już więcej korzystać z tej technologii. indexeddb to alternatywa dla bazy danych Web SQL i bardziej efektywna niż starsze technologie.

funkcje

  • przechowuje wartości par kluczy
  • nie jest relacyjną bazą danych
  • Interfejs API IndexedDB jest w większości asynchroniczny
  • nie jest to ustrukturyzowany język zapytań
  • obsługuje dostęp do danych z tej samej domeny

IndexedDB

Przed wejściem do indexeddb musimy dodać kilka przedrostków implementacji, jak pokazano poniżej

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || 
window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || 
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || 
window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

Otwórz bazę danych IndexedDB

Przed utworzeniem bazy danych musimy przygotować dane do bazy danych. Zacznijmy od danych pracowników firmy.

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
   { id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];

Dodawanie danych

Tutaj ręczne dodawanie niektórych danych do danych, jak pokazano poniżej -

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   request.onsuccess = function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

Pobieranie danych

Możemy pobrać dane z bazy danych za pomocą funkcji get ()

function read() {
   var transaction = db.transaction(["employee"]);
   var objectStore = transaction.objectStore("employee");
   var request = objectStore.get("00-03");
   
   request.onerror = function(event) {
      alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess = function(event) {
      
      if(request.result) {
         alert("Name: " + request.result.name + ", Age: 
            " + request.result.age + ", Email: " + request.result.email);
      } else {
         alert("Kenny couldn't be found in your database!");  
      }
   };
}

Korzystając z get (), możemy przechowywać dane w obiekcie zamiast tego możemy przechowywać dane w kursorze i możemy pobierać dane z kursora.

function readAll() {
   var objectStore = db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      
      if (cursor) {
         alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
            Age: " + cursor.value.age + ", Email: " + cursor.value.email);
         cursor.continue();
      } else {
         alert("No more entries!");
      }
   };
}

Usuwanie danych

Możemy usunąć dane z IndexedDB za pomocą remove (). Oto jak wygląda kod

function remove() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess = function(event) {
      alert("prasad entry has been removed from your database.");
   };
}

Kod HTML

Aby wyświetlić wszystkie dane, musimy użyć zdarzenia onClick, jak pokazano poniżej kod -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title>IndexedDb Demo | onlyWebPro.com</title>
   </head>
   
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()"></button>
      <button onclick = "add()"></button>
      <button onclick = "remove()">Delete </button>
   </body>
</html>

Ostateczny kod powinien mieć postać -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <script type = "text/javascript">
         
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //prefixes of window.IDB objects
         window.IDBTransaction = window.IDBTransaction || 
         window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || 
         window.msIDBKeyRange
         
         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB.")
         }
         
         const employeeData = [
            { id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
            { id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
         ];
         var db;
         var request = window.indexedDB.open("newDatabase", 1);
         
         request.onerror = function(event) {
            console.log("error: ");
         };
         
         request.onsuccess = function(event) {
            db = request.result;
            console.log("success: "+ db);
         };
         
         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
         
         function read() {
            var transaction = db.transaction(["employee"]);
            var objectStore = transaction.objectStore("employee");
            var request = objectStore.get("00-03");
            
            request.onerror = function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess = function(event) {
               // Do something with the request.result!
               if(request.result) {
                  alert("Name: " + request.result.name + ", 
                     Age: " + request.result.age + ", Email: " + request.result.email);
               } else {
                  alert("Kenny couldn't be found in your database!");
               }
            };
         }
         
         function readAll() {
            var objectStore = db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
                     Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               } else {
                  alert("No more entries!");
               }
            };
         }
         
         function add() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
            
            request.onsuccess = function(event) {
               alert("Kenny has been added to your database.");
            };
            
            request.onerror = function(event) {
               alert("Unable to add data\r\nKenny is aready exist in your database! ");
            }
         }
         
         function remove() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess = function(event) {
               alert("Kenny's entry has been removed from your database.");
            };
         }
      </script>
      
   </head>
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()">Read all </button>
      <button onclick = "add()">Add data </button>
      <button onclick = "remove()">Delete data </button>
   </body>
</html>

Wytworzy następujący wynik -

Wiadomości internetowe to możliwość wysyłania wiadomości w czasie rzeczywistym z serwera do przeglądarki klienta. Zastępuje problem komunikacji między domenami w różnych domenach, protokołach lub portach

Na przykład, jeśli chcesz wysłać dane ze strony do kontenera reklam, który jest umieszczony w ramce iframe lub na odwrót, w tym scenariuszu przeglądarka zgłasza wyjątek bezpieczeństwa. Dzięki wiadomościom internetowym możemy przekazywać dane jako zdarzenie wiadomości.

Wiadomość Wydarzenie

Zdarzenia wiadomości odpalają Przesyłanie wiadomości między dokumentami, przesyłanie wiadomości w kanałach, zdarzenia wysyłane przez serwer i gniazda sieciowe. Zostało opisane przez interfejs zdarzenia wiadomości.

Atrybuty

Sr.No. Atrybuty i opis
1

data

Zawiera dane ciągów

2

origin

Zawiera nazwę domeny i port

3

lastEventId

Zawiera unikalny identyfikator aktualnego zdarzenia wiadomości.

4

source

Zawiera odniesienie do okna dokumentu źródłowego

5

ports

Zawiera dane, które są wysyłane przez dowolny port wiadomości

Wysyłanie wiadomości obejmującej różne dokumenty

Przed wysłaniem wiadomości między dokumentami musimy utworzyć nowy kontekst przeglądania sieci WWW, tworząc nową ramkę iframe lub nowe okno. Możemy wysłać dane za pomocą funkcji postMessage () i ma ona dwa argumenty. Są jak -

  • message - wiadomość do wysłania
  • targetOrigin - Nazwa pochodzenia

Przykłady

Wysyłanie wiadomości z iframe do przycisku

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

Odbieranie wiadomości obejmującej wiele dokumentów w dokumencie odbierającym

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

Wiadomości na kanale

Dwukierunkowa komunikacja między kontekstami przeglądania nazywa się przesyłaniem komunikatów kanałowych. Jest to przydatne do komunikacji z wieloma źródłami.

Obiekty MessageChannel i MessagePort

Tworząc messageChannel, wewnętrznie tworzy dwa porty do wysyłania danych i przekazywania ich do innego kontekstu przeglądania.

  • postMessage() - Opublikuj kanał przesyłania wiadomości

  • start() - Wysyła dane

  • close() - Zamyka porty

W tym scenariuszu wysyłamy dane z jednego elementu iframe do innego iframe. Tutaj wywołujemy dane w funkcji i przekazujemy dane do DOM.

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

Powyższy kod pobiera dane z portu 2, teraz przekazuje dane do drugiego elementu iframe

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Teraz drugi dokument obsługuje dane za pomocą funkcji portMsgHandler.

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Cross-origin resource sharing (CORS) to mechanizm zezwalający na ograniczone zasoby z innej domeny w przeglądarce internetowej.

Na przykład, jeśli klikniesz odtwarzacz wideo HTML5 w sekcjach demonstracyjnych HTML5 . poprosi o pozwolenie aparatu. jeśli użytkownik wyrazi zgodę, to tylko otworzy kamerę, albo nie otworzy kamery dla aplikacji internetowych.

Wysyłanie żądania CORS

Tutaj Chrome, Firefox, Opera i Safari używają obiektu XMLHttprequest2, a Internet Explorer używa podobnego obiektu XDomainRequest, obiektu.

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS not supported');
}

Uchwyty zdarzeń w CORS

Sr.No. Obsługa i opis zdarzeń
1

onloadstart

Rozpoczyna żądanie

2

onprogress

Ładuje dane i wysyła dane

3

onabort

Przerwij żądanie

4

onerror

żądanie nie powiodło się

5

onload

żądanie załadowania pomyślnie

6

ontimeout

upłynął limit czasu, zanim żądanie mogło zostać zakończone

7

onloadend

Gdy żądanie jest zakończone, powodzenie lub niepowodzenie

Przykład zdarzenia onload lub onerror

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

Przykład CORS z obsługą

Poniższy przykład pokaże przykład makeCorsRequest () i handlera onload

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

Web RTC wprowadzony przez World Wide Web Consortium (W3C). Obsługuje aplikacje typu browser-tobrowser do połączeń głosowych, rozmów wideo i udostępniania plików P2P.

Chcesz spróbować? web RTC dostępny dla Chrome, Opera i Firefox. Dobrym miejscem do rozpoczęcia jest prosta aplikacja video chat na tutaj . Web RTC implementuje trzy interfejsy API, jak pokazano poniżej -

  • MediaStream - uzyskać dostęp do kamery i mikrofonu użytkownika.

  • RTCPeerConnection - uzyskać dostęp do funkcji połączeń audio lub wideo.

  • RTCDataChannel - uzyskać dostęp do komunikacji peer-to-peer.

MediaStream

MediaStream reprezentuje zsynchronizowane strumienie multimediów. Na przykład kliknij odtwarzacz wideo HTML5 w sekcji demonstracyjnej HTML5 lub kliknij tutaj .

Powyższy przykład zawiera stream.getAudioTracks () i stream.VideoTracks (). Jeśli nie ma ścieżek audio, zwraca pustą tablicę i sprawdza strumień wideo, jeśli kamera internetowa jest podłączona, stream.getVideoTracks () zwraca tablicę jednego MediaStreamTrack reprezentującego strumień z kamery internetowej. Prostym przykładem są aplikacje do czatu, aplikacja do czatu pobiera strumień z kamery internetowej, tylnej kamery, mikrofonu.

Przykładowy kod MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

Zrzut ekranu

Jest to również możliwe w przeglądarce Chrome z mediaStreamSource i wymaga HTTPS. Ta funkcja nie jest jeszcze dostępna w operze. Przykładowe demo jest dostępne tutaj

Kontrola sesji, informacje o sieci i mediach

Web RTC wymagał komunikacji peer-to-peer między przeglądarkami. Mechanizm ten wymagał sygnalizacji, informacji o sieci, kontroli sesji i informacji o mediach. Twórcy stron internetowych mogą wybrać różne mechanizmy komunikacji między przeglądarkami, takie jak SIP lub XMPP lub dowolną komunikację dwukierunkową. Przykładowy przykład XHR jest tutaj .

Przykładowy kod createSignalingChannel ()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

// run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);
   
   // send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };
   
   // once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
      remoteView.src = URL.createObjectURL(evt.stream);
   };
   
   // get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
      selfView.src = URL.createObjectURL(stream);
      pc.addStream(stream);
      
      if (isCaller)
         pc.createOffer(gotDescription);
      
      else
         pc.createAnswer(pc.remoteDescription, gotDescription);
         
         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }
   
   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);
      
      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
      
      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};