Javascript include fișierul js. Conectarea scripturilor în HTML. Porniți iluminarea de fundal a hărții imaginii

Astăzi vă voi spune cum să conectați diferite tipuri de scripturi la site-ul dvs. Acesta este un fel de elemente de bază și ar fi trebuit să scriu acest articol unul dintre primele. Prin urmare, să începem.

Conectarea scripturilor JS (fișiere cu extensia *.js) la site

JavaScript ne ajută să îmbunătățim funcționalitatea site-ului în multe feluri. Fie că este vorba despre stilizarea formelor sau, de exemplu, o parte tehnică a problemei.

JavaScript poate fi conectat în două moduri:

1. Primul– aceasta este inserarea directă a codului în site-ul dvs. folosind etichete:

Cod

2. Al doilea– folosind fișierul:

Unde „https://www.pandoge.com/main.js” este calea către fișierul script. Este recomandat să scrieți această opțiune pentru fișierele de pe un server la distanță (extern). Dacă fișierul se află pe site-ul dvs., atunci puteți specifica pur și simplu calea relativă:

Acest lucru este convenabil dacă doriți să schimbați brusc domeniul sau să transferați site-ul într-un alt protocol.

În ceea ce privește locația conexiunii, se recomandă conectarea tuturor scripturilor din secțiunea HEAD, înainte de eticheta de închidere a acesteia. De exemplu:

Totul pentru un webmaster începător

Ele pot fi conectate și în secțiunea BODY. De exemplu, este recomandat să includeți toate bibliotecile în secțiunea HEAD, în timp ce toate contoarele, glisoarele, galeriile și alte scripturi sunt incluse în secțiunea BODY, tot înainte de eticheta de închidere.

Conectarea scripturilor PHP (fișiere cu extensia *.php) la site

Conectarea scripturilor PHP se realizează în trei moduri:

1. Primul– aceasta este aceeași inserare de cod în pagina site-ului în sine (rețineți că dacă aveți o pagină cu extensia *.html, trebuie să schimbați extensia în *.php) folosind etichete:

2. Folosind un fișier (în acest caz, conexiunea se poate face și pe o pagină cu extensia *.html):

Dar pentru ca această metodă să funcționeze, trebuie să adăugați aceste linii în fișierul .htaccess, care se află la rădăcina site-ului dvs., în partea de sus:

RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html .phtml

Dacă un astfel de fișier nu este disponibil pe găzduirea dvs., creați-l folosind orice editor de text.

3. Al treilea– folosind un script JS. În acest caz, puteți obține și rezultatul scriptului PHP executat pe server.

Implementarea va fi după cum urmează:

$(document).ready(function() ( $(".rezultat").load("/main.php"); ));

Unde „.result” este clasa în care vor fi încărcate datele, iar „/main.php”, respectiv, este adresa către scriptul PHP.

Dacă încărcați date de pe un alt server, atunci nu este necesar suportul PHP pe serverul dvs. Nu uitați să conectați biblioteca jQuery la site-ul dvs.

Aici regulile sunt absolut aceleași: adresa completă a fișierului dacă este pe un server extern, adresa relativă dacă este pe al tău.

Notă! Dacă doriți să conectați un script PHP la site-ul dvs., atunci serverul trebuie să aibă suport PHP. Consultați furnizorul dvs. de găzduire pentru a afla dacă aveți această opțiune.

Dacă conectați scripturi pentru prima dată, încercați să conectați scripturi din arhivă, care este atașată la sfârșitul articolului. Dacă în ambele cazuri ați primit mesajul „Hello World! „Înseamnă că ai făcut totul bine.

Capacitățile HTML/CSS vă permit să creați pagini frumoase și dinamice. ajută dezvoltatorul să atribuie funcționalități elementelor paginii, să proceseze evenimente, să organizeze un dialog cu vizitatorul și să asigure schimbul de date cu serverul.

Pagini HTML și CMS

Programarea modernă pe Internet utilizează din ce în ce mai mult sisteme de management al conținutului (Content Management System - CMS). În acest caz, conexiunea oricăror fișiere este rezolvată automat.

În acest exemplu, toate butoanele adăugate la pagina site-ului pot fi echipate cu funcționalități suplimentare, fie prin evenimentul onclick, fie prin includerea unui fișier script suplimentar.

