Klijentske web tehnologije

Vežbe | 8. termin

Sadržaj

Objekti

Postoji više načina da se kreira objekat.

Object literal

Kreiranje objekta u letu, bez definisanja njegove klase.

let student = {
    fname: "Pera", 
    lname: "Peric",
    index: "17/2017",
    print: function() {
        console.log(this.fname + ' ' + this.lname + ' ' + this.index)
    }
}

Class syntax

Definisanje klase.

class Student {
    constructor(fname, lname, index) {
        this.fname = fname
        this.lname = lname
        this.index = index
    }
    
    print() {
        console.log(this.fname + ' ' + this.lname + ' ' + this.index)
    }
}

Kreiranje instance (objekta) klase Student:

let student = new Student("Pera", "Peric", "17/2017")

Function constructor

Definisanje funkcije koja ce igrati ulogu konstruktora.

function Student(fname, lname, index) {
    this.fname = fname
    this.lname = lname
    this.index = index

    this.print = function() {
        console.log(this.fname + ' ' + this.lname + ' ' + this.index)
    }
}

Kreiranje objekta korišćenjem funkcije Student i ključne reči new:

let student = new Student("Pera", "Peric", "17/2017")

Korišćenje objekta

Atributima objekta možemo pristupiti pomoću tačke (obj.attr) ili sintakse rečnika (obj["attr"]). Možemo im čitati ili dodeliti vrednost.

student.fname = "Mika"
student["lname"] = "Mikic"

console.log(student.index)

student.print()
student.studYear = 2
student["department"] = "Informatika"

Nizovi

Kreiranje novog niza:

// Prazan niz
let a1 = new Array()
let a2 = []

// Popunjen niz | Vrednosti različitih tipova se mogu naći u istom nizu
a1 = new Array(1, 2, "Tri", 4.0)
a2 = [1, 2, "Tri", 4.0]

Bitne funkcije za rad sa nizovima:

/* U komentarima "=>" označava povradnu vrednost izraza */

// Dodavanje elementa na kraj niza
let array = []
array.push('Prvi')           // => 1
array.push(2, 'Treci', 'IV') // => 4
console.log(array)           // ['Prvi', 2, 'Treci', 'IV']

// Izbacivanje poslednjeg elementa
array.pop()        // => 'IV'
console.log(array) // ['Prvi', 2, 'Treci']

// Spajanje elemenata niza u string
let text = array.join(' -> ')
console.log(text)  // 'Prvi -> 2 -> Treci'

// Sortiranje niza
array = [2, 1, 3]
let niz = array.sort(function(a, b) { return a - b }) // => referenca na isti niz (koji je sad izmenjen/sortiran)
console.log(array)                                    // [1, 2, 3]
console.log(niz)                                      // [1, 2, 3]
console.log(array == niz)                             // true (isti su po referenci)

Akrobacije sa nizovima koje takođe mogu biti od koristi:

/* U komentarima "=>" označava povratnu vrednost izraza */

// Dodavanje elementa na početak niza
let array = [1, 2, 3]
array.unshift('C')       // => 4
array.unshift('A', 'B')  // => 6
console.log(array)       // ['A', 'B', 'C', 1, 2, 3]

// Izbacivanje elemenata sa određenog indeksa u nizu
// splice prima dva parametra, prvi: index početnog elementa za izbacivanje; drugi: broj elemenata za izbaciti
array = ['A', 'B', 'C', 'D']
let removed = array.splice(1, 2) // => ['B', 'C'] (od indeksa 1 izbaci naredna 2 elementa)
console.log(array)               // ['A', 'D']
console.log(removed)             // ['B', 'C']

// Izbacivanje duplikata iz niza korišćenjem konverzije u Set
array = [1, 2, 2, 3, 4, 4, 5]
let unique = Array(Set(array))  // => [1, 2, 3, 4, 5]
console.log(unique)             // [1, 2, 3, 4, 5]

Stringovi

Kreiranje stringova:

// String literali
let s1 = 'String literal'
let s2 = "String literal"
let s3 = `String literal` // template literal

Spajanje stringova:

let index = 17
let year = 2017

let s1 = "Pera Peric " + index + "/" + year
let s2 = `Pera Peric ${index}/${year}`

Bitnije funkcije za rad sa stringovima:

let text = "Lorem ipsum dolor sit amet consectetur adipisicing elit"

// split
let words = text.split(" ")
console.log(words) // [ "Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipisicing", "elit" ]

// indexOf
let index = text.indexOf("ipsum")
console.log(index) // 6 (prvi karakter se nalazi na index-u 6)

// substr
let sub = text.substr(4, 9) // from: 4, length: 9
console.log(sub)            // "m ipsum d"

// replace
let newText = text.replace("dolor", "DOLAR$$$")
console.log(newText) // "Lorem ipsum DOLAR$$$ sit amet consectetur adipisicing elit"

// toUpperCase
let upper = text.toUpperCase()
console.log(upper) // "LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISICING ELIT"

Funkcije

Funkcijama se, kao i objektima, može pristupiti

// Deklaracija imenovane funkcija
function countUp(x) {
    return x + 1
}

// Izraz koji kreira anonimnu funkcija i smešta referencu na tu funkciju u promenlivu
let countDown = function(x) {
    return x - 1
}

let u = countUp
let d = countDown

u(7) // => 8
d(7) // => 6

Skraćena sintaksa za pisanje izraza anonimne funkcije (arrow function):

// Anonimna funkcija
let add = function(a, b) { return a + b }

// Skraćena sintaksa
add = (a, b) => a + b // Telo funkcije sa jednim redom, koji predstavlja return izraz
add(7, 10)            // vraća: 17

// Skraćena sintaksa, sa više naredbi u telu funkcije
add = (a, b) => {
    let x = a + b
    print("rezultat=" + x)
    return x
}
add(7, 10) // vraća: 17, štampa: "rezultat=17"

Napomena: Arrow funkcije nemaju dostupnu ključnu reč this.

Datumi

Kreiranje Date objekta:

let today = new Date()
let date1 = new Date('2/29/2000')
let date2 = new Date(2000, 1, 29) // monthIndex: 0-11 (januar 0, februar 1, ...)

Konverzija u string:

// to string
console.log( today.toLocaleDateString() ) // "4/20/2023"
console.log( today.toLocaleString() )     // "4/20/2023, 1:28:25 AM"
console.log( today.toUTCString() )        // "Wed, 19 Apr 2023 23:28:25 GMT"

Izmena datuma:

// set day in month
let date = new Date(2023, 0, 25) // 25. januar
date.setDate(date.getDate() + 5) // 30. januar
console.log(date.getDate())      // "Mon Jan 30 2023 00:00:00 GMT+0100 (Central European Standard Time)"
date.setDate(date.getDate() + 2) // 1. februar
console.log(date.getDate())      // "Wed Feb 01 2023 00:00:00 GMT+0100 (Central European Standard Time)"