Javascript skripte se pišu unutar <script> tag-a:
<script> ... </script>
Ili ako želimo koristiti vanjsku skriptu, dovoljno je script tag-u pridružiti atribut s nazivom skripte:
<script src="skripta.js"></script>
Mogu se pisati unutar head ili body. Obično se postavljaju na dno body-a da bi se učitavale nakon što se učitaju svi elementi i stilovi stranice.
Primjer:
<!DOCYTPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!--na klik gumba pozivamo funkciju pero iz skripte-->
<button type="button" onclick="pero();">Klikni me</button>
<div id="test">Test</div>
<script>
//ovo je Javascript komentar
//funkcija je niz instrukcija unutar programa ili skripte
//function je ključna riječ koja objašnjava da se radi o funkciji, pero je ime funkcije
function pero() {//zagrada { označava početak funkcije
//document.getElementById je dohvaćanje elementa preko id-a.
//Za dohvaćeni element ćemo koristiti varijablu x u ostatku funkcije
//varijabla je simboličko ime koje ima vrijednost koja se može mijenjati
var x = document.getElementById("test");
//našem elementu x mijenjamo HTML preko svojstva innerHTML
x.innerHTML = "Dobar dan!";
} //zagrada } označava kraj funkcije
</script>
</body>
</html>
onclick se može pridružiti i drugim elementima, poput odlomka ili div-a
Preko innerHTML možemo dodati i HTML kod, npr.
x.innerHTML = "<h1>Dobar</h1><p>dan</p>";
Elementu možemo mijenjati i druga svojstva, poput CSS stilova, npr.:
x.style.color = "#ff0000";
Prilikom izrade Javascript skripte, veliku pomoć predstavlja console koji je ugrađen u web preglednik. Možete ga aktivirati na više načina, poput klika na F12 i odabirom console ili odabirom developer tools kroz izbornik i odabirom console. Unutar console će se ispisati sve greške unutar skripte. Ako želite ispisati neki svoj zapis unutar console, samo unutar skripte navedete console.log, npr.:
console.log(5+3);
Možete ispisati i vrijednost nekog elementa, npr.:
console.log(x);
Ili neko svojstvo elementa, npr.:
console.log(x.style.color);
Zadatak
Napraviti HTML dokument koji sadrži:
Napraviti external Javascript dokument koji sadrži:
Da bi uključili Javascript moramo navesti:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Ovaj kod uključuje JQuery verziju 1.12.2 sa stranice googleapis.com
Najvažnije svojstvo JQuery-a su seleketori. Umjesto da za svaki element koristimo document.getElementById moežmo pisati samo "$". Dohvat svih odlomaka:
$("p")
Dohvat elementa koji ima id "test"
$("#test")
Dohvat elementa koji ima klasu "test"
$(".test")
JQuery selektori imaju još mnogo opcija, ali ovdje smo naveli najvažnije.
JQuery nudi funkciju "html" koja radi kao Javascript-ov innerHTML:
$("#test").html("Dobar dan");
I funkciju "css" za izmjenu stila elementa:
$("#test").css("color", "#00ff00");
Funkcija "onclick" postaje "click":
$("#test").click(...);
Jedna dosta korisna funkcija JQuery-a je "document.ready" koja se poziva kada se učita cijela stranica. Obično se sve JQuery funkcije postavljaju unutar funkcije document.ready:
$(document).ready(function(){
...
});
Primjer
<!DOCYTPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="test1">Dobar dan</div>
<div id="test2">Klikni me i obojat ću se u zeleno</div>
<!--uključujemo JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
//document ready je JQuery funkcija koja se izvodi nakon što se svi elementi i stilovi stranice učitaju
//obično se piše kao $(document).ready(function(){
//a zatvara se sa "});"
$(document).ready(function(){
//preko JQuery selektora $() dohvaćamo element čiji je id test2
//dohvaćenom elementu dodajemo funkciju koja se izvodi na klik mišem (kao što smo prije koristili onclick)
$("#test2").click(function(){
//preko JQuery selektora $() dohvaćamo "this"
//"this" se odnosi na element na kojem se funkcija izvodi, tj. element čiji je id test2)
//dohvaćenom elementu mijenjamo boju (kao što smo prije koristili x.style.color)
$(this).css("color", "#00ff00");
});
});
</script>
</body>
</html>
Zadatak
Izmjenite skriptu iz prijašnjeg zadatka da koristi JQuery
Kada se započinje pisati neki php dokument, uvijek se na početak dokumenta stavlja otvoreni php tag, a na kraju zatvoreni:
<?php ... ?>
Ukoliko se neki php kod želi umetnuti unutar HTML dokumenta, tada se samo na mjestu gdje se želi umetnuti otvara i zatvara tag:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Dobar dan</p>
<?php
...
?>
<p>Doviđenja</p>
</body>
</html>
Varijable u php-u se pišu sa prefiksom $ (dolar) i ne definira im se tip (je li broj, slovo, tekst itd.):
<?php $varijabla1 = "Dobar dan"; $varijabla2 = 123; ?>
Ukoliko se želi nešto prikazati na ekranu, koristi se varijabla "echo".
<?php $varijabla1 = "Dobar dan"; $varijabla2 = 123; echo "Tekst: $varijabla1.<br/> Broj $varijabla2." ?>
Pošto svaka modernija stranica manje-više sadrži kontakt formu, odlučili smo pokazati što je i kako PHP radi upravo na jednoj jednostavnijoj kontakt formi. Za izradu kontakt forme će poslužiti forma sa prošle radionice. Prilikom izrade forme koja će nešto odrađivati, potrebno je u "form" tag dodati atribute "method" i "action", a u svaki form element (input, textarea, button) dodati "name" atribut.
<form role="form" method="post" action="sendEmail.php">
<!--Grupa za ime i prezime-->
<div class="form-group">
<label for="nameInput">Ime i prezime</label>
<input type="text" class="form-control" id="nameInput" placeholder="npr. Ivan Horvat" name="ime">
</div>
<!--Grupa za email-->
<div class="form-group">
<label for="emailInput">Email</label>
<input type="email" class="form-control" id="emailInput" placeholder="npr. ivan@horvat.hr" name="email">
</div>
<!--Grupa za proizvoljni tekst-->
<div class="form-group">
<label for="textInput">Poruka</label>
<textarea class="form-control" rows="3" id="textInput" placeholder="Napišite poruku..." name="poruka"></textarea>
</div>
<!--Tipka za slanje gore upisanih podataka-->
<button type="submit" class="btn btn-primary btn-right" name="submit">Pošalji</button>
</form>
Atribut "method" služi kako bi odredili tajnost podataka, dok atribut "action" određuje koji dokument (skripta) će se otvoriti (izvršiti) nakon što korisnik klikne na tipku za slanje. U gornjem primjeru je za "method" navedena vrijednost "post", a za action "sendEmail.php" što znači da šaljemo kriptirane podatke dokumentu naziva sendEmail.php koji će nešto raditi s tim podacima. Postoji i vrijednost "get" za method atribut. Njega se koristi kada želimo da svatko može iščitati poslane podatke (kroz adresnu traku).
Kada smo napravili kontakt formu unutar HTML dokumenta, potrebno je napraviti PHP dokument koji će dohvatiti sve podatke i proslijediti ih korisniku na email. Jedan jednostavan primjer je naveden ispod:
<?php
if (isset($_POST["submit"])) {
$name = $_POST['ime'];
$email = $_POST['email'];
$message = $_POST['poruka'];
$from = 'Futura';
$to = 'email@email.com';
$subject = 'Nova poruka od Futura.com.hr';
$body = "Od: $name\n E-Mail: $email\n Poruka:\n $message";
mail($to, $subject, $body, $from);
}
?>
Objašnjenje:
Ovo je samo primjer najjednostavnije forme koja nema nikakvu sigurnosnu provjeru pa je kao takvu nikada nemojte niti koristiti. Prilikom izrade kontakt forme ili bilo koje komunikacije sa serverom, sigurnost mora biti na prvom mjestu!
Zadatak
Napraviti jedan HTML dokument koji sadrži:
Napraviti jedan PHP dokument koji će se pozvati iz kontakt forme metodom "post", a poslat će email jednom od predavača.