Scribd
Încărcați
112 vizualizări

Curs 3 HTML&CSS

Documentul prezintă informații despre DOM, HTML DOM, CSS și proprietăți și concepte importante precum poziționarea, float, clear, overflow, elementul <span> și pseudo-clasele/pseudo-elementele în CSS.

Încărcat de

Diana Cuza
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 PDF, TXT sau citiți online pe Scribd
112 vizualizări

Curs 3 HTML&CSS

Documentul prezintă informații despre DOM, HTML DOM, CSS și proprietăți și concepte importante precum poziționarea, float, clear, overflow, elementul <span> și pseudo-clasele/pseudo-elementele în CSS.

Încărcat de

Diana Cuza
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 PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 62

Curs 3

Cascading Style Sheets


JavaScript
DOM

DOM – Document Object Model – World Wide Web Consortium


standard de acces la documente

DOM este o platforma si o interfata neutra care permite programelor
si scripturilor sa acceseze si sa actualizeze dinamic continutul,
structura, si stilurile unui document

DOM standard separat in 3 parti diferite:

Core DOM model standard model pentru toate tipurile de documente

XML DOM – model standard pentru documentele XML

HTML DOM – model standard pentru documentele HTML


HTML DOM
HTML DOM este un model standard de obiecte si o intefata de
programare pentru HTML.

HTML defineste:

Obiectele ca elementele HTML

Propertietatile tuturor elementelor HTML

Metodele de accesare a tuturor elementelor HTML

Evenimentele tuturor elementelor HTML

HTML DOM este un standard pentru accesarea, schimbarea,


adaugarea sau stergerea elementelor HTML.
HTML DOM

Cand se incarca o pagina, browser-ul creaza DOM pentru pagina


respectiva - creaza o structura de arbore formata din obiecte
Sintaxa - CSS

• CSS defineste cum sa fie afisate elementele HTML

O regula CSS este formata din doua parti:


un element de selecţie
un element declarativ (format din doua sau mai multe declaratii)

Fiecare declaratie este compusa dintr-un atribut de stil si valoarea

Declaratiile CSS sunt incadrate de acolade si termina cu caracterul „;”

Comentariile CSS se incadreaza cu caracterele „/*” si „*/”.


Tipuri principale de obiecte CSS

Selector
<head> <style=”text/css”>
p{font-family:"Times New Roman", Arial; font-size:15px;}
</style></head>

Identificator
<head> <style type=”text/css”>
#nume_id { text-align:center; font-size:15px; } </style></head>
<body> <h1 id="nume_id"> Text </h1>

Clasa
<head> <style type=”text/css”>
. nume_clasa1{text-align:center;} sau asa
div.nume_clasa2{text-align:right;} </style></head>
<body><div class="nume_clasa2"> Text </div>
<p class=” nume_clasa1”> orice text </p>
<h1 class = nume_clasa1”> Capitol 1 </h1>

Numele identificatorului si al clasei nu inceapa cu un numar!


Cum inseram declaratiile CSS ?

Inline
<p style="color:#7856f3;margin-left:20px;">Un paragraf </p>

Intern
<html>
<head>
<style type=”text/css”>
hr {color:#e45a68;}
p {margin-left:40px;}
body {background-image:url(' images/black.gif ');}
</style>
</head>
<body> </body>
</html>
Cum inseram declaratiile CSS ?
Extern
Se creaza fisierul nume_fisier.css (contine declaratiile css)
hr {color:#563467;}
p {margin-left:20px;}
body {background-image:url(' images/black.gif ');}
#star{border: 2px double red;}

<head>
<style type=”text/css”>
p{margin-left:15px;} </style>
<link rel="stylesheet" type="text/css" href=”nume_fisier.css” />
</head>

Inline style are cea mai mare prioritate, ceea ce insemna ca va


suprascrie stilul definit intern (cu tag-ul <style> din sectiunea
<head>), or stilul extern prin fisierul css, sau setarile implicite ale
browser-ului.
Continut/Padding/Border/Margin
<html>
<head>
<style type=”text/css”>
div { background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid orange;
margin: 25px;
}
</style>
</head>
Cand setam proprietatile width si height ale unui element, setam
doar width si height a ariei continutului. Pentru a calculate intreaga
dimensiune a unui element, trebuie sa tinem cont de padding,
borders si margin.
width = width + left padding + right padding + left border +
right border + left margin + right margin
Afisarea elementelor - display
display:block display:inline
Fiecare element HTML are un mod implicit de afisare, depinzand de
ce tip de element este : block sau inline
Elemente de tip block: intotdeauna incep cu o linie noua si ocupa
intreaga latime disponibila a browserului. Exemple:
<div> ,<h1> - <h6>, <p>,<form>,<header>,<footer>, <section>
Elemente de tip inline: nu incep de pe o linie noua si ocupa spatiul
minim necesar: Exemple: <span>, <a>, <img>

Prin CSS putem schimba stilul de afisare din element block in


element inline si invers: Exemplu : afiseaza o lista de linkuri ca un
meniu orizontal li{display:inline}
<ul>
<li><a href="www.roma.it" target="_blank">ROMA</a></li>
<li><a href="www.paris.fr" target="_blank">PARIS</a></li>
<li><a href="www.praga.ch" >PRAGA</a></li>
</ul>
CSS Pozitionare
Pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in
raport cu alte elemente.

Prin utilizarea proprietatii position se poate specifica pozitia


elementului in pagina web.

Elementele pot fi positionate folosind proprietatile: top, bottom, left,


si right. Aceste proprietati nu functioneaza daca nu este setatata
intai proprietatea de position !

Metode de pozitionare: statica, fixa, relativa si absoluta

Valoarea initiala, prestabilita, a pozitionarii elementelor este statica.


Elementele sunt dispuse unul dupa altul in interiorul documentului
(normal flow). Elementele pozitionate static nu sunt afectate de
proprietatile ''top'', ''bottom'', ''left'', si ''right'.
CSS Pozitionare
Pozitionarea fixa: - elementul este pozitionat relativ la fereastra
browser-ului. Nu se va misca chiar daca se aplica scroll -
elementul fixat ramane pe pozitia lui initiala, fara a se derula.

.pos1{position:fixed;top:30px;right:50px;}

Elementele fixe se pot suprapune cu alte elemente

Pozitionare relativa – elementul este amplasat relativ la pozitia


initiala din cadrul ferestrei sau a elementului parinte, in sensul ca el
apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor
elementelor amplasate dupa el. Elementele pot fi mutate si
suprapuse din locatia lor folosind proprietatile "top" "left"
"bottom" si "right".

.pos_left {position:relative; left:-20px;}


Valoarea negativa extrage spatiu
CSS Pozitionare
Pozitionarea absoluta: - positionarea relativa la cel mai apropiat
element pozparinte pozitionat (in loc sa fie pozitionat relativ la
intreaga zona a paginii):

h2{position:absolute; top:150px; right:0;}

position:absolute

Elementele pozitionate absolut se pot suprapune peste alte


elemente.
CSS Pozitionare in spatiul 3D
Asezarea elementelor suprapuse (stiva), unele in raport cu altele.

Sintaxa: selector { z-index:valoare; }

valoarea acestei proprietati fiind relatia tridimensionala a


elementului in raport cu alte elemente din fereastra – in fata, in
spatele - numar intreg pozitiv, 0 sau negativ.

img{position:absolute; left:20px; top:10px; z-index:-1;}

Elementul cu numarul de ordine mai mare apare deasupra elementului


cu numar mai mic.

Utilizarea unei valori negative determina amplasarea elementului


dedesubtul parintelui sau cu atatea niveluri cu cate indica indexul z.
Proprietatile Float /Clear/Overflow
Float: folosit pentru a “impacheta” un element in jurul altui element
float poate fi setat la una din variantele : none , left sau right
Exemplu: text in jurul imaginii:
img { float: right; margin: 0 0 10px 10px;}
Clear: controleaza comportamentul elementelor cu proprietatea float
clear poate fi setat la una din variantele: none, left, right sau both

Toate elementele dupa cel cu proprietatea de float se vor „impacheta”


in jurul acelui element. Sa nu se intample asa, folosim clear.
Proprietatea clear specifica pe care latura sa nu se aplice proprietatea
de float.

Proprietatea overflow specifica ce se intampla cand un element


depaseste dimensiunea altui element
overflow poate fi setat la una din variantele: visible, hidden, scroll,
sau auto
Elementul <span>

<span> folosit ptr a grupa inline alte elemente.

<span> furnizeaza o metoda de adaugare a unui “pointer” sau “hook”


unei parti a textului sau a documentului. Acea parte a textului poate
fi stilizata cu CSS, sau manipulata cu JavaScript.

Exemplu:
<p>Merg la teatru cu <span style="color:#675611;font-
weight:bold">Maria</span > si <span style="color:#f34455;font-
size: 150%">Vasile</span> Popescu</p>
Exemplu <span>

<p>Mouse peste cuvant - schimba cursorul</p>

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
Elementul <span>
<head><style>
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: Algerian;
line-height: 80%;
}
</style></head>
<body>
<p><span>T</span>text text text text texttext texttext texttext</p>

Litera T este inclusa in interiorul elementului span. Elementul span


are o latime de 0.7 ori marimea fontului curent. Dimensiunea
fontului elementului span este 400%, si grosimea liniei 80%. Fontul
literei T va fi "Algerian".
CSS Pseudo-classe/Pseudo-Element
Pseudo-clasele sunt folosite ptr a defini o stare speciala a elementelor
HTML

Permit adaugarea de stiluri CSS doar la anumite elemente ale


aceluiasi selector, id sau clasa.

Exemplu, pot fi folosite pentru:

- a stiliza un element cand mouse-ul este deasupra lui

- schimbam culorile ptr link-uri vizitate si nevizitate

- a stiliza un element cand este in focus


CSS Pseudo-classe/ Pseude-element
Pseudo-clasa/Pseudo-element este una din expresiile urmatoare:
active - adauga un stil unui element cand acesta este activat (actionat
prin click pe el)
first-child - adauga un stil unui element care este primul din acel tip
de elemente
focus - folosit pentru input-urile de formulare, le adauga un stil cand
acestea sunt active (dupa click si cursorul de text in ele)
hover-adauga un stil unui element cand mouse-ul se afla deasupra lui
first-letter – adauga un still style primei litere a fiecarui element
last-child - adauga un stil unui element care este ultimul din acel tip
de elemente
link - adauga un stil unui link nevizitat
visited - adauga un stil unui link vizitat
before - insereaza un continut intr-un anumit stil inaintea elementelor
selectate
after - insereaza un continut intr-un anumit stil dupa elementele
selectate
CSS Pseudo-classe/Pseudo-Element
Sintaxa: selector : pseudo-clasa { proprietate:valoare; }
selector :: pseudo-element { proprietate:valoare; }

:: - sintaxa in CSS3, : - sintaxa in CSS1, CSS2

selector este un element, id sau clasa,


pseudo-clasa/pseudo-element este una din expresiile urmatoare:
active, link, visited, first-child, last-child, focus, hover etc /
first-letter, first-line , before, after, selection
Exemple: a:link {color:#0000FF;} /* link nevizitat */
a:visited {color: #00FF00;} * link vizitat */
a:hover {color:#FF00FF;} /* mouse peste link */
tr:hover{background-color:#F5F5F5;}
a:active {color:#0000FF;} /* link selectat */
p::first-line {color:#00FF00;} /* prima linie a fiecarui element p */
p::before {content: ''ATENTIE-”;}
input:focus{background-color:pink;}
CSS class & Pseudo-classe / Pseudo-element
CSS class poate fi combinat cu Pseudo-clasa :

selector.class:pseudo-class {property:value;}

Exemplu: daca link-ul a fost visited, se va afisa in rosu


a.rosior:visited {color:#FF0000;}
<a class="rosior" href="css_syntax.asp">CSS Syntax</a>

Combinat cu Pseudo-element :

selector::pseudo-element {property:value;}
Exemplu: afiseaza prima litera a tuturor paragrafelor in rosu.
p::first-letter {color:#ff0000; font-size:200%;}
<p>Un film bun</p>
<p> Merg la NY</p>
Exemplu Pseudo-classe / Pseudo-element
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
p i:first-child {color: #007700;}
</style>
</head>
<body>
<p>Merg la <i>teatru</i>. Merg la <i>film</i>. </p> </br>
<p>Merg la<i>restaurant</i>.Merg la <i>sala</i></p>
</body>
</html>

Merg la teatru. Merg la film


Merg la restaurant.Merg la sala.
JavaScript (JS)
JavaScript (Brendan Eich - 1995) diferit de limbajul de programare
JAVA (SUN)

limbaj de programare orientat pe obiecte pentru HTML, web,
servere, tablete, telefoane – pentru a face paginile interactive
JavaScript = DHTML dinamic HTML

codul JavaScript este o secventa de declaratii /comenzi ce vor fi
inserate in paginile HTML si executate de catre browser-
scripturile care rulează în pagină sunt oprite imediat, în momentul
în care utilizatorul oprește vizualizarea paginii.

declarațiile JavaScript sunt scrise în interiorul tag-ului <script>


încorporat în pagina HTML - informează browserul că codul
JavaScript urmează sau pot fi în fișiere externe cu extensia .js
JavaScript (JS)
JavaScript este un limbaj de scripting de nivel înalt, interpretat,
orientat pe objecte și care ruleaza pe partea de client.

JavaScript poate fi utilizat pentru:

Adăugare de elemente multimedia, cum ar fi afișarea, ascunderea,


modificarea, crearea de imagini interactive, defilare text în bara de
stare, etc.

JavaScript face posibilă crearea unor conținuturi adaptate paginilor


dinamice, data și ora sau alte date externe.

Java Script permite validarea datelor introduse de utilizator în


timpul depunerii unui formular, să modifice conținutul
formularului, etc
JavaScript (JS)

JavaScript poate fi utilizat impreuna cu CSS pentru a face DHTML


- Dynamic HyperteTt Markup Language – permite afisarea sau
dispariția paginilor de web.

JavaScript se execută doar in pagina de web care se află în


fereastra browser-ului, în orice moment. Acest lucru înseamnă că
script-urile care rulează pe o pagină sunt oprite imediat, în
momentul în care utilizatorul se oprește vizualizarea paginii.
JavaScript

JavaScript

JavaScript poate schimba toate elementele HTML din pagina

JavaScript poate schimba toate atributele HTML din pagina

JavaScript poate schimba declaratiile de stilurile CSS din pagina

JavaScript poate reactiona la toate evenimenele din pagina


JavaScript – elemente HTML

JavaScript poate accesa si schimba toate elementele HTML din
pagina

Identificarea elementelor HTML dupa:
ID
document.getElementById("nume_id");

Numele CLASS-ei
document.getElementsByClassName("nume_class");

Numele TAG-ului (numele etichetei HTML < >)


getElementsByTagName("p");

Colectii de obiecte( document.anchors , document.forms,


document.images , document.links)
Declaratiile JavaScript
Declaratiile JavaScript sunt "comenzi" pentru browser.

; se adauga la sfarsitul fiecarei declaratii

declaratiile se executa in ordinea scrierii si sunt „case sensitive”

JavaScript ignora spatiile libere

\ intrerupe o linie de code intr-un text string :
document.write("Hello \
World!");

<html> <body>
<h1>Imagistica Medicala</h1>
<p id="pImg"> Tipuri de aparate medicale</p>
<div id="divCT"> Computer Tomograf</div>
<script>
document.getElementById("pImg").innerHTML="Buna ziua!";
document.getElementById("divCT").innerHTML="Ce faci ?";
</script>
</body></html>
Functii JavaScript

Functiile - gruparea declaratiilor = secventa de instructiuni ce se


execute impreuna

function numele_functiei()
{
cod/declaratii JavaScript;
}

Cod-ul functiei se executa cand cineva apeleaza numele_functiei

O functie poate fi apelata direct, cand apare un eveniment


(utilizatorul apasa un button), sau poate fi apelata de oriunde
scriind JavaScript code.
Functii JavaScript
<html>
<body>
<h1>Imagistica Medicala</h1>
<p id="pImg"> Tipuri de aparate medicale</p>
<div id="divCT" style=”color:red”> Computer Tomograf</div>
<button type="button" onclick="myfct()">Schimba</button>
<script>
function myfct()
{
document.getElementById("pImg").innerHTML="Buna ziua!";
document.getElementById("divCT").innerHTML="Ce faceti?";
}
</script>
</body>
</html>
Comentariile in JavaScript


Nu sunt executate de catre JavaScript

// pentru o singura linie

//document.getElementById("myH1").innerHTML="Welcome!";
var i=5; // declar variabila i si ii asignez valoarea 5

/* */ pentru un bloc de text/declaratii
Cum adaug declaratiile JavaScript

Declaratiile JavaScripts trebuie inserate intre tag-urile


<script> si </script>

Declaratiile JavaScript pot fi in sectiunea <body> sau in
sectiunea <head> si/sau in ambele sectiuni din pagina HTML

Pot fi nenumarate tag-uri <script> in pagina HTML

Scripturile pot fi in fisiere externe, intotdeauna cu extensia .js
Fisierele externe contain cod care poate fi utilizat de mai multe
pagini web.

<script src="myScript.js"></script>
Manipularea elementelor in JavaScript
innerHTML - inlocuieste continutul

<h1> Scripturi </h1>


<h2 id="myp">un paragraf</h2>
<script>
document.getElementById("myp").innerHTML="javaaaa";
</script>

write -scrie direct in outputul documentului HTML
<h1> Marea Neagra </h1>
<script>
document.write("<p> Marea Rosie</p>");
document.write(Date());
</script>

Daca se executa document.write dupa ce documentul s-a terminat


de incarcat , intreaga pagina HTML va fi rescrisa!
Manipularea elementelor in JavaScript

Apasand tasta "F12" în multe browsere moderne se va deschide


consola.

În consola puteți explora:

--DOM -ul documentului HTML curent

--depana JavaScript

--vizualizati resursele ce vin într-o rețea și de a face tot felul de


lucruri interesante.

Vom folosi consola pentru a exemplifica JavaScript:


Variabile in JavaScript
var fN=1; am asignat valoarea 1 variabilei fN
var sN=2;

fN+sN

sN-fN

fN= = 3;

fN+=2;
sN-=1;

window.alert(‘ Vreau sa merg la film’);

document.write(‘ <h1> Ciocolata </h1> <p> Orice ciocolata îmi


place </p>’)
Variabile in JavaScript

Variabilele in JavaScript sunt „containere” pentru stocare

Numele variabilelor trebuie sa inceapa cu o litera, ( $ si _ )
Numele variabilelor sunt case sensitive

Declararea variabilelor se face cu var
var x (variabila x e nedefinita, nu are nici o valoare atribuita)

Asignarea unei valori se face cu =
var x = 3.14;
y=”Mos Craciun”;
var age=30, var str=”Ulita”, var=”44”;

Re-declararea variabilelor nu pierd valoarea asociata
var age=30;
var age;

Se pot face operatii aritmetice cu variabile:
var x, var y, var z;
x=5; y=x+5; z =x+y;
Variabile in JavaScript
Variabilele pot fi declarate ca argumente, la declararea functiilor:
function myPar (tata, mama) {}

Exemplu:
<button onclick="myPar('Vasile','Vasilica')">Try it</button>

<script>
function myPar(tata,mama)
{
alert("Parintii mei " + tata + ", si " + mama);
}
</script>

Functia se poate apela cu variabile diferite


myPar('Ion','Ana')
Variabile in JavaScript
Cand se foloseste cuvantul cheie return, se opreste executia
functiei si se intoarce valoarea acelei variabile;

<script>
function myFct()
{
var x=455;
return x
}
</script>

var myX=myFct();

Se poate returna valoarea functiei fara sa o stochezi ca variabila:

document.getElementById("suma").innerHTML=myFct();
Variabile in JavaScript


Variabilele declarate cu var in functii sunt variabile LOCALE,
pot fi folosite doar in acea functie. Variabilele LOCALE sunt
sterse dupa executia functiei

Variabilele declarate in afara functiilor sunt GLOBALE, toate
scripturile si functiile din pagina HTML le pot accesa. Variabilele
GLOBALE sunt sterse cand se inchide pagina HTML

Daca se asigneaza o valoare unei variabile care nu a fost
declarata, ea devine GLOBALA, chiar daca se afla in interiorul
unei functii
x=6;
Operatori in JavaScript
De asignare:
= x=y x=y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x=x/y
%= x %= y x = x % y
Aritmetici:
+ , - , * , / , % (modul) , ++ (increment), -- (decrement)
Logici:
< , <=, > , >=, ? (operator conditional)( a ? b : c)

== determina dacă doua variabile/valori sunt echivalente in valoare

!=determina dacă doua variabile/valori nu sunt echivalenteîn valoare


Instructiuni de control in JavaScript

Liniile de cod, in programare realizează diverse acțiuni în funcție


de rezultatul unor decizii. Declarațiile in care se alege o cale de
execuție pe baza unei decizii sunt numite declarații de control.

If/Else - declarațiile condiționate, în funcție de rezultatul unei


evaluări.

if (zi > 5) {
mesaj = "Weekend placut!";
} else {
mesaj = "Bine ați venit la școala!";
}
Instructiuni de control in JavaScript

Declarația else if vă permite multiple conditionari in lanț, astfel


încât să puteți evalua mai multe condiții.

Else if - declarațiile condiționate, în funcție de rezultatul unei


evaluări.

if (zi > 5) {
mesaj = "Weekend placut!";
} else if (zi< 2) {
mesaj = "E ziua de luni!";
} else {
mesaj = "Bine ați venit la școala!";
}
Instructiuni de control in JavaScript
Buclele pot executa un bloc de cod de mai multe ori.
Buclele sunt folosite dacă doriți să executați același cod de mai
multe ori, dar de fiecare dată cu o valoare diferită.

Bucla for este compusa din trei părți: crearea variabilei de


indexare; expresia ce se evalueaza înainte de fiecare buclă;
declarația ce se executa la sfârșitul fiecărei bucle

Indexarea începe de zero, această buclă se va evalua la valoarea


true pentru 0, 1, 2 și 3, dar apoi eșuează, atunci când i este 4.

var tari = ["RO", "JPN", "RUS", "ENG"];


for (var i = 0; i < tari.length; i++) {
text += tari + "<br />";
}
Instructiuni de control in JavaScript

forEach invocă în mod convenabil o funcție (numită sau anonim)


pentru fiecare element din vector/matrice. Acest lucru poate fi
folosit pentru a itera cu ușurință peste elementele unui vector/
matrice.

var sum = 0;
var nr = [4, 9, 16, 25];
function increment(item, index) {
sum += item;
}
numbers.forEach(increment);
alert(sum);
Tipuri de Date in JavaScript
String var nume=”Gheorghe”, var p='Fun Store';

Number var x= 3.14, var y=123e5 ;

Boolean var t=true, var f=false;

Array
var cul=new Array();
cul[0]="Rosu";
cul[1]="Verde";
cul[2]="Alb"; sau asa
var cul=new Array("Rosu","Verde","Alb"); sau asa
var cul=["Rosu","Verde","Alb"];
Null var bani=null;

Undefined var x;
Obiecte in JavaScript

Object = variabile cu proprietati si metode asociate

Un obiect este o listă de tipuri de date neorganizate, stocate ca o


secvență de perechi nume: valoare.

Elementele din lista se numesc proprietăți ale obiectului.

Atunci când o proprietate a unui obiect stochează o funcție,


proprietatea devine cunoscută sub numele de metodă.
Obiecte in JavaScript
Un limbaj de programare poate fi numit orientat-obiect în cazul în
care are următoarele patru capabilităti :

• încapsularea (encapsulation) – datele sau metode, impachetate


împreună într-un obiect.

• agregarea (aggregation) – stocheaza un obiect într-un alt obiect.

• moștenirea (inheritance)- capacitatea unei clase să depindă de o


altă clasă (sau de mai multe clase) pentru unele dintre proprietățile
și metodele sale.

• polimorfismul (polymorphism)- scriu o funcție care servește


într-o varietate de moduri diferite.
Obiecte in JavaScript
Object pot fi de tip : Date, Stringuri, Functii, Arrays, Math, etc

Crearea unei obiect (persoana):


var persoana={
nume : "Cretu",
prenume : "Toma",
cnp : 2700
};
sau așa:
var persoana={nume:"Cretu", prenume:"Toma", cnp:2700};

Se pot accesa proprietatile obiectului in doua moduri:

x=persoana.cnp; sau asa x=persoana["cnp"];


Obiecte in JavaScript

Cand o variabila este declarata cu "new", variabila este declarata


ca un object:
var msg= new String('Hai la munte');

Accesarea proprietatiilor obiectului: objectName.propertyName


var msg=new String('Hai la munte');
var x=msg.length; =12

Apelarea metodelor obiectului : objectName.methodName()


var msg="Hai la munte!";
var y=msg.toUpperCase();
var z = msg.indexOf("munte");
Obiecte in JavaScript
De reținut câteva puncte-cheie când lucrati cu obiecte JavaScript:

Proprietățile obiectului sunt oricare din tipurile de date abstracte,


sau un alt obiect. Ele sunt variabile normale utilizate intern în
metodele obiectului sau pot fi variabile vizibile la nivel global.
Metodele obiectului sunt functiile care permit obiectului de a face
o acțiune sau pentru a permite ceva să fie făcut pentru ea: afișarea
conținutului, executarea operațiilor matematice etc.
Obiecte definite de utilizator – toate sunt descendenți ai unui
obiect numit object.
"this" - acest cuvânt cheie desemneaza o prescurtare pentru
proprietățile sau metodele unui obiect.
JavaScript are multe obiecte-built-in sau obiecte native. Aceste
obiecte sunt accesibile oriunde în program și vor funcționa în
același mod, în orice browser care rulează în orice sistem de
operare.
Exemplu JavaScript : Ceas
<!DOCTYPE html>
<html>
<head>
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m); s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
................se continua pe urmatoarea pagina
Exemplu JavaScript:Ceas

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"> Atat e ora</div>
</body>
</html>
Exemplu JavaScript: Ce zi e azi?
<body><p id="demo">Afiseaza ziua </p>
<button onclick="ziua()">Ce zi e azi?</button>
<script>
function ziua()
{
var d = new Date();
var zi=new Array(7);
zi[0]="Duminica";
zi[1]="Luni";
zi[2]="Marti";
zi[3]="Miercuri";
zi[4]="Joi";
zi[5]="Vineri";
zi[6]="Sambata";
var x = document.getElementById("demo");
x.innerHTML=zi[d.getDay()];
} </script></body>
JavaScript – schimbarea stilurilor CSS
document.getElementById(id).style.property=new style

<body>
<p id="p1">Hai la film!</p>
<p id="p2">Hai la teatru!</p>
<h1 id="id3">Hai la restaurant!</h1>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<button type="button"
onclick="document.getElementById('id3').style.color='red' ">
Click Me!</button>
</body> </html>
JavaScript – schimbarea stilurilor CSS
Proprietatile ptr background sunt :
background-color
background-image
background-repeat
background-attachment
background-position

Object.style.background=
"color image repeat attachment position"
<script>
function schimbaBackground()
{
document.body.style.background="#f3f3f3 url('Desert.jpg') no-repeat
right top";
} </script>
JavaScript – schimbarea stilurilor CSS

Proprietatile ptr background sunt :


border-width
border-style
border-color

<script>
function displayBorder()
{
document.getElementById("ex1").style.border="thick solid blue";
}
</script>
JavaScript – exemplu <canvas>
<!DOCTYPE html>
<html>
<head>
<title>HTML Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="demoCanvas" width="800" height="400">
Test Canvas
</canvas>
<script src="script.js"></script>
</body>
</html>

Atenție! apelez scriptul după ce am definit <canvas> și nu în


secțiunea <head>
JavaScript – exemplu <canvas>

Fișierul style.css :

canvas {
border-style: solid;
border-width: thick;
border-color: #FCA90F;
background-color: #C1D6CD;
}
JavaScript – exemplu <canvas>
Fișierul script.js :
var canvas = document.getElementById("demoCanvas");
var context = canvas.getContext("2d");

context.fillStyle = "#A9B0B3";
context.strokeStyle = "#746C73";
context.lineWidth = 5;

context.moveTo(0, 0); //metoda moveTo() muta cursorul (x,y) =(0,0)


context.lineTo(700, 350); // metoda lineTo() traseaza o linie de la poziția cursorului pana la poziția (700,350)
context.stroke(); // metoda stroke() deseneaza

context.beginPath();
context.arc(160, 80, 70, 0, 2 * Math.PI); // metoda arc(x,y, raza, pct initial, pct final)
context.fill(); // metoda fill() umple cu o culoare cercul
context.stroke();

context.beginPath();
context.moveTo(650, 345);
context.lineTo(700, 350);
context.lineTo(665, 315);
context.stroke() ; // am desenat o linie care se termina cu o sageata

context.fillStyle = "#20293F";
context.strokeStyle = "#20293F";

context.font = "78px Segoe UI"; // stabilesc familia de font și dimensiunea fontului


context.fillText("Hello", 190, 230); // textul ce se va afisa la poziția (190,230)
context.strokeText("World", 190, 310);` // alt text afisat la poziția (190,310)
JavaScript – exemplu canvas
Bibliografie


HTML prin exemple – Tudor Gugoniu, Ed.Teora 2002

HTML, XHTML,CSS si XML prin exemple – Tudor Gugoniu,
Ed.Teora 2005

Crearea paginilor Web – Ned Suell, Ed. Teora 2002

Totul despre HTML 4 – Rick Darnell, Ed Teora.

http://www.w3schools.com/html/default.asp

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