Cel mai simplu web-script

Cel mai simplu web-script

Book: HTML 5, CSS 3, și Web 2.0. Dezvoltarea de astăzi Web-site-uri

Cel mai simplu Web-script

Prima Web-script pe care le scrie va fi destul de simplu. Se afișează pe paginile web de la data curentă.

La începutul acestei cărți, am început să studieze HTML, am creat un mic Web-pagina 1.1.htm. Îl vom găsi și deschide-l în Notepad. La sfârșitul codului său HTML- înainte de închidere , inserați codul din listingul 14.1.

var dNow = new Date ();

var ZĂPADA = dNow.toString ();

Actualizați deschis în Web-browser-ul Web-pagină prin apăsarea . Acum, data este afișată într-un format familiar.

Scenariul bazat pe Web mai complexe

Acum, hai să facem ceva un pic mai complicat - pentru a face liste de elemente care formează banda de navigare index.htm Web-pagina, schimba culoarea de frontieră atunci când treceți cursorul mouse-ului pe ele. Așa că am da vizitatorului să înțeleagă că aceste elemente pagini web pot răspunde la acțiunile sale.

În primul rând, deschideți foaia de stil si va face sa CSS-cod unele modificări. In primul rand, stilurile combinate corecte #navbar LI și #navbar LI UL LI așa cum este prezentat în Exemplul 14.3.

În primul rând, am solicitat elemente de liste „externe“ și imbricate care formează forma benzii de navigare a cursorului ca un „deget arătător“. Așa că am da vizitatorului să înțeleagă că aceste elemente se comporta ca hyperlink-uri, și ei pot face clic pe mouse-ul.

În al doilea rând, am creat o listă de elemente închise cadru solid subțire de aceeași culoare ca fundal, pagina Web. Acest cadru nu este vizibil.

În continuare, se adaugă într-o foaie de stil care este un stil:

Am creat o clasă de stil care specifica culoarea cadrului. Din moment ce clasa de stil este mai puțin specifică decât stilul combinat, am făcut un atribut de stil care specifica culoarea cadrului, importantă. (Despre cele mai importante atribute ale stilului, vezi cap. 7).

Dacă vom lega acest stil la orice element din listă, formând o bandă de navigare - „externă“ sau imbricate - el va cere o nouă culoare punct de cadru. Ca urmare, în elementul de listă „externă“ va deveni mai întunecată, și un cadru imbricate invizibil lista element - vizibil.

Acum, deschis în Notepad-ul Web pagina index.htm și puneți-l în secțiunea antet (etichetă ) O astfel de etichetă:

Iar la sfârșitul codul HTML al paginii web, înainte de închidere

, inserați această etichetă:

În cele din urmă, în directorul rădăcină al Web-site-ul nostru va crea un text main.js fișier și scrieți conținutul de listare 14.4.

Aceasta este, de asemenea, un web-script. Dar noi l-am pus deja într-un fișier separat main.js.

Salvați-l de codificare UTF-8 (pentru a face acest lucru, a fost descris în capitolul 1).

Toate este creat un comportament. Deschideți index.htm Web-pagină în Web-browser. Treceți cu mouse-ul peste orice element din bara de navigare și a vedea cum va apărea în jurul cadrului întunecat.