Limbajul Java-Script


    JavaScript este unul din cele mai populare limbaje de programare "client side", pentru crearea paginilor WEB. Este un limbaj de tip "interpretor" fiind recunoscut de majoritarea browser-elor, cum ar fi: Internet Explorer, Firefox, Opera etc. A fost dezvoltat de Sun Microsystems fiind asemanator cu C , C++
Elemente de programare in limbajul Java Script

    Ce se poate face cu JavaScript ?

  • Scrierea testelor si instructiunilor HTML utilizand JavaScript

        Cu ajutorul limbajului JavaScript, se pot insera texte dinamice in pagini WEB. Aceste texte pot fi afisate direct sau se pot genera linii de instructiuni HTML care la randul lor vor fi afisate.

        Urmatorul program afiseaza "Hello World!"

    Hello World!


        Urmatorul program afiseaza "Hello World!" dar generand cod HTML care va fi afisat ca atare.

    "Hello World!"


  • Utilizarea variabilelor

         - In JavaScript se pot defini si utiliza variabile de diverse tipuri.
         - Se folosesc trei cuvinte cheie principale pentru a defini variabilele în JavaScript:
        Urmatorul program defineste si utilizeaza variabile

    Universitatea:UMFST - "Emil Palade"
    Facultatea:Inginerie
    Sectia: AIA
    Anul: 4

    Data: Thu May 22 2025 01:09:50 GMT+0000 (Coordinated Universal Time)


        Urmatorul program defineste si utilizeaza variabile pentru a afisa data, ora, etc


    Afisarea datei si timpului

    Astazi este:Thu May 22 2025 01:09:50 GMT+0000 (Coordinated Universal Time)
    Anul: 125 Luna: 5 Ziua: 22
    Ora: 1 Minutul: 9 Secunda: 50



  • Operatori utilizati in JS

        Operatori aritmetici
    Operator Descriere Exemple Rezultat pentru y=5
    + Adunare x=y+2 x=7
    - Scadere x=y-2 x=3
    * Inmultire x=y*2 x=10
    / Impartire x=y/2 x=2.5
    % Modulo x=y%2 x=1
    ++ Incrementare x=++y x=6
    -- Decrementare x=--y x=4



        Operatori de asignare
    Operator Exemple Semnificatie Rezultat pentru y=5
    = x=y   x=5
    += x+=y x=x+y x=15
    -= x-=y x=x-y x=5
    *= x*=y x=x*y x=50
    /= x/=y x=x/y x=2
    %= x%=y x=x%y x=0


  • Instructiuni decizionale

        Instructiunea if

        Sintaxa:

    if (conditie)
    {
    cod care va fi executat daca conditia e adevarata
    }
    else
    {
    cod care va fi executat daca conditia e falsa
    }
    


        Urmatorul program citeste ora sistemului pentru a afisa un salut functie de ora sistemului
        Este folosita instructiunea decizionala if else.

    Buna dimineata !


  • Instructiuni de ciclare

        Urmatorul program defineste si utilizeaza variabile numerice
        Se vor fisa valorile de la 1 la 10 utilizand bucla do while

    Script-ul defineste variabila numerica i
    Foloseste variabila i intr-o bucla do while
    Se vor fisa valorile de la 1 la 10
    i=2
    i=3
    i=4
    i=5
    i=6
    i=7
    i=8
    i=9
    i=10

        Vom afisa in continuare cifrele de la 1 la 70 pe 7 linii si 10 coloane

    7 linii si 10 coloane
    1 2 3 4 5 6 7 8 9 10
    11 12 13 14 15 16 17 18 19 20
    21 22 23 24 25 26 27 28 29 30
    31 32 33 34 35 36 37 38 39 40
    41 42 43 44 45 46 47 48 49 50
    51 52 53 54 55 56 57 58 59 60
    61 62 63 64 65 66 67 68 69 70

        Vom genera in continuare un tabel in care vom afisa cifrele de la 1 la 70 pe 7 linii si 10 coloane

    Tabel 7 linii si 10 coloane
    1 2 3 4 5 6 7 8 9 10
    11 12 13 14 15 16 17 18 19 20
    21 22 23 24 25 26 27 28 29 30
    31 32 33 34 35 36 37 38 39 40
    41 42 43 44 45 46 47 48 49 50
    51 52 53 54 55 56 57 58 59 60
    61 62 63 64 65 66 67 68 69 70

        Sa reluam aplicatia pentru desenarea unei table de sah

    Tabla de sah
                                                   
                                                   
                                                   
                                                   
                                                   
                                                   
                                                   
                                                   


  • Tablouri

         Vectori

        Urmatoarea aplicatie initializa un vector de 20 elemente cu valorile 0-19, dupa care se afiseaza elementele vectorului pe ecran.
    Utilizare vectori
    Vectorul cu cele 20 elemente este:

    012345678910111213141516171819



        Sa reprezentam grafic acum consumurile energetice lunare, consumuri pastrate in vectorul consun()
    Consumuri energetice lunare ( maxim 400 Kwh )
    Ianuarie

    340 Kwh
    Februarie

    272 Kwh
    Martie

    330 Kwh
    Aprilie

    250 Kwh
    Mai

    234 Kwh
    Iunie

    342 Kwh
    Iulie

    357 Kwh
    August

    323 Kwh
    Septembrie

    243 Kwh
    Octombrie

    345 Kwh
    Noiembrie

    205 Kwh
    Decembrie

    234 Kwh



         Matrici

        Vom utiliza in continuare matrici pentru a initializa o matrice de 4 X 10 cu valorile 0-40, dupa care sa afisam valorile din matrice pe ecran.
    Utilizare matrici
    Matricea 4 x 10 este:

    0123456789
    10111213141516171819
    20212223242526272829
    30313233343536373839



  • Functii

        Sintaxa unei functii este urmatoarea:

    function munele_functiei(var1,var2,...,varX)
    {
    corpul functiei
    return val_returnata
    }
    


        Sa realizam o aplicatie care utilizeaza o functie pentru calculul patratului unui numar
    Utlizare functii
    Patratul numarului 10 este : 100


        Parametrul "raza" definit in cadrul functiei este un parametru formal deci functia patrat se poate apela avand ca parametru orce variabila
    Utlizare functii
    Patratul numarului 1 este : 1
    Patratul numarului 2 este : 4
    Patratul numarului 3 este : 9
    Patratul numarului 4 este : 16
    Patratul numarului 5 este : 25
    Patratul numarului 6 este : 36
    Patratul numarului 7 este : 49
    Patratul numarului 8 este : 64
    Patratul numarului 9 este : 81


  • Functia sageata

         Functiile sageata folosesc o sintaxa mai scurta.

    Utlizare functii sageata
    7+5=12

         Observatii:
    Utlizare functii sageata
    72=49


        De multe ori functiile sunt apelate cand se declanseaza anumite evenimente cum ar fi:     Vom realiza diverse aplicatii in care se lanseaza functii pe anumite evenimente

    Efectuati mouseover peste acest text !

         - In aplicatia de sus, s-a definit un div cu id-ul:"msj3" si s-a invocat metoda .innerHTML pentru a inscrie continutul acestui div.
         - Aplicatia se scrie mult mai simplu daca se foloseste functia sageata aceasta permitand scrierea unei functii intr-o functie

    Efectuati mouseover peste acest text !
  • Afisare dinamica

        Vom realiza o aplicatie in care apasarea unui buton va lansa executia unei functii care afiseaza un text.
        Textul va fi afisat intr-un element de tip INPUT TYPE="text". Tinand cont ca afisarea textului se face dupa incarcarea paginii, trebuie sa avem o "metoda" cu care sa modificam un text deja afisat pe ecran. Pentru aceasta vom atribui un nume elementului INPUT TYPE="text" pentru a putea invoca metoda prin care sa schimbam atributul value al elementului INPUT TYPE="text".


    Utlizare functii pentru siruri de caractere

        O alta metoda de a realiza dinamica intr-o pagina web este folosirea div-urior.
        Vom defini un div si vom invoca metoda .innerHTML pentru a defini continutul acestui div, realizand astfel o pagina dinamica.


    Utlizarea div-urilor pentru afisare dinamica texte


        Urmatoarea aplicatie foloseste aceeasi functie insa de data aceasta afiseaza mai multe mesaje.
    Utlizare functii pentru siruri de caractere


        Vom folosi acum metoda substr pentru a realiza un text dinamic.
    Utlizare functii pentru siruri de caractere


        Vom adauga in continuare un buton pentru stop.
    Utlizare functii pentru siruri de caractere


        Vom utiliza acum functia descrisa mai sus pentru realizarea unui text dinamic dar declansarea functiei se va face automat la incarcarea unei imagini.
    Utlizare functii pentru siruri de caractere


  • Functii matematice

        Functiile matematice sunt inglobate in modulul "math". Apelarea functiilor matematice se face astfel:
    Functii matematice
    Valorile lui X
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Patratele lui X
    0
    1
    4
    9
    16
    25
    36
    49
    64
    81
    Ariile cercurilor de raza X
    0
    3.14
    12.57
    28.27
    50.27
    78.54
    113.1
    153.94
    201.06
    254.47
    Sinus de X radiani
    0
    0.84
    0.91
    0.14
    -0.76
    -0.96
    -0.28
    0.66
    0.99
    0.41



        Vom utiliza in continuare functiile matematice round si random pentru a afisa consumurile energetice:
        Pentru a genera si afisa repetitiv consumurile, vom defini un div si vom invoca metoda .innerHTML pentru a improspata continutul acestui div, realizand astfel o pagina dinamica.
    Consumuri energetice lunare (maxim 300 Kwh)
    Ianuarie:166
    Februarie:222
    Martie:279
    Aprilie:28
    Mai:234
    Iunie:63
    Iulie:147
    August:173
    Septembrie:209
    Octombrie:34
    Noiembrie:262
    Decembrie:47



        In aplicatia anterioara a trebuit sa definim pentru fiecare luna un nou tabel. Pentru a rezolva aceasta deficienta, vom invoca metoda innerHTML o singura data si nu vom mai fi nevoiti sa definim pentru fiecare luna un nou tabel, e suficient sa deschidem un nou rand al tabelului initial

    Consumuri energetice lunare (maxim 300 Kwh)
    Ianuarie:255
    Februarie:177
    Martie:63
    Aprilie:60
    Mai:120
    Iunie:204
    Iulie:254
    August:210
    Septembrie:106
    Octombrie:260
    Noiembrie:88
    Decembrie:145