Stimaţi Studenţi,: Type "Text/javascript"

Stimaţi studenţi,
Astăzi vom continua temele prezentate în tutorialul HTML w3schools ce poate fi accesat la
https://www.w3schools.com/html/default.asp cu următoarele subiecte: HTML JavaScript,
HTML File Paths, HTML Head şi HTML Layout.
HTML JavaScript
Se referă exclusiv la modalităţi de utilizare a scripturilor Java, nu la felul în care aceste scripturi
sunt specificate în limbajul JavaScript. Pentru introducerea scripturilor în documentele HTML
este folosită perechea de taguri <script> … </script>. După cum se poate vedea în exemplele
prezentate în tutorial, această pereche de taguri este folosită pentru introduce codul JavaScript
corespunzător. Perechea de taguri <noscript> … </noscript> permite introducerea unui text
care va fi afişat în browser în cazul în care browserul respectiv (versiunea de browser instalată)
nu sprijină utilizarea JavaScript. Având în vedere că este vorba despre un text ce trebuie afişat,
perechea <noscript> … </noscript> este firesc să fie inclusă în secţiunea <body> … </body>.
Merită de reţinut faptul că perechea <script> … </script> poate fi inclusă atât în secţiunea
<head> … </head> cât şi în <body> … </body>. Cu toate acestea, trebuie avut grijă că
includerea specificaţiei JavaScript în secţiunea <head> … </head> este în folosită principal când
sursa JavaScript este referită prin intermediul unui fişier cu extensia ".js", fişier specificat cu
ajutorul perechii atribut = valoare, ataşată tagului <script>. Drept exemplu, sunteţi rugaţi să
vizualiaţi codul sursă HTML al paginii https://www.w3schools.com/html/html_scripts.asp, unde
veţi găsi specificarea :
<script src="//static.h-bid.com/sncmp/latest/sncmp_stub.min.js"
type="text/javascript">
</script>
Dacă veţi da un click pe adresa de mai sus, aveţi posibilitatea să vizualizaţi codul JavaScript.
În mod obişnuit, scripturile Java sunt folosite pentru manipularea imaginilor, validarea formelor
utilizate la introducerea informatiilor sau la schimbarea dinamică a conţinutului sau a modului
în care este prezentat. Pentru a selecta un tag (element) HTML, în JavaScript se foloseşte cel
mai adesea metoda document.getElementById(), unde document este documentul HTML
curent.
Această metodă este folosită şi în exemplul prezentat la
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script. Pentru a vă lămuri şi mai
bine de efectul scriptului, Vă sugerez ca, după evaluarea exemplului să eliminaţi id="demo"
specificat în cadrul paragrafului cu un conţinut vid, să-l plasaţi în paragraful precedent şi să
compilaţi specificarea.
Exemplul următor declanşează evaluarea codului JavaScript la acţionarea unui buton. În cadrul
butonului, perechea onclick="myFunction()" apelează funcţia denumită "myFunction()",
definită ca:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
În următorul exemplu, acelaşi mecanism de declanşare (apăsarea unui buton) va determina

