Web Pre-Employment Training

JAVASCRIPT

Copyright 2017 © Fortech. All rights reserved.

 Ce este Javascript ?

Limbaj de programare:

• High-level: are un puternic nivel de abstractizare de la procesele interne ale sistemului pe

care rulează.(ex. managementul memoriei)

• Weakly typed: ex: nu are nevoie de definiția explicita a tipurilor de variabile. O variabila
poate fi orice tip, și se poate oricând schimba în alt tip de date pe durata vieții ei.

• Object-based: conține obiecte predefinite în limbaj, cum ar fi variabila globală window. Pe

de altă parte nu suportă moștenirea sau polimorfismul tipic limbajelor Object-oriented.

Copyright 2017 © Fortech. All rights reserved.

 La ce foloseste Javascript ?

• Browser: este utilizat la crearea de website-uri și aplicații web cu conținut dinamic care
oferă un nivel ridicat de interactivitate pentru utilizatori.

• Server-Side: JavaScript poate fi folosit și pe partea de server (nodejs)

• Mobile (Android / iOS): Aplicatii hibride, care se construiesc similar cu cele pentru browser
(html, css, js) dar se pot împacheta și distribui ca aplicații de mobil (google play sau apple
app store).

Copyright 2017 © Fortech. All rights reserved.

 Javascript în browser

• Poate manipula in mod programatic conținutul html si css al paginii.

• Poate intercepta event-uri din partea utilizatorilor cum ar fi mouse clicks, touch, drag, drop,
apăsarea unor taste, etc. iar ca urmare poate executa diferite actiuni și/sau modificari
asupra conținutului web.

• Poate comunica în mod dinamic, asincron cu serverul cu ajutorul protocoalelor http/https

(ajax), websockets, etc.

Copyright 2017 © Fortech. All rights reserved.

 1. Moduri de declarare.

• Inline – Întregul cod javascript este introdus in evenimentul atașat elementului html (buton,
checkbox, etc.)

Tasks:
1. creăm o noua pagina javascript.html cu structura de bază deja cunoscută
2. creăm un event de click pe un buton care sa afiseze un mesaj de tip alert.

Copyright 2017 © Fortech. All rights reserved.

 2. Moduri de declarare.

• Internal – Codul javascript este introdus în pagina html în interiorul tagului

<script type=“text/javascript”></script>

Tasks:
1. creăm un event de alert în momentul incărcării paginii.
2. ne folosim de getElementById pentru a modifica textul unui element al
paginii atunci cand aceasta se incarca.
3. folosim chrome console pentru a observa eventualele erori.
4. folosim comentarii pentru a ne documenta codul.

Copyright 2017 © Fortech. All rights reserved.

 3. Moduri de declarare.

• External file – Codul javascript (cu extensia .js) este încărcat din afara fișierului html și
executat în interiorul acestuia. Pentru asta tot tagul script este folosit. Ex. <script
src=“fisier.js”></script>

Tasks:
1. modificam codul existent pentru ca schimbarea de text sa se produca la apasarea
unui buton
2. creăm un fisier myJsCode.js pe care il incarcam in pagina noastra javascript.html
3. mutam continutul javascript intr-un fisier extern (separam complet logica javascript
de html)
4. folosim eventul/functia window.onload pentru a executa codul incarcat la
finalizarea incarcarii paginii html

Copyright 2017 © Fortech. All rights reserved.

 4. Modificare si adaugare de HTML

• Conținutul addițional poate fi introdus prin adăugarea (concatenarea) de text la cel deja
existent.

Tasks:
1. adaugam un nou paragraf si un buton care spre deosebire de cel vechi adaugă text
la textul existent
2. adaugam inca un buton care sa adauge text la inceputul textului.
3. adaugare de html.

Copyright 2017 © Fortech. All rights reserved.

 5. Modificarea stilurilor

• La fel ca și continutul HTML, continutul CSS poate fi modificat in mod programatic cu

ajutorul javascript.