Conectarea șabloanelor și cadrelor (de exemplu, jQuery) se face automat. JavaScript este o parte integrantă a browserului. Orice CMS ia în considerare acest lucru și îl folosește cât mai eficient posibil. De regulă, un CMS folosește pe deplin mecanismul AJAX și cele mai avansate instrumente JS, dar lasă dezvoltatorului posibilitatea de a ajusta și rafina funcționalitatea paginii din browser, în special de a controla procesarea evenimentelor.

Conexiune tradițională JavaScript la HTML

Nu există multe opțiuni. Puteți introduce cod JS cu eticheta de script în pagina însăși (3) sau îl puteți conecta ca fișier extern (1). Fiecare opțiune are propriile sale avantaje. De obicei, dezvoltatorii folosesc ambele opțiuni în același timp.

JavaScript este despre evenimente, DOM și controlul complet al tuturor elementelor paginii. Opțiunea 2 este o conexiune directă la corpul paginii, care se declanșează atunci când pagina este complet încărcată.

Administrare fișiere externe și server

Generarea unui document HTML la dezvoltarea pe bază de CMS și la crearea manuală a unei resurse web este programată. Procesarea evenimentelor, crearea elementelor de pagină și a fișierelor externe se pot face într-un mod convenabil în fiecare caz specific, în timp real.

Interpretul PHP, atunci când creează o pagină, poate crea codul paginii, fișiere JavaScript, imagini și poate aranja structura fișierelor și folderelor. Prin sfera variabilelor și a datelor, dezvoltatorul poate schimba funcționalitatea.

De obicei, un document HTML oferă mai multe opțiuni pentru interacțiunea cu vizitatorul. De exemplu, în funcție de regiune, sex, vârstă etc., pot fi conectate anumite caracteristici ale site-ului, care sunt convenabile și convenabile de a le avea pe o singură pagină.

Acest exemplu arată cum să conectați JavaScript la elementele paginii HTML utilizând evenimentele mouse-ului. Această opțiune pentru utilizarea capabilităților JS este necesară atunci când funcționalitatea unui element trebuie modificată în timp ce pagina rulează.

Funcționalitatea elementelor paginii

JavaScript se concentrează pe difuzarea evenimentelor pe elementele paginii și pe arborele de obiecte DOM (Document Object Model). Din acest punct de vedere, întrebarea „Cum se conectează JavaScript la elementele HTML?” se decide iniţial.

De exemplu, toate câmpurile unui formular de introducere a datelor pot primi imediat handlere JS pentru a valida (verifica) datele pentru corectitudine. Data trebuie să fie o dată, numărul trebuie să fie un număr, iar șirul de caractere trebuie să conțină numai caractere valide.

Controlul introducerii datelor este o funcționalitate importantă și nu are rost să o rezolvi în timp real și să conectezi un handler JS în timp ce vizitatorul se află pe pagină. Este recomandabil să furnizați în prealabil formularul pentru structura, conținutul și funcționalitatea cecului. Problema modului de conectare JavaScript la elementele formularului HTML poate fi rezolvată imediat.

Situația va fi diferită pentru elemente atunci când se rezolvă problema transferului de date folosind mecanismele Drag and Drop. În cele mai multe cazuri, va trebui să schimbați în mod dinamic handlerele. Prinderea unui element pentru a-l muta este un eveniment; de fapt, trecerea peste granițele altor elemente este un alt eveniment.

Întrebarea cum să conectați JavaScript la elementele paginii HTML care „se întâlnesc pe parcurs” poate fi nu numai dinamică, ci și imprevizibilă.

Dinamica și procesarea evenimentelor

O caracteristică specială a JavaScript este algoritmii și evenimentele distribuite în mod inerent, care se pot declanșa în cele mai imprevizibile moduri. Un program JS (script) este departe de a fi un program C/C++, PHP sau Perl. Limbajele de programare convenționale permit evenimente, dinamica tipului de date și calculul paralel, dar originalitatea JS și relația sa strânsă cu DOM aduce specificitate programării în acest limbaj și, foarte important, plasarea corectă a codului.

Toate scripturile JS se îmbină într-un singur spațiu, dar plasarea corectă a variabilelor, funcțiilor, handlerelor de evenimente și secvența operațiilor este esențială.

