Unde este cel mai bun loc pentru a conecta javascript? Conectarea unui fișier JavaScript extern

Astăzi vă voi spune cum se face legătura diferite tipuri scripturi pentru 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 el sau, de exemplu, unele latura tehnicaîntrebare.

JavaScript poate fi conectat în două moduri:

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

Cod

2. Doilea– folosind fișierul:

Unde „https://www..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 să specificați pur și simplu cale 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. 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 „.rezultat” este clasa în care vor fi încărcate datele, iar „/main.php”, respectiv, este adresa scriptului 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ă se află pe server extern, rudă – dacă pe a ta.

Fiţi atenți! 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 " Salut Lume! „Înseamnă că ai făcut totul bine.

JavaScript este un limbaj de scripting care rulează numai în browserul utilizatorului, adică pe partea clientului. Pentru a apela acest limbaj, etichetează și sunt scrise în codul HTML.

Iată un exemplu de program simplu care afișează expresia „Hello, World!” în fereastra browserului:

Exemplu JavaScript document.write("Bună lume!")

În acest script, comanda document.write(„Hello, World!”) a tipărit pe ecran fraza „Hello, World!”. În comanda document.write(""), puteți scrie orice text și etichete între ghilimele. Etichetele vor fi interpretate de browser.

Vom vorbi mai multe despre această comandă mai târziu, dar acum să revenim la subiectul acestui articol - inserarea unui script JavaScript în codul HTML.

De fapt, intrarea de etichetă extinsă și mai precisă arată astfel: . În atributul type indicăm tipul de limbă în care este scris scriptul. În cazul nostru este vorba de JavaScript. În realitate, JavaScript nu are în prezent concurenți vizibili, deci în totalitate browsere moderne JavaScript va fi folosit implicit.

Dar, de dragul autenticității, să dăm un exemplu de utilizare extinsă a etichetei:

