Capitolul 4 - JavaScript
Tradus de
ScribdTranslationsCapitolul 4 - JavaScript
Tradus de
ScribdTranslations03/02/2021
Universitatea Cadi Ayyad
ﺽﻋﻴﺎﺿﻲﻟﻘﺎﺍ ﺓﻉﺟﺎﻡ
Facultate Polidisciplinară
ﺕﺧﺼﺼﺎﺕﺍﻝ ﺓﺩﺩﺗﻊﻟﻢﺍ ﻳﺔﻝﻟﻚﺍ
Departamentul de Matematică ș i
Informatică ﺕﻹﻉﻻﻣﻴﺎﺍﻭﻳﺎﺕﺽﻟﺮﻳﺎﺍ ﺑﺔﻉﺵ
Safi ﻱﺁﺳﻒ
JavaScript : Introducere
Pr. YOUSSEF MOURDI
[Link]@[Link]
Introducere
•Javascript permite interactivarea unui site internet dezvoltat în
HTML.
•Javascript permite dezvoltarea de adevărate aplicații
funcț ionând exclusiv în cadrul Internetului.
•JavaScript este un limbaj de script simplificat orientat pe obiecte din care
sintaxa este bazată pe cea a Java.
•Javascript a fost elaborat inițial de Netscape în asociere cu
Sun Microsystem.
•Mai târziu, Microsoft va dezvolta propriul său limbaj Javascript cunoscut oficial sub numele de
nom deJScript.
03/02/2021 [Link] 2
1
03/02/2021
Introducere
Spre deosebire de un applet Java care este un program compilat,
scripturile scrise în Javascript sunt interpretate
•Java, reprezentat prin unul sau mai multe fișiere autonome, ale căror extensii
sera*.classou*.jar, este invocat de o etichetă HTML specifică
JavaScript estescris direct în documentul HTML sub formă
d'un script înconjurat de etichete HTML speciale sau într-un fiș ier
separat apelat cu etichete HTML speciale.
•Javascript este standardizat de un comitet specializat, ECMA (European
Asociaț ia Producătorilor de Calculatoare.
03/02/2021 [Link] 3
HTML ș i JavaScript
•pagina HTML trebuie să conțină ÎNTOTDEAUNA ambele etichete
specifice și indispensabile
<script language="JavaScript">
............
</script>
•Codul JavaScript se integrează în două moduri cu codul
HTML
•[Link] directă în codul HTML
Codul JavaScript se integrează cel mai frecvent în pagina HTML în sine.
• Este cea mai simplă și cea mai frecvent utilizată metodă de către dezvoltatori
site-uri Internet.
•[Link] ca un modul extern
03/02/2021 [Link] 4
2
03/02/2021
1. Inserare într-o pagină HTML
Există 2 moduri de a insera cod JavaScript într-o pagină HTML
•1.1 Inserare pentru execuție directă
<html>
•Codul se rulează automat <head>
la încărcarea paginii HTML <title>..... </title>
în browser în acelaș i timp cu </cap>
<body>
conț inutul paginii HTML
<script language="JavaScript">
apare pe ecran. alert('bună ziua');
</script>
Codul JavaScript este plasat </body>
în corpul chiar al paginii HTML, </html>
între etichetele <body>.......... ș i
.........</body>
03/02/2021 [Link] 5
2. Inserț ie prin apel de modul extern
Se poate insera cod JavaScript apelând un modul extern
aflându-se la orice adresă (URI).
<script src="URL-ul modulului extern">
............
</script>
Cele două etichete de Javascript trebuie plasate între etichetele <body> și </body>
în cazul unei execuții directe sau între etichetele <head> și </head> ale paginii
HTML pentru o execuție întârziată.
•Stocat într-un fișier pe server la adresa sa de apel sub formă de TEXT
SIMPLEportant extensia .txt sau .js
•Simplifică întreținerea site-urilor care folosesc module JavaScript comune
la mai multe pagini HTML.
03/02/2021 [Link] 6
3
03/02/2021
Intrare ș i ieș ire de date cu JavaScript
•3 tipuri de feronerie de mesaje pot fi afișate folosind Javascript :
Alerte, Confirmation et Invite
•Metoda alert()
•servește pentru a afișa utilizatorului informații simple de tip text. Odată ce acesta a citit
mesaj, trebuie să facă clic pe OK pentru a face să dispară caseta
•Metoda confirm()
•permite utilizatorului să aleagă între butoanele OK și Anulează.
•Metoda prompt()
•Metoda prompt() permite utilizatorului să scrie propriul mesaj ca răspuns la întrebare
posedă
[Link] permite scrierea de cod HTML în pagina WEB
03/02/2021 [Link] 7
Intrare ș i ieș ire de date cu JavaScript
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bună ziua
<script language='javascript'>
alert('bună');
[Link] (
Ce este numele tău?
);
confirm('ce buton veț i alege?');
</script>
</body>
</html>
03/02/2021 [Link] 8
4
03/02/2021
Structura unui script în JavaScript
•Sintaxa limbajului Javascript se bazează pe modelul Java și C
•Reguli generale
• Inserarea spaț iilor poate fi efectuată oriunde în script
• Fiecare comandă trebuie să fie terminată cu un punct ș i virgulă (;).
• Un număr zecimal este separat printr-un punct (.) ș i nu printr-o virgulă.
• Limbajul Javascript este sensibil la majuscule ș i minuscule
• Există două metode de a integra comentarii în
scripturi.
• Plasează un slash dublu (//) în faț a textului
• Încadraț i textul cu un slash urmat de o stea (/*) ș i aceeaș i secvenț ă inversată
(*/)
03/02/2021 Pă[Link] 9
Variabilele
•Declarație și alocare
Cuvântul-cheie permite să declar o sau //Declarație doi, dejet dek.
mai multe variabile. var i, j, k;
•După declararea variabilei, este Afectare dei.
posibil să-i afectezi o valoare prin i = 1;
prin intermediul semnului egal (=). //Declarație și atribuirea prețului.
var prix = 0;
•Și o valoare este atribuită unei variabile
//Declarație și alocare de caractere
fără ca aceasta să fie declarată, var caractere = ["a", "b", "c"];
atunci Javascript la declară
automat.
03/02/2021 [Link] 10
5
03/02/2021
Variabilele
•Declarație și alocare
Citearea unei variabile nedecalate provoacă o eroare
O variabilă declarat corect, dar căreia nu i s-a atribuit nicio valoare, este nedefinită
(undefined).
La portée
Variabilele pot fi globale sau locale.
O variabilă globală este declarată la începutul scriptului și este accesibilă din orice parte.
locul programului.
O variabilă locală este declarată în interiorul unei funcții și este utilizabilă doar în cadrul acesteia.
funcț ia ea însăș i.
03/02/2021 [Link] 11
Variabilele
Tipul unei variabile depinde de valoarea stocată în această variabilă. Nu există
declaraț ie de tip.
var maVariable= 'Philippe';
maVariable =10;
• trei tipuri principale de valori
•Șir
Număr10^-308 >număr < 10^308
Numerele întregi
numerele zecimale în virgulă mobilă
•3 valori speciale :
•Infinit pozitiv sau +Infinity (valoare infinit pozitivă)
•Infinit negativ ou–Infinit (valoare infinit negativă)
•Nan (Nu este un număr) generat de obicei ca rezultat al unei operații
matematică incoerentă
Boolean
•două valori literale: adevărat (true) și fals (false).
03/02/2021 [Link] 12
6
03/02/2021
Valori speciale
JavaScript include de asemenea două tipuri speciale de date:
•Null : are o singură valoare, null, care înseamnă absența datelor într-o variabilă
•Nedefinit: posedă o singură valoare, nedefinit. O variabilă al cărei conținut nu este
clair că ellen’ajamais stocat de valoare, nu nici măcar nimic numit nedetectat (nedifinit).
03/02/2021 [Link] 13
Operaț iile pe ș iruri
•La concaténarea
Var chaine = " bună ziua " + " FI3/FCD1 ";
•Determinați lungimea unei șir
Var ch1 = " bună ziua ";
•Var lungime =[Link];
Identifică caracterul n în cadrul unui șir
•Var ch1 =" Bună ziua din nou! ";
•Var carac =[Link](2);
Extracția unei părți a șirului
•Data de astăzi = " 04/04/03 "
•Var lună =[Link](3, 5);
•3: este indicele primului caracter al sub-șirului de extras
•5 : indice al ultimului caracter de luat in considerare; acest caracter nu va face
parte a sublanț ului de extras
03/02/2021 [Link] 14
7
03/02/2021
Funcț iile predefinite
•eval
•Această funcție execută un cod Javascript dintr-un șir de caractere.
...
<SCRIPT LANGUAGE="JavaScript">
evaluarea funcției() {
[Link]=eval([Link]); }
</SCRIPT>
...
<FORM NAME="formular">
Introduceți o expresie matematică : <INPUT TYPE="text" NAME=saisie MAXLENGTH=40 SIZE=40>
<INPUT TYPE="button" VALUE="evaluare." onClick="evaluare()">
<INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40>
</FORM>...
03/02/2021 [Link] 15
Funcț iile predefinite
Număr
•convertește obiectul specificat într-o valoare numerică
var jour = new Date("17 Decembrie 1995 03:24:00"); //converit la date în milisecunde
alert (Număr(jour));
•Șir
•convertește obiectul specificat în șir de caractere
zi = new Date(430054663215);//Convertește numărul în dată Lună zi, An etc.
alert (String(jour));
Evadare
•returnează valoarea hexazecimală dintr-un șir de caractere codificat în ISO-Latin-1.
evadează("!&")//retourne%21%26%
03/02/2021 [Link] 16
8
03/02/2021
Obiectele
Obiectele JavaScript sunt fie entități predefinite ale limbajului, fie
creat de programator.
•De exemplu, browserul este un obiect care se numește "navigator
Fereastra browser-ului se numește " fereastră
Pagina HTML este un alt obiect, pe care îl numim „document
•Un formular în interiorul unui "documentul", este de asemenea un obiect.
•Un link hypertext într-o pagină HTML este încă un alt obiect. Se numește " link.
etc...
Obiectele JavaScript pot reacționa la "Evenimente".
Nu toți browserii suportă aceleași obiecte
Acces la proprietățile unui obiect
•[Link]
•[Link] = verte
03/02/2021 [Link] 17
Obiectele
Operatorul New
•Operatorul newest folosit pentru a crea o nouă instanță sau un nou tip de obiect
definit de utilizator sau de unul dintre tipurile de obiecte predefinite,Tablou, Boolean, Date, Funcț ie,
Imagine, Număr, Object, sauȘ ir.
•nouvel_objet = new type_objet(parametres)
texte =newString("Une chaîne de caractère");
03/02/2021 [Link] 18
9
03/02/2021
Obiectele
•TipulOperatorului
Operatorul typeof returnează un șir de caractere care indică care este tipul de
operândul.
var i = 1;
typeofi;//returneazănumber
var titre="Les raisins de la colère";
typeoftitre;//retourneș ir
var jour = new Date();
typeofjour;//întoarceobiect
var choix = true; typeofchoix;//returneazăboolean
var cas = null; typeofcas;//întoarceobiect
typeofparseFloat;//returneazăfuncț ie
typeofMath;//întoarce obiect (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.*
typeofMath;//returnează funcț ia NS 3.*, Opera 3.*
03/02/2021 [Link] 19
Obiectul string
Proprietate :
•lungime: returnează lungimea șirului de caractere;
•Metode:
•ancora( ): formatează la șir cu eticheta <A> numită;
•b( ): formatează la șir cu eticheta <B>; a revizuit !!
•big( ): formatează șirul cu eticheta <BIG>;
•charAt( ): returnează caracterul aflat într-o anumită poziție;
•charCodeAt( ): returnează codul caracterului aflat într-o anumită poziție;
•concat( ): permite concatenarea a 2 șiruri de caractere;
•fromCharCode( ): returnează caracterul asociat codului;
•indexOf( ): permite găsirea indicelui de apariție a unui caracter într-un șir;
03/02/2021 [Link] 20
10
03/02/2021
Obiectul string
•cursiv( ): formatează șirul cu eticheta <I>;
•lastIndexOf( ): permite găsirea ultimei index de apariție a unui caracter;
•link( ): formatat în șir cu eticheta <A> pentru a permite crearea unui link;
•slice( ): returnează o porțiune din șir;
•substr( ): returnează o porțiune din șir;
•substring( ): returnează o porțiune din șir;
•toLowerCase( ): permite transformarea întregii șir în litere mici;
•toUpperCase( ): permite transformarea întregii șir în litere mari;
03/02/2021 [Link] 21
Obiectul array
Proprietate :
•lungime: returnează numărul de elemente din tablou;
•Metode :
•concat( ): permite concatenarea a 2 tablouri;
•join( ): convertește un tablou într-un șir de caractere;
•reverse( ): inversează clasamentul elementelor din tablou;
•slice( ): returnează o secțiune a tabelului;
•sort( ): permite clasificarea elementelor din tablou;
03/02/2021 [Link] 22
11
03/02/2021
Obiectele browser-ului
•Obiectul cel mai înalt din ierarhie estewindowqui corespunde feronului
chiar ș i al browserului.
Obiectuldocumentul face referire la conț inutul feroniei.
•documentregroupă în cadrul proprietă ț ilor toate elementele HTML
prezenț i pe pagină. Pentru a ajunge la aceste diverse elemente, vom folosi:
•sunt metode specifice obiectuluidocument, cum ar fi metoda getElementById( ),
care permite găsirea elementului în funcț ie de identificatorul său (ID);
•să fie colecții de obiectecare reunesc sub formă de tabele Javascript toate cele
elemente de tip determinat.
03/02/2021 [Link] 23
Les objets du navigateur
03/02/2021 [Link] 24
12
03/02/2021
Obiectul fereastră
•Proprietăți : (accessibile cu IE și N)
•închis: indică faptul că fereastra a fost închisă;
•defaultStatus: indique le message par défaut dans la barre de status;
•document: returnează obiectul document al feronului;
•cadre: returnează colecția de cadre din fereastră;
•istorie: returnează istoricul sesiunii de navigare;
•locație: returnează adresa vizitată în prezent;
•name :indique le nom de la fenêtre;
03/02/2021 [Link] 25
Obiectul fereastră
•navigator: returnează browserul utilizat;
•opener: returnează obiectul window care a creat fereastra curentă;
•parent: returnează obiectul window imediat superior în ierarhie;
•self : întoarce obiectul window corespunzător ferestrei curente;
•status: indică mesajul afișat în bara de status;
•top: returnează obiectul window cel mai înalt din ierarhie.
03/02/2021 [Link] 26
13
03/02/2021
Obiectul fereastră
•Metode:
•blur( ): îndepărtează focusul ferestrei;
•close( ): ferme la fenêtre;
•focus( ): pune accentul pe fereastră;
•moveBy( ): deplasează pe o distanță;
•moveTo( ): mută fereastra către un punct specificat;
•open( ): deschide o fereastră nouă;
•print( ): imprimă conținutul feronului;
•redimensionează( ): redimensionează cu un anumit raport;
•resizeTo( ): redimensionează fereastra;
•setTimeout( ): evaluează un șir de caractere după un anumit interval de timp.
03/02/2021 [Link] 27
Obiectul document
Proprietăți:
•applets: returnează colecția de applete java prezentă în document;
•cookie: permite stocarea unui cookie;
•domeniu: indică numele de domeniu al serverului care a adus documentul;
•formulare: returnează colecția de formulare prezente în document;
•imagini: returnează colecția de imagini prezente în document;
•linkuri: returnează colecția de linkuri prezente în document;
•referrer: indică adresa paginii anterioare;
•title: indique le titre du document.
•Metode:
•închide( ): închide documentul în scriere;
•open( ): deschide documentul în modul de scriere;
•write( ): scrie în document;
•writeln( ): scrie în document și efectuează o întoarcere la linie
03/02/2021 [Link] 28
14
03/02/2021
Evenimentele
•Javascript este dependent de evenimente
• se produc în urma unor acțiuni diverse asupra obiectelor unui document HTML.
•onLoad;
•onClick
•la trecerea cu mouse-ul
onMouseout
•laSchimbare
•…
Este posibil să se bazeze execuția funcțiilor pe evenimente
03/02/2021 [Link] 29
Evenimentele
•Eveniment onLoad
•Se produce atunci când o pagină web este încărcată în fereastra browser-ului
Toată pagina (inclusiv imaginile pe care le conține, dacă încărcarea lor este planificată) trebuie
a fost însărcinată pentru a avea loc
•Acest eveniment poate fi asociat doar cu o imagine; caz în care, se produce o
o dată ce încărcarea sa terminat
<HTML><BODY onLoad="alert('pagina încărcată');">
Exemple de eveniment onLoad
</CORP BODY></HTML>
03/02/2021 [Link] 30
15
03/02/2021
Evenimentele
•Eveniment onClick
•Se întâmplă atunci când utilizatorul face clic pe un element specific într-o pagină, cum ar fi
un hyperlink, o imagine, un buton, text, etc.
•Aceste elemente sunt capabile să răspundă separat la acest eveniment
• Poate fi de asemenea declanșat atunci când utilizatorul face clic oriunde pe pagină dacă
a fost asociat nu cu un element specific, ci cu întregul element body
<HTML><BODY>
<INPUT TYPE="Button" Value="cliquează aici" onClick="alert('Clic')">
</CORP<TBODY></HTML>
03/02/2021 [Link] 31
Evenimentele
•Eveniment onMouseover
•Analog cu onClick, este suficient ca utilizatorul să plaseze cursorul mouse-ului pe unul
elementele menț ionate mai sus (link hipertext, imagine, buton, text etc.) pentru a avea loc
Eveniment onMouseout
•Spre deosebire de onMouseover, acest eveniment se produce atunci când pointerul mouse-ului
ieș i din zona de selecț ie a unui element.
<HTML><BODY>
<IMG SRC="[Link]" onMouseOver="src='[Link]';"
onMouseOut="src='[Link]';">
</CORP BODY></CORP HTML>
03/02/2021 [Link] 32
16
03/02/2021
Nomenclatura obiectelor
Pentru a putea manipula un obiect în javaScript, acesta trebuie să aibă un nume
•Pentru a putea distinge diferitele obiecte-elemente de pe o pagină web, este suficient să le
a da un nume prin atributul NAME
•<Table Name="tableau1">…
•<Table Name="tableau2">…
•<Nume Formular = "formulaire1 ">…
•<Form Name ="formulaire2 ">…
•<Textarea Name ="texte1">…
•În cazul în care obiectul ar fi unic, atunci nu este nevoie de un nume pentru a desemna acest obiect
•Exemple : cazul BODY (un singur BODY pe document), DOCUMENT (un singur DOCUMENT)
pe fereastră
03/02/2021 [Link] 33
Manipularea obiectelor
•Pentru a adresa un obiect, nu este suficient să îi dai numele: trebuie, de asemenea,
preciza ț i „ calea de acces” în arborele structurii
<HTML><BODY
onLoad="[Link]='Bonjour';">
<FORM name="formulare"><INPUT NAME="zona" TYPE="text">
</FORM></BODY></HTML>
•Și dacă numele ferestrei este omis, browserul va folosi implicit fereastra
curente
În cazul cadrelor (frames), este pertinent să se dea numele ferononă.
Este, de asemenea, posibil să omitem [Link]: adresarea reușită deoarece
Există un singur obiect „document” în fereastră
03/02/2021 [Link] 34
17
03/02/2021
Manipularea obiectelor formular
Element <input…>
Proprietăți •Méthodes
•namenumele câmpului •focusdă focusul (cursorul)
neclarîndepărtează focalizarea
•tiptipul câmpului (text, buton, radio,
•clicsimulează un clic (pe un buton)
checkbox, submit, reset)
Evenimente
valoreavaloare textuale
•peFocalizaredetectează focalizarea
•dimensiunedimensiunea câmpului pe pierdere focusdetectează pierderea de concentrare
•lungimea maximădimensiunea maximă a unui câmp de text onClickdetectează un clic
•verificatcasetă de selectare / buton radio marcat sau nu •pe schimbadetectează schimbările
•persoană cu handicapgrizit
(modificare imposibilă)
•doar citiredoarcitire
•clasănumele clasei de stil
stilnume de stil
03/02/2021 [Link] 35
Manipularea obiectelor formular
Element <input…>
Element <input type="text">
Proprietăți acceptate
•name, value, defaultvalue, size, maxlength, disabled, readOnly, class, style
•Metode acceptate
•focus, blur
Evenimente acceptate
•onFocus, onBlur, onChange
03/02/2021 [Link] 36
18