Utilizarea limbajului PHP de pe partea serverului în codul JavaScript este mai convenabilă atunci când acest cod este inserat direct într-un document HTML. Nu este obișnuit să plasați cod PHP în interiorul unui fișier extern *.js, deși imaginația unui dezvoltator modern nu este limitată de nimic dacă lucrează fără unul sau altul sistem de management al site-ului.

Este important să rețineți: JavaScript este în mod inerent algoritmi și evenimente distribuite. Limbile server-side sunt secvențe de operații, algoritmi de acțiuni care sunt efectuate înainte ca pagina să ajungă în browser. Răspunsul la întrebarea „Cum se conectează JavaScript la un document HTML?” va depinde nu numai de logica algoritmului, ci și de timpul de rezolvare.

Instrucțiuni

Atașați un script dintr-o sursă externă la document, adresat unui URI cunoscut. Utilizați un element HTML cu o valoare specificată a atributului src. Editați documentul adăugând un construct ca acesta:

Aici, valoarea script_URI trebuie să fie un URI care identifică resursa din care vor fi încărcate datele scriptului.
Valoarea atributului set de caractere ar trebui să fie codificarea caracterelor din script, dacă diferă de codificarea caracterelor documentului. Codificarea documentului este determinată pe baza câmpului Content-Type al antetului de răspuns HTTP al serverului sau a valorii atributului de conținut a unui element META cu atributul http-equiv setat la Content-Type.
Conectarea scripturilor în acest mod se face adesea în capul documentului (elementele SCRIPT sunt situate în interiorul elementului HEAD) și nu este necesară executarea lor imediată. În acest caz, este logic să folosiți atributul defer pentru a amâna interpretarea textului scenariului.

Conectați scriptul prin încorporarea lui direct în document. Adăugați un element SCRIPT la marcajul documentului care are conținut care este cod JavaScript. Utilizați o construcție ca:

// textul codului de script

// textul codului de script

// textul codului de script

Acordați atenție comentariilor HTML din jurul codului scriptului. Sunt necesare pentru a asigura compatibilitatea cu modelele de browser mai vechi.

Conectați scriptul specificând „javascript:” ca URI al descriptorului de protocol al ancorei țintă a elementului A. Creați o legătură în document cu o valoare a atributului href de forma:

javascript:

Aici, valoarea ar trebui scrisă ca o expresie calculată în limbajul de scripting JavaScript. În acest caz, mai multe propoziții de limbă pot fi combinate într-o singură expresie folosind paranteze operator, de exemplu:

text

Adăugați scripturi în documentul dvs. ca cod pentru handlerele de evenimente de elemente încorporate. Pentru a face acest lucru, definiți handlere încorporate pentru evenimentele dorite ale elementelor selectate adăugând atribute adecvate acestor elemente. Introduceți fragmente de cod JavaScript ca valori ale atributelor. De exemplu, puteți adăuga cod ca handler pentru un eveniment cu un singur clic pe un element DIV, astfel:

Conținutul elementului

O listă a evenimentelor element care trebuie să fie suportate de agenții de utilizator conformi poate fi găsită în secțiunile Evenimente ale specificațiilor Document Object Models Layers 2 și 3 (DOM2 și DOM3) de pe site-ul web al consorțiului W3C w3c.org.

Și astăzi vom începe o nouă secțiune dedicată utilizării scripturilor în HTML. Secțiunea constă dintr-o singură lecție video în care ne vom familiariza cu scripturile, vom afla ce este un script, cum să folosim scripturile, cum să conectăm un script la HTML etc. În ceea ce privește etichetele pe care le vom folosi. Vor fi două dintre ele, aceasta este tag și tag.

De asemenea, în acest tutorial video vom recapitula conversația despre hărți imagine. Am vorbit destul de mult despre asta, dar am transferat designul vizual al obiectelor imagine în secțiunea de scripturi, astfel încât să nu existe confuzii sau neînțelegeri în capul nostru. Deci aici este. Astăzi vom închide complet problema adăugării hărților de imagine interactive la un document HTML și vom include scripturi care vor ajuta la evidențierea obiectelor din imagine.

Ce este un scenariu?

Nu voi descrie niciun concept tehnic și inteligent. Cu toții știm de multă vreme ce este HTML și că este necesar pentru a crea un cadru pentru site-ul web. Dar, pe lângă cadru, pentru a crea un site web, acesta trebuie configurat și proiectat într-o manieră adecvată. CSS ne poate ajuta cu asta. Și sunt necesare scripturi pentru a extinde funcționalitatea site-urilor. În general, pentru a adăuga dinamică site-ului nostru.

