Web designer - link-uri utile. Conectarea unui script JavaScript

De la autor: site-ul în sine este activat html pur foarte limitat în funcționalitate. Pentru a adăuga unele capabilități familiare, trebuie să utilizați alte tehnologii. Scripturile pentru un site web html vor face resursa mult mai funcțională. Să vorbim despre ei.

Adevărul este că Limbi HTMLși CSS au foarte oportunități limitate. Cu ajutorul lor, puteți doar să creați și să proiectați o pagină, să organizați unele efecte simple la trecerea cursorului, adăugați link-uri către alte pagini etc. Dar pentru majoritatea resurse moderne asta nu este suficient. Iată care sunt caracteristicile folosite astăzi pe multe site-uri web: calendare, widget-uri inteligente, contoare de trafic, formulare de înregistrare și comentarii, glisoare și multe, multe altele.

Cel mai adesea, un script este înțeles ca un fișier sau mai multe fișiere în care sunt scrise limbajul javascriptși completează cumva funcționalitatea site-ului. Dar scripturile pot fi create în orice limbaj de programare: PHP, Perl, Python etc. Cele mai multe scripturi există în PHP și JavaScript, deoarece acestea sunt cele mai populare tehnologii astăzi.

De unde să descărcați scripturi gata făcute pentru site-ul web html

Desigur, astăzi puteți descărca mii de scripturi online, dar unde puteți găsi cele mai mari colecții? În acest sens, site-urile străine sunt puțin înaintea RuNet, deoarece tehnologiile web se dezvoltă mai repede acolo.

De exemplu, hotscripts.com. Un portal străin uriaș, care prezintă mai mult de zece mii de scripturi și programe limbi diferite programare. Inclusiv, există diverse lucruri utile în HTML5. Doar totul este în engleză, așa că va trebui să-ți dai seama cumva dacă chiar ai nevoie.

Orez. 1. Cel mai mare portal de scripturi de pe Internet. Din păcate, doar pentru cei care vorbesc fluent engleza.

Ei bine, aceasta este o bibliotecă de scripturi în limba rusă. Cele mai multe materiale PHP sunt prezentate aici. ÎN în acest caz, Site-ul în limba rusă beneficiază de faptul că aproape toate instrucțiunile pentru instalarea scripturilor sunt în limba rusă, ceea ce înseamnă că este mult mai ușor de înțeles.

Cum se instalează și se conectează scripturi

Este imposibil să răspundem cu exactitate la această întrebare, deoarece scripturile diferă în complexitatea lor și metoda de instalare. De exemplu, pentru scripturile javascript, cel mai adesea trebuie să descărcați și să instalați mai întâi biblioteca jQuery, apoi să conectați diferite plugin-uri la aceasta, care vor implementa funcționalitatea dorită.

In caz de Instalare PHP poate implica copierea fisierele necesare la server cu scrierea ulterioară a unei noi bucăți de cod în funcții. Cu toate acestea, aproape fiecare script normal are instrucțiuni de instalare.

Care este diferența dintre javascript și scripturi php

Diferența este că JavaScript este cel mai adesea folosit pentru a crea elemente de design frumoase și pentru a scrie scripturi care sunt declanșate de diverse acțiuni ale vizitatorului. De exemplu, puteți modifica aranjarea elementelor pe o pagină web, modificați schema de culori amplasamentul și chiar structura acestuia. De exemplu, pe multe portaluri mari puteți personaliza singur designul site-ului. Aici sunt folosite javascript și cea mai populară bibliotecă, jQuery.

PHP este foarte diferit în această privință. Acest limbaj a fost creat în principal pentru a extinde funcționalitatea. Cu ajutorul lui, tot felul de forme de înregistrări, recenzii și comentarii prind viață. Scenariul părere Pentru un site html îl puteți scrie și în PHP. De fapt, capacitățile acestui limbaj sunt mult mai largi.

Pe el sunt scrise cele mai populare motoare, precum WordPress; cu ajutorul lui sunt create biblioteci, contoare, hărți de site, instrumente de administrare a găzduirii și sute de alte lucruri. În acest sens, PHP poate face mult mai mult decât javascript.

Exemplu de instalare de script

Ei bine, acum hai să instalăm niște scripturi. Din întâmplare l-am ales pe acesta - link. Acesta este un ceas grafic. Mai întâi, să despachetăm arhiva descărcată și să vedem ce este acolo.

Nu mi-a plăcut imediat că erau necesare până la 14 imagini pentru muncă. Ei bine, bine, să nu evaluăm calitatea scriptului acum, ci doar să îl instalăm.

