powoli zniknie.
Powrót
10.09.2020
Walidacja formularza internetowego za pomocą jQuery i JavaScript
Jednym z typowych zastosowań JavaScript jest walidacja formularza internetowego lub, bardziej odpowiednio, wstępne sprawdzenie formularza internetowego. Po przesłaniu formularza internetowego jest on wysyłany do programu na serwerze, który może następnie zrobić coś pożytecznego z danymi, na przykład sfinalizować zamówienie lub przechowywać dane w bazie danych. Jednak używanie JavaScript do sprawdzania poprawności nie zapewnia bezpieczeństwa programu opartego na serwerze.
Nie zastępuj walidacji JavaScript walidacją po stronie serwera
Nie ma gwarancji, że odwiedzający Twoją stronę internetową ma włączoną obsługę JavaScript w swojej przeglądarce. Dlatego nie można polegać na JavaScript jako jedynym sposobie sprawdzenia, czy użytkownik wprowadził odpowiednio sformatowane dane. Włamano się na więcej niż jedną witrynę sieci Web, ponieważ programista polegał wyłącznie na języku JavaScript do sprawdzania poprawności i weryfikacji treści danych wprowadzanych przez użytkownika z formularza sieci Web. Wszystkie dane muszą zostać zweryfikowane na serwerze lub w kodzie serwera. Żadna ilość sprawdzania poprawności JavaScript, próba wymagania JavaScript lub innych sztuczek zapewni, że dane są bezpieczne. Zawsze weryfikuj dane na serwerze. JavaScript używany jako środek do sprawdzania poprawności danych formularzy ma być używany tylko w celu poprawy komfortu użytkowania przez dostarczanie wczesnych informacji zwrotnych na temat znanych nieprawidłowych danych. JavaScript nigdy nie jest - i nigdy nie powinien być - używany do prawdziwego sprawdzania poprawności danych.
Mając to na uwadze, oto prosty formularz i trochę kodu JavaScript / jQuery do weryfikacji pola tekstowego w formularzu:
< !DOCTYPE HTML >
< html >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
< title >jQuery 101< /title >
< script type="text/javascript" src="jquery-1.4.4.min.js" >< /script >
< /head >
< body >
< form id="myForm" name="myForm" action="#" method="post" >
< p >Answer: < input id="firstName" type="text" name="firstname" >< /p >
< p >< input type="submit" name="formSubmit" value="Check Form" >< /p >
< /form >
< script type="text/javascript" >
$("#myForm").submit(function() {
if ($("#firstName").val() == "Yes") {
alert("Form entered correctly");
} else {
alert("Form not correct");
return false;
}
});
< /script >
< /body >
< /html >
Kod wprowadza kilka nowych koncepcji, a mianowicie warunkowe if. W tym przypadku kod używa warunku if, aby sprawdzić, czy wartość wprowadzona przez użytkownika jest zgodna z tym, czego oczekujesz od pola tekstowego w formularzu. Funkcja jQuery .val() w poprzednim kodzie również jest tutaj nowa. Funkcja .val() pobiera wartość tego, co zostało wprowadzone w polu tekstowym (lub jakikolwiek element został wybrany). Wreszcie, gdy pole tekstowe nie jest poprawnie wypełnione, zwraca wartość false; komunikat. W tym kontekście zwraca false; wskazuje, że przetwarzanie formularza internetowego nie powinno być kontynuowane i formularz nie powinien być przesyłany. Po przesłaniu wartości Tak w polu tekstowym kod wyświetla ostrzeżenie i kontynuuje przesyłanie formularza. Jeśli użytkownik wprowadzi cokolwiek innego i prześle formularz, kod weryfikacyjny wyświetli alert wskazujący, że formularz nie został wypełniony poprawnie, i zatrzymuje przesyłanie formularza na serwer, zwracając wartość false. Bardziej złożonym, ale bardziej przyjaznym dla użytkownika podejściem do obsługi błędów jest zmiana koloru tła w nieprawidłowo wypełnionym polu formularza. Oczywiście w przypadku formularza jednego pola w tym przykładzie jest jasne, które pole jest nieprawidłowe. Ale w bardziej złożonym formularzu może nie być tak oczywiste, które pole zawiera nieprawidłową wartość. Oto kod do zmiany koloru tła:
$("#myForm").submit(function() {
if ($("#firstName").val() == "Yes") {
alert("Form entered correctly");
} else {
$("#firstName").css("backgroundColor","red");
return false;
}
});
Ten kod zmienia backgroundColor elementu formularza identyfikowanego przez id first Name na czerwony, gdy jest wypełniony niepoprawnie. Jednak najlepsza praktyka nakazuje nie zmieniać informacji o stylu CSS w kodzie JavaScript. O wiele lepiej jest dodawać i usuwać style CSS z elementów. Takie postępowanie ułatwia rozwiązywanie problemów i skutkuje bardziej przejrzystym kodem. jQuery posiada funkcje do dodawania i usuwania klas CSS z elementów: plik o trafnym tytule. funkcje addClass () i .removeClass (). Na stronach sprawdzania poprawności formularzy zazwyczaj tworzę klasę błędów CSS, która ustawia kolor tła na czerwony (lub czerwonawy, który przyciąga uwagę). Styl CSS może wyglądać tak:
.errorField {
background-color: red;
}
Następnie w kodzie, zamiast zmieniać rzeczywisty kolor tła CSS, zastosuję klasę błędu za pomocą funkcji .addClass (), jak pokazano poniżej:
$ ("# firstName"). addClass ("errorClass");
Cała strona, w tym kod JavaScript i informacje o stylu CSS, jest pokazana w poniższym kodzie:
< !DOCTYPE HTML >
< html >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
< title >jQuery 101< /title >
< script type="text/javascript" src="jquery-1.4.4.min.js" >< /script >
< style type="text/css" >
.errorClass {
background-color: red;
}
< /style >
< /head >
< body >
< form id="myForm" name="myForm" action="#" method="post" >
< p >Answer: < input id="firstName" type="text" name="firstname" >< /p >
< p> < input type="submit" name="formSubmit" value="Check Form" >< /p >
< /form >
< script type="text/javascript" >
$(document).ready(function() {
$("#myForm").submit(function() {
if ($("#firstName").val() == "Yes") {
$("#firstName").removeClass("errorClass");
alert("Form entered correctly");
} else {
$("#firstName").addClass("errorClass");
return false;
}
});
}); //end document ready function
< /script >
< /body >
< /html >
Zwróć uwagę, że kod JavaScript jest zawinięty w funkcję .ready (). Chociaż nie jest to absolutnie konieczne, chciałem zilustrować, jak można używać .ready (). Należy również zauważyć, że podczas przesyłania formularza kod używa funkcji .removeClass () w celu usunięcia klasy errorClass z elementu formularza. W praktyce możesz przenieść to wywołanie .removeClass () do dowolnej liczby innych miejsc w kodzie, w tym do wywołania funkcji main .ready () lub do funkcji .submit (). Obsługa błędów, jQuery i JavaScript obejmuje znacznie więcej, niż można pokazać w jednym krótkim rozdziale, ale mając tę podstawową wiedzę w ręku, możesz teraz zbadać, dlaczego tag HTML5 < canvas > jest tak ważny.
Powrót
11.09.2020
Korzystanie z tagu < canvas > HTML5
Nowością w HTML5 jest tag o nazwie < canvas >, który zapewnia przestrzeń, w której można rysować grafikę, uruchamiać animacje i wiele więcej na stronie internetowej. Jednak sam tag < canvas > nic nie robi. Zamiast tego tag < canvas > polega na JavaScript, aby narysować grafikę, którą może zawierać. Widzisz więc, że to nie przypadek, że spędziłeś tyle czasu na nauce języka JavaScript w tym rozdziale! Tag < canvas > jest jednym z najłatwiejszych tagów w HTML5. Po prostu mówisz przeglądarce, jak duży ma być obszar roboczy, a ona odpowiednio tworzy kontener. Na przykład poniższy przykład przedstawia < canvas > o wymiarach 250 × 250 pikseli:
< canvas width = "250" height = "250" id = "myCanvas" > < /canvas >
Niestety, w chwili pisania tego tekstu wiele przeglądarek nie obsługuje elementu < canvas >; w związku z tym musisz zapewnić alternatywną zawartość dla przeglądarek, które nie są jeszcze gotowe na grafikę opartą na kanwie. Możesz udostępnić tę alternatywną treść, umieszczając ją między otwierającym i zamykającym tagiem < canvas >, na przykład:
< canvas width = "250" height = "250" id = "myCanvas" >
< p > Miejsce na alternatywną treść < /p >
< /canvas >
Przeglądarki, które nie rozumieją znacznika < canvas >, zignorują go i wyświetlą zawartość znajdującego się w nim kodu HTML; w tym przypadku tag < p >. Używasz JavaScript do rysowania na płótnie, więc na szczęście właśnie nauczyłeś się tak dużo o języku! Aby rysować na płótnie, musisz określić współrzędne, od których chcesz zacząć. Współrzędne na płótnie używają systemu siatki. W siatce pokazanej powyżej współrzędne 0,0 reprezentują najwyższą i lewą komórkę w siatce, a liczby rosną w miarę przesuwania się w prawo iw dół. Same komórki reprezentują piksele na ekranie. Punkty wzdłuż osi poziomej siatki nazywane są współrzędnymi x, a punkty wzdłuż osi pionowej nazywane są współrzędnymi y. Rysujesz za pomocą kombinacji linii i prymitywnych kształtów. Na przykład, możesz tworzyć prostokąty o różnych formach, używając funkcji takich jak fillRect do rysowania wypełnionego prostokąta i strokeRect do rysowania konturowego prostokąta. Obie te funkcje akceptują współrzędne x i y, aby określić, gdzie powinny rozpocząć
rysowanie, wraz z szerokością i specyfikacją wysokości. Kod do rysowania prostokąta o wymiarach 50 × 100 pikseli rozpoczynający się od współrzędnej x 10 i współrzędnej y 20 wygląda następująco:
fillRect (10,20,50,100)
Zanim jednak zaczniesz rysować, potrzebujesz płótna. Dodatkowo musisz również wywołać funkcję getContext () dla kanwy. Przykłady, jak to zrobić, zobaczysz w poniższym przykładzie kodu, który pokazuje całą stronę, na której zastosowano tag < canvas > do narysowania tego prostokąta.
Ważne: Poniższe przykłady wymagają użycia biblioteki jQuery. Przykłady pokazują użycie wersji jQuery opartej na CDN. Możesz również użyć wersji, którą pobrałeś na podstawie poprzednich przykładów w tym rozdziale. Jeśli używasz lokalnej wersji jQuery, umieść ją w tym samym folderze, co te przykłady kodu.
< !DOCTYPE HTML >
< html >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
< title >Canvas< /title >
< script type="text/javascript"
src=http://code.jquery.com/jquery-1.4.4.min.js >< /script >
< /head >
< body >
< canvas width="250" height="250" id="myCanvas" >
< p >Alternate content goes here< /p >
< /canvas >
< script type="text/javascript" >
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var canvasContext = canvas.getContext("2d");
canvasContext.fillStyle = "blue";
canvasContext.fillRect(10,20,50,100);
} else {
// You could do something else here
// because the browser doesn't support
// the canvas element.
}
});
< /script >
< /body >
< /html >
Ten kod tworzy element < canvas > (i zapewnia alternatywną zawartość dla przeglądarek innych niż HTML5). Większość strony składa się z kodu JavaScript służącego do rysowania prostokąta, jak pokazano poniżej:
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var canvasContext = canvas.getContext("2d");
canvasContext.fillStyle = "blue";
canvasContext.fillRect(10,20,50,100);
} else {
// You could do something else here
// because the browser doesn't support
// the canvas element.
}
Ten kod pobiera element o identyfikatorze myCanvas i umieszcza go w zmiennej JavaScript o nazwie canvas. Następnie kod sprawdza, czy funkcja getContext() jest dostępna. Jeśli ta funkcja nie jest dostępna, oznacza to, że przeglądarka prawie na pewno nie obsługuje elementu < canvas >. Dlatego próba użycia metody getContext() spowodowałaby błąd JavaScript. Jeśli jednak funkcja getContext() jest dostępna, kod jest kontynuowany przez wywołanie metody getContext (), ustawienie parametru fillStyle na niebieski i narysowanie prostokąta. Wyświetlenie tej strony w przeglądarce kompatybilnej z < canvas >, takiej jak Mozilla Firefox, powoduje wyświetlenie strony z niebieskim prostokątem. Wyświetlenie strony w przeglądarce, która nie obsługuje < canvas >, powoduje wyświetlenie alternatywnej zawartości. Oto kolejny przykład. Ten przykład dynamicznie zmienia rozmiar prostokąta za pomocą JavaScript, na podstawie miejsca kliknięcia w obszarze roboczym:
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var canvasContext = canvas.getContext("2d");
canvasContext.fillStyle = "blue";
canvasContext.fillRect(0,0,50,100);
$("#myCanvas").click(function(f) {
var x = f.pageX - this.offsetLeft;
var y = f.pageY - this.offsetTop;
canvasContext.clearRect(0,0,250,250);
canvasContext.fillRect(0,0,x,y)
});
} else {
// You could do something else here
// because the browser doesn't support
// the canvas element.
}
Ten przykład dodaje funkcję .click() dzięki jQuery. Funkcja .click() sprawdza, gdzie nastąpiło kliknięcie myszą w elemencie canvas. Następnie czyści płótno i rysuje nowy prostokąt w miejscu kliknięcia myszą. Ten przykład zaczyna pokazywać interaktywność, która jest możliwa dzięki elementowi canvas. Na koniec mam zabawny przykład, który obiecałem. Opierając się na poprzednim przykładzie, kod pokazany tutaj tworzy większą kanwę na stronie, a następnie buduje kilka bloków na stronie. Po kliknięciu każdego bloku kod usuwa ten blok. Załaduj ten przykład do przeglądarki kompatybilnej z płótnem (lub uruchom go z Javascript02.html znajdującego się w folderze _Solutions w tym rozdziale) i zobacz, jak szybko możesz usunąć wszystkie bloki!
Ważne : Jeśli przeskoczyłeś do zabawnego przykładu, będziesz musiał użyć biblioteki jQuery w przykładzie pokazanym tutaj, który korzysta z jQuery opartego na CDN.
< !DOCTYPE HTML >
< html >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
< title >Canvas Block< /title >
< script type="text/javascript" src=http://code.jquery.com/jquery-1.4.4.min.js >< /script >
< /head >
< body >
< canvas width="400" height="400" id="myCanvas" >
< p >Alternate content goes here< /p >
< /canvas >
< script type="text/javascript" >
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var canvasContext = canvas.getContext("2d");
canvasContext.fillStyle = "blue";
var numBlocks = 4;
var canWidth = $("#myCanvas").attr("width");
var canHeight = $("#myCanvas").attr("height");
var blockWidth = (canWidth/numBlocks) - 2;
var blockHeight = (canHeight/numBlocks) - 2;
var offsetX = 0;
var offsetY = 0;
var colCount = 0;
var numTotal = numBlocks * numBlocks;
for (i = 0; i < numTotal; i++) {
canvasContext.fillRect(offsetX,offsetY,
blockWidth,blockHeight);
offsetX = offsetX + blockWidth + 2;
colCount++;
if (colCount == numBlocks) {
colCount = 0;
offsetY = offsetY + blockHeight + 2;
offsetX = 0;
}
}
$("#myCanvas").click(function(f) {
var x = f.pageX - this.offsetLeft;
var y = f.pageY - this.offsetTop;
var xBlock = Math.floor((x / blockWidth));
var yBlock = Math.floor((y / blockHeight));
var xSpan = 0, ySpan = 0;
if (xBlock > 0) {
xSpan = xBlock * 2;
}
if (yBlock > 0) {
ySpan = yBlock * 2;
}
var xPos = (blockWidth * xBlock) + xSpan;
var yPos = (blockHeight * yBlock) + ySpan;
canvasContext.clearRect(xPos,yPos,blockWidth,
blockHeight);
});
} else {
// You could do something else here
// because the browser doesn't support
// the canvas element.
}
});
< /script >
< /body >
< /html >
Jeśli znudzi Ci się siatka 4 na 4, zmień liczbę bloków, zmieniając tę linię w kodzie w następujący sposób:
var numBlocks = 4;
Kod w przykładzie dynamicznie zmieni siatkę, aby pasowała do liczby bloków określonej przez ustawienie zmiennej numBlocks. Chociaż ten przykład wykorzystuje kilka elementów JavaScript, które wykraczają poza zakres tej książki, jest to dobre wprowadzenie do interaktywności możliwej nawet w przypadku podstawowej aplikacji Canvas. Popularność i użycie elementu < canvas > będzie rosło w ciągu najbliższych kilku lat, ale minie trochę czasu, zanim wszystkie przeglądarki będą go obsługiwać. Na przykład, chociaż Internet Explorer 9 będzie obsługiwał element canvas, starsze wersje Internet Explorera będą działać przez wiele lat. Jeśli jednak chcesz dowiedzieć się więcej o elemencie < canvas >, w tym zobaczyć dodatkowe (i znacznie bardziej w pełni funkcjonalne) przykłady oraz samouczek, odwiedź stronę https://developer.mozilla.org/en/HTML/Canvas.
Powrót
12.09.2020
Dołączanie treści zewnętrznych do stron internetowych
HTML5 wprowadził tag < eventsource >, który umożliwia wypychanie zawartości serwera zewnętrznego na stronę internetową. Model ten nazywany jest "wypychaniem" w przeciwieństwie do tradycyjnego modelu "ściągania" używanego w sieci WWW, w którym przeglądarka internetowa zawsze żąda informacji z serwera. Podobnie jak w przypadku elementu < canvas >, w chwili obecnej pisanie tagu < eventsource > nie jest szeroko obsługiwane w przeglądarkach internetowych; w związku z tym ma ograniczone zastosowanie w praktycznym programowaniu WWW, dopóki nie pojawią się i nie zostaną powszechnie przyjęte nowe przeglądarki. Więcej informacji na temat < eventsource > można znaleźć pod adresem http://www.whatwg.org/specs/web-apps/current-work/.
Inną metodą dołączania danych zewnętrznych (w tym przypadku multimediów) jest tag < embed >. W przeciwieństwie do < eventsource > tag < embed > ma szeroką obsługę w różnych przeglądarkach. Mimo że element < embed > nie został sformalizowany w specyfikacji HTML aż do wersji 5, ludzie używali tego tagu od lat ze względu na jego zgodność z różnymi przeglądarkami. Znacznik < embed > jest często używany do wstawiania elementów, takich jak Flash lub dźwięk w tle na stronie internetowej. Znacznik < embed > używa kilku atrybutów, takich jak src, aby zdefiniować zasób do osadzenia, wpisz tekst, aby zdefiniować typ osadzanej treści, oraz wysokość i szerokość, aby ustawić odpowiednio wysokość i szerokość elementu. Użycie < embed > do osadzenia pliku MP3 jest tak proste, jak to:
< embed src = "myfile.mp3" > < /embed >
Podobnie jak w przypadku umieszczania jakichkolwiek multimediów lub innych obiektów na stronie, odtwarzanie zależy od klienta. Chociaż moja przeglądarka obsługuje odtwarzanie pliku audio MP3, nie ma gwarancji, że inny użytkownik będzie mógł to zrobić. Dlatego zalecam używanie