Seminarul de fațӑ ȋși propune familiarizarea studentului cu limbajul de programare JavaScript, prin introducerea urmӑtoarelor noțiuni:

• Variabile
  • Variabile numerice
  • Variabile de tip string
• Structuri de date
  • Liste
  • Dicționare
• Operatori
  • Operatorii ”&&” și “||”
  • Operatorul “in” vs Operatorul “of”
  • Operatorul ”!”
• Structuri repetitive
  • For
  • While
  • Break și continue
• Funcții
• Obiecte

Se va utiliza ȋn cadrul seminarului un interpretor de Javascript (NodeJS) disponibil online:

• NodeJs : Se selecteaza din dropbox-ul de jos Node
• NodeJS repl.it

Sau se poate utiliza direct bash-ul, dupӑ cum este prezentat mai jos:

$ node
> console.log("Bine ați venit la seminarul de Introducere ȋn Informaticӑ!")

Alte resurse online de studiu:

• Installing Node.js via package manager
• https://nodejs.org/en/docs/
• https://www.codecademy.com/learn/javascript

JavaScript, ca si Python este tot un limbaj in care variabilele sunt tastate dinamic. Toate variabilele se incadreaza in următoarele primitive:

• Boolean
• Null
• Undefined
• Number
• String

sau compuse Object.

Array si Function sunt sub tipuri ale Object.

De retinut ca in Javascript functiile sunt tot un tip de date. Ex:

var afiseaza = function(){ console.log(“Hello World”) }

Dar se poate folosi și o scriere similară cu cea din C

function afiseaza(){ console.log(“Hello World”) }

In Javascript toate numerele sunt stocate ca numere cu virgula mobila sub denumirea de tip Number.

// Sintaxa aferentӑ declarӑrii unui numӑr ȋntreg
myInt = 7
 
// Sintaxa aferentӑ declarӑrii unui numӑr real
myFloat = 7.1
 
//ambele numere for fi stocate ca float dar putem verifica daca un numar este intreg
//cu Number.isInteger(variabila)
 
if( Number.isInteger(myInt) ) console.log( "this number is an integer" )

String-urile se pot defini fie utilizȃnd apostrofuri, fie ghilimele ca si in python.

myString = 'hello'
myString = "hello"

• Operații simple pot fi executate atȃt cu int-uri, cȃt și cu string-uri.
• Amestecarea operatorilor ȋntre numere și cuvinte este valida. În urma operațiilor rezultă un string.

suma = a  + b

hello = "hello"
world = "world"
message = hello + " " + world

# Asta va funcționa desi in python nu functioneaza!
 
one = 1
two = 2
three = 3
hello = "hello"
 
console.log (one + two + three + hello);

Array-urile / Listele pot conține orice tip de variabilӑ/-e, iar numӑrul elementelor pe care ȋl conțin este variabil și nerestrictiv. Listele pot fi de asemenea iterate ȋntr-o manierӑ foarte simplӑ, dupӑ cum este prezentat ȋn exemplul de mai jos:

# Se declarӑ lista.
 
mylist = []
 
# Se insereazӑ elementele ȋn listӑ.
 
mylist.push(1)
mylist.push(2)
mylist.push(3)
 
# Se afișeazӑ element cu element conținutul listei.
 
console.log( mylist[0] )
console.log( mylist[1] )
console.log( mylist[2] )
 
# Outputul va arӑta cam așa:
1
2
3

// Se afișeazӑ element cu element conținutul listei, utilizȃnd o structurӑ repetitivӑ de tip "for".
 
for (value of mylist):
    console.log(value)
 
// Outputul va arӑta cam așa:
1
2
3
 
// sau direct console.log(mylist)
//
 
// de asemenea in JavaScript array-urile mai au si o metoda forEach care primeste o functie ce poate fi apelata pentru fiecare element
 
mylist.forEach( function(value,index ){
   //in javascript putem crea functii anonime atunci cand este nevoie
   //nu e nevoie sa ne definim in prealabil functia, o putem crea pe moment unde este necesara
   console.log("mylist["+index+"] e "+value);
} );

• array.length → Proprietate ce contine lungimea listei.
• array.push( element[,el2,el3…] ) → Insereazӑ unul sau mai multe elemente la finalul listei. Returneaza noua lungime a listei.
• array.pop( element ) → Returneaza primul element din array si il sterge din array.
• array.shift() → Returneaza primul element din array si il sterge.
• array.unshift( element[,el2,el3…] ) → Insereazӑ elementul la inceputul listei. Returneaza noua lungime a listei.
• array1.concat( array2 ) → Concateneaza al doilea array la primul.
• array.every( function ) → Testeaza array-ul cu o functie ce returneaza true sau false si retunreaza true daca toate valorile trec testul
• array.filter( function ) → Testeaza array-ul cu o functie ce returneaza true sau false si un array ce contine daor valorile pentru care functia a returnat true
• array.find( function ) → Returneaza prima valoare din array pentru care function returneaza true
• array.findIndex( function ) → Returneaza indexul primei valoari din array pentru care function returneaza true
• array.forEach ( function ) → apleaza o functie pentru fiecare element dintr-un array
• array.includes( element ) → Returneaza true daca elementul se regaseste in lista.
• array.indexOf( element[,startFrom] ) → Returneaza pozitia primei aparitii a elementului in lista sau -1 daca acesta nu a fost gasit. Optional se poate preciza de al ce pozitie sa se inceapa cautarea.
• array.lastIndexOf( element[,startFrom] ) → Returneaza pozitia ultimei aparitii a elementului in lista sau -1 daca acesta nu a fost gasit.
• array.join( [separator] ) → Returuneaza toate elementele array-ului concatenate intr-n string. Se paote da un separator, in lipsa se va folosii virgula
• array.map( function ) → Returneaza un array cu rezultatele apelarii functiei date peste array-ul initial
• array.reverse() → Modifica array-ul inversand ordinea elementelor
• array.sort( [function] ) → sorteaza array-ul . Optional primeste o functie de comparare pentru a stii cum sa il sorteze
• array.slice( start[,stop] ) → returneaza un now array ce contine elementele de la start pana la sfarsit sau pana la stop. De notat ca se pot da si valori negative ce se numara de la dreapta la stanga, de exemplu -1 este ultimul element si array.slice(-2) va returna un array cu ultimile 2 elemente din array-ul initial
• array.splice(start[,numarElementeSterse,el1,el2…]) → splice sterge din array elementele de la start pana la final sau optional numarul dat de elemente ca al doilea argument al functiei. In plus daca se mai specifica si niste elemente acestea vor fi inserate acolo unde au fost sterse cele anterioare.

Un obiect de tip Map din Javascript ese similar unui dicționar din python unde orice cheie este un sir de caractereMap. Singura diferenta e ca in JavaScript si functiile sunt tipuri de variabila asa ca acest dictionar poate sa retina si metode. In plus Map nu are cheile restricionate la siruri de caractere, chei poti fi orice tip de variabila inclusiv obiecte.

Cum se declarӑ un dicționar?

optionalRepartizare = new Map()
 
optionalRepartizare.set("Ana","Grafica inginereasca")

Cum se parcurg elementele unui Map?

Aici exista mai multe metode dar probabil cea mai usoara ramane metoda forEach

optionalRepartizare.forEach(function(value,key){
  console.log(key,value);
});
//ca si in cazul array-urile aceasta metoda primeste o functie ce va fi apelata pentru fiecare obiect

Cum se eliminӑ valori dintr-un Map?

optionalRepartizare.delete("Ana")

• myMap.size → proprietate ce contine dimeansiunea dictionarului
• myMap.clear() → sterge toate elementele din dictionar
• myMap.forEach( function ) → apeleaza functia primita pentru fiecare pereche din dictionar
• myMap.get( cuvant ) → returneaza definita cuvantului
• myMap.has( cuvant ) → verifica daca exista cuvantul in dictionar
• myMap.set( cuvant, definitie ) → defineste cuvantul in dictionar

nume = "Madalina"
varsta = 34
 
if ( nume == "Madalina" && varsta == 34 )
    console.log( "Numele tau este Madalina si ai 34 de ani." )
 
if ( nume == "Madalina" || varsta == 34 )
    console.log( "Numele tau este Madalina si ai 34 de ani." )
 

Operatorul ”!” sau operatorul de negare inverseazӑ valoarea de adevӑr a expresiei sau a variabilei.

variabila = true
 
// Secvența urmӑtoare va afișa valoarea de adevӑr "False"
console.log ( !variabila );
 

Ȋn general, declarațiile sunt executate secvențial: prima declarație dintr-o funcție este executatӑ prima, urmatӑ de a doua, și tot așa. Pot exista situații ȋn care este necesarӑ execuția unui bloc de instrucțiuni ȋn repetate rȃnduri. Limbajele de programare oferӑ variate structuri de control ce permit cai pentru execuția unor bucӑți mai complicate de cod.

Buclele permit execuția unor declarații sau unor grupuri de declarații de mai multe ori.

Javascript oferӑ urmӑtoarele tipuri de bucle/structuri repetitive:

Structura repetitivӑ “for” din JavaScript are 3 variante

for(declaratie;conditie;pas) similara cu cea din C

for(valoare of array)

for(index in array) sau proprietate in obiect

listaDeNume = ["Ana", "Maria", "Ioana", "Irina", "Andreea", "Cristina"]
 
for (var i =0; i<listaDeNume.length; i++){
  console.log(listaDeNume[i]);
}
 
//sau
 
for (var nume of listaDeNume){
  console.log(nume);
}
 
//sau
 
for (var i in listaDeNume){
  console.log(listaDeNume[i]);
}

Structura repetitivӑ “while” se executӑ atȃt timp cȃt condiția indicatӑ este respectatӑ. Este similarӑ unei declarații de tip “if”, ȋnsӑ bucla “while” se va opri ȋn momentul ȋn care condiția enunțatӑ nu va mai fi ȋndeplinitӑ. Cu alte cuvinte, se va verifica “cȃt timp” este valabilӑ condiția respectivӑ, și nu “dacӑ” ea este validӑ. De exemplu, dorim sӑ afișӑm cifrele de la 0 la 9.

count = 0
 
while(count < 10){
    console.log(count)
    count++
}

Declarația “break” este utilizatӑ pentru a ieși dintr-o structurӑ repetitivӑ; este o alternativӑ la condiția de ieșire. De exemplu, dorim sӑ afișӑm cifrele de la 0 la 9.

count = 0
 
while(true){
    console.log(count)
    count = count + 1
    if(count > 10)
        break
}

Declarația “continue” este utilizatӑ pentru a sӑri peste un bloc de instrucțiuni. De exemplu, dorim sa afișӑm toate numerele pare din intervalul [0, 20].

number = 0
 
while(number < 21){
    if( number % 2 == 1 )
        continue
    console.log(number)
}

Ce sunt funcțiile?

Funcțiile sunt o metodӑ convenabilӑ de partiționare a codului ȋn blocuri organizate ce faciliteazӑ gestionarea acestuia. De asemenea in JavaScript functiile sub obiecte si implicit pot fi stocate in variabile ca orice at timp de data..

Cum se declarӑ funcțiile?

Ȋn Javascript , funcțiile sunt definite folosind cuvȃntul cheie function argumente si codul functiei similar cu C/C++. De exemplu:

function functiaMea(){
    console.log("Bine ati veni la cursul de introducere in informatica!")
}
 
//sau
var functiaMea = function(){
    console.log("Bine ati veni la cursul de introducere in informatica!")
}

De asemenea, o funcție poate primi argumente (variabile trimise ca parametru de cӑtre “apelant” funcției). Mai mult, funcțiile pot returna rezultate. Exemplul de mai jos reprezintӑ o funcție ce primește ca parametri douӑ numere și returneazӑ suma acestora.

var sumaNumerelor = function( a, b){
    return a + b
}

Functii anonime

Spre deosebire de alte limbaje in JavaScript o functie poate fi definita doar acolo unde este nevoie in caz ca nu mai trebuie refolosita.

var suma = function(a,b){return a+b;}(1,2)
// in aceasta situatie se va genera functia si va fi apelata pe loc pentru valorile a=1 b=2

Acest lucru este util in JavaScript cand unul din argumentele unei functii/metode asteapta alta functie. De exemplu o filtrare peste un arary

var ar = [2,9,11,14]
 
console.log( 
  ar.filter(function(value){
    if( value % 2 == 0) return true;
    else return false;
  })
);
 
// acest cod paseaza o functie care returneaza true sau false in functie de paritatea argumentului
// astfel array ar va fi filtrat si se va returna un array ce contine daor elementele pare din ar

Din moment ce functia este un tip de variabila optiunile sunt nelmitate. De exemplu

// o functie care primeste un numar si verifica paritatea
var estePar = function( numar ){
  if(numar%2 == 0) return true;
  return false;
}
 
// o functie care primeste un nume de functie si un argument
// si apeleaza functia cu acel argument
var apeleazaFunctie = function( functeDataDeMine, argument ){
  return functeDataDeMine(argument)
}
 
 
// parcurge cu un for numerele de la 0 la 4
// si apeleaza functia este par pentru fiecare i
for(var i = 0; i<5; i++)
if( apeleazaFunctie( estePar, i) ){ console.log(i + " este par ") }
else { console.log(i + " este impar ") }

Un obiect din Javascript ese similar unui dicționar din python unde orice cheie este un sir de caractere. Singura diferenta e ca in JavaScript si functiile sunt tipuri de variabila asa ca acest dictionar poate sa retina si metode

Cum se declarӑ un dicționar?

optionalRepartizare = {}
 
optionalRepartizare ["Ana"] = "Grafica inginereasca"
//sau
optionalRepartizare.Andrei = "Introducere in informatica"
//dar si 
optionalRepartizare.salut = function(){ console.log("salut) }

De asemenea:

optionalRepartizare = {
    "Ana" : "Grafica inginereasca",
    "Andrei" : "Introducere in informatica",
    "salut" : function(){ console.log("salut) }
}
 
// functia se apealeaza prin
optionalRepartizare.salut()

Cum se parcurg elementele unui obiect?

Obiectele pot fi iterate cu ajutorul structurei “for .. in” ce returneaza indexii din obiect

optionalRepartizare = {
    "Ana" : "Grafica inginereasca",
    "Andrei" : "Introducere in informatica",
    "Radu" : "Grafica inginereasca",
    "Serban" : "Mecanica", 
    "Roxana" : "Introducere in informatica"
 
}
 
for (var numeStudent in optionalRepartizare )
   console.log( numeStudent, optionalRepartizare[numeStudent])

Cum se eliminӑ valori dintr-un obiect?

delete optionalRepartizare["Ana"]

Din moment ce aceastea nu sunt Dictionare propriu zise ci obiecte numarul de functii si metode predefinite este limitat

• Object.keys( obiect ) → retunreaza un array cu cheile din obiect
• Object.keys( obiect ) → retunreaza un array cu cheile din obiect
• Object.is( ob1, ob2 ) → similar operatorului is din python
• object.hasOwnProperty(prop) → verifica daca cheia “prop” este definita

1. [15p] Creați cȃte o variabilӑ de tipul: number, boolean și string, dupӑ cum urmeazӑ:
   • Variabila de tip int va reține valoarea 20.
   • Variabila de tip boolean.
   • Variabila de tip string reține valoarea “javascript”.
2. [15p] Utilizȃnd funcția typeof, determinați tipul variabilelor definite la exercițiul anterior.
3. [20p] Creați o listӑ cu numele fetelor din grupa voastrӑ (numele nu trebuie sӑ fie distincte). Respectȃnd ordinea cerințelor rezolvați urmӑtoarele cerințe:
   • Sortați lista de nume.
   • Utilizȃnd o listă auxiliară, determinați numӑrul de apariții al fiecӑrui nume.
   • Determinați numele care apare de cele mai multe ori ȋn lista inițialӑ.
   • Determinați numele care apare de cele mai puține ori ȋn lista inițialӑ.
   • Revenind la lista inițialӑ de nume, inversați ordinea elementelor.
4. [30p] Creați cu ajutorul unui Map o bazӑ de date ȋn care sӑ rețineți numerele de telefon ale colegilor de grupӑ. Parcurgeți-l și afișați toate persoanele al căror număr are un anumit prefix (e.g., 0735).
5. [20p] Scrieți o secvențӑ de cod care sӑ afișeze ȋn consolӑ toate numerele pare divizibile cu 7 din intervalul [0, 3463]. Hint: utilizați for. Ajustați codul astfel ȋncȃt la apariția primului multiplu al lui 833, algoritmul sӑ se opreascӑ.