Javascripting #1

Hacklab Beograd

What is JS?

One of the most popular programming languages. Mostly used to create interactive web applications

Why JS? (Pros)

Pros

Easy to learn, hard to master (No ide, compiler required)

Great community

Demanding market

It's fun

Why not? (Cons)

Wild wild west (!)

Not as performant as other languages (C++,C, Go)

Where to run it

Client: Chrome (V8), Firefox(SpiderMonkey), ...

Server: NodeJs, Io.js, ...

Basics


						// variables
var broj = 5,
    broj2 = 3.14,
    tekst = "Hello",
    prekidac = true,
    radionica = { ime: 'Javascripting', mesto: 'haklab'},
    niz = [1,2,3,4,5];
					
				

Basics


						// if - else
// if(uslov){ izvrsava se ako je uslov ispunjen tj. true}
// ukoliko postoji else grana izvrsava se ako uslov nije ispunjen
// tj. false

var prekidac = true;

if(prekidac){
  console.log("ON");
}else{
  console.log("OFF");
}
				

Basics


						// loops

var niz = [1,2,3,4,5,6];

for(var i=0; i < niz.length; i++){
	console.log(niz[i]);
}

for(var i in niz){
	console.log(niz[i]);
}

niz.forEach(function(item){
	console.log(item);
});

var i=0;
while(i < niz.length){
	console.log(niz[i]);
	i++;
}


				

Basics


// functions

function sum(a,b){
  return a+b;
}

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

DOM


// DOM

document.getElementById('container')
document.getElementsByTagName('html')
document.getElementsByClassName('row')

//OR

//finds first in dom tree with class="row"
document.querySelector('.row')
//finds all elements with id="name"
document.querySelectorAll('#name')

				

DOM


//change body bg color on click
var body = document.querySelector('body');

body.addEventListener('click',function(){
	body.setAttribute('style','background-color: indianred');
});


				

What the heck is event loop?

Callbacks


			// callbacks
function a(){
	console.log('function a executed');
}

function b(){
	console.log('function b executed');
}

a();
b();
		
				

Callbacks #1


// a takes too long to execute
function a(){
	setTimeout(function(){
	console.log('function a executed');
	},2000);
}

function b(){
console.log('function b executed');
}

a();
b();
				
				

Callbacks #2


// pass b to a, and execute when a is done.
function a(nextFunction){
  setTimeout(function(){
    console.log('function a executed');
    nextFunction();
  },2000);
}

function b(){
  console.log('function b executed');
}

a(b);
				
				

Task #1

Napisi funkciju koja prima parametre a i b, racuna njihov zbir i ako je zbir manji od 10 ispisuje "MANJE", a ukoliko je zbir veci od 10 ispisuje "VECE". Ukoliko je zbir jednak 10 ispisuje se "JEDNAKO"

Task #2

Napisati funkciju koja kao ulazne parametre prima niz brojeva i broj N, zatim prolazi kroz niz i ukoliko je element niza manji od 5, dodaje mu broj N, a ukoliko je veci, oduzima.

Task #3

Napraviti formu koja sadrzi 4 input field-a (ime radionice, mesto radionice, datum radionice i opis ) i dugme koje "salje formu". Kada se klikne na dugme, skupljaju se svi podaci iz forme i dodaju se u neki container(div, table...), a forma se zatim brise. Svaki sledeca radionica dodaje se na kraj liste tako da su i prethodno dodate radionice vidljive.

primer