Pentru a face acest lucru, trebuie să deschideți fișierul index.html. Acolo ar trebui să fim interesați de eticheta de script și de tot conținutul acesteia. De fapt, există două opțiuni pentru instalarea unui script web:

Doar copiați întregul conținut al etichetei de script și inserați-l în eticheta head de pe pagina dvs.

Copiați codul în dosar separat(de exemplu, script.js), apoi conectați acest fișier la pagina html. Acest lucru va face ceea ce trebuie din perspectiva standardelor, prin separarea aspectului paginii și a comportamentului.

Proces în continuare Configurarea este că eticheta body trebuie să adauge atributul onload = „show3()”. Aceasta înseamnă că după ce s-a încărcat corpul paginii, trebuie să fie executată funcția show3(), care ne pune ceasul în mișcare.

Acum tot ce trebuie să facem este să introducem o linie de cod în corpul paginii care va crea elementele necesare pentru afișarea ceasului. Scriptul implicit spune asta:

< a href = "http://www.woweb.ru" > < Img Src = "cb.gif" Name = "a" border = 0 > < Img Src = "cb.gif" Name = "b" border = 0 > < Img Src = "colon.gif" Name = "c" border = 0 > < Img Src = "cb.gif" Name = "d" border = 0 > < Img Src = "cb.gif" Name = "e" border = 0 > < Img Src = "colon.gif" Name = "f" border = 0 > < Img Src = "cb.gif" Name = "g" border = 0 > < Img Src = "cb.gif" Name = "h" border = 0 > < Img Src = "cam.gif" Name = "j" border = 0 > < / a >

Adică, toate imaginile pentru ceas sunt incluse într-un container comun cu un link către portalul de unde am descărcat scriptul. Trebuie să înlocuiți containerul cu un container div și să îl plasați pe site-ul dvs. unde doriți să vedeți ceasul. Cele mai potrivite locuri: subsolul site-ului sau partea de jos a barei laterale a acestuia.

Asta e tot. De asemenea, puteți instala un script glisor pentru un site html, căutare pe site, calendar și multe, multe altele. Uneori, aceste lucruri sunt instalate ca plugin-uri jQuery. Dacă utilizați CMS popular, atunci există și multe plugin-uri pentru acesta care implementează funcționalitatea necesară.

În general, principalul lucru este să poți căuta aceleași scripturi, iar instalarea lor poate varia foarte mult în cazuri diferite. Așadar, instalați scripturi cu adevărat utile pentru site-ul dvs. și continuați să vizitați webformyself, pentru că sunt multe lucruri interesante despre construirea site-ului web pregătite pentru dvs.

De la autor: Salutări, prieteni. În acest articol vom învăța cum să ne transferăm Cod JavaScriptîn fișier externși conectați scriptul JavaScript. Articolul se adresează începătorilor care încep să învețe limbajul JavaScript.

Deci, să începem cu întrebarea, de ce trebuie să puneți cod JavaScript într-un fișier extern? E simplu. Imaginează-ți că scriptul tău ocupă zeci sau sute de linii de cod. Sau chiar mai mult. Și, desigur, cel mai probabil vom avea nevoie de acest script pe fiecare pagină a site-ului nostru. De acord, ar fi complet rău în acest caz să duplicați aceste sute de linii de cod în fiecare fișier. Și pur și simplu prezența codului non-HTML în document HTML Nu va arăta foarte bine și nici foarte frumos.

De aceea, se obișnuiește să puneți codul JavaScript într-un fișier separat, care este conectat la pagină. De fapt, totul este la fel ca în cazul fișierelor de stil. Cum se conectează un script JavaScript la fișierul principal? Foarte simplu. Pentru a face acest lucru, folosim eticheta deja familiară, la care se adaugă atributul src, la fel ca în cazul imaginilor. Ei bine, după cum probabil ați ghicit, în atributul src indică calea către conectat Script JavaScript.

Să încercăm să transferăm programul nostru, constând dintr-o linie de cod, într-un fișier extern și să includem acest fișier. Să numim acest fișier, de exemplu, scripts.js:

alert("Bună ziua!");

Dacă acum reîmprospătăm pagina, nu se va schimba nimic, scriptul nostru funcționează și afișează în continuare o fereastră modală cu un salut.

La ce ar trebui să acordați atenție atunci când conectați scripturi? Am inclus scenariul la sfârșitul documentului, înainte de închidere eticheta corporală. Anterior, era o practică obișnuită să includă scripturi la începutul documentului, în etichetele head. Cu toate acestea, astăzi nu este recomandat să faceți acest lucru și este recomandat să includeți scripturi la sfârșitul documentului. De ce este asta?

