Razvoj spletnih aplikacij

JavaScript

Operatorji

Operatorji v JavaScriptu nam omogočajo primerjanje vrednosti. JavaScript ima __ operatorjev.

Aritmetični operatorji

Uporabi se jih za vršenje računskih / aritmetičnih operacij na vrednostih oz. spremenljivkah.

Dodelitveni operatorji

Uporabi se jih za dodelit spremenljivkam vrednost. Če za primer vzamemo x = 10 in y = 15 nam spodnja tabela razloži uporabo teh operatorjev.

Operatorji nizov

Operator x in operator += se lahko tudi uporabi za združevanje nizov.

Primerjalni operatorji

Če definiramo x = 5 spodnja tabela prikazuje operatorje:

Logični operatorji

Za primer vzamemo x = 6 in y = 3.

Obstaja še operatorjev, kot so bitni operatorji, typeof operatorji, delete operator…

Selektorji

Štirje osnovni selektorji, ki nam vrnejo HTML elemente so getElementById, getElementsByClassName, querySelector in querySelectorAll. So metode na document elementu, zato jih pokličemo tako: document.querySelector('a');

getElementById()

Sprejme String ki je id od elementa ki ga želimo najti.

document.getElementById('ime'); // vrne: element z id="ime"

getElementsByClassName()

Sprejme String ki je razred oz class od elementov, ki jih želimo najti. Vrne nam HTMLCollection objekt, ki je tabeli (array) podobna zbirka HTML elementov. Naprimer prvi element v HTMLCollection objektu lahko dostopamo enako kot v tabeli (array).

document.getElementsByClassName('gumb'); // vrne: HTMLCollection elementov s class="gumb"

querySelector()

Sprejme String ki je kakeršenkoli CSS selektor, vrne prvi element ki ustreza temu selektorju.

document.querySelector('ul li a.navlink');
// vrne prvi linke s class="navlink" ki so v li elementu, ki je v ul elementu

querySelectorAll()

Sprejme String ki je kakeršenkoli CSS selektor, vrne vse elemente ki ustrezajo temu selektorju.

document.querySelectorAll('ul li a.navlink');
// vrne vse linke s class="navlink" ki so v li elementu, ki je v ul elementu

Metode na nizu (String)

Na začetku definiramo niz, na kateremu potem kličemo metode in spodaj prikaženo rezultat. V vsakem primeru je uporabljen začetni string, nikoli ni uporabljen rezultat katere druge metode. Metoda console log, ki je uporabljena v spodnjih primerih samo zapiše kar je znotraj oklepajev v konzolo. V brskalniku jo lahko najdemo s klikom na gumb F12 in potem kliknemo na zavihek console.

var niz = "Ne se hojsat!";

length

To je lastnost niza, kjer je shranjena dolžina tega niza.

console.log( niz.length ); // rezultat: 13

English documentation

charAt()

Vrne črko ki je na n-1 mestu. To zato ker se kot v večini drugih programskih jezikih šteti začne od 0.

console.log( niz.charAt(1) ); // rezultat: "e"

English documentation

indexOf()

Vrne nam število ki nam pove na katerem mestu v nizu je črka (v tem primeru) c. S tem da nam ta metoda vrne mesto kjer se ta znak prvič pojavi. Enak znak se lahko pojavi večkrat kot tudi v spodnjem primeru, vendar nam bo vrnilo samo mesto prvega. V primeru da se znak ne nahaja v tem nizu nam metoda vrne -1.

console.log( niz.indexOf("e") ); // rezultat: 1

Ta metoda lahko sprejme še en argument, ki ji pove kje naj začne iskat. Torej če damo v drugi argument npr. število 2 bo nam vrnila index od lokacije kjer se prvič pojavi ta znak od tretjega znaka naprej.

console.log( niz.indexOf("e", 2) ); // rezultat: 4

English documentation

toUpperCase()

To je metoda, ki pretvori vse znake v nizu v velike črke če obstajajo.

console.log( niz.toUpperCase() ); // rezultat: "NE SE HOJSAT!"

toLowerCase()

To je metoda, ki pretvori vse znake v nizu v majhne črke če obstajajo.

console.log( niz.toLowerCase() ); // rezultat: "ne se hojsat!"

replace()

Je metoda, ki vrne enak niz kot tisti na katerem je bil klican, s tem da je beseda oz kombinacija znakov w1 zamenjana s kombinacijo znakov w2. Zamenja kjerkoli se pojavi ta kombinacija ne samo prvi pojav.

console.log( niz.replace("hojsat", "guncat") ); // rezultat: "ne se guncat!"

slice()

Slice vrne “izvleček” oz. določen del niza brez spreminjanja originalnega niza. Sprejme št. kjer začne “rezati” in lahko damo tudi drugo število ki pove kje konča rezat. V primeru da damo samo eno število bo vrnilo niz od začetnega znaka do konca niza.

console.log( niz.slice(1) ); // rezultat: "e se hojsat!"

console.log( niz.slice(1,5) ); // rezultat: "e se"

substring()

Zelo podobno metodi slice. Podrobne razlike so razložene tukaj. V zgornjih primerih bi substring deloval enako kot slice.

substr()

Metoda substr se od metode substring razlikuje v tem da substring sprejme do 2 argumenta - start in stop position, substr pa strt in length.

console.log( niz.substring(4,8) ); // rezultat: "e ho"
console.log( niz.substr(4,8) );    // rezultat: "e hojsat"

Drugi argument metode substr je koliko znakov po začetnem naj vzame, od substring pa na katerem znaku naj se ustavi.

Vaje s nizi (stringi)

Napiši kodo ki iz imena (“ime priimek”) ne glede na to kako je napisano spremeni da so velike začetnice, druge črke pa male. To naj deluje tudi če ima nekdo srednje ime in ali 2 priimka (torej do 4 imena).

Vsak problem ima miljon rešitev, tukaj je pa demonstrirana samo ena in to je rešitev z metodo forEach() in split().

var ime = "JAneZ vajkaRD VaLVasoR";

var deliImena = ime.split(" ");

deliImena.forEach(function(del, index){
  deliImena[index] = del.charAt(0).toUpperCase() + del.substring(1).toLowerCase();
});

console.log( deliImena.join(" ") ); // rezultat: "Janez Vajkard Valvasor"

Metoda forEach() ni podprta v vseh verzijah brskalnikov - naprimer internet explorer je ne podpira razen v tazadnji verziji. Podobno rešitev se da naredit s tem da namesto forEach() uporabimo zanko for. Razlika je v vrstici kode ali dveh.

If stavek

If stavek uporabljamo za definirat kodo, ki se izvrši v primeru da je določen pogoj true. If else se uporabi za preverit nov pogoj, v primeru da je prejšnji false. Else se uporabi za primer, da so vsi predhodnji pogoji in if / if else stavki false.

const g = document.querySelector('#gender-input').value;

if ( g == 0 ) {
  console.log("It's a boy!");
} else if ( g == 1) {
  console.log("It's a girl!");
} else {
  console.log("It's an Apache helicopter!"");
}

V zgornjem primeru se najprej preveri, če je vrednost inputa 0. V primeru da je to res se izvrši koda definirana v if. V primeru da je prvi pogoj false torej input ni 0 se preveri ali je vrednost 1. V primeru da je se izvrši koda definirana v else if. Če sta pa oba pogoja false se izvrši kode definirana v else.

Najprej se preveri if. If else se preveri SAMO če je predhodnji pogoj false. Else se pa izvrši SAMO v primeru da so vsi prejšnji pogoji false.

Obstaja krajša verzija if stavka:

pogoj ? koda_ce_je_true : koda_ce_je_false

Primer realne uporabe:

arr.length > 0 ? console.log('Array has items') : console.log('Array is empty');

Metoda addEventListener()

Metodo addEventListener() lahko pokličemo na kateremukoli html elementu. Sprejme dogodek katerega želimo spremljati, funkcijo ki se izvrši po temu dogodku in useCapture (več o tem kasneje). Ta metoda potem doda elementu event handler za določen dogodek (brez da prekine druge), kot je naprimer click, keydown, resize, focus, blur… Elementu lahko dodamo več event handlerjev za določen dogodek. Event handler je funkcija, ki se bo izvršila ko se zgodi določen dogodek.

V spodnjem primeru dodamo elementu z idjem warning funkcijo, ki nam bo sporočila da smo žrtev virusa, v primeru da kliknemo na ta element.

document.querySelector('#warning').addEventListener('click', function(){
  window.alert('POZOR! STE ŽRTEV VIRUSA');
})

Nu nujno da definiramo funkcijo ki jo želimo izvršiti znotraj parametra - uporabimo lahko tudi zunaj definirano funkcijo.

document.querySelector('#warning').addEventListener('click', alertUser)

POZOR! v JavaScriptu funkcije, ki so dodane v parameter neke druge funkcije ne smejo imeti () na koncu saj se v tem primeru izvršijo takoj ko brskalnik prebere to vrstico kode.

POVEZAVE

• seznam vseh eventov in kdaj so sproženi
• dokumentacija metode addEventListener()
• razlaga tretjega parametra (useCapture) in tega koncepta

useCapture

Kot zanimivost in če bo komu gdaj rablo si lahko pogledaste useCapture (drugi parameter addEventListener funkcije). Na kratko povedano odloča o vrsnemu redu izvrševanja event handlerjev.

Mozilla MDN dokumentacija, vprašanje na StackOverflow.

ŠE ZA DODAT

event listener za keypress - razlika med keyCode, charCode in which

Misc functions / methods

• click
• value (bol property)
• innerHTML

PHP

XAMPP

Povezava z bazo

finally

SQL (Structured Query Language)

DDL (Data Definiton Language)

CREATE ustvari tabelo ali bazo

CREATE TABLE tabela (podatki o tabeli); /* ustvari tabelo z imenom tabela */
CREATE DATABASE baza;                   /* ustvari bazo z imenom baza */

DROP izbriše tabelo ali bazo

DROP TABLE tabela;   /* izbriše tabelo */
DROP DATABASE  baza; /* izbriše bazo */

ALTER doda, odstrani ali spremeni stolpec (atribut) v tabeli

/* Doda stolpec naslov tabeli tabela */
ALTER TABLE tabela ADD naslov VARCHAR(255); 
/* Izbriše stolpec (atribut) email tabeli tabela */
ALTER TABLE tabela DROP COLUMN email; 
/* Doda tuj ključ */
ALTER TABLE tabela ADD FOREIGN KEY (group_id) REFERENCES group(id); 
/* Odstrani stolpec (atribut) email iz tabele user */
ALTER TABLE tabela DROP COLUMN email; 
/* Spremeni podatkovni tip datum_rojstva v year */
ALTER TABLE tabela ALTER COLUMN datum_rojstva year; 

DML (Data Manipulation Language)

SELECT izbere in izpiše izbrane podatke

/* Izbere vse podatke iz tabele user */
SELECT * FROM user; 
/* Izbere ime in priimek v vrstici z id vrednosti 1 */
SELECT ime, priimek FROM user WHERE id=1; 

INSERT

/* Katere vrednosti bodo vnešene v katero tabelo */
INSERT INTO user (ime, priimek, datum_rojstva, opis) 
VALUES ('Janez', 'Novak', '1991-01-27', 'Dolg opis ...'); /* Vrednosti za vnos */

UPDATE posodobi podatke v vrstici

/* England is my city */
UPDATE users SET email='user@mail.com', city='England';

DELETE izbriše vrstice (zapise) v tabeli

/* Izbriše vrstico ki ima UserID = 1 */
DELETE FROM users WHERE UserID=32634;
/* Izbriše vse zapise v tabeli, brez da zbriše tabelo, indexi se ohranijo */
DELETE FROM users;

Podatkovni tipi

INT     /* Števila */
CHAR    /* Znaki lahko definiraš dolžino tipo CHAR(8) */
VARCHAR /* Kratke besede */
DATE    /* Datum v obliki YYYY-MM-DD */
TEXT    /* Besedilo */

Primeri uporabe

Ustvarjanje tabele

CREATE TABLE uporabnik (
    id INT AUTO_INCREMENT PRIMARY KEY,
    ime VARCHAR(255),
    priimek VARCHAR(255),
    datum_rojstva DATE,
    id_skupine INT,
    
    FOREIGN KEY (id_skupine) REFERENCES skupina(id)
);

Izbira iz več povezanih tabel z zdužitvijo

SELECT ime, priimek FROM zaposleni
INNER JOIN delo_na_projektu ON zaposleni.id = delo_na_projektu.id_r
WHERE delo = "DBA";

Sortiranje izpisanih podatkov

SELECT * FROM users WHERE city='Koper' ORDER BY age ASC; /* Ali DESC */