Tema 13

Tema13.
JavaScript
CONINUT
1. Accesul la elementele HTML prin

JavaScript
2. Descrierea general a JavaScript
3. Metode de implementare a
JavaScripturilor ntr-un document web
4. Exemple
DOM
DOM (DocumentObjectModel) reprezint un
standard oficial al consoriumului W3C (World Wide
Web Consortium)
"The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style
of a document
Standardul W3C DOM poate fi divizat n 3 pri:
Core DOM un model standard folosit pentru toate
tipurile de documente
XML DOM - un model standard folosit pentru documente
de tip XML
HTML DOM - un model standard folosit pentru
documentele HTML
DOMHTML
DOM HTML, se folosete pentru a realiza accesul la
elementele HTML ale unui document HTML. El definete:
Elementele HTML, ca i obiecte. n DOM, toate
elementele HTML, sunt definite ca i obiecte
Proprietile tuturor elementelor HTML
Metodele, folosite pentru a realiza accesul la toate
elementele HTML
Evenimentele pentru toate elementele HTML
Altfel spus: HTML DOM este un standard folosit
pentru a accesa, a modifica, a aduga sau lichida
elemente HTML
JavaScript poate modifica contentul unui document HTML
manipulnd cu DOM HTML (pot fi folosite i alte limbaje
de programare pentru aceasta)
HTML DOM I JAVASCRIPT
Pentru a interaciona cu HTML DOM prin intermediul
JavaScript sunt utilizate proprietile i metodele
fiecrui obiect
Proprietatea este o valoare stabilita pentru
elementul HTML care poate fi setat sau obinut
accesul la ea
Metoda reprezint o aciune care poate fi realizat cu
obiectul: modificarea coninutului elementului HTML,
lichidarea coninutului elementului HTML, generarea
coniturilor pentru elementele HTML, copierea
coninuturilor elementelor, modificarea stilurilor
elementelor HTML, crearea controalelor (handler-e)
evenimentelor pentru elementele HTML etc.
HTML DOM Document Object
Obiectul Document reprezint documentul web care
definete o pagin web
Dac apare necesitatea accesrii unui element HTML de
pe o pagin web mereu se ncepe cu accesarea
obiectului documentului
Mai jos sunt exemplificate unele metode care pot fi
utilizate pentru obiectul Document cu scopul accesrii
i prelucrrii unui element HTML din documentul respectiv
Metoda Descriere
document.getElementById(id) Gsete elementul n baza id-
ului lui
document.getElementsByTagName( Gsete elementul n baza
name) denumirii tag-ului
document.getElementsByClassNam Gsete elementul n baza
DOCUMENT OBJECT MODIFICAREA
ELEMENTELOR HTML
Pentru a schimba coninuturile elementelor HTML dintr-un
document web se vor folosi urmtoarele proprieti i metode
Proprietate sau Descriere

metod
element.innerHTML Schimb coninutul elementului
=coninut nou pentru HTML
elementul HTML
element.attribute = Modific valoarea atributului
valoare nou elementului HTML
element.setAttribute(atr Modific valoarea atributului
ibut, valoare) elementului HTML
element.style.property Modific stilul elementului HTML.
= valoare no pentru Lista proprietilor obiectului
ALTE METODE ALE OBIECTULUI
DOCUMENT
document.createElement(ele Creaz un element

ment) HTML
document.getElementById(id).on Adaug cod pentru a
click = funcie(){coduri} prelucra un evenimet
onclick
n exemplul urmtor Modificarea coninutului

elementului HTML va fi utilizat metoda
document.getElementById() una dintre cele
mai utilizate metode folosite cu HTML DOM
EXEMPLUSCHIMBAREELEMENTHTML
<!DOCTYPE html>
<head><title>Exemplu utilizare JS</title>
<link rel="stylesheet" type="text/css" href="stil1.css"></head>
<html>
<body>
<h1>Exemplu schimbare continut</h1>
<p>JavaScript poate schimba continutul unui careva element
HTML:</p>
<button type="button" onclick="functie()">Tasteaza aici!</button>
<p id="et">Vezi rezultatul!</p>
<script>
function functie() {document.getElementById("et").innerHTML
= "Continut schimbat!!!";}
</script>
</body>
</html>
REZULTATEXEMPLU
Pn la tastare buton:
Dup tastare buton:

UTILIZAREJAVASCRIPT
Exemplu Schimbare atribute HTML
<!DOCTYPE html>
<html>
<body>
<img id="img" onclick="changeImage()" border="0" src="galben.gif"
width="180" height="180">
<p>Da click pe imagine...</p>
<script>
Metoda
function changeImage(){
match()
element=document.getElementById("img"); caut
if (element.src.match("rosu")) coincidene cu
{ element.src="galben.gif"; } expresia
regulat
else
specificat,
{ element.src="rosu.gif"; } ntr-un ir de
} caractere
</script></body></html>
REZULTATEXEMPLU
Pn la a da click:
Dup click:
EXEMPLU
UTILIZAREJAVASCRIPT
Schimbarea stilurilor CSS n documentele HTML
<!DOCTYPE html>
<html>
<body>
HTML:</p>
<script>
function functie() {document.getElementById("et").style.fontSize =
"25px";}
</script>
</body></html>
REZULTATEXEMPLU
Pn a da click:
Dup click (Exemplu):

ALT EXEMPLU
<!DOCTYPE html>
<html>
<body>
<p id="blink">JavaScript poate schimba continutul unui anumit element
HTML! </p>
<script>
var p = document.getElementById("blink");
setInterval(function() {
if (p.style.fontSize != "10px") { p.style.fontSize = "10px";
} else { p.style.fontSize = "20px";} }, 1000);

</script>
</body>
</html> Rezultat:
ALTEUTILIZRIJAVASCRIPT
Validarea datelor de intrare
Inserarea datei, zilei din sptmn, orei etc.
Controlul evenimentelor: la tastarea unui
anumit buton, la deplasarea mouse-ului,
coordonatele mouse-ului etc.
Afiarea avertizrilor
Apelul i ndeplinirea unor funcii
Etc., etc.
TAGULSCRIPT
1. Este utilizat pentru a ncadra JavaScript-urile

<script> Coninut (coduri
JavaScript)</script>
sau
2. Este utilizat pentru a face referin la un

fiier extern cu Java script-uri
<scriptsrc=fisierScript.js"></script>
MODALITIDEINSERARE/
DEFINIRESCRIPTURI
1. JavaScript-urile pot fi plasate n exteriorul unui document
HTML
Reprezint fiiere separate cu scripturi/coduri care pot fi
utilizate ntr-una sau mai multe pagini web
Fiierele JavaScript au extensia .js
n documentul HTML se face referire la fiierul cu scripturi,
utiliznd n tag-ul <script> si atributul src. Exemplu:
<scriptsrc=fisierScript.js"></script>
Referina la fiierul cu script-uri se face n tag-ul <head> sau
<body>
2. JavaScript-urile pot fi plasate n interiorul documentului
HTML
n interiorul tag-ului <head>
n interiorul tag-ului <body>
EXEMPLUINSERARESCRIPTEXTERN
Fiierele cu scripturi (.js) nu conin tag-ul <script>!!!
Fiierul .html, tag-ul <script> n <body>:
<!DOCTYPE html>
<html>
<body>
<p>JavaScript poate schimba continutul unui careva element HTML:</p>
<script src="script_prim.js"></script>
</body>
</html>
Fiierul .js:
function functie() {document.getElementById("et").style.fontSize = "25px";}
EXEMPLUINSERARESCRIPTEXTERN
Fiierul .html, tag-ul <script> n <head>:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stil1.css">
<script src="script_prim.js"></script>
</head>
<html>
<body>
</body>
</html>
Fiierul .js:
function functie() {document.getElementById("et").style.fontSize = "25px";}
AVANTAJELE DEFINIRII
SCRIPTURILOR EXTERIOARE
sunt separate codurile HTML de scripturile JS
uurarea citirii i mentenanei (ntreinerii)
codurilor HTML i a scripturilor JS
fiierele JavaScript pot accelera cache-ing-ul
paginii care se ncarc
cahing memorarea, stocarea temporar a datelor,
care probabil vor fi utilizate din nou, cndva.
Navigatoarele web utilizeaz frecvent caching-ul
Memoria cache este acea memorie care posed o
vitez mare de acces la date i este destinat
accelerrii accesului la date
Caching-ul se realizeaz de browsere, servere,
discurile rigide etc.
JAVASCRIPTURIINTERIOARE
Pot fi definite, cu ajutorul tag-ului <script>,
att n interiorul tag-ului <head>, ct i n
<body>, dar i n ambele
Dac scripturile se declar n tag-ul <body>,
cel mai bine e s fie definite la sfrit ceea
ce va reduce un pic timpul de ncrcare i
afiare a resursei web
EXEMPLUDEFINIRESCRIPTINTERIOR
<!DOCTYPE html>
<script>
function functie()
{document.getElementById("et").style.fontSize = "25px";}
</script>
</head>
<html>
<body>
HTML:</p>
</body>
</html>
EXEMPLUDEFINIRESCRIPTINTERIOR
<!DOCTYPE html>
</head>
<html>
<body>
<script>
function functie() {document.getElementById("et").style.fontSize =
"25px";}
</script>
</body>
</html>
JAVASCRIPTDEBUGGING
n cazul n care apar dificulti n gsirea
erorilor de scripting utilizai debugger-ul
Pentru activarea debugger-ului n browser
folosii accesul rapid, prin tasta F12
IEIRINJAVASCRIPT
JavaScript nu are nici o funcie special pentru tipar sau
pentru prezentarea ieirilor
n HTML, JavaScript, poate fi utilizat numai pentru a
manipula cu elementele HTML
Pentru a accesa un anumit element HTML, cu ajutorul
JavaScript-ului, se recomand utilizarea metodei
document.getElementById(id)
Pentru a identifica elementul cu care se dorete a se face
anumite manipulri se folosete atributul global id
Iar pentru a fi posibil referirea la coninutul unui anumit
element HTML se utilizeaz proprietatea innerHTML
(seteaz sau returneaz coninutul unui element HTML)
Forma general: HTMLElementObject.innerHTML=text
(setare)
EXEMPLUMANIPULAREIEIRE
<!DOCTYPE html>
<html>
<body>
<p id="et1">Da click pe buton pentru a vedea manipularea cu continutul
elementelor - stergere
continut (innerHTML)</p>
<button onclick="functie1()">Click</button>
<p id="et2">Da click pe buton pentru a vedea manipularea cu continutul
elementelor - modificare continut (innerHTML)</p>
<button onclick="functie2()">Click</button>
<script>function functie1()
{ document.getElementById("et1").innerHTML = ""; } function
functie2() {
document.getElementById("et2").innerHTML = "Sper ca este clar ce
s-a intamplat!!!???";}
</script>
</body></html>
REZULTATEXEMPLU
Dup tastare butoane:

AFIAREALAECRANADATELOR
Metoda write() afieaz o expresie HTML sau cod
JavaScript ntr-un document HTML
Dac va fi apelat dup un document HTML deja
ncrcat, coninutul acestuia se va distruge i se
va afia ceea ce este specificat n metoda write()
Este folosit, n general pentru testare
Sintaxa: document.write(exp1,exp2,exp3,...)
Exemplu:
<body>
<script>
document.write("<h1>Draga cititorule!</h1><p>Multumesc
pentru atenie!</p>");
</script>
EXEMPLUAFIAREDATE
<p>Data curenta este: </p>
<script>document.write(Date()); </script>
Rezultat:
Sau:
<br />
<button onclick="functie3()">Apasa
pentru a afla data curenta</button><br />
<script>
function functie3() {
document.write(Date());}
</script>
INSERAREACOMENTARIILOR
JavaScript este un limbaj de scripting
Declaraiile JavaScript sunt "linii de comand",
executate de browser-ul web
O declaraie JS se sfrete cu ;
Codurile JavaScript pot fi auto-documentate
sau comentate aciunile codului
Comentariile plasate pe un rnd se specific prin //
Exemplu: document.getElementById("et1").innerHTML = "";
//se nlocuieste continutul
Comentariile plasate pe cteva rnduri se vor
specifica ntre /* i */
VARIABILENJAVASCRIPT
n JavaScript variabilele reprezint containere
pentru diverse valori
n JS variabile pot avea denumiri scurte (a, b, x, z),
dar recomandat este s fie utilizate variabile cu
sens: nume, vrsta, cost etc.
Denumirile variabilelor pot conine litere, cifre, linia
de subliniere, i semnul dolar ($)
Denumirile variabilelor trebuie s nceap cu o liter
Denumirile variabilelor pot, de asemenea, ncepe cu
semnul $ sau _ (dar nu e recomandabil)
Denumirile variabilelor sunt case sensitive
Cuvintele rezervate din JavaScript nu pot fi folosite
ca denumiri de variabile
VARIABILENJAVASCRIPT.II
Variabilelor le pot fi atribuite valori sau expresii
Atribuirea se face cu simbolul =
Exemplu: cost=200; sau cost = cost+30;
Variabilelor le pot fi atribuite mai multe tipuri de date
Date de tip text sau sir de caractere
Exemplu: numePrenume = Cutarescu Ana;
Valorile variabilei de tip ir de caractere sunt ncadrate
ntre ghilimele sau apostrof
Date de tip numeric
Exemplu: varsta=50;
Valorile nu se includ ntre ghilimele (doar n cazul n care
unele cifre trebuie s fie tratate drept caractere de tip
text)
n JS variabilele se declar utiliznd cuvntul rezervat
var
ADUNAREA UNUI NUMR NTREG CU
O SUCCESIUNE DE SIMBOLURI
La ncercarea adunrii unui numr cu o succesiune de
smboluri JavaScript va concatena cele dou valori (va
considera c numrul tot este o succesiune de
simboluri)
<body>
<p id="rez">Rezultatul va fi aici</p>
<button onclick="adunare();">Click</button>
<script>
function adunare() {
var rezultat = 300 + " ani";
document.getElementById("rez").innerHTML = rezultat;
}
</script>
</body>
EXEMPLUDEFINIREVARIABILEJS
<!DOCTYPE html>
<html>
<body>
<p>Definire variabile de diferite tipuri</p>
<p id="et1"></p><p id="et2"></p>
<p id="et3"></p>
<script> Rezultat:
var nume = "Cutarescu";
var prenume = "Ana";
var varsta = 35;
document.getElementById("et1").innerHTML = nume;
document.getElementById("et2").innerHTML =
prenume;
document.getElementById("et3").innerHTML = varsta;
</script>
</body>
</html>
DEFINIREA MAI MULTOR VARIABILE
ODAT
<!DOCTYPE html>
<html>
<body>
<p>Definirea variabilelor</p>
<p id="et1"></p><p id="et2"></p><p id="et3"></p>
<script>
var nume = "Ivanov", prenume = "Ivan", varsta =
35;
document.getElementById("et1").innerHTML = nume;
prenume;
document.getElementById("et3").innerHTML = varsta;
</script>
</body>
</html>
OPERAIINJS
Asupra variabilelor numerice pot fi efectuate
operaii algebrice
Exemplu:
var adaos = 5;
var cost = 500 + adaos;
Asupra variabilelor de tip ir de caractere se
poate aplica operaia de concatenare
Exemplu:
var nume = Ivanov;
var datePersonale = nume + Ivan;
Alt exemplu:
var cod = +373;

var nrTelefon = cod + 334455;
OPERAIINJS
Deasemenea n lucrul cu irurile de caractere se poate
utiliza operatorul de atribuire a concatenrii += :
Exemplu:
<p>Definirea variabilelor</p><p id="et1"></p>

<script>
var nume = "Ivanov", prenume = "Ivan", varsta = 35;
var sir =
document.getElementById("et1").innerHTML;
sir += nume + ' ';
sir += prenume + ' ';
sir += varsta;
document.getElementById("et1").innerHTML = sir;
</script>
LUNGIMEAUNUIIRDECARACTERE
n JS pentru a determina lungimea unui ir de
caractere se utilizeaz proprietatea length
<!DOCTYPE html>
<html>
<body>
<p>Definire variabile de diferite tipuri</p>
<p id="et3"></p>
<p id="et4"></p>
<script>
var cod = "+373";
var nrTelefon = cod + 334455;
document.getElementById("et3").innerHTML = nrTelefon;
document.getElementById("et4").innerHTML = nrTelefon.length;
</script>
</body>
</html>
ALTETIPURIDEDATE.TablourinJS
Valorile tablourilor n JS se includ ntre paranteze
ptrate
Elementele sunt separate prin virgule
Exemplu:
var datePersonale = ["Amariei", "Petru", "1990"];
Pentru a realiza accesul la elementele tabloului, indexarea se
face de la 0
Exemplu: pentru a accesa anul naterii din datele personale
se va scrie datePersonale[2]
<p id="et1">
<script>
var datePersonale = ["Amariei", "Petru", "1990"];
document.getElementById("et1").innerHTML = datePersonale[2];
</script>
CREAREAOBIECTELORNJS
Dup cum am mai spus anterior, orice obiect se
caracterizeaz prin proprietile sale (omul are:
nume, prenume, an de natere, numr_copii_minori
etc.) i poate fi definit pentru el comportamentul cu
ajutorul operaiilor/metodelor (omul: merge,
mnnc, vorbete, sare etc.)
Valorile proprietilor sunt diferite pentru fiecare obiect
Comportamentul se definete pentru toate obiectele
unui grup de obiecte
Metodele se definesc folosind funcii
Accesul la proprietaea obiectlui se realizeaz folosind
(.) denumireObiect.denumireProprietate
EXEMPLU DEFINIRE OBIECT
<body>
<p id="rez"></p>
<script>
var person = {
firstName : "Ana",
lastName : "Ivanova",
sphereOfActivity: "designer",
nmbOfChildren :0
};
document.getElementById("rez").innerHTML = person.firstName
+ " " + person.lastName + " is " + person.sphereOfActivity + "
and has " + person.nmbOfChildren + " children.";
</script>
</body>
INSTRUCIUNEA/ FUNCIA
TYPEOF
Se folosete pentru a determina tipul
variabilei sau a unei valori
Exemplu:
<p id="rez"></p>
<p id="tip"></p>
<script>
var person = {
firstName : "Ana",
sphereOfActivity: "designer",
nmbOfChildren :0
};
document.getElementById("tip").innerHTML = typeof "Ana" +
", " + typeof 3 + ", " + typeof person; </script>
FUNCIINJS
n JS o funcie reprezint un bloc de cod scris cu
scopul de a soluiona o problem concret
Funciile sunt definite cu scopul de a reutiliza, la
necesitate
Funcia se execut prin apelul ei prin nume
Sintaxa:
Funcia se definete utiliznd cuvntul-cheie function
Urmeaz denumirea funciei i paranteze rotunde: nume()
Numele funciei poate conine litere, cifre, linia de
subliniere, semnul dolarului (aceleai reguli ca i pentru
variabile)
ntre paranteze pot fi inclui parametrii separai prin virgul
Codul, care va fi executat, se ncadreaz ntre acolade
APELULFUNCIEI
Deci, forma general, pentru a defini o
funcie:
function nume(parametru1, parametru2, )
{ declaraie1; declaraie2;}
Codul definit n interiorul unei funcii se va executa
la apelul funciei
Funcia poate fi apelat prin cteva metode:
La activarea unui eveniment (utilizatorul face click pe un
buton)
Se apeleaz prin coduri JavaScript sau automat
Dup executarea funciei, n urma apelului, JS va
continua ndeplinirea declaraiilor urmtoare
EXEMPLUDEFINIREiAPELFUNCIE
Parametrii funciei se utilizeaz ca variabile
locale, n interiorul funciei
Exemplu:
<p id="et1"></p>
<script>
function functieCalcul(salariu, adaos) {
return salariu+adaos;}
functieCalcul(3000, 500);
</script>
Rezultat: 3500
FUNCIE-EXPRESIE
n JavaScript funcia poate fi definit i prin
intermediul unei expresii
Funcia-expresie poate fi salvat ntr-o variabil
Dup ce funcia a fost salvat ntr-o variabil,
aceast variabil poate fi folosit ca i o funcie
Exemplu:
var calcul = function functieCalcul(salariu, adaos) {return
salariu+adaos;}
var rezultatCalcul = calcul(3000, 500);
document.getElementById("et").innerHTML = rezultatCalcul;
Rezultat:
FUNCII-ANONIME
Funcia anonim este acea funcie care nu are nume
Funcia care este salvat ntr-o variabil nu necesit
un nume poate fi apelat prin numele variabilei
O astfel de funcie se termin cu punct i virgul (;)
deoarece reprezint o parte a execuiei expresiei
Exemplu:
var calcul = function (salariu, adaos) {return salariu+adaos;}
var rezultatCalcul = calcul(3000, 500);
document.getElementById("et").innerHTML = rezultatCalcul;
Rezultat:
FUNCIE AUTOEXECUTABIL
Funcia-expresie autoexecutabil se lanseaz automat,
fr a fi necesar apelul ei
Funcia se va executa automat, numai dac dup
definirea funciei-expresie vor urma ()
Deasemenea se adaug parantezele rotunde i n jurul
funciei, pentru a specifica definirea unei funcii-expresie
Exemplu:
<p id="rez"></p>
<script>
(function () {var rezultat = "Rezultatul autoexecutiei functiei";
document.getElementById("rez").innerHTML = rezultat;
})();
</script>
DEFINIREA METODELOR
OBIECTELOR
Metodele se definesc cu ajutorul funciilor
Sintaxa: denumireaMetodei: function() { coduri }
Accesul la metod se realizeaz respectnd urmtoarea
sintax: denumireObiect.denumireMetoda()
Exemplu:
var person = { firstName : "Ana",
sphereOfActivity : "designer",
nmbOfChildren : 0,
personDates : function() {
return this.firstName + " " + this.lastName + " is " +
this.sphereOfActivity + " and has " + this.nmbOfChildren + "
children."; }
};
document.getElementById("rez").innerHTML =
person.personDates();
REZULTATUL ESTE ACELAI
Observaie:
Metoda this este folosit pentru a accesa membrii obiectului cure
EVENIMENTENJS
Evenimentele HTML reprezint ceva ce se
ntmpl cu elementele HTML din pagin ceva ce
ar face browserul sau ceva ce ar face utilizatorul
Pagina web s-a ncrcat complet
<body onload="afisare()">
A fost modificat valoarea unui cmp/ variabil de
intrare
A fost apsat un anumit buton
JavaScript-urile utilizate ntr-o pagin web pot
reaciona la aceste evenimente
HTML permite controlul evenimentelor utiliznd
atributele corespunztoare. Forma general:
<elementHTML denumireEveniment=JavaScript>
LISTA CELOR MAI UZUALE
EVENIMENTE CONTROLATE CU JS
Eveniment Descriere
onchange Un anumit element HTML a fost
modificat
onclick Utilizatorul a activat un element HTML
onmouseo Utilizatorul a mutat cursorul pe un
ver element HTML
onmouseo Utilizatorul a mutat cursorul nafara ariei
ut unui element HTML
onkeydow Utilizatorul a apsat pe o tasta de pe
n tastatur
onload Browser-ul a ncrcat o pagin web
SCOPUL CONTROLULUI
EVENIMENTELOR
Prelucrarea evenimentelor (handler-ele) sunt
utilizate pentru a controla i prelucra introducerile
de date din partea utilizatorului, ale altor aciuni
ale utilizatorului sau ale browserului:
Ce ar trebui s se realizeze n pagin de fiecare
dat cnd brouser-ul a ncrcat pagina?
Ce artrebui s se realizeaze cnd pagina a fost
nchis de utilizator?
Ce ar trebui s se realizeze atunci cnd utilizatorul
tasteaz un anumit buton de pe pagin?
Ce coninuturi ar trebui verificate atunci cnd
utilizatorul introduce date? ... etc.
EXEMPLUCONTROLEVENIMENT
<!DOCTYPE html>
<html>
<body>
<button
onclick="getElementById('et').innerHTML=Date();">Afla ora
curenta</button>
<p id="et"></p>
</body>
</html>
Atenie la utilizarea ghilimelelor!!!

EXEMPLUCONTROLEVENIMENT.II
n exemplul anterior JS a schimbat coninutul
elementului HTML cu ID-ul specificat
Utiliznd metoda this poate fi modificat
coninutul elementului HTML curent
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date();">Afla ora
curenta</button>
</body>
</html>
Dup tastare:
EXEMPLUCONTROLEVENIMENT.III
Evenimentele pot fi controlate utiliznd funcii
<!DOCTYPE html>
<html>
<body>
<button onclick="mesaj()">Trimite date</button>
<script>
function mesaj() {
alert(":( Wooops... nu merge!"); }
</script>
</body>
</html>
METODA "ALERT"
Este folosit pentru a afia la ecran nite date sau
mesaje, ntr-o fereastra standard JavaScript
Se creaz pentru a informa utilizatorul
Fereastra cu avertizarea transfer focusul de la
pagina web la mesaj i oblig utilizatorul s
citeasc mesajul. Doar dup ce utilizatorul
nchide fereastra focusul va reveni la pagina web
Nu se recomand folosirea exagerat a acestei
metode deoarece utilizatorul nu va avea acces
permananet la coninutul paginii pn nu va
nchide fereastra
Sintaxa: alert("textul mesajului")
EXEMPLUCONTROLEVENIMENT.IV
<button onclick=afiseazaData()>Afla ora curenta
</button>
<p id=et></p>
<script>
function afiseazaData() {
document.getElementById(et).innerHTML = Date();}
</script>
Alte exemple de evenimente: onmouseover
utilizatorul plaseaz mouse-ul deasupra unui element
HTML, onload browserul finiseaz s ncarce pagina,
onchange un anumit element a fost modificat etc.
Mai multe vezi:
http://www.w3schools.com/jsref/dom_obj_event.asp
EXEMPLU cu 2 EVENIMENTE
<!DOCTYPE html>
<html
<head>
<script>
function afiseazaData() {
document.getElementById("data").innerHTML = "Astazi este: " + Date();}
function daNume(valoare) {
document.getElementById("nume").innerHTML = "Bine ati venit: " + valoare;}
</script>
</head>
<body onload="afiseazaData();">
<p id="data">Aici va fi afisata data</p>
<p id="nume">Aici va fi afisat un mesaj de salutare</p>
Introdu numele in caseta de mai jos pentru a vedea efectul metodei
'onchange'...
<input type="text" name="txt" onchange="daNume(this.value)">
</body></html>
REZULTAT
METODEJSPENTRUIRURIDE
CARACTERE
Metoda indexOf() returneaz indicele (pozitia), primei
apariii a unui text specificat, dintr-un ir de caractere
Exemplu:
<!DOCTYPE html>
<html>
<body>
<p id="et1">Capra calca piatra - piatra crapa-n patru...</p>
<button onclick="functie();">Click</button>
<p id="et2"></p>
<script>
function functie() {
var sir = document.getElementById("et1").innerHTML;
document.getElementById("et2").innerHTML = sir.indexOf("piatra");}
</script>
</body>
</html>
REZULTATEXEMPLU
CARACTERE
Metoda search() caut un subir specificat
ntr-un ir, returnnd poziia de nceput
<p id="et2"></p>
<script>
document.getElementById("et2").innerHTML = sir.search("piatra");
}
</script>
CARACTERE
Metoda lastIndexOf() returneaz indicele (pozitia),
ultimei apariii a unui text specificat ntr-un ir de
caractere
Exemplu:
<!DOCTYPE html>
<html>
<body>
<p id="et2"></p>
<script>
document.getElementById("et2").innerHTML = sir. lastIndexOf("piatra");}
</script>
</body>
</html>
REZULTATEXEMPLU
CARACTERE
Pentru extragerea unui subir dintr-un ir de
caractere pot fi utilizate urmtoarele metode:
slice(start, end)
substring(start, end)
substr(start, length)
Obs: metoda slice i substring au acelai

efect
EXEMPLUMETODSLICE
<!DOCTYPE html>
<html>
<body>
<p id="et2"></p>
<script>
document.getElementById("et2").innerHTML = sir.slice(6,18);
}
</script>
</body>
</html>
Recomandare: ncercati document.getElementById("et2").innerHTML =

EXEMPLUMETODSUBSTR
<!DOCTYPE html>
<html>
<body>
<p id="et2"></p>
<script>
document.getElementById("et2").innerHTML = sir.substr(6,12);
}
</script>
</body>
</html>
CARACTERE
Metoda Replace() substituie o valoare prin alta
Exemplu:
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("et1").innerHTML = sir.replace("patru",
"sase");}
</script>
</body>
</html>
REZULTATEXEMPLU
Dup tastare buton:

CARACTERE
Metode pentru convertirea literelor mici n mari i
invers
toUpperCase()
toLowerCase()
Exemplu:
<script>
document.getElementById("et1").innerHTML = sir.toUpperCase();
}
</script>
REZULTATEXEMPLU
Dup tastare buton:

CARACTERE
Metoda concat() concateneaz irurile
Exemplu:
<script>
document.getElementById("et1").innerHTML = sir.concat(" ", "crapa-i-ar
capul caprei, cum a crapat piatra in patru");
}
</script>
CARACTERE
Pentru a extrage un caracter dintr-un ir pot fi
utilizate metodele
charAt(position)
charCodeAt(position)
Exemplu:
<script>
document.getElementById("et1").innerHTML = sir.charAt(0);
}
</script>
REZULTATEXEMPLU
Aplicnd metoda charCodeAt(0), pentru acest exemplu, se va

afia codul 67
TRANSFORMAREAUNUIIRDE
CARACTERENTRUNVECTOR
Convertirea se face utiliznd metoda split()
Exemplu:
<!DOCTYPE html>
<html>
<body>
<script>
var vector = sir.split(" ");
document.getElementById("et1").innerHTML = vector[0];}
</script>
</body>
</html>
REZULTATEXEMPLU
Rezultat:
document.getElementById("et1").innerHTML = vector[3];}
DETERMINAREATIPULUIVARIABILEI
Pentru a vedea tipul unei variabile se folosete
metoda typeof()
Exemplu:
<script>
document.getElementById("et1").innerHTML = typeof(sir);}
</script>
DETERMINAREATIPULUIVARIABILELOR
var varsta = 56;
typeof(varsta);
typeof(vector);
FUNCIAJSisNaN()
n JS este cuvntul rezervat NaN, care
specific dac o anumit valoare nu este
numr (Not a Number)
isNaN()- este o funcie global care poate fi
utilizat pentru a determina dac o anumit
valoare nu este de tip numeric
EXEMPLUNaN
<!DOCTYPE html>
<html>
<body>
<script>
var varsta = 56;
document.getElementById("et1").innerHTML = varsta*sir;}
</script>
</body>
</html>
Dar pentru:
document.getElementById("et1").innerHTML = varsta*2;
EXEMPLUisNaN()
<script>
var varsta = 56;
document.getElementById("et1").innerHTML = isNaN(varsta*2);}
</script>
document.getElementById("et1").innerHTML = isNaN(vector);
METODEJSPENTRUNUMERE
Toate metodele utilizate pe numere pot fi folosite pe
orice tip de numere, constante, variabile sau
expresii
Metoda toString() transform un numr ntr-un ir
Exemplu:
<p id="et1"></p><p id="et2">
<script>
document.getElementById("et1").innerHTML = functieCalcul(3000,
500).toString();
var tip = functieCalcul(3000, 500).toString();
document.getElementById("et2").innerHTML = typeof(tip);
function functieCalcul(salariu, adaos) { return salariu+adaos;}
</script>
METODEJSPENTRUNUMERE
Metoda toFixed() returneaz un ir cu un anumit
numr de zecimale specificat
Exemplu:
<p id="et1"></p><p id="et2">
<script>
document.getElementById("et1").innerHTML = functieCalcul(3000,
500.6).toFixed(2);
var tip = functieCalcul(3000, 500.6).toFixed(2);
document.getElementById("et2").innerHTML = typeof(tip);
function functieCalcul(salariu, adaos) { return salariu+adaos;}
</script>
Obs: Vedei i alte metode care pot fi aplicate

asupra irurilor de caractere i asupra numerelor
!!!
3 idei/noiuni nvate azi

2 ntrebri/neclariti care au
aprut
1 sugestie pentru tema
urmtoare

Tema 13

Î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

Tema 13

Încărcat de

Drepturi de autor:

Formate disponibile

Tema13.

1. Accesul la elementele HTML prin

Proprietate sau Descriere

document.createElement(ele Creaz un element

n exemplul urmtor Modificarea coninutului

Dup tastare buton:

Dup click (Exemplu):

} else { p.style.fontSize = "20px";} }, 1000);

1. Este utilizat pentru a ncadra JavaScript-urile

2. Este utilizat pentru a face referin la un

Dup tastare butoane:

var cod = +373;

<p>Definirea variabilelor</p><p id="et1"></p>

Atenie la utilizarea ghilimelelor!!!

Obs: metoda slice i substring au acelai

Recomandare: ncercati document.getElementById("et2").innerHTML =

Dup tastare buton:

Dup tastare buton:

Aplicnd metoda charCodeAt(0), pentru acest exemplu, se va

Obs: Vedei i alte metode care pot fi aplicate

3 idei/noiuni nvate azi

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