Exemplu JavaScript document.write("Bună lume!

Mă bucur să te văd!")

În acest exemplu, observați și perechea de etichete și. Această etichetă va afișa text numai dacă browserul utilizatorului are JavaScript dezactivat sau nu este acceptat.

Scriptul poate fi inserat nu numai în secțiune, ci și în secțiune.

Exemplu JavaScript var i = "Bună lume!"

document.write(i) Browserul dvs. nu acceptă JavaScript sau suportul este dezactivat în setări. Acest exemplu necesită unele explicații. În secțiune am folosit comanda var pentru a crea o variabilă i și a o atribui Salut Lume!. Apoi, în secțiune, am folosit comanda document.write(i) pentru a afișa valoarea acestei variabile pe ecran. Mai multe detalii despre variabile sunt scrise în articolul Variabile JavaScript, chiar acolo ați aflat asta Cod JavaScript poate fi inserat în ambele secțiuni ale unui document HTML: și .

A doua modalitate este de a include fișierul

Articolul „Ce este CSS” a descris o metodă de atașare a unui fișier cu cod Stiluri CSSîntr-un document numit legând. De asemenea, puteți conecta un document la un fișier care conține cod JavaScript. Pentru a face acest lucru, introduceți o etichetă în secțiune, ca în exemplu:

Exemplu JavaScript

După cum puteți vedea, puteți atașa două sau mai multe fișiere la un document cu Scripturi JavaScript. Puteți utiliza fișiere script situate pe un domeniu terță parte pentru a face acest lucru, trebuie să specificați adresa URL a fișierului cu scriptul în atributul src al etichetei; De asemenea, puteți ignora atributul tip dacă doriți.

Fișierele de cod JavaScript trebuie să aibă extensia .js.

Nu este nevoie să folosiți etichete în fișierul .js care conține codul JavaScript. Acest lucru va avea ca rezultat o eroare.

Browsere învechite și non-standard

Pentru a accepta browsere foarte învechite care nu înțeleg codul JavaScript, trebuie să îl introduceți în comentarii folosind etichete Comentarii HTML. Dacă nu faceți acest lucru, browserul care nu înțelege codul JavaScript îl va afișa pe ecran ca text simplu. Dar nu mai există astfel de browsere. Deși s-ar putea să întâlniți un astfel de cod, pentru a-l înțelege, să ne uităm la el.

Exemplu JavaScript

ÎN în acest exemplu deschidere Etichetă HTML comentați imediat înainte de eticheta care încheie codul scriptului nostru.

Bara oblică dublă // este deja un comentariu JavaScript, arată că întreaga linie care vine după ea este un comentariu din punct de vedere JavaScript. Citiți mai multe despre comentariile JavaScript aici.

Poate că ești nerăbdător și vrei să te arunci rapid în lumea programării, să începi să-ți scrii scenariile și să-i uimești pe toată lumea cu magia ta. Dar fără concepte fundamentale despre cum funcționează totul, va fi dificil să înțelegem esența.

Da, puteți edita codul, găsiți erori, puteți lucra cu scripturi terțe, dar să scrieți ceva propriu va fi mult mai dificil fără cunoștințe de bază.

Prin urmare, scopul meu nu este doar să vă arăt exemple de scriere de programe, ci să merg mai departe, să vă învăț să gândiți ca un programator, ceea ce vă va oferi posibilități nelimitate pe care le va deschide JavaScript. Prin urmare, începem să ne antrenăm de la bun început, de la concepte simple, notație și reprezentare a modului în care funcționează acest mecanism în ansamblu.

este un adevărat limbaj de programare. Funcționează diferit decât HTM sau CSS și are propria sa sintaxă. Pentru cineva care abia începe să programeze, poate fi dificil să facă schimbarea și să înceapă să gândească ca un programator.

Fiecare limbaj de programare are propriul set cuvinte cheie, simboluri, precum și un set unic de reguli pentru combinarea lor și sintaxa limbajului.

În timpul procesului de învățare, vei face o mulțime de greșeli, vei pierde semnele de punctuație, care la rândul lor conduc la un program care nu funcționează. În timpul lecțiilor, vom învăța cum să inițializam erorile în browser, să ne familiarizăm cu simboluri noi (), , ; , (), !, învață desemnarea cuvintelor noi (var, null, else if), vom analiza regulile de punctuație și sintaxa limbajului în sine.

În plus, în aceste lecții ne vom familiariza nu numai cu jQuery, ci și cu jQuery - cea mai populară bibliotecă a sa, care vă va ajuta să creați elemente complexe de design web interactiv.

Care este programul

Când adăugați cod JavaScript la o pagină web, scrieți program de calculator. Desigur, este mai simplu decât cele cu care trebuie să lucrezi, prin care citești mail, procesezi fotografii, dar în principiu toate sunt asemănătoare.

Baza procesului de programare este împărțită în mai multe etape: stabiliți ce doriți să faceți, apoi împărțiți sarcina în etape, fiecare dintre acestea fiind necesară pentru a finaliza rezultatul final.

Crearea unui program pe JavaScript, trebuie să stabiliți pașii necesari pentru a vă atinge obiectivul. Odată ce înțelegeți ce doriți să implementați și împărțiți pașii în pași, sunteți gata să scrieți programul. Cu alte cuvinte, îți transformi propriile gânduri în codul programului– cuvintele și simbolurile forțează browserul să acționeze așa cum doriți.

Adăugarea JavaScript la o pagină

Browserele înțeleg HTML și CSS și transformă aceste limbi în informatii vizuale pe ecran. Funcționalitatea browserului care înțelege HTML și CSS se numește motor de browser. Majoritatea browserelor au o componentă numită interpret JavaScript. Aceasta este funcționalitatea cu care înțelege limbajul JS și este capabil să execute pașii codului de program scris.

Elementul de script este folosit pentru a spune browserului când apare JavaScript.

Eticheta este o comandă limbaj HTML, funcționează ca un comutator, spunând browserului unde începe JavaScript. Când browserul ajunge la sfârșitul etichetei de închidere, știe că a ajuns la sfârșitul programului și poate reveni la funcțiile sale normale.

Destul de des puteți vedea adăugarea unui element de script în partea principală a unei pagini web - secțiunea de cap, după cum urmează:

Lecții JavaScript

În exemplu, al doilea script poate fi executat înainte de primul, deci este important să nu existe dependențe între aceste scripturi.

Notă: Atributul asincron este utilizat dacă doriți să permiteți browserului să continue încărcarea paginii fără a aștepta finalizarea descărcării și executarea scriptului.

defer atribut

Atributul defer amână execuția scriptului până când întreaga pagină HTML a fost încărcată complet.

Ca și în cazul încărcării asincrone a scripturilor, fișierul JS poate fi încărcat în timp ce documentul HTML este încă încărcat. Cu toate acestea, chiar dacă scriptul este încărcat complet înainte ca browserul să termine procesarea paginii, acesta nu va fi executat până când documentul HTML este complet procesat.

Chiar dacă în exemplul de mai sus, etichetele sunt incluse în elementul document HTML, scripturile nu vor începe să se execute până când browserul ajunge la eticheta de închidere.

În plus, spre deosebire de asincron, ordinea relativă de execuție a scripturilor cu atributul defer va fi păstrată.

Utilizarea atributului defer este utilă atunci când codul de script implică lucrul cu un document HTML, iar dezvoltatorul trebuie să se asigure că pagina este primită complet.

Notă: Atributele async și defer sunt acceptate numai pentru fișierele script externe, de ex. funcționează numai dacă este prezent atributul src.

Rezultate

• JavaScript poate fi adăugat la un document HTML folosind un element în două moduri:
  • Definiți un script inline care se află direct între perechea de etichete și.
  • Conectați un fișier extern cu cod JavaScript prin .
• Dacă codul JavaScript este folosit în mai multe pagini, atunci este mai bine să îl includeți ca script extern. Acest lucru facilitează foarte mult întreținerea și editarea codului și, de asemenea, accelerează încărcarea și procesarea paginilor web - scriptul extern este încărcat de browser o singură dată (mai târziu va fi preluat din memoria cache a browserului).
• Atributul defer semnalează browserului că încărcarea scriptului poate începe imediat, dar execuția ar trebui să fie amânată până când întregul document HTML a fost încărcat.
• În cazurile în care fișierul script conține funcții care interacționează cu documentul HTML care este încărcat sau în care există o dependență de un alt fișier de pe pagină, documentul HTML trebuie să fie complet încărcat înainte ca scriptul să fie executat. De regulă, un astfel de link către scriptul JavaScript este plasat în partea de jos a paginii înainte de eticheta de închidere pentru a se asigura că întregul document a fost analizat pentru ca acesta să funcționeze. Cu toate acestea, într-o situație în care dintr-un motiv oarecare fișierul JS trebuie plasat în altă parte în document - defer atribut poate fi de folos.
• Atributul defer păstrează ordinea relativă a execuției scriptului, în timp ce asincron nu o face.
• Un script cu atributul async este executat asincron cu procesarea paginii când scriptul este încărcat, acesta va fi executat chiar dacă documentul HTML nu este încă complet gata;
• Pentru fișierele JS care nu depind de alte fișiere, atributul asincron va fi cel mai util. Deoarece nu ne interesează când este executat scriptul, încărcarea asincronă este cea mai potrivită opțiune.

Sarcini

• Fereastra pop-up

  Iată un document HTML simplu. Plasați un script în corpul paginii HTML care afișează o fereastră pop-up care spune: „Hei javascript!”