J Query Rezumat

jQuery – Rezumat
 Scrierea primului program

o Introducerea JS direct in paginile HTML se face cu tagurile
<script type="text/javascript">
</script>
o Afisarea de informatii se face cu functia alert
<script>
alert('hello world!');
</script>
o Pentru a adauga un fisier javascript extern
<script src="navigation.js"></script>
o Pentru a adauga si JS extern si intern
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
<script src="slideshow.js"></script>
<script>
alert('hello world!');
</script>
</head>
o Scrierea de text intr-un document text se face cu functia

“document.write(“text”);”
<script>
document.write('<p>Hello world!</p>');
</script>
o Atasarea unui fisier JS extern (framework-ul jQuery)

<script src="../_js/jquery1.6.3.min.js">
</script>
o In general codul jQuery trebuie inclus in urmatoarea structura
(e modul de a spune ca totul sa se execute in momentul in
care documentul este gata incarcat)
$(document).ready(function() {
aici se scrie codul nostru
});// aici se inchide functia ready
 Monitorizarea erorilor
o se observa erorile prin click dreapta pe pagina -> click pe
Console
o erorile JS/jQuery/Ajax se vad in imaginea din partea dreapta

de mai sus (cu text rosu)
 Gramatica Java-Script
o Exista functii predefinite asa cum am vazut ca este alert
o Tipuri de date
Numere – reprezentate de caractere numerice
Exemple :
document.write(5 + 15);
5.25, 10.3333
Stringuri – siruri de caractere
Exemple :
(“hello world”)
(‘hello world’)
alert('Warning, warning!');
Booleene - true si false
 Variabile
o Cai de a stoca informatie pe care mai tarziu o poti folosi si
manipula
o Creearea unei variabile
Exemplu
var score; // compusa din cuv cheie var + nume var
o Variabilele trebuie sa inceapa cu o litera, dolar sau _
o Variabilele sunt case-sensitive
o Trebuie evitate cuvintele cheie pentru numele de variabile
o Folosirea variabilelor
Pentru un numar intreg : var score; score = 0;
Pentru un string :
var firstName = “Peter”;
var lastName = 'Parker';
Pentru un boolean : var isSuperHero = true;
 Lucrul cu tipuri de date si variabile
o Exemplu operatori matematici +, -, /, *
var price = 10;
var itemsOrdered = 15;
var totalCost = price * itemsOrdered;
o Concatenarea se face cu operatorul “+” (la fel ca in Java)
o Combinarea de numere si stringuri
Se face cu opratorul de concatenare “+”
var numOfVisits = 101;
var message = 'You have visited this site ' +
numOfVisits + ' times.';
alert(message);
Exercitiul 1 : Scrieti rezulatul stringului

message in urma concatenarii (de mai sus)
o Concatenarea unui numar reprezentat ca string cu un alt
numar are ca rezultat un string
var numOfShoes = '2';
var numOfSocks = 4;
Exercitiul 2 : Scrieti ce o sa afiseze urmatorul cod

var numOfSocks = 4;
var totalItems = numOfShoes + numOfSocks;
alert(totalItems);
o Adaugarea unui “+” in fata elementului care contine un

numar ca string transforma stringul in numar
o O alternativa este conversia explicita
var numOfSocks = 4;
var totalItems = Number(numOfShoes) + numOfSocks;
Exercitiul 3
Ce afiseaza urmatorul cod
var numOfSocks = 4;
var totalItems = +numOfShoes + numOfSocks;
o Schimbarea valorii unei variabile
Exemple
var score = 0;
score = 100;
var score = 0;
score = score + 100;
Exercitiul 4
Ce afiseaza urmatorul cod
var score=0;
score = score - 10;
score = score * 10;
score = score / 10;
o Operatori matematici
 Obtinerea de informatii de la utilizator
<script>
var name = prompt('What is your name?', '');
</script>
o Codul de mai sus deschide o fereastra in care ne putem scrie
numele
Exercitiul 5 : Scrieti un script care sa insereze intre paragrafe in
pagina mesajul “Hello Nume” , unde in loc de textul “Nume” sa
apara numele introdus de dumneavoastra
 Siruri (arrays)
