CATEGORII DOCUMENTE
Afaceri Calculatoare Casa masina Didactica pedagogie Diverse Educatie Finante Geografie Istorie & politica Legislatie Limba Management Sanatate Tehnologie

Access	Adobe photoshop	Algoritmi	Autocad	Baze de date	C	C sharp
Calculatoare	Corel draw	Dot net	Excel	Fox pro	Frontpage	Hardware
Html	Internet	Java	Linux	Matlab	Ms dos	Pascal
Php	Power point	Retele calculatoare	Sql	Tutorials	Webdesign	Windows
Word	Xml

CURSURI DE JAVA SCRIPT

html

+ Font mai mare | - Font mai mic

DOCUMENTE SIMILARE

Despre Paragrafe

JAVASCRIPT

Blocuri de titlu

Imagini HTML - Adresa URL, Chenarul, Alinierea imaginilor

Verificarea existentei unui nume de cont de utilizator

Publicarea si promovarea site-ului Web

Atributul ALIGN - pozitionarea unei imagini

Atributul ALT - text alternativ

Nucleul limbajului JavaScript

Inserare unui tabel

CURSURI DE JAVA SCRIPT

Java script este un limbaj de scripturi; acest limbaj e interpretat in mod direct de catre browser; editam in notepad si vizualizam in browser (nu necesita instalare).

Java script este un limbaj de scriptare, nu este un limbaj de programare.

Un limbaj de programare trebuie instalat; el are componente specifice:

contine o componenta numita compilator
are un editor propriu
are un link editor

In limbajul de programare, in editor am scris limbajul scris, apoi, aceste instructiuni sunt compilate (astfel, instructiunile se transforma din sursa in obiect). La compilare imi detecteaza toate erorile de sintaxa.

Spre deosebire de limbajul de programare, in limbajul de scriptare nimeni nu imi detecteaza erorile(doar rareori se semnaleaza o eroare in pagina).

Pentru Java script folosim tot un fisier cu extensia HTML, in care scriem tot structura de baza a unui fisier html, numai ca adaugam instructiunea <script> in interiorul lui <head>, si in interiorul lui<script> adaugam secventele de instructiuni de care avem nevoie, scrise in limbajul java :

<html>

<head>

<title>

</title>

<style>

</style>

</script>

</head>

<body>

</body>

</html>

Java script lucreaza cu asa-numitele "functii". In momentul crearii unei functii de catre utilizator, aceasta functii va fi scrisa in <head>.

STRUCTURA UNEI FUNCTII

Orice functie incepe cu cuvantul <function> urmat de numele functiei si in paranteza, de parametri.

Function nume functie (parametrii)

</script>

O functie poate fi apelata in 2 moduri :

1. in <body> la un moment dat deschid <script> apel functie</script>

2. in <body> pe tagul unui obiect din formular.

Modul 2 de apelare:

Exemplu: avem un formular, si in interiorul lui, avem instructiunea pentru introducerea unei casete de tip "button" :

<form>

<input type="button" value="start" name="start" onclick =

"numele functiei" >

</form>

Atribute:

onclick
onmouseover = cand pozitionam indicatorul mous-ului deasupra lui, se executa functia
onmouseout = cand plecam cu indicatorul mouse-ului de deasupra obiectului , se executa functia

OPERANZI SI OPERATORI

Java scriptul lucreaza cu o serie de operanzi si operatori.

A. OPERANZII

Clasificarea1:

Operanzii sunt :

A.1 variabile = care isi modifica valoarea pe parcursul executarii aceluiasi program, sau la executari repetate ale aceluiasi program.

A.2 constante = isi mentin aceeasi valoare la fiecare rulare a programului. De obicei sunt niste mesaje, niste texte.

Clasificarea 2:

In functie de informatia pe care o reprezinta, operanzii se clasifica in:

valori numerice
valori de tip text

Intr-un limbaj de programare evoluat, de la bun inceput se precizeaza tipul operanzilor. In Java script, in mod implicit, toti operanzii sunt considerati a fi de tip text. Daca vrem sa lucram cu valori numerice, acest lucru trebuie spus clar, prin anumite instructiuni.

B. OPERATORII

Operatorii se impart in mai multe categorii:

operatori aritmetici:
operatori de comparatie
operatori logici
alte tipuri de operatori, diferiti de cei amintiti deja

Operatorii aritmetici: +, - , * , /

Operatori aritmetici:	Descriere:
operatorul +	Plusul aduna valori
Operatorul -	Minusul scade o valoare din alta valoare
Operatorul *	Asteriscul inmulteste 2 valori
Operatorul /	Semnul slash (/) imparte o valoare la alta valoare.