Să încercăm să mutăm conexiunile între etichetele cap:

Ce vedem? Nimic în afară de fereastra modală. Nu există conținut. Acesta este ideea. Când un script extern este inclus la începutul documentului, browserul începe să îl descarce și încearcă să îl execute. Și până la finalizarea încărcării și execuției scriptului, browserul nu va afișa partea din document care urmează fișierului inclus.

Acum imaginați-vă că din anumite motive acest fișier se încarcă extrem de lent. În consecință, utilizatorul va trebui să aștepte și, uneori, pur și simplu poate să nu aștepte. Acesta este motivul pentru care se recomandă includerea scripturilor la sfârșitul documentului, înainte de eticheta body de închidere.

Dar dacă o anumită bibliotecă necesită includerea la începutul documentului? Cum să fii în acest caz? În acest caz, vom fi ajutați de atributele async și defer, care permit browserului să încarce scripturi asincron, de exemplu. browserul va începe să descarce scriptul, dar nu va opri afișarea documentului. Să încercăm să folosim aceste atribute unul câte unul:

< ! -- вариант1 -- > < ! -- вариант2 -- >

În ambele cazuri vom obține același rezultat; scriptul este conectat fără a întrerupe afișarea documentului:

Care este diferența dintre atributele async și defer? Atributul defer păstrează secvența conexiunii scripturi externe, adică Scriptul care este conectat mai sus va fi întotdeauna executat primul. Acest lucru este important atunci când conectăm mai multe scripturi și unele dintre ele pot depinde de altele. În acest caz, scriptul principal trebuie conectat înaintea celui dependent. Atributul defer asigură menținerea ordinii. Atributul async va asigura că scriptul este executat imediat după ce este încărcat. Prin urmare, această opțiune nu este întotdeauna potrivită, deoarece scriptul dependent se poate încărca înaintea celui principal.

Aceasta încheie articolul. Dacă doriți să aflați mai multe despre JavaScript, atunci vă recomand să vă îndreptați atenția către . Noroc!

JavaScript a evoluat de atunci viteza enorma. Un val mare de noi tehnologii acoperă pietrele unor sarcini greoaie care abia ieri păreau inexpugnabile și amenințătoare.

ÎN această lecție oferim 10 scripturi utile care vă vor ajuta să economisiți timp atunci când rezolvați sarcini comune. Cele mai multe dintre scripturile de mai sus pot fi pur și simplu copiate în proiectul dvs., dar este mai bine să faceți niște lucrări analitice pentru a adapta codul în cel mai bun mod posibil.

1. Inaltime maxima sau lățimea într-un set de elemente

Foarte script util pentru a alinia înălțimea sau lățimea coloanelor.

Opțiune pentru înălțime:

Var getMaxHeight = function ($elms) ( var maxHeight = 0; $elms.each(function () ( // În unele cazuri, puteți utiliza outerHeight() var height = $(this).height(); if (height > maxHeight ) ( maxHeight = înălțime; ) ); return maxHeight; );

Utilizare:

$(elemente).height(getMaxHeight($(elemente)));

Pentru a utiliza scriptul pentru lățime, trebuie să înlocuiți toate incluziunile de înălțime și înălțime cu lățime și, respectiv, lățime.

2. Verificarea datei efective

Setul de instrumente JavaScript pentru date este foarte simplu și nu este suficient pentru formatarea datei. Deși există multe biblioteci care fac procesarea datei mult mai ușoară, adesea trebuie doar să verificați data într-un șir. Următorul script este perfect pentru un astfel de caz. Vă permite să verificați o dată cu orice separator și un an din 4 cifre.

Funcția isValidDate(value, userFormat) ( // Folosiți formatul implicit dacă nu este specificat nimic userFormat = userFormat || "ll/zz/aaaa"; // Găsiți separatorul excluzând simbolurile lunii, zilei și anului (în versiune în limba engleză- m, d, y) var delimiter = /[^mdy]/.exec(userFormat); // Creați o matrice de lună, zi și an, // adică știm ordinea formatului var theFormat = userFormat.split(delimiter); // Creați un tablou din data utilizatorului var theDate = value.split(delimiter); funcția esteData(data, format) ( var m, d, y, i = 0, len = format.lungime, f; pentru (i; i< len; i++) { f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; } return (m >0 && m< 13 && y && y.length === 4 && d >0 && // Verificați dacă ziua lunii d este corectă