Scripturile despre care vom vorbi sunt specifice site-ului și folosesc limbaje precum JavaScript și JQuery. Am remarcat acest lucru deoarece conceptul de scripturi este destul de larg și este folosit în direcții diferite, în cazul nostru acestea sunt site-uri web.

Scripturi în HTML.

În cazul nostru, vom folosi două etichete HTML care ne vor ajuta să conectăm scripturi.

O etichetă HTML este destinată să conecteze un script la o pagină HTML. În același timp, putem folosi diverse metode de conectare, deoarece codul de script poate fi fie într-un fișier separat, care poate fi localizat undeva pe un server terță parte sau pe serverul nostru, fie încorporat direct în codul HTML al documentului .

Eticheta HTML are scopul de a anunța vizitatorul paginii că suportul pentru script este dezactivat în browserul său sau nu există deloc. Aceasta înseamnă că nu va putea folosi întreaga funcționalitate a paginii pe care se află.

Conectarea scriptului. Cum se inserează un script în HTML? (Toate opțiunile de conectare)

Să începem cu eticheta și să ne dăm seama cum să o folosim în HTML. La urma urmei, pentru a face pagina mai dinamică, trebuie să fim capabili să conectăm sau să implementăm scripturi în HTML. După cum am menționat mai sus, avem mai multe opțiuni pentru conectarea scripturilor în HTML.

Conectarea unui script de la alt server.

Când folosim scripturi, nu este întotdeauna nevoie să le scriem noi înșine sau să descărcam fișiere și să le plasăm pe serverul nostru pentru conectare. Fișierul cu scriptul de script poate fi, de asemenea, localizat pe un server terță parte, de exemplu, cum ar fi Google.

În acest exemplu, vom include suportul jQuery în documentul nostru. Fișierul cu scripturile se află pe serverul google și pentru a-l conecta trebuie doar să indicăm adresa corectă a locației fișierului. De asemenea, este de remarcat aici că atunci când folosim o etichetă, trebuie să folosim atributul de tip HTML, care va ajuta să indicați browserului web ce tip de document îi aparține fișierul inclus.

Deci, pentru a vă conecta, accesați pagina pentru dezvoltatori Google. Pentru a vă ușura căutarea, iată linkul: https://developers.google.com/speed/libraries/devguide#jquery. Apoi pur și simplu copiem codul ceva de genul acesta în documentul nostru HTML:

Versiunea bibliotecii poate varia.

Odată ce codul este copiat, îl lipim în documentul HTML înainte de eticheta de închidere. După care putem verifica dacă biblioteca este conectată sau nu. Urmărește tutorialul video pentru a vedea cum să faci asta.

Aceasta este poate cea mai ușoară cale, deoarece aici, în afară de copierea și lipirea codului terminat, nu trebuie să faceți nimic altceva. Singurul lucru de adăugat este că trebuie să specificăm atributul type cu o valoare. Adică, codul final va arăta cam așa:

Conectarea scriptului de la serverul nostru.

Aceasta metoda de conectare este asemanatoare cu prima, doar la conectarea unui script de pe serverul nostru, adica fisierul cu scripturile trebuie sa fie localizat pe gazduirea pe care o foloseste site-ul insusi, trebuie sa specificam calea corecta catre fisier. De asemenea, pentru o organizare mai convenabilă a orientării în fișierele site-ului, putem crea un folder separat pentru scripturi și îl putem numi, de exemplu, js. Apoi în acest folder trebuie să punem un fișier în format .js, care conține funcționalitatea necesară conexiunii. Și specificați calea către acest fișier în documentul HTML înainte de eticheta head de închidere.

În exemplul pe care îl voi da mai jos, vom încerca să conectăm un script care va ajuta la crearea evidențierii pentru hărțile de imagine. În același timp, când conectez scriptul, folosesc calea relativă către .

Puteți descărca fișierul script în sine pe pagina de materiale suplimentare pentru Cursul video de pe această pagină.

Cum să verificați funcționarea scriptului este prezentat în clipul video.

Încorporarea unui script de script într-un document HTML. Cum se inserează un script în HTML?