Operatorul + are 2 roluri si anume:

1. a) daca operanzii cu care lucreaza sunt valori numerice, operatorul + face operatia de adunare (doar ca trebuie facuta conversia, printr-o functie speciala)

1. b) daca operanzii cu care lucreaza sunt valori de tip text, operatorul + face operatia de concatenare.

De ex:

A=7

B=5

C=a+b

C=12 (in cazul 1.a)

C=75 (in cazul 1.b)

Operatorii de comparatie:

Operatorii de comparatie sun folositi exact pentru ce arata numele lor -pentru comparatie. Expresiile ce folosesc operatorii de comparative pun de fapt o intrebare despre doua valori. Raspunsul poate sa fie sau "true"(adevarat), sau "false" (fals).

Doua semne egal (==) simbolizeaza operatorul de egalitate, folosit pentru a verifica daca valorile celor doi operanzi sunt egale. Trebuie o foarte mare atentie la folosirea operatorului corect. Operatorul de egalitate (==) testeaza doau valori pentru a vedea daca sunt egale, in timp ce operatorul de atribuire (=) stabileste o noua valoare pentru o variabila. Daca se greseste si se foloseste operatorul eronat, interpretorul java script anunta acest lucru.

Operatori de comparatie	Descriere:
Operatorul ==	Operator de egalitate (folosit pentru a verifica o conditie
Operatorul ! =	Operator de ne-egalitate
Operatorul >	Operator "mai-mare-decat"- intoarce valoarea "true" daca operandul sau stang are valoarea mai mare decat operandul drept
Operatorul >=	Operator "mai-mare-sau-egal-cu" - intoarce valoarea "true" daca operandul sau stang are valoarea mai mare sau cel putin egala cu a operandului drept.
Operandul <	Operator"mai-mic-decat" - intoarce valoarea "true" daca operandul sau are valoarea mai mica decat operandul drept.
Operandul <=	Operator "mai-mic-sau-egal-cu" - intoarce valoarea "true" daca operandul sau stang are valoarea mai mica sau cel mult egala cu a operandului drept.

Acesti operatori de comparatie sunt folositi acolo unde trebuie testate o conditie.

Operatorii logici

Operatorii logici sunt folositi in conjunctie cu expresiile care intorc valori logice. De obicei se folosesc in combinatie cu operatori de comparatie.

Operatori logici	Descriere
Operatorul &&	Operatorul logic AND intoarce "true" daca atat expresie 1, cat si expresie2 sunt "true". Altfel intoarce "false"
Operatorul \| \|	Operatorul logic OR intoarce "true" daca fie expresie 1, fie expresie 2 sunt "true". Daca nici una dintre ele nu este "true", intoarce "false" .
Operatorul !	Operatorul logic NOT este unar si intoarce valoarea opusa a unei expresii logice. Daca expresie este "true", intoarce "false", iar daca expresie este "false", intoarce "true". Aceasta nu va modifica permanent valoarea "expresie", deoarece actioneaza la fel ca operatorul aritmetic de negare.

Cu alte cuvinte:

Operatorii && si sunt utilizati in conditii compuse. O conditie compusa are mai multe conditii partiale.

In cazul operatorului && conditia compusa este adevarata daca toate conditiile partiale sunt adevarate.

Ex. Conditia mare: sa deschidem o pagina web

Conditii partiale: sa fie buna parola

Sa fie bun numele introdus

in cazul operatorului "sau" (||) conditia mare este adevarata daca cel putin una dintre conditiile partiale este adevarata.

Ex. Conditia mare: merg la plimbare

Conditii partiale: daca treci pe la mine/ daca dai telefon

in cazul operatorului ! (not) -acesta neaga conditia existenta.

Alti operatori:

Operatori	Descriere
Operatorul =	operatorul egal poarta numele de operator de atribuire
Operatorul ++	Operatorul de incrementare creste valoarea variabilei cu o unitate.
Operatorul - -	Operator de decrementare- scade valoarea variabilei cu o unitate

Exemplu:

Variabila A=5. Calculati valoarea lui A in exercitiul de mai jos.

A ++

A - -

A ++

A=...

FUNCTIILE PRESTABILITE (FUNCTII ALE SISTEMULUI)

Functiile pe care le definim noi, ca utilizatori contin instructiuni sa u functii ale sistemului.

Functia alert afiseaza o fereastra micuta si un mesaj in interiorul ferestrei.

Forma generala a functiei " alert " :

Alert ("text" + nume variabila)

"text" = un text oarecare, pe post de constant ape care il putem concatena (lipi) daca dorim , de o variabila)

Constantele se scriu intre ghilimele.

Variabilele se scriu fara ghilimele.

Continutul parantezei poate fi modificat astfel incat intr-o paranteza putem avea :

doar constante
doar variabile
ambele
mai multe constante si variabile; constantele si variabilele le alternam cu +. (constanta+variabila+constanta+variabila(.))

Exemplu: vom crea function f1. La prima functie nu avem parametri, deci f1 are paranteze goale ( ).

Ce scriem in interiorul lui head, intre <script> si </ script>?

<head>

function f1 ( )

</script>

</head>

Ce scriem in body?

Functia "prompt" atribuie o valoare unei variabile.

Forma generala:

Nume variabila = prompt ( " ..mesaj..", "o valoare implicita" )

Exemplu o functie sa preia de la tastatura numele si varsta prin functia prompt si apoi sa afiesez, cu functia "alert" un mesaj de genul: "Ana are 20 de ani".

Vom numi functia "afiseaza" .

In head, intre scripturi, vom scrie:

Function afiseaza ( )

In body:

<form>

</form>

Functia "if..else"

Forma generala :

If (condition)

(Daca indeplineste conditia) Executa secventa s1

Else (altfel)

Executa secventa s2

ex. Intr-un fisier nou sa preiau de la tastatura, numele si parola . daca numele este Georgica si parola este 123, sa imi afiseze mesajul: "bine ai venit". Daca numele, parola sau ambele sunt gresite, sa imi afiseze :eroare ("eroare la nume", "eroare la parola", "gresite amandoua").

<html>

<head>

<title>

functia daca

</title>

function daca( )

</script>

</head>

<body>

</body>

</html>

In internet explorer se vizualizeaza butonul cu valoarea "recunoastere"; daca se apasa pe buton apar succesiv mai multe ferestre care te intreaba numele, parola, si daca ai introdus bine, apare mesajul "bine ai venit!", altfel apare, in functie de caz: "eroare la nume"/ "eroare la parola"/ "gresite amandoua".

Functii

-22-23 nov.2008-

Exercitiul "functie de conversie":

<html>

<head>

<title>

</title>

<script>[12]

function f1 ()

function f2 ()

function f3()

function f4 ()

function f5 ()

function f6 ()

</script>

</head>

<body>

<form>

</form>

</body>

</html>

. Functia de conversie "parseInt (variabila)"

Functia de conversie se introduce imediat dupa operatia de citire a numelui, in cazul adunarii.

Ex. Fie functia f1, cu 2 variabile, a si b.

In interiorul functiei scriem:

a=prompt ("introduceti variabila 1", " " );

b= prompt ("introduceti variabila 2", " " );

a = parseInt (a)- converteste variabila "a" citita mai sus din sir de caractere in numar

b= parseInt (b) - converteste variabila "b" citita mai sus din sir de caractere in numar.

Maximul (a>b)

Pe langa cele 4 operatii aritmetice, daca vom vrea sa calculam maximul (din cele 2 variabile, "a" si "b"):

Functia f6( ) din exercitiul "functie de conversie" este functia maxim:

Preluarea valorilor din casete de text: (a=t.value)

Ex: Intr-un formular nou, vrem sa introducem o caseta de tip text "t1" si o alta caseta de tip text "t2".

Apoi introducem 2 butoane de comanda :"+" si "-".

vrem sa citim valori din caseta t1 si t2.

Function f1 (t1,t2):

a[14] =t1.value;

b= t2.value

a[15]=parseInt (a)

b=parseInt (b)

Trebuie sa introduce numele de la tastatura si apoi sa apas un buton de comanda "introduceti numere". Apoi sa calculam c=a+b si c=a-b. O caseta de tip "alert" va trebui sa ma anunte : "diferenta este ." sau "suma este.".

Exemplul nostru arata in notepad asa:

<html>

<head>

<title>

</title>

function f1 (t1,t2)

function f2()

function f3()

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Ex: Intr-un fisier nou, vrem sa avem o caseta de text si una de parola. Din caseta de text vrem sa citim nume iar din caseta tip password sa citim parola.

Avem numele "anita" si parola "123".

Daca numele este introdus correct si este "anita" si parola este "123" vrem sa fim instiintati printr-un mesaj de tip "alert" : "OK".

Daca numele este introdus correct si parola este gresita, sa primim un mesaj de tip "alert" : "eroare la parola"

Daca numele este gresit si parola introdusa correct, sa apara un mesaj de tip "alert": "eroare la nume"

Daca numele este gresit si parola este gresita, sa primim un mesaj de tip "alert" : "gresite amandoua".

<html>

<head>

<title>

</title>

function f1 (nume,parola)

</script>

</head>

<body>

<form>

parola <input type='password' name='parola' ><br>

nume <input type='text' name='nume'><br>

</form>

</body>

</html>

CASETE DE VALIDARE

EX: Intr-un fisier nou creem un formular in care sa avem:

2 casete de validare (c1, c2) cu valuarea (value)="verde" si "galben"

un buton de comanda : alege

Stim ca proprietatea care pune in evidenta starea casetei (bifata sau nebifata) este proprietatea "if". Intrebam daca prima caseta este bifata, sa mi se afiseze un mesaj: cu valoarea lui c1 (verde) iar daca este bifata c2, sa mi se afiseze un mesaj cu valoarea casetei c2 (galben).

Daca insa nu se bifeaza nimic, sa imi apara un mesaj : "nu ai bifat nimic!".

Asadar, cum pun intrebarile si cum formulez mesajul-alerta, in notepad?

<script>

Function TEST (C1,C2)

</script>

Intregul exercitiu arata asa:

<html>

<head>

<title>

</title>

function TEST (C1,C2)

function test1[16](C1,C2)

</script>

</head>

<body>

<form>

verde <input type='checkbox' value='VERDE' name='C1' ><br>

galben <input type='checkbox' value='GALBEN' name='C2' ><br>

</form>

</body>

</html>

Observatii:

Asadar functia test1 (c1,c2) este o alta varianta a functiei test.

In definirea functiei, se porneste de la o variabila pe care o numim "mesaj" si care initial are valoarea "0". De aceea scriem:

Mesaj = " ";

Apoi, daca c1 este bifata, inseamna ca variabila mesaj ia valoarea veche (0) +valoarea lui c1 ("verde").
Daca c2 este bifata, variabila "mesaj" ia valoarea initiala(0)+ valoarea lui c2 ("galben").
Daca nici c1 si nici c2 nu este bifata, variabila mesaj ==" " . Si variabilei mesaj I se atribuie valoarea "nu ai bifat nimic". Atunci, vrem sa primim un mesaj care san e anunte: "nu ai bifat nimic".

Aceste variante sunt incluse in functia test si in functia test 1.

Descrierea functiei test 1:

Function test 1(c1,c2)

CUM SA SCRIEM COMENTARII[17]

Exista 2 solutii de care dispunem pentru a plasa comentarii in Java Script (in interiorul lui script):

pentru comentarii care au doar o singura linie de text se folosesc 2 caractere slash (//) consecutive.

Ex: //"acesta este un comentariu de o singura linie".

pentru blocuri de comentarii mai mari se folosesc caracterele : /* si */.

ex: /* Acesta este un comentariu

pe mai multe linii. */

In body putem scrie comentarii astfel:

text <! (.text..)>

<body>

text text text text text text text text text text text text text text text text

<! Comentariu comentariu comentariu comentariu comentariu comentariu >

text text text text text text text text text text text text text text text text

</body>

Alt exemplu pentru casete de validare:

Intr-un fisier nou concepem un test grila cu casete de validare. Trebuie sa bifam raspunsurile noastre. La sfarsit vrem sa ni se calculeze nota.

<html>

<head>

<title>

</title>

function TEST (c1a,c1b,c1c,c2a,c2b,c2c,c3a,c3b,c3c)

</script>

</head>

<body>

<form>

1.Cum e vremea afara?<br>

a) <input type="checkbox" value="" name="c1a" ><br>

b) <input type="checkbox" value="" name="c1b" ><br>

c) <input type="checkbox" value="" name="c1c"><br><br>

2.Cate zile pe saptamana avem cursuri?<br>

a) <input type="checkbox" value="" name="c2a" ><br>

b) <input type="checkbox" value="" name="c2b" ><br>

c) <input type="checkbox" value="" name="c2c"><br><br>

3.Am dat vreun examen din modulele studiate?<br>

a) <input type="checkbox" value="" name="c3a" ><br>

b) <input type="checkbox" value="" name="c3b" ><br>

c) <input type="checkbox" value="" name="c3c"><br>

</form>

</body>

</html>

Ex: Pe un formular nou adaugam casete de text cu nume si prenume. Dl/D-na au obtinut ..puncte.

<html>

<head>

<title>

</title>

function TEST (c1a,c1b,c1c,c2a,c2b, c2c,c3a,c3b,c3c,t1,t2)

</script>

</head>

<body>

<form>

1.Cum e vremea afara?<br>

a) <input type="checkbox" value="" name="c1a" ><br>

b) <input type="checkbox" value="" name="c1b" ><br>

c) <input type="checkbox" value="" name="c1c"><br><br>

2.Cate zile pe saptamana avem cursuri?<br>

a) <input type="checkbox" value="" name="c2a" ><br>

b) <input type="checkbox" value="" name="c2b" ><br>

c) <input type="checkbox" value="" name="c2c"><br><br>

3.Am dat vreun examen din modulele studiate?<br>

a) <input type="checkbox" value="" name="c3a" ><br>

b) <input type="checkbox" value="" name="c3b" ><br>

c) <input type="checkbox" value="" name="c3c"><br>

<br>prenume<input type="text" name="t2"><br>

</form>

</body></html>

BUTOANE DE OPTIUNE RADIO

EX: Intr-un fisier nou avem 2 butoane radio (cu value =rosu si albastru) , un buton de comanda " afiseaza culoarea" si un buton tip "reset".

Grupul de butoane radio este "r". Vrem sa ni se afiseze culaore bifata intr-o caseta de tip "alert".

<html>

<head>

<title>

</title>

function butonel(r)

</script>

</head>

<body>

<form>

rosu<input type='radio' name='r' value='rosu'><br>

albastru<input type='radio' name='r' value='albastru'>

</form>

</body>

</html>

INSTRUCTIUNI PENTRU CICLURI :

-INSTRUCTIUNEA "FOR"-

Crearea unui ciclu in interiorul unui script poate servi multor scopuri. O utilizare banala, clar foarte raspandita, a ciclului este contorizarea .

Instructiunea FOR:

Sintaxa instructiunii For este urmatoarea :

For ([expresie_initializare];[expresie_conditie] ; [expresie_ciclu])

Cele 3 expresii incadrate de paranteze sunt optionale, dar, daca este omisa una dintre ele, semnul punct si virgule (;) tot este necesar. In felul acesta, fiecare expresie este pastrata acolo unde ii este locul.

OBSERVATII :

In mod obisnuit, expresia de initializare este folosita pentru a initializa si chiar pentru a declara o variabila care va fi folosita drept contor pentru ciclu.
Dupa aceea expresia-conditie trebuie evaluata la "true" inainte de fiecare executie a instructiunilor incadrate de acolade.
In sfarsit, expresia ciclu incrementeaza sau decrementeaza variabila folosita drept contor pentru ciclu.
Daca expresia conditie intoarce "false" la primul ciclu, instructiunile cuprinse intre accolade nu sunt executate niciodata.
Ca si in cazul instructiunii "if", ciclurile "for" pot fi imbricate.

Sunt 2 tipuri de liste de selectie:

simpla

multipla

lista simpla - exemplu pentru utilizarea instructiunii "for":

EX: Fie un formular cu o lista simpla, cu 6 elemente (la "value" trecem culori); din cele 6 elemente 3 sa fie vizibile (asta inseamna ca "size"="3").

Apoi sa introducem in formular 2 butoane de comanda:

unul pe care sa scrie: "alege"

altul pe care sa scrie : "reset".

Denumirea listei o sa o trecem ca fiind "s".

Vrem ca atunci cand se selecteaza un element din lista, sa fim instiintati printr-o caseta de tip "alert" care e culoarea aleasa. Iar daca nu am selectat nimic , sa fim instiintati de acest lucru, tot printr-un mesaj de tip "alert" : "nu ai selectat nimic".

Cum realizam acestea?

Pasul 1: Atribuim unei variabile "k" valoarea initiala "0". (asadar pentru inceput k= "0", adica noi nu am selectat nimic );
Pasul 2: Folosim instructiunea "for" :

for (i=0;i<6;i++)

if (lista1[i].selected)

if (k==0)

alert ("nu ai selectat nimic");

Explicatii:

"i" este un indice care arata pozitia elementului selectat. Astfel:

"i= 0" arata ca nu s-a selectat nimic

" i<6" - arata care e numarul maxim de elemente din lista (deci valoarea maxima pana la care varia "i")

" i++" - arata ca valoarea lui "i" creste cu o unitate fata de valoarea precedenta (incrementare)

daca dam valori lui "i", ni se afiseaza valoarea functiei care are i=1, sau cu 2.3.4.5.sau 6.
Daca k==0, adica k este egal cu valoarea initiala, inseamna ca nu s-a selectat nimic, si atunci apare mesajul: nu ai selectat nimic".

Exemplul de mai sus scris in notepad.

<html>

<head>

<title>

</title>

function culori(lista1)

if (k==0)

alert('nu ai selectat nimic');

</script>

</head>

<body>

<form>

<option value='Albastru'>albastru</option>

<option value='Verde'>verde</option>

<option value='orange'>orange</option>

</select><br>

</form>

</body> </html>

lista multipla - exemplu pentru utilizarea instructiunii "for".

Exercitiul anterior dar cu instructiuni pentru lista multipla:

<html>

<head>

<title>

</title>

function culori(s)

</script>

</head>

<body>

<form>

<option value='Albastru'>albastru</option>

<option value='Verde'>verde</option>

<option value='Orange'>orange</option>

</select><br>

</form>

</body>

</html>

APLICATIE: Formular de cumparare de masini:

Intr-un fisier nou vrem sa cream un formular in care sa avem :

o caseta text pentru introducerea numelui (t1- a carei valoare sa fie t1.value)

o caseta text pentru introducerea prenumelui (t2- cu valoarea t2.value)

o lista deschisa, cu 6 optiuni, din care 3 sa fie vizibile (numita "marca")

o lista cu buotoane radio numita "culoare": sa avem 4 butoane radio, fiecare avand ca valoare (value) numele unei culori; grupul butoanelor radio sa fie numit "r".

o lista cu optiuni suplimentare (checkbox-uri) : c1,c2,c3,c4

un buton de comanda : ok

in buton de tip reset.

Vreau sa mi se afiseze un mesaj:

"D-l a ales masina (marca) , culoarea( .), cu optiunile (..)".

Daca nu a ales , sa mi se afiseze:

"D-l nu a ales marca, culoarea, optiunile".

Rezolvare :

<html>

<head>

<title>

</title>

<STYLE>

select

#s1

input

#b1

#b2

</STYLE>

function masina(c1,c2,c3,c4,s,r,t1,t2)

</script>

</head>

<form>

<h1>

NUME <input type='text' name='t1'>

<br>

PRENUME<input type='text' name='t2'></center><br><br><br>

MARCA:

<option value='ferrari' id='s1'>FERRARI</option>

<option value='Dacia'>DACIA</option>

<option value='dacia logan'>DACIA LOGAN</option>

<option value='mercedes'>MERCEDES</option>

<option value ='toyota'>TOYOTA</option>

</select><br><br><br><br>

CULOAREA:

<BR>

verde<input type='radio' name='r' value='verde'><br>

galben<input type='radio' name='r' value='galben'><br>

maro<input type='radio' name='r' value='maro'><br>

gri<input type='radio' name='r' value='gri'><br><br><br>

OPTIUNI SUPLIMENTARE:

</form>

</body>

</html>

OBIECTE PROPRII JAVA SCRIPT

In limbajul java script sunt multe obiecte predefinite, acestea dispun de proprietati si metode specifice, care se pot folosi direct.

In exemple pot fi folosite obiectele "window" si "document", impreuna cu metodele lor.

obiectul window:

= obiectul window corespunde ferestei curente din browser si cu ajutorul lui se pot afla/ modifica, proprietatie ferestrei. Exista si posibilitatea de a deschide ferestre noi.

Asadar obiectul window permite lucrul cu ferestre. Deschide ferestre noi si inchide ferestrele.

Un obiect are o serie de functii. Metodele (functiile obictului window sunt:

metoda "open" : deschide o fereastra noua;
metoda "close" : inchide fereastra;
metoda "focus": adduce fereastra in prim plan;
metoda "blur" : trimite fereastra in spatele celorlalte ferestre deschise.

Metodele acestea se apeleaza prin operatorul "."

a. functia "open" (deschide) (window.open)

Schema:

nume fereastra = window.open ("p1","p2", "p3")

window.open = arata numele ferestrei care se deschide.
In prima pereche de ghilimele, numita de noi "p1 " = vom scrie numele fisierului care trebuie sa se incarce in aceasta fereastra, cu tot cu extensie, sau numele sitului cu tot cu http.

Daca perechea de ghilimele ramane goala (fara numele fisierului) , fara spatii in pagina, se incarca pagina "about blanck" (pagina alba)

In a doua pereche de ghilimele, numite de noi "p2" = se scrie locatia : fereastra se incarca intr-o fereastra noua (_blank) sau (_top) sau (_self) nume frame. De obicei se lucreaza cu balnk sau self.
In a treia pereche de ghilimele ("p3") presupune o serie de proprietati pentru fereastra. :

left =nr.pixeli

top = la fel

"left" si "top" pozitioneaza fereastra, unde anume sa se deschida pe ecran.

- "width" si "height" -da dimensiunile ferestrei.

- menubar = yes/no (pune bara de meniu)

- toolbar = yes/no (pune bara de butoane: cu back, forward)

- scollbars =yes/no (imi pune bara de derulare)

- resizable = permite redimensionarea ferestrei

Exemplu:

Cream un fisier nou cu 4 butoane de comanda; la "value" scriem: "deschide", "inchide", "afiseaza", "ascunde".

Functia f1 - apelata la onclick la primul buton

<html>

<head>

<title>

</title>

<style>

input

</style>

function f1()

function f2()

function f3()

function f4()

function f5()

</script>

</head>

<form>

</form>

</body>

</html>

b. functia "close" (de inchidere a ferestrei) inchide un document care a fost deschis prin metoda "open" .

Schema:

In exercitiul anterior am folosit instructiunea de inchidere a unor ferestre:

function f2 ()

function f3()

c. functia "ascunde" (blur)

= ascunde fereastra in spatele ferestrei curente (face fereastra inactiva).

nume fereastra.blur ()

(vezi exemplul de mai sus)

d. functia "focus" aduce fereastra in prim plan

nume fereastra.focus ()

(vezi exemplul de mai sus)

Exemplu:

Facem o lista noua care sa cuprinda 3 elemente: google, ex.1 si poza. Cream o functie, functia meniu (s) care , daca s-a selectat primul element din lista sa deschida o fereastra (in care sa se ajunga la google); daca s-a selectat al doilea lement al listei, sa se deschida o alta fereastra; daca s-a selectat ultimul element al listei, sa se deschida alta fereastra.

Functia create se apeleaza pe tagul select, onclick =meniu (s).

Exemplul nostru in notepad (ferestre in java script):

<html>

<head>

<title>

</title>

<style>

select

</style>

function meniu(s)

</script>

<form>

<option value='GOOGLE'>google</option>

<option value='TRANDAFIR'> trandafir</OPTION>

</select>

</form>

</body>

</html>

obiectul "document"

Acest obiect se refera la continutul unei ferestre dintr-un browser.

Metodele obiectului document :

2.1) document.write- permite scrierea pe suprafata unei functii;

document.write (".mesaj.") sau

nume fereastra.document.write (".mesaj.")

Observatii:

daca e vorba de fereastra curenta avem doar atat:

document. write ("..mesaj.")

daca e vorba de alta fereastra decat cea curenta scrierea se face astfel : nume fereastra.document.write (" textul pe care-l scriem") - si atunci efectul este asupra suprafetei (ferestrei) deschise.

document.title schimba titlul ferestrei curente sau al altei ferestre.

document.bgColor ="nume sau cod culoare" schimba fundalul paginii curente sau al unei alte pagini

document.fgColor=" nume de culoare" schimba culoarea textului implicit

Exemplu:

Un fisier cu un buton de comanda pe care scriem "apasa aici" , pentru care vom crea o functie, function test () care ne va deschide un document cu toate proprietatile de mai sus.

Exemplul nostru in notepad

<html>

<head>

<title>

</title>

<style>

form

input

</style>

function test()

</script>

<form>

</form>

</body>

</html>

Observatie: Formatarile pentru un document write:

doc.write ("<font size= '5'[28]>..</font><br>.<br> <imr src = 'poza1.gif'>"

Figura este preluata din lista cu clip art-uri ale word-ului.

ATENTIE! Limbajul Java scipt este "case-senzitive" adica trebuie sa fim atenti la felul in care scriem instructiunile, numele lor - pentru ca daca apelam in <body> o instructiune, si scriem cu litere mari, in loc de litere mici cum am folosit in <script>, nu ni se executa instructiunea.

Pot fi: functii ale sistemului sau functii create de noi

atributul "onclick" poarta denumirea de eveniment.

cand se face clic pe butonul start, va fi executata functia

vezi https://facultate.regielive.ro/cursuri/automatica_calculatoare/javascript_si_world_wide_web-44356.html?in=all&s=javascript

pentru acest tabel vezi si https://facultate.regielive.ro/cursuri/automatica_calculatoare/javascript_si_world_wide_web-44356.html?in=all&s=javascript

pentru tabel vezi https://facultate.regielive.ro/cursuri/automatica_calculatoare/javascript_si_world_wide_web-44356.html?in=all&s=javascript

inserat de pe tastatura: shift+ tasta de langa backspace

a nu se confunda cu operatorul dublu egal (==) despre care am vorbit mai inainte

structura alternativa de tip "if..else" este scrisa tot in head, in interiorul scriptului;

in exemple, folosim textul boldat si markerul verde pentru a evidentia utilizarea functiilor; tot pentru o mai buna evidentiere, folosim backgroundul galben in unele casete cu butoane.

Continuarea numerotarii functiilor din lectia trecuta

"a" este o variabila, egala cu continutul casetei t1.

Folosim functia"parseInt (variabila) pentru ca atunci cand facem adunarea celor 2 variabile, sa nu ni se faca concatenarea celor 2 valori, ci adunare.

Functia test 1 este o alta varianta a functiei test; functia test 1 se defineste in functie de valoarea variabilei "mesaj' care initial are valoarea "0".

Daca mesaj= mesaj +c1.value - adica daca esajul este egal cu mesajul initial (0) + valoarea casetei de validare c1 (verde), atunci mesaj=verde.

Daca mesaj= mesaj+ c2.value (adica galben), mesaj=galben. Daca mesaj = mesajul initial (adica 0), ni se afiseaza mesajul="nu ai bifat nimic".

Titlul se refera la comentarii legate de functii

Vezi https://facultate.regielive.ro/cursuri/automatica_calculatoare/javascript_si_world_wide_web-44356.html?in=all&s=javascript pag.17

https://facultate.regielive.ro/cursuri/automatica_calculatoare/javascript_si_world_wide_web-44356.html?in=all&s=javascript pag.28

pentru observatii vezi: https://facultate.regielive.ro/cursuri/automatica_calculatoare/javascript_si_world_wide_web-44356.html?in=all&s=javascript pag.28

cand atribuim lui k valoarea 1(k=1), aratam ca s-a selectat un element (nu neaparat primul, ci oricare)

vezi https://facultate.regielive.ro/cursuri/calculatoare/webdesign-69744.html?in=all&s=webdesign

https://facultate.regielive.ro/cursuri/calculatoare/webdesign-69744.html?in=all&s=webdesign :

"open (p1,p2,p3) - deschide o fereastra noua.

p1 = adresa URL a unui fisier, care se vrea deschis

p2=numele ferestrei

p3 (optional)= date despre cum arata fereastra."

Numele folosite aici (p1,p2,p3) nu sunt decat variabile, folosite de noi pentru o mai buna intelgere a instructiunii. P1 este asadar numele fisierului care se incarca, p2 = locatia, p3 = proprietati pentru fereastra.

Nume fereastra

https://facultate.regielive.ro/cursuri/calculatoare/webdesign-69744.html?in=all&s=webdesign -pag.83-prezinta un tabel cu proprietati al obiectului "document" si descrierea lor:

proprietate	descriere
alinkColor	Culoarea unui link pe care s-a dat clic
bgColor	Culoarea de fundal
fgColor	Culoarea textului (foreground)
linkColor	Culoarea linkurilor care nu au fost inca vizitate
title	Titlul unui fisier Html, asa cum apare el in tagul <title>
URL	Adresa completa a documentului current
vlinkColor	Culoarea linkurilor care au fost vizitate

Apoi ni se prezinta metode "care stau la dispozitie"obiectului document:

"close()" =inchide un document care a fost deschis cu metoda "open()"

"open()"= deschide un document pentru scriere. Nu se deschide o noua fereastra, ci documentul actual se va suprascrie

"write (s)" = scrie stringul (s) in documentul actual

writeln(s) = analog metodei "write()" , doar ca se trece la linie noua.

Atentie! Intr-un document write, cand vrem sa scriem ceva, cand vrem sa introducem o poza, de exemplu, sau sa dam dimensiunile unui font, nu mai folosim ghilimelele ci

Politica de confidentialitate | Termeni si conditii de utilizare

DISTRIBUIE DOCUMENTUL

Vizualizari: 1522
Importanta:

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Distribuie URL
https://www.scrigroup.com/calculatoare/html/CURSURI-DE-JAVA-SCRIPT14966.php

Adauga cod HTML in site
<a href="https://www.scrigroup.com/calculatoare/html/CURSURI-DE-JAVA-SCRIPT14966.php" target="_blank" title=" - https://www.scrigroup.com/calculatoare/html/CURSURI-DE-JAVA-SCRIPT14966.php">CURSURI DE JAVA SCRIPT</a>