Scribd
Încărcați
42 vizualizări16 pagini

Lectia1 Continut

Documentul prezintă JavaScript ca fiind unul dintre cele mai populare limbaje de programare și limbajul de programare al Web-ului. Descrie cum JavaScript poate modifica conținutul HTML, stilurile CSS și poate ascunde elemente. De asemenea, prezintă eticheta <script> și plasarea codului JavaScript în fișiere externe.

Încărcat de

VeronikaMalkoki
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
42 vizualizări16 pagini

Lectia1 Continut

Documentul prezintă JavaScript ca fiind unul dintre cele mai populare limbaje de programare și limbajul de programare al Web-ului. Descrie cum JavaScript poate modifica conținutul HTML, stilurile CSS și poate ascunde elemente. De asemenea, prezintă eticheta <script> și plasarea codului JavaScript în fișiere externe.

Încărcat de

VeronikaMalkoki
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 16

JAVA SCRIPT

JavaScript este cel mai popular limbaj de programare din lume.

JavaScript este limbajul de programare al Web-ului.

JavaScript este ușor de învățat.

De ce să studiezi JavaScript?

JavaScript este una dintre cele 3 limbi pe care toți dezvoltatorii web trebuie să le învețe:

1. HTML pentru a defini conținutul paginilor web

2. CSS pentru a specifica aspectul paginilor web

3. JavaScript pentru a programa comportamentul paginilor web

JavaScript poate modifica conținutul HTML

Una dintre multele metode HTML JavaScript este getElementById().

Exemplul de mai jos „găsește” un element HTML (cu id = „demo”) și schimbă conținutul elementului
(innerHTML) în „Hello JavaScript”:

Exemplu 1

<!DOCTYPE html>
<html>
<body>

<h2>Ce poate face JavaScript??</h2>

<p id="demo">JavaScript poate modifica continutul elementului HTML.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello


JavaScript!"'>Clic!</button>

</body>
</html>

JavaScript poate modifica stilurile HTML (CSS)

Schimbarea stilului unui element HTML este o variantă a schimbării unui atribut HTML:

Exemplu 3

<!DOCTYPE html>
<html>
<body>

<h2>Ce poate face JavaScript?</h2>

<p id="demo">JavaScript poate modifica stilul elementelor HTML.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Clic!


</button>

</body>
</html>

JavaScript poate ascunde elemente HTML

Ascunderea elementelor HTML se poate face prin schimbarea display stilului:

Exemplu 4

<!DOCTYPE html>
<html>
<body>

<h2>Ce poate face JavaScript??</h2>

<p id="demo">JavaScript poate ascunde elementele HTML.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Clic!


</button>

</body>
</html>

Eticheta <script>

În HTML, codul JavaScript este inserat între <script>și </script>etichete.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Primul meu JavaScript";
</script>

</body>
</html>

Funcții și evenimente JavaScript

Un JavaScript functioneaza ca un bloc de cod JavaScript, care poate fi executat atunci când este
„apelat” pentru a face ceva.
De exemplu, o funcție poate fi apelată atunci când apare un eveniment , ca atunci când utilizatorul
face clic pe un buton.

JavaScript în <head> sau <body>

Puteți plasa orice număr de scripturi într-un document HTML.

Scripturile pot fi plasate în <body>, sau în <head> secțiunea unei pagini HTML, sau în ambele.

JavaScript în <head>

În acest exemplu, un JavaScript functionează plasat în <head>secțiunea unei pagini HTML.

Funcția este invocată (numită) când se face clic pe un buton:

Exemplu 6

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraf modificat.";
}
</script>
</head>
<body>

<h2>JavaScript in Head</h2>

<p id="demo">Un Paragraf.</p>

<button type="button" onclick="myFunction()">Incearca</button>

</body>
</html>

JavaScript în <body>

În acest exemplu, un JavaScript functioneaza plasat în <body> secțiunea unei pagini HTML.

Funcția este invocată (numită) când se face clic pe un buton:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo">Un Paragraf.</p>

<button type="button" onclick="myFunction()">Incearca-l</button>


<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraf modificat.";
}
</script>

</body>
</html>

! Plasarea scripturilor în partea de jos a elementului <body> îmbunătățește viteza de afișare,


deoarece interpretarea scriptului încetinește afișajul.

JavaScript extern

Scripturile pot fi plasate și în fișiere externe:

function myFunction() {
document.getElementById("demo").innerHTML = "Paragraf modificat.";
}

Scripturile externe sunt practice atunci când același cod este utilizat în multe pagini web diferite.

Fișierele JavaScript au extensia de fișier .js .

Pentru a utiliza un script extern, puneți numele fișierului script în src atributul (sursă) al unei <script>
etichete:

Exemplu 8

<!DOCTYPE html>
<html>
<body>

<h2> JavaScript Extern</h2>

<p id="demo"> Un Paragraf.</p>

<button type="button" onclick="myFunction()">Incearca-l</button>

<p> Funcția este stocata in fisier extern numit "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

Puteți plasa o referință de script externă în <head> sau <body> după cum doriți.

Scriptul se va comporta ca și cum ar fi fost localizat exact unde <script> se află eticheta.

Scripturile externe nu pot conține <script> etichete.


Avantaje JavaScript extern

Plasarea de scripturi în fișiere externe are câteva avantaje:

- Se separă HTML și cod


- Face HTML și JavaScript mai ușor de citit și întreținut
- Fișierele JavaScript cache pot accelera încărcarea paginii

Pentru a adăuga mai multe fișiere script pe o pagină - utilizați mai multe etichete script:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referințe externe

Scripturile externe pot fi referite cu un URL complet sau cu o cale relativă la pagina web curentă.

Acest exemplu folosește o adresă URL completă pentru a conecta la un script:

<script src="https://www.w3schools.com/js/myScript1.js"></script>

Acest exemplu folosește un script situat într-un folder specificat de pe site-ul web curent:

<script src="/js/myScript1.js"></script>

Acest exemplu se leagă de un script situat în același folder cu pagina curentă:

<script src="myScript1.js"></script>

JS HTML DOM

Așadar, ați studiat HTML, ați creat primele etichete, ați aflat despre CSS, ați creat forme frumoase,
butoane uimitoare, pagini receptive și ați început să arătați tuturor cât de uimitor a fost tot ceea ce a
fost.

Dar apoi decideți că doriți să faceți un alt pas în învățarea dvs. și ați început să vă întrebați: „Cum pot
adăuga animație pe pagina mea? Mi-aș dori ca acel buton să facă niște animații pe pagina mea când
am dat clic pe ea! ”

Ei bine, aici vine DOM-ul pentru a vă rezolva problema. Probabil că ați auzit multe despre asta, dar s-
ar putea să nu știți încă ce este și ce probleme rezolvă. Deci, să vedem.

Deci, ce este DOM?

Știți toate acele animații interesante pe care le vedeți în jur, sunt realizate prin manipularea DOM.
Vă voi explica acum cum să începeți să îl manipulați și să vă faceți site-urile web să pară mai cool.
DOM (Document Object Model) este o interfață care reprezintă modul în care documentele dvs.
HTML și XML sunt citite de browser. Permite unui limbaj (JavaScript) să vă manipuleze, structura și
stiliza site-ul. După ce browserul citește documentul dvs. HTML, creează un arbore reprezentativ
numit Model de obiect document și definește modul în care arborele poate fi accesat.

Avantaje

Prin manipularea DOM, aveți posibilități infinite. Puteți crea aplicații care actualizează datele paginii
fără a fi nevoie de o reîmprospătare. De asemenea, puteți crea aplicații care pot fi personalizate de
utilizator și apoi puteți schimba aspectul paginii fără o reîmprospătare. Puteți trage, muta și șterge
elemente.

După cum am spus, aveți posibilități infinite - trebuie doar să vă folosiți creativitatea.

Reprezentare de către browser

Fig. 1 Arborele reprezentativ creat de browser după ce a citit documentul.

În imaginea de mai sus, putem vedea arborele reprezentativ și cum este creat de browser. În acest
exemplu, avem patru elemente importante pe care le veți vedea foarte mult:
- Document : tratează toate documentele HTML .
- Elemente : toate etichetele din interiorul HTML sau XML se transformă într-un element
DOM.
- Text : tot conținutul etichetelor.
- Atribute : toate atributele dintr-un anumit element HTML . În imagine, atributul class =
”erou” este un atribut din elementul < p>.

Pentru a accesa obiectul DOM, pe care îl analizează JavaScript, vom deschide consola oricărei pagini
web și vom introduce cuvantul cheie document, iar JavaScript va crea imediat obiectul document, în
care vom vizualiza elementele DOM.