Această din urmă metodă nu ia în considerare includerea fișierelor individuale, dar sugerează încorporarea scriptului direct în documentul HTML. Dar aici merită remarcat faptul că, dacă scriptul nu este mare, atunci îl putem implementa cu ușurință în document. Dacă aceasta este o funcționalitate uriașă sau o bibliotecă întreagă, ar trebui să utilizați una dintre metodele enumerate mai sus.

Deci, să presupunem că avem un anumit script care trebuie implementat. În cazul nostru, aceasta se va referi la evidențierea obiectelor hărții imagine. Puteți găsi funcția în materialele suplimentare din folderul js. În același loc în care se află fișierul script există un fișier text obișnuit în care este scris codul necesar. De asemenea, puteți copia codul de script pe această pagină:

$(function() ( $(".map").maphilight(); $("#squidheadlink").mouseover(function(e) ( $("#squidhead").mouseover(); )).mouseout( function(e) ( $("#squidhead").mouseout(); )).click(function(e) ( e.preventDefault(); )); ));

După care trebuie introdus între etichete. Adică, putem adăuga câteva funcții individuale direct în documentul HTML înainte de etichetă:

De asemenea, este de remarcat aici că, pentru ca evidențierea hărții imaginii să funcționeze, trebuie să adăugați toate scripturile propuse. Adică, biblioteca JQuery, conectați fișierul care se află în materialele suplimentare și adăugați funcția la documentul HTML. Dacă cel puțin unul dintre pași nu este finalizat, lumina de fundal nu va funcționa.

Etichetă HTML.

În ceea ce privește eticheta, totul este simplu. Această etichetă va fi inclusă în lucrare dacă browserul web al utilizatorului nu are suport pentru scripturi sau este dezactivat. Aceasta este o etichetă asociată. Între etichetele de deschidere și de închidere, trebuie să indicăm informații care vor fi afișate utilizatorului în cazul în care browserul său nu acceptă scripturi. De exemplu, așa:

Scriptul tău nu funcționează...

Această etichetă trebuie inclusă după eticheta de deschidere.

Lecție video: Conectarea scripturilor în HTML. Porniți iluminarea de fundal a hărții imaginii.

Directorul HTML și alte materiale pot și ar trebui să fie descărcate!

În următorul videoclip, ne vom continua cunoștințele cu scripturile în HTML și vom începe să ne familiarizăm cu un alt concept, acestea sunt obiecte în HTML, cum ar fi bannere video, audio și flash. Mai întâi, să ne dăm seama cum să inserăm un videoclip în HTML și să ne familiarizăm cu etichetele HTML și

Scripturile sunt un alt factor important pentru funcționarea corectă a paginii. Dacă HTML este responsabil pentru formarea structurii sale, iar stilurile sunt responsabile pentru aspectul său, atunci scripturile sunt responsabile pentru comportamentul documentului. Acestea vă permit să creați tot felul de elemente în mișcare pe pagini. Cel mai frapant exemplu ar fi animația. Dar există multe alte efecte. Un limbaj precum JavaScript este folosit pentru a crea scripturi.

Procesul de conectare a scripturilor la o pagină este exact același cu adăugarea de stiluri. Adică, există două opțiuni. Primul este să scrieți codul de script în interiorul paginii în sine. Al doilea implică conectarea lor folosind fișiere externe.

Scripturi inline

Pentru a scrie un script în interiorul unei pagini, ar trebui să utilizați eticheta. Iată un exemplu:

Cod JavaScript

În general, nu contează unde exact va fi folosită eticheta în documentul HTML. Cu toate acestea, recomand să îl plasați la sfârșitul codului paginii, chiar înainte de eticheta care închide documentul.

Trebuie remarcat faptul că, în timp, anumite caracteristici ale limbajului JavaScript sunt transferate în CSS. Un exemplu este posibilitatea de a specifica o modificare lină a valorilor proprietăților.

Scripturi externe

De regulă, fișierele cu extensia .js sunt folosite pentru a conecta scripturi externe. Această acțiune este efectuată folosind o etichetă însoțită de atributul src, care specifică calea către fișierul însuși. De exemplu:

Vă rugăm să rețineți că eticheta este asociată. Prin urmare, în acest caz, când vine vorba de scripturi externe, nu este nevoie să scrieți nimic în interiorul etichetei.

Cel mai bine este să conectați scripturile dintr-un fișier înainte de eticheta care închide documentul.