Tasks:
1. modificarea culorilor si marimii fontului la apăsarea unui buton cu ajutorul
proprietății style
2. ascundem un element html cu ajutorul proprietății display
3. creăm trei cercuri colorate care vor disparea in momentul in care dam click pe ele.

Copyright 2017 © Fortech. All rights reserved.

 6. Variabilele Javascript

• Variabilele in javascript sunt folosite pentru a retine diferite valori pentru a putea fi
refolosite.
• Aceste variabile pot lua diferite forme in functie de tipul valorii asignate (string , number,
object, etc.)
Tasks:
1. creăm doua variabile, una contine un numar iar cealalta un text, si le aratam in
browser cu ajutorul functiei de alert
2. creăm un text input si un buton lânga el care să aiba textul “Change Text”. La
apasarea butonului, textul introdus va trebui aratat intr-un mesaj de tip alert
3. modificam funcționalitatea creată în așa fel încât atunci când apăsăm butonul,
textul din input să se afișeze intr-un element de tip paragraf <p>

Copyright 2017 © Fortech. All rights reserved.

 7. Javascript Arrays

• Array-urile sunt un tip de date care ne permit stocarea de valori multiple.

Tasks:
1. creăm un array gol [].
2. adăugăm elemente noi în array, de tip string.
3. afișăm valoarea unui element din array intr-un mesaj de tip alert.
4. afișăm întregul array în consolă cu ajutorul functiei console.log()
5. afișăm lungimea array-ului cu ajutorul proprietatii .length
6. inițializăm un array cu valori predefinite.
7. adaugarea de elemente la sfârșitul array-ului cu ajutorul functiei push()
8. stergerea elementelor din array cu ajutorul functiei splice()
9. adaugarea unui element nou la o anumita pozitie cu ajutorul functiei splice()

Copyright 2017 © Fortech. All rights reserved.

 8. Javascript IF statements

• IF statements sunt folosite la executia de logica condiționala (if something then do

something otherwise do something else).
Tasks:
1. creăm un if statement care sa ia o decizie in functie de o variabila X declarata în
prealabil.
2. adaugam un else statement care va executa logica conditionala daca conditia din if
nu este valabila (true)
3. creăm un mic login page, care sa conțină un input de tip text(sau password) si un
buton la apăsarea căruia textul introdus va fi cumparat cu parola tinută într-o variabila
din pagina noastră. Dacă variabila este corectă atunci vom semnala asta cu un mesaj
de tip alert.
4. creăm un mic joc în care utilizatorul trebuie sa ghicească un număr intre 0 și 5
(folosim Math.random() pentru generarea numarului aleatoriu si Math.floor pentru a
lua valoarea intreaga).

Copyright 2017 © Fortech. All rights reserved.

 9. Javascript loops

• Loops sunt folosite la executarea repetată a unui bloc de cod.

Tasks:
1. creăm un FOR loop care sa repete executia unui bloc de cod de 5 ori. Folosim un
alert sa aratam fiecare valoare pe care o ia iteratorul (i)
2. inversam ordinea valorilor pe care o ia iteratorul i
3. creăm un array de elemente prin care vom itera cu ajutorul lui FOR și vom
afișa fiecare valoare cu ajutorul unui paragraf.
4. modificam codul existent sa foloseasca un WHILE loop in locul lui FOR

Copyright 2017 © Fortech. All rights reserved.

 10. Javascript Functions

• Functiile sunt folosite pentru a crea blocuri de cod refolosibile.

Tasks:
1. definim o functie simpla care sa afiseze un alert, apoi executam aceasta functie.
2. definim o functie cu parametrii care face media aritmetica dintre 2 numere si o
returneaza.
3. definim o variabila locala si una globala pentru a observa scope-ul acestora.

Copyright 2017 © Fortech. All rights reserved.

 Color Guessing Game

• Creați un joc în care trebuie sa ghicim culoarea unui HEX color code (continuare de la cursul
html).

Copyright 2017 © Fortech. All rights reserved.