Manipularea DOM
Acum ajungem la cea mai bună parte: începând să manipulăm DOM. În primul rând, vom
crea un element HTML ca exemplu pentru a vedea câteva metode și cum funcționează
evenimentele.

Exemplu 9

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Entendendo o DOM (Document Object Model)</title>
</head>
<body>
<div class="container">
<h1><time>00:00:00</time></h1>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</body>
</html>

Foarte simplu, nu? Acum vom afla mai multe despre metodele DOM: cum să obținem elementele
noastre și să începem să manipulăm.

Cu modelul obiect, JavaScript primește toată puterea de care are nevoie pentru a crea HTML
dinamic:

- JavaScript poate modifica toate elementele HTML din pagină


- JavaScript poate modifica toate atributele HTML din pagină
- JavaScript poate modifica toate stilurile CSS din pagină
- JavaScript poate elimina elementele și atributele HTML existente
- JavaScript poate adăuga elemente și atribute HTML noi
- JavaScript poate reacționa la toate evenimentele HTML existente în pagină
- JavaScript poate crea noi evenimente HTML în pagină
Ce vei învăța

- Cum se modifică conținutul elementelor HTML


- Cum se schimbă stilul (CSS) al elementelor HTML
- Cum să reacționezi la evenimentele HTML DOM
- Cum se adaugă și se șterg elemente HTML

Ce este DOM?

DOM este un standard W3C (World Wide Web Consortium).

DOM definește un standard pentru accesarea documentelor:

"Modelul de obiecte document W3C (DOM) este o interfață neutră de platformă și limbă, care
permite programelor și scripturilor să acceseze și să actualizeze dinamic conținutul, structura și stilul
unui document."

Standardul W3C DOM este separat în 3 părți diferite:

Core DOM - model standard pentru toate tipurile de documente

XML DOM - model standard pentru documente XML

HTML DOM - model standard pentru documente HTML

Ce este DOM-ul HTML?

HTML DOM este un model de obiect standard și o interfață de programare pentru HTML. Acesta
definește:

- Elementele HTML ca obiecte


- Proprietățile tuturor elementelor HTML
- metode pentru a avea acces la toate elementele HTML
- evenimente pentru toate elementele HTML

Cu alte cuvinte: HTML DOM este un standard pentru cum să obțineți, să modificați, să adăugați sau
să ștergeți elemente HTML.

Metode

Metodele HTML DOM sunt acțiuni pe care le puteți efectua (pe elemente HTML).

Proprietățile DOM HTML sunt valori (ale elementelor HTML) pe care le puteți seta sau modifica.

Interfața de programare DOM

DOM-ul HTML poate fi accesat cu JavaScript (și cu alte limbaje de programare). În DOM, toate
elementele HTML sunt definite ca obiecte . Interfața de programare este proprietățile și metodele
fiecărui obiect.

O proprietate este o valoare pe care o puteți obține sau seta (cum ar fi schimbarea conținutului unui
element HTML).
O metodă este o acțiune pe care o puteți face (cum ar fi adăugarea sau ștergerea unui element
HTML).

DOM are o mulțime de metode. Acestea sunt conexiunea dintre nodurile (elementele) și
evenimentele noastre, lucru despre care vom afla mai multe mai târziu. Îți voi arăta câteva dintre
cele mai importante metode și modul în care sunt folosite. Există mult mai multe metode pe care nu
le voi arăta aici, dar le puteți vedea pe toate aici .

Exemplul următor se modifică conținutul ( innerHTML) al <p>elementului cu id="demo":

Exemplu 10

<!DOCTYPE html>
<html>
<body>

<h2>Prima mea pagina</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

În exemplul de mai sus, getElementById este o metodă , în timp ce innerHTML este o proprietate .

JavaScript HTML DOM Document

Obiectul document HTML DOM este proprietarul tuturor celorlalte obiecte din pagina dvs. web.

Obiectul de document HTML DOM

Obiectul document reprezintă pagina dvs. web.

Dacă doriți să accesați orice element dintr-o pagină HTML, începeți întotdeauna cu accesarea
obiectului document.

Mai jos sunt câteva exemple despre modul în care puteți utiliza obiectul document pentru a accesa și
manipula HTML.

Găsirea elementelor HTML

Metode Descriere
document.getElementById(id) Găsește elementul după id
document.getElementsByTagName(name) Găsește elementul după numele etichetei
document.getElementsByClassName(name) Găsește elementul după numele clasei

document.querySelectorAll("selector css")
prin colecții de obiecte HTML (exemplu mai jos
va fi
Schimbarea elementelor HTML

Proprietate Descriere
element.innerHTML = new html content Modifică inner HTML al elementului
element.attribute = new value Modifică valoarea atributului elementului
element.style.property = new style Modifică stilul elementului
Metode Descriere
element.setAttribute(attribute, value) Modifică valoarea atributului elementului
HTML

Găsirea elementelor HTML exemplificate și explicate

getElementById ()

Cel mai comun mod de a accesa un element HTML este de a utiliza id elementul. În exemplul de mai
sus metoda getElementById utilizată id="demo"pentru a găsi elementul.

Proprietatea HTML interioară

Cel mai simplu mod de a obține conținutul unui element este prin utilizarea proprietății innerHTML.

Exemplu 11

<!DOCTYPE html>
<html>
<body>

<h2>Gasirea elementelor HTML după Id</h2>

<p id="intro">Hello World!</p>


<p> Acest exemplu demonstrează metoda<b>getElementsById</b></p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"Textul din paragraf este " + myElement.innerHTML;
</script>

</body>
</html>

Proprietatea innerHTML este utilă pentru obținerea sau înlocuirea conținutului de elemente HTML.

Proprietatea innerHTML poate fi folosită pentru a obține sau de a modifica orice element HTML,
inclusiv <html>și <body>.

Sau o altă interpretare ar fi prin atribuirea unei variabile.

Această metodă returnează elementul care conține numele id trecut. După cum știm, id -ul ar trebui
să fie unic, deci este o metodă foarte utilă pentru a obține doar elementul dorit.
var myStart = document.getElementsById('start');

myStart : Numele variabilei noastre care arată similar cu ID - ul nostru trecut.

start : id trecut. Și în cazul în care nu avem niciun id cu acel nume specific, acesta revine nul .

getElementsByClassName ()

Această metodă returnează o colecție HTML a tuturor acelor elemente care conțin clasa de nume
specifică trecută.

Dacă doriți să găsiți toate elementele HTML cu același nume de clasă, utilizați
getElementsByClassName().

Exemplu 13

<!DOCTYPE html>
<html>
<body>

<h2>Gasirea elementelor HTML dupa numele clasei</h2>

<p>Hello World!</p>

<p class="intro">DOM este foarte util.</p>


<p class="intro">Acest exemplu demonstrează metoda <b>getElementsByClassName</b> .</p>

<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'Textul din paragraf cu class="intro": ' + x[0].innerHTML;
</script>

</body>
</html>

Sau o altă interpretare ar fi prin atribuirea unei variabile.

Acest exemplu returnează o listă cu toate elementele cu class="intro".

var myContainer = document.getElementsByClassName('container');

myContainer : Numele variabilei noastre care arată similar clasei noastre a fost trecut.

.container : clasa noastră a trecut. În cazul în care nu avem nicio clasă cu acel nume specific, se
returnează nul .
getElementsByTagName ()

Acest exemplu găsește toate <p>elementele:

Exemplu 12

<!DOCTYPE html>
<html>
<body>

<h2>Gasirea elementelor HTML dupa numele Tag</h2>

<p>Hello World!</p>
<p>Acest exemplu demonstrează metoda <b>getElementsByTagName</b>.</p>

<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'Textul din paragraf este ' + x[0].innerHTML;
</script>

</body>
</html>

Aceasta funcționează la fel ca acele metode de mai sus: returnează și o colecție HTML, dar de data
aceasta cu o singură diferență: returnează toate acele elemente cu numele etichetei trecut.

Sau o altă interpretare ar fi prin atribuirea unei variabile.

var buttons = document.getElementsByTagName('button');

buttons : Numele variabilei noastre care arată similar cu numele etichetei noastre a fost trecut.

button : numele etichetei pe care dorim să o obținem.

Atrage-ți atenția asupra literei s, prezente în getElementsByClassName și getElementsByTagName,


are o logică fiindcă în aceste metode sunt mai multe elemente. Există câteva lucruri importante de
reținut despre aceste două metode:

- ambele metode folosesc obiectul document


- ambele returnează mai multe articole
- lista returnată nu este o matrice.

Exerciții:
2. Scrieți codul DOM pentru a selecta toate elementele <article>.

Soluția: document.getElementsByTagName („articol”);

3. Scrieți codul DOM pentru a selecta toate elementele cu clasa: fancy-footer.

Soluția: document.getElementsByClassName ('fancy-footer')

Găsirea elementelor HTML de către selectoarele CSS

querySelector ()

Returnează primul element care are trecut selectorul CSS specific . Amintiți-vă că selectorul ar trebui
să urmeze sintaxa CSS . În cazul în care nu aveți niciun selector , acesta revine nul .

Exemplu 14

<!DOCTYPE html>
<html>
<body>

<h2>Gasirea elementelor HTML cu by Query Selector</h2>

<p>Hello World!</p>

<p class="intro">DOM este foarte util.</p>


<p class="intro">Acest exemplu demonstrează metoda<b>querySelector</b> .</p>

<p id="demo"></p>

<script>
var x = document.querySelector("p.intro");
document.getElementById("demo").innerHTML =
'Primul paragraf ce are class="intro": ' + x.innerHTML;
</script>

</body>
</html>

Sau o altă interpretare ar fi prin atribuirea unei variabile.

var resetButton = document.querySelector('#reset');

resetButton : Numele variabilei noastre care arată similar cu selectorul nostru a trecut.

#reset : selectorul a trecut, iar dacă nu aveți niciun selector care se potrivește, acesta va reveni la
nul.

Exerciții

1. Scrieți codul .querySelector()pentru a găsi primul element cu ID-ul: fanciful-butterfly.

R: document.querySelector (“# fanciful-butterfly”);

2. Scrieți .querySelector()codul pentru a găsi primul element paragraf care are clasa: callout.

R: document.querySelector ('p.callout');

querySelectorAll ()

Foarte similar cu metoda querySelector () , dar cu o singură diferență: returnează toate elementele
care se potrivesc cu selectorul CSS trecut. Selectorul ar trebui să urmeze , de asemenea, sintaxa CSS .
În cazul în care nu aveți niciun selector , acesta revine nul .

Exemplu 15

<!DOCTYPE html>
<html>
<body>

<h2>Gasirea elementelor HTML cu Query Selector All</h2>

<p>Hello World!</p>

<p class="intro">DOM este foarte util.</p>


<p class="intro">Acest exemplu demonstrează metoda <b>querySelectorAll</b> .</p>

<p id="demo"></p>

<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'Primul paragraf cu (index 0) ce are class="intro": ' + x[0].innerHTML;
</script>

</body>
</html>

Sau o altă interpretare ar fi prin atribuirea unei variabile.

var myButtons = document.querySelector('#buttons');

myButtons : Numele nostru de variabilă care arată similar cu selectorii noștri a trecut.

#buttons : selectorul a fost trecut, dacă nu aveți niciun selector care se potrivește cu acesta, revine
nul .

Exercitiu

1. Scrieți codul .querySelectorAll()pentru a găsi toate elementele de paragraf descendente ale


elementelor care au clasa: articles.

R: document.querySelectorAll ('. articole p');

Găsirea elementelor HTML prin colecții de obiecte HTML

Acest exemplu găsește elementul formular cu id="frm1", în colecția de formulare, și afișează toate
valorile elementului:

Exemplu 16

<!DOCTYPE html>
<html>
<body>

<h2>Gasirea elementelor HTML utilizand functia document.forms</h2>

<form id="frm1" action="/action_page.php">


First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>

<p>Click "Incearca-l" pentru a afisa valoarea fiecarui element din formular.</p>

<button onclick="myFunction()">Incearca-l</button>

<p id="demo"></p>

<script>
function myFunction() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Acestea sunt unele dintre cele mai utilizate metode DOM. Există mai multe metode pe care le puteți
utiliza, cum ar fi createElement (), care creează un element nou în pagina dvs. HTML și setAttribute ()
care vă permite să setați atribute noi pentru elementele HTML. Le poți explora singur.

Există o mare varietate și de metode, pe care vă încurajez să le încercați singuri.

Acum vom învăța despre Evenimente - până la urmă fără ele nu putem face animații în paginile
noastre.

Exercitii practice

1. Utilizati metoda getElementById, pentru a gasi elementul <p> si ai modifica valoarea in


"Hello".
<p id="demo"></p>
......
<script>
= "Hello";
</script>

R: document.getElementById(”demo”).innerHTML=”Hello”;

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