Mutarea JavaScript din pagina web

Când scrieți pentru prima dată un nou JavaScript, cel mai simplu mod de a-l configura este să încorporați codul JavaScript direct în pagina web, astfel încât totul să fie la un singur loc în timp ce îl testați pentru a funcționa corect. În mod similar, dacă inserați un script pre-scris în site-ul dvs. web, instrucțiunile vă pot spune să încorporați părți sau toate scripturile în pagina web în sine.

Acest lucru este în regulă pentru a configura pagina și a face ca aceasta să funcționeze corect în primul rând, dar odată ce pagina dvs. va funcționa așa cum doriți, veți putea îmbunătăți pagina extragând JavaScript într-un fișier extern, astfel încât pagina dvs. conținutul în HTML nu este atât de aglomerat cu elemente care nu conțin, cum ar fi JavaScript.

Dacă copiați și utilizați JavaScript scrise de alți oameni, atunci instrucțiunile lor despre cum să adăugați scriptul lor pe pagina dvs. s-ar putea să fi dus la faptul că aveți una sau mai multe secțiuni mari de JavaScript încorporate de fapt în pagina dvs. web în sine și instrucțiunile lor nu le spun. Voi cum puteți muta acest cod din pagina dvs. într-un fișier separat și mai aveți funcția JavaScript. Nu vă faceți griji, însă, indiferent de codul pe care îl utilizați în pagina dvs., puteți muta cu ușurință JavaScript din pagina dvs. și puteți configura ca fișier separat (sau fișiere dacă aveți mai multe piese de JavaScript încorporate în pagina). Procesul pentru a face acest lucru este întotdeauna același și este ilustrat cel mai bine cu un exemplu.

Să analizăm cum ar putea arăta o bucată de JavaScript atunci când este încorporată în pagina ta. Codul dvs. JavaScript real va fi diferit de cel prezentat în următoarele exemple, dar procesul este același în fiecare caz.

Exemplul unu

  if (top.location! = self.location) top.location = self.location;  

Exemplul doi

Exemplul trei

  / * if (top.location! = self.location) top.location = self.location; / *]]> * /  

JavaScript încorporat ar trebui să semene cu unul dintre cele trei exemple de mai sus. Desigur, codul dvs. JavaScript real va fi diferit de cel arătat, dar JavaScript va fi încorporat în pagină utilizând una dintre cele trei metode de mai sus. În unele cazuri, codul dvs. poate utiliza învechit limba = "javascript" in loc de type = "text / javascript" caz în care este posibil să doriți să aduceți codul mai actualizat pentru a începe cu înlocuirea atributului de limbă cu unul de tip.

Înainte de a putea extrage JavaScript în propriul fișier, trebuie mai întâi să identificați codul care trebuie extras. În toate cele trei exemple de mai sus, există două linii de cod JavaScript real care trebuie extras. Scriptul dvs. va avea probabil multe mai multe linii, dar poate fi identificat cu ușurință, deoarece va ocupa același loc în cadrul paginii dvs. ca și cele două linii de JavaScript pe care le-am evidențiat în cele trei exemple de mai sus (toate cele trei exemple conțin aceleași două linii de JavaScript, doar containerul din jurul lor este puțin diferit).

1. Primul lucru pe care trebuie să îl faceți pentru a extrage de fapt JavaScript într-un fișier separat este să deschideți un editor de text simplu și să accesați conținutul paginii dvs. web. Apoi, trebuie să localizați JavaScript încorporat care va fi înconjurat de una dintre variațiile de cod prezentate în exemplele de mai sus.
2. După ce ați localizat codul JavaScript, trebuie să-l selectați și să-l copiați în clipboard. Cu exemplul de mai sus, codul care urmează să fie selectat este evidențiat, nu este necesar să selectați etichetele de script sau comentariile opționale care pot apărea în jurul codului dvs. JavaScript.
3. Deschideți o altă copie a editorului de text simplu (sau o altă filă dacă editorul acceptă deschiderea mai multor fișiere simultan) și treceți conținutul JavaScript acolo.
4. Selectați un nume de fișier descriptiv de utilizat pentru noul fișier și salvați noul conținut folosind acel nume de fișier. Cu ajutorul codului de exemplu, scriptul este să se despartă de cadre, astfel încât să poată fi un nume adecvat framebreak.js.
5. Deci, acum avem JavaScript într-un fișier separat, revenim la editor, unde avem conținutul paginii originale pentru a face modificările de acolo pentru a face legătura cu copia externă a scriptului.
6. Deoarece acum avem scriptul într-un fișier separat, putem elimina totul între etichetele script din conținutul nostru original, astfel încât
7. Ultimul pas este să adăugați un atribut suplimentar la eticheta de script identificând unde poate găsi JavaScript extern. Facem acest lucru folosind un src = "filename" atribut. Cu scriptul nostru de exemplu, am specifica src = "framebreak.js".
8. Singura complicație în acest sens este dacă am decis să stocăm JavaScript-urile externe într-un folder separat de paginile web care le folosesc. Dacă faceți acest lucru, atunci trebuie să adăugați calea din folderul paginii web în folderul JavaScript din fața numelui fișierului. De exemplu, dacă JavaScript sunt stocate într-un js folderul din folderul care conține paginile noastre web de care am avea nevoie src = "js / framebreak.js"

Cum arată codul nostru după ce am separat separarea JavaScript într-un fișier separat? În cazul exemplului nostru JavaScript (presupunând că JavaScript și HTML sunt în același dosar) HTML-ul nostru din pagina web citește acum:

Avem, de asemenea, un fișier separat numit framebreak.js care conține:

if (top.location! = self.location) top.location = self.location;

Numele dvs. de fișier și conținutul fișierului vor fi mult diferite de faptul că veți fi extras orice JavaScript a fost încorporat în pagina dvs. web și ați dat fișierului un nume descriptiv în funcție de ceea ce face. Procesul real de extragere va fi același, deși indiferent de liniile pe care le conține.