modificarea felului în care este afişat conţinutul paragrafului (elementului) cu id-ul menţionat în
metoda getElementById("IdValue").
Ultimul exemplu, prezentat la:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script_attribute ilustreaza cum
poate fi modificata o imagine prin afişarea a două imagini diferite denumite "light(0)" şi
respectiv "light(1)".
HTML File Paths
Sunt folosite pentru specificarea paginilor web sau a diferitelor tipuri de resurse: documente,
imagini, fişiere ".css", scripturi Java ".js". Avem 2 tipuri de adrese: adrese absolute, şi adrese
relative. Specificarea adreselor relative se face în rport de directorul curent (directorul în care
se află documentul ".html" sau ".htm" afişat în browser. Trebuie să menţionăm că putem avea
în egală măsură adrese web relative şi adrese relative la un director/folder curent local.
Adresele relative sunt foarte utile la construirea unui site web care conţine o mulţime de
resurse, memorate în diferite fişiere. În acest caz, accesarea resurselor se realizează folosind
adrese relative.
În tutorial sunt prezentate diferite modalităţi de adresare a resurselor folosind adrese relative.
Ca exerciţiu, dumneavoastră sunteţi rugaţi să determinaţi adresele absolute corespunzătoare
adreselor relative (care sunt adrese web) şi în fiecare exemplu să accesaţi aceeaşi resursă atât
folosind adresarea relativă, cât şi cea absolută corespunzătoare, adresă care va fi accesată în
contextul unui fişiere HTML existent pe calculatorul D-Voastră.
HTML Head
După cum bine ştim, perechea de taguri <head> … </head> este folosită pentru a specifica
secţiunea de metainformaţii din cadrul unui document. Numărul tagurilor sau perechilor de
taguri ce pot fi specificate în cadrul acestei secţiuni sunt: <title>, <base>, <link>, <meta>,
<script>, <style>.
Perechea <title> … </title> este folosită pentru specificarea titlului unui document HTML
Tagul <base> este folosit pentru definirea unei adrese implicite sau a unei ţinte implicite.
Exemplul prezentat la:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_base este semnificativ în
acest sens.
Tagul <link> este folosit pentru specificarea unor resurse externe, referite în documentul HTML
curent.
La https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_link este prezentat un
exemplu prin intermediul căruia este specificată informaţia de formatare specificată prin
intermediul unui fişier extern css.
Tagul <meta> este folosit pentru specificarea diferitelor tipuri de metainformaţii de genul:
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Exceptând primul exemplu, în care se specifică explicit standardul utilizat la codificare, în
celelalte metainformaţiile sunt destinate în principal motoarelor de căutare. În consecinţă este
sunt foarte importante pentru identificarea rapidă şi clasificarea siturilor şi a documentelor
web. Toate aceste metainformaţii sunt prezntate în exemplul de la:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_meta.
Tagul <meta> este folosit deasemenea pentru specificarea zonei de vizibilitate din cadrul unui
browser
În tutorial sunt prezentate 2 exemple de prezentare a unei pagini: fără specificarea viewport-
ului, la: https://www.w3schools.com/html/example_withoutviewport.htm şi cu specificare lui
la:
https://www.w3schools.com/html/example_withviewport.htm
După cum am constat la specificarea stilurilor în format internal şi respectiv la specificarea
scripturilor, se folosesc perechile de taguri <style> … </style> şi respectiv <script> … </script>.
În cadrul tutorialului este prezentat un exemplu în care perechile de taguri <html> … </html>,
<head> … </head> şi respectiv <body> … </body> nu sunt folosite şi fisierul HTML este
compilabil. În ceea ce ne priveşte, noi dezavuăm o astfel de practică, nu doar nu o
recomandăm.
HTML Layout
HTML pune la dispoziţie o serie de taguri pereche utile pentru a defini diferite zone având o
semantică diferită în cadrul unui document. Aceste perechi de taguri sunt:
<header> … </header>- Defineşte antetul unui document sau a unei secţiuni
<nav> … </nav> - Defineşte un container pentru link-uri folosite la navigare
<section> … </section> - Defineşte o sectiune intr-un document HTML
<article> … </article> - Defineşte un articol independent auto-conţinut
<aside> … </aside> - Defineşte informaţii despre conţinutul secţiunii sau articolului în afara
lor (asemănătoare unei bare de instrumente plasată în partea dreaptă)
<footer> … </footer> - Defineşte subsolul unui document sau a unei secţiuni
<details> … </details> - Defineşte detalii suplimentare
În exemplul prezentate la:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float
Se afişează o pagină web în care trebuie să fie afişate informaţii despre diferite oraşe. În cazul
prezentat: Londra, Paris şi Tokyo. Prin intermediul a 3 hyperlink-uri care afişează numele celor
3 oraşe, ar trebui ca la acţionarea unui hyperlink în zona destinată pentru <article> să fie afişată
informaţia corespunzătoare acelui oraş. După cum se poate constata, acest lucru nu se
întâmplă din 2 motive.
a) Informaţiile corespunzătoare pentru Paris şi Tokyo lipsesc,
b) Informaţia necesară pentru funcţionarea hyperlink-urilor lipseşte la fiecare din cele 3.
Pentru săptămâna viitoare, ultimul exerciţiu din tema D-Voastră constă în depanarea celor 2
probleme menţionate anterior prin aducerea informaţiei din Wikipedia:
https://en.wikipedia.org/wiki/Paris, respectiv https://en.wikipedia.org/wiki/Tokyo (evident, NU
toată informaţia din pagina wikipedia) şi prin completarea informaţiilor lipsă pentru
funcţionarea hyperlink-urilor.
Doresc să subliniez în mod expres că: în cursurile precedente am studiat tot ce aveţi nevoie
pentru rezolvarea acestei probleme. Sunteţi rugaţi să rezolvaţi problema în cadrul unui fişier
executabil pe calculatorul D-Voastră.
Mai mult decât atât, aveţi posibilitatea să constataţi că rezolvarea este comună/acceaşi şi
pentru soluţiile prezentate la problema dată cu CSS Floats şi respectiv CSS Felxbox prezentate
la:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float, respectiv
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox.

Stimaţi Studenţi,: Type "Text/javascript"

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Stimaţi Studenţi,: Type "Text/javascript"

Încărcat de

Drepturi de autor:

Formate disponibile

Stimaţi studenţi,

În următorul exemplu, acelaşi mecanism de declanşare (apăsarea unui buton) va determina

HTML File Paths

În exemplul prezentate la:

S-ar putea să vă placă și