o Sirurile sunt liste de elemente de acelasi tip care stau una
langa cealalta
Exemplu
var nume = new array();
nume[0] =”Ionescu”;
nume[1] =”Popescu”;
nume[2] =”Georgescu”;
nume :
nume[0] nume[1] nume[2]
Ionescu Popescu Georgescu
Cu culoarea verde sunt scrise numele variabilelor sir iar cu

culoarea albastru sunt scrise continutul variabilelor
Exercitiul 6
Sa se adauge cod astfel incat la inceputul fiecarui nume in sir sa
apara si ordinea sa (exemplu “1 Ionescu”)
 Creearea unui vector
o Varianta 1 – cu initializare valori
var days = ['Mon', 'Tues', 'Wed', 'Thurs',
'Fri', 'Sat', 'Sun'];
o Varianta 2 – fara initializare
var days = [];
o Varianta 3
var days = new Array('Mon', 'Tues', 'Wed',
'Thurs', 'Fri', 'Sat', 'Sun');
o Varianta 4
var days = new Array();
 Accesarea elementelor unui vector

var days = ['Mon', 'Tues', 'Wed', 'Thurs',
'Fri', 'Sat', 'Sun'];
alert(days[0]);
o Pentru a accesa numarul de elemente dintr-un vector

days.length (egal cu 7 in cazul nostru)
Exercitiul 7
Afisati ultimul element din vector in functie de lungimea generala
length a acestuia
 Adaugarea de elemente la un vector
o Exemplu
var properties = ['red', '14px', 'Arial'];
properties[3] = 'bold';
o Exemplu – adaugarea unui element cand nu cunoastem
lungimea vectorului
var properties = ['red', '14px', 'Arial'………];
properties[properties.length] = ‘bold’;
o Exemplu – functia push
properties.push('bold');
// <=> properties[properties.length] = ‘bold’;
o Exemplu – adaugarea la inceputul vectorului
var properties = ['red', '14px', 'Arial'];
properties.unshift('bold');
Exercitiul 8
Sa se scrie o functie echivalenta cu functia unshift
 Metode variate de a adauga elemente la un sir (tablou)

Exercitiul 9
Fiind dat sirul de autori :
<script>
var authors = [ 'Ernest Hemingway',
'Charlotte Bronte',
'Dante Alighieri',
'Emily Dickinson'
];
</script>
Cerinta 1 : sa se afiseze “Primul autor este nume”
si “Ultimul autor este nume”, unde cuvantul nume este
numele autorului respectiv.
Cerinta 2 : sa se adauge autorul “Marin Preda” la inceputul
vectorului
 Comentarii in JS
o Sunt la fel ca in c++ si java
/* acesta este un comentariu*/
// acesta este un alt comentariu
 Structuri logice
o Sunt la fel ca in c++, java sau php
o Instructiunea if
if ( condition ) {
// some action happens here
}
Exemplu :
if (score > 100) {
alert('You won!');
}
o Operatori de comparatie
Exemplu if cu mai multe ramificatii

var fridayCash =
prompt('How much money can you spend?', '');
if (fridayCash >= 50) {

alert('You should go out to a dinner and a
movie.');
}
else if (fridayCash >= 35) {
alert('You should go out to a fine
meal.');
} else if (fridayCash >= 12) {
alert('You should go see a movie.');
} else {
alert('Looks like you will be watching
TV.');
}
Exercitiul 10: Sa se implementeze celebrul joc : ghiceste numarul

Programul iti cere un numar, daca e mai mare se afiseaza “mai
mare”, daca e mai mic, se afiseaza “mai mic”, daca este egal se
afiseaza “Gasit”.
o Instructiunea while
while (condition) {
// javascript to repeat
}
o 2 variante de a afisa numerele intre 1 si 5 pe ecran
Varianta 1
document.write('Number 1 <br>');
Varianta 2
var num = 1;
while (num <= 5) {
document.write('Number ' + num + '<br>');
num += 1;
}
o Folosirea instructiunii while cu siruri (tablouri)
var counter = 0;
while (counter < days.length) {
document.write(days[counter] + ', ');
counter++;
}
 Instructiunea for
o Transformarea unui while in for

 Instructiunea do-while
do {
// javascript to repeat
} while (condition) ;
Exercitiul 11
Rescrieti programul pentru ghicirea unui numar, de aceasta data cu
do..while si cu folosirea instructiunii prompt
 Functii
o Se introduc prin cuvantul cheie function urmat de numele
functiei, apoi “()” si corpul functiei “{aici este codul
functiei}”
Exemplu
function printToday() {
var today = new Date();
document.write(today.toDateString());
}
o se pot trimite parametrii unei functii intre parantezele rotunde
function print(message){
document.write(message);
}
Exercitiul 12
Sa se scrie o functie, care primeste ca parametru un numar
intre 1 si 12 si afiseaza luna din an corespunzatoare
Exercitiul 13
Sa se scrie un program care sa calculeze costul total al unui
produs dupa aplicarea TVA (12%) si a unui timbru verde de 2 lei.
Programul va fi compus dintr-o functie care primeste pretul initial
si returneaza pretul final si apelul de test al functiei
o Variabile globale si variabile locale

Exercitiul 14
Sa se memoreze 9 intrebari si raspunsuri in 2 vectori (unul cu
intrebari, unul cu raspunsuri).
Sa se afiseze pe ecran intrebarile si un buton cu textul “Am
terminat testul”, iar dupa ce utilizatorul apasa pe el, sa se afiseze
rezultatul pe ecran.
 Avantajele jQuery
o marimea fisierului mica
o prietenos pentru web-designeri (foloseste aceiasi selectori ca
si CSS)
o este utilizat la scara larga
o comunitate mare de developeri
o se pot creea usor pluginuri
 Instalarea jQuery
o se poate trimite link catre fisierul oficial online
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.6.3.min.js">
</script>
o se poate downloada fisierul si face link local
http://docs.jquery.com/Downloading_jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/
1.6.3/jquery.min.js"></script>
o urmatorul pas dupa ce am inserat jquery este sa adaugam un

script in interiorul caruia punem functia
$(document).ready();
Exemplu
<script src="js/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
// your programming goes here
});
</script>
o Observatii
- Linkul la jquery trebuie sa preceada orice
instructiune jquery
- fisierele JS trebuie puse dupa fisierele CSS
- in general este bine ca la sfarsitul fiecarei
functii sa scriem intre comentarii
// end function numefunctie
 In general se executa urmatoarele operatii
o Se selecteaza un element de pe pagina
o Se face ceva cu acel element
- Fie schimbam proprietatea unui element
- Fie adaugam continut nou
- Fie stergem un element
- Fie extragem informatia dintr-un element
- Adaugam/stergem un atribut de clasa
 Intelegerea DOM (document object model)
 Selectori
o In jQuery structura generala a unui selector este
$('selector')
unde in loc de cuvantul selector avem selectorii css cunoscuti

o Pentru a selecta un tag cu id-ul banner aplicat asupra sa : $
('#banner')
o Pentru a seta textul din interiorul unui tag cu id-ul banner :
$('#banner').html('<h1>JavaScript was
here</h1>');
 Intelegerea iteratiilor jQuery

o cand scriem $(‘#navBar a’) nu primim o lista traditionala de
elemente DOM JavaScript, cum avem pentru
getElementById() sau getElementByTagName()
o in schimb primim o lista speciala de elemente jQuery
o Cand vrei sa aplici o functie jQuery la o multime de
elemente, nu trebuie sa faci loop, selectorul $ le preia pe toate
Exemplu
$('#slideshow img').hide(); //ascunde toate imaginile din
interiorul tag-ului cu id slideshow
 Functii inlantuite
o daca vrem sa aplicam operatii unei multimi de elemente
Exemplu
$('#popUp').width(300).height(300);
Exemplu
$
('#popUp').width(300).height(300).text('Hi!').fadeI
n(1000);
 Adaugarea de continut unei pagini

o se face folosind una din functiile :
1 .html() // adaugam html elementului
2 .text() // putem adauga continut, dar nu
//recunoaste tagurile html
3 .append() // adauga continut html la sfarsit
4 .prepend() // adauga continut html la inceput
5 .before()
6 .after()
 Stergerea si inlocuirea selectiilor
o Stergere cu functia .remove()
Exemplu : $('span.error').remove();
o Inlocuirea cu functia .replaceWith()
Exemplu :
pentru a inlocui o imagine cu id product101 cu text
$('#product101').replaceWith(<p>Added to cart</p>');
 Setarea si citirea atributelor pentru taguri

o addClass() adauga o clasa tag-ului
Exemplu
apelul : $('a[href^="http://"]').addClass('externalLink');
tagul inainte :
<a href="http://www.oreilly.com/">
tagul dupa :
<a href="http://www.oreilly.com/" class="externalLink">
o removeClass() sterge o clasa a unui tag

Exemplu
$('a[href^="http://"]').removeClass('externalLink');
tagul inainte :
<a href="http://www.oreilly.com/" class="externalLink">
tagul dupa :
<a href="http://www.oreilly.com/">
o toggle() adauga clasa daca nu exista si o sterge daca exista
Exemplu
$('#changeStyle').click(function() {
$('body').toggleClass('altStyle');
});
 Citirea si schimbarea proprietatilor CSS

o functia css() ne ajuta sa adaugam proprietati css direct din JS
Exemple :
$('body').css('font-size', '200%');
$('#highlightedDiv').css('background-color','#FF0000');
$('#highlightedDiv').css('border','2px solid #FE0037');
Ultimele 2 proprietati se pot scrie si astfel :
 Citirea, setarea si stergerea atributelor HTML

o functia attr() iti permite sa citesti un atribut HTML dintr-un
tag
Exemplu
var imageFile = $('#banner img').attr('src');
o functia attr() iti permite de asemenea sa setezi o proprietate
Exemplu
$('#banner img').attr('src','images/newImage.png');
o functia removeAttr() permite stergerea unui atribut

 Pentru a face o actiune cu fiecare element dintr-o selectie (sa fie
tratate ca un vector) folsim functia each()
o $('selector').each();
o $('selector').each(function() {
// code goes in here
});
 Functii anonime
function() {
//code goes here
}
Exemplu
$(‘a’).each (function(){ var link = this.attr(‘href’); alert(link);}
Raspunsuri :
Exercitiul 1 // ‘You have visited this site
101 times.’
Exercitiul 2 // 24
Exercitiul 3 // 6
Exercitiul 4 // -10
Exercitiul 5
<script>
var name = prompt('What is your name?', '');
document.write("<p>Hello "+name+"!</p>");
</script>
Exercitiul 6
for(var i=1;i<=3;i++)
nume[i-1] = i +” ”+nume[i-1];
//pentru i=1 avem nume[0] = nume[1]

//adica variabila care are valoarea Ionescu ia
valoarea Popescu
//pentru i=3 ce inseamna i[3] ?
Exercitiul 7
alert(days[days.length-1];
Exercitiul 8
<script>
// o functie echivalenta cu unshift
//(sa adauge un element la inceputul
vectorului)
function myUnshift(v,elem){
for(var i=v.length-1;i>=0;i--)
v[i+1]=v[i];
v[0]=elem;
var v = ['3','4','5'];
myUnshift(v,'2');
myUnshift(v,'1');
//afisare
for(var i=0;i<v.length;i++)
document.write(v[i]+" ");
// '1', '3', '4','5'
//pasii
//1 vectorul 3 3 4 5
//2 punem elem pe pozitia 1
//3 rezultat 1 3 4 5
// v[2] il mutam in v[3]

//la modul general v[i] il mutam pe pozitia
v[i+1]
// punem elem pe pozitia v[0]
</script>
Exercitiul 9
1.
document.write(“Primul autor este
“+authors[0]);
document.write(“Ultimul autor este

”+authors[authors.length-1]);
2.authors.unshift(“Marin Preda”);
Exercitiul 10
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
var numar = 10000;
var numar_de_ghicit = 54;
$
("body").on("click",".incearca:last",function(){
numar = $(".text:last").val();
if (numar==numar_de_ghicit)
$("body").append("Ai ghicit
numarul");
else
{
if (numar<numar_de_ghicit)
$("body").append("Mai
mic!");
else
$("body").append("Mai
mare!");
$("body").append("<div
id=\"ghiceste\">"
+"<label>Introduceti
numarul</label>"
+"<input type=\"text\"
class=\"text\">"
+"<button
class=\"incearca\">Incearca</button>"
+"</div>");
}
});
});
// afisam un label care ne intreaba

// numarul
// afisam un input text si un input submit
// in care introducem numarul
// afisare mesaj mai mare/mic/gasit
// daca tastam 0 programul se opreste
</script>
</head>
<body>
<div id="ghiceste">
<label>Introduceti numarul</label>
<input type="text" class="text">
<button class="incearca">Incearca</button>
</div>
</body>
</html>
Exercitiul 11
<script>
var numar_citit;
var numar_de_ghicit = 100;
do
{
numar_citit = prompt("Introduceti
numarul");
if( numar_citit < numar_de_ghicit )
alert("Numarul este mai mare");
else
if( numar_citit >
numar_de_ghicit )
alert("Numarul este mai
mic");
if( numar_citit == numar_de_ghicit )
alert("Ati ghicit!");
}while( numar_citit != numar_de_ghicit &&
numar_citit != 0 );
// A si b <=> not A sau not B
// numar_citit==numar de ghicit
sau numar_citit==0
</script>
Exercitiul 12
<script>
function afiseazaLuna(numar){
var luni = ['Ianuarie','Februarie','Martie',
'Aprilie','Mai','Iunie'...];
document.write('<h1>'+luni[numar-1]+'</h1>');
}
afiseazaLuna(3);
</script>
Exercitiul 13
Varianta 1 (mai usoara)

function pret_final(pret){
var TVA = (12.0/100)*pret;
var timbru = 2;
pret =pret + TVA + timbru;
return pret;
}
Varianta 2 (mai grea,completa, cu ajax)

<script>
var TVA = (12.0/100)*pret;
var timbru = 2;
return pret;
}
$(".submit").click(function(){
$(".rezultat").html("<h1>Pretul final
este:
"+pret_final(Number($(".text").val()))+"</h1>")
});
var date = "pret="+Number($

(".text").val());
})<script>
var TVA = (12.0/100)*pret;
var timbru = 2;
return pret;
}
$(".submit").click(function(){
$(".rezultat").html("<h1>Pretul final
este:
"+pret_final(Number($(".text").val()))+"</h1>")
});
var date = "pret="+Number($

(".text").val());
})
</script>
<div class="rezultat"></div>
<form onsubmit="return false">
<label>Introduceti pretul</label>
<input type="text" class="text">
<input type="submit" class="submit">
</form>
 Adaugarea de continut unei pagini
o se face folosind una din functiile :
1 .html() // adaugam html elementului
2 .text() // putem adauga continut, dar nu
//recunoaste tagurile html
3 .append() // adauga continut html la sfarsit
4 .prepend() // adauga continut html la inceput
5 .before()
6 .after()

J Query Rezumat

Î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

J Query Rezumat

Încărcat de

Drepturi de autor:

Formate disponibile

jQuery – Rezumat

 Scrierea primului program

o Scrierea de text intr-un document text se face cu functia

o Atasarea unui fisier JS extern (framework-ul jQuery)

o erorile JS/jQuery/Ajax se vad in imaginea din partea dreapta

Exercitiul 1 : Scrieti rezulatul stringului

Exercitiul 2 : Scrieti ce o sa afiseze urmatorul cod

o Adaugarea unui “+” in fata elementului care contine un

Cu culoarea verde sunt scrise numele variabilelor sir iar cu

 Accesarea elementelor unui vector

o Pentru a accesa numarul de elemente dintr-un vector

 Metode variate de a adauga elemente la un sir (tablou)

Exemplu if cu mai multe ramificatii

if (fridayCash >= 50) {

Exercitiul 10: Sa se implementeze celebrul joc : ghiceste numarul

o Variabile globale si variabile locale

o urmatorul pas dupa ce am inserat jquery este sa adaugam un

 Intelegerea DOM (document object model)

unde in loc de cuvantul selector avem selectorii css cunoscuti

 Intelegerea iteratiilor jQuery

 Adaugarea de continut unei pagini

 Setarea si citirea atributelor pentru taguri

o removeClass() sterge o clasa a unui tag

 Citirea si schimbarea proprietatilor CSS

 Citirea, setarea si stergerea atributelor HTML

o functia removeAttr() permite stergerea unui atribut

//pentru i=1 avem nume[0] = nume[1]

// '1', '3', '4','5'

// v[2] il mutam in v[3]

document.write(“Ultimul autor este

// afisam un label care ne intreaba

Varianta 1 (mai usoara)

Varianta 2 (mai grea,completa, cu ajax)

var date = "pret="+Number($

var date = "pret="+Number($

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