Sveučilište u Zagrebu PMF Matematički odsjek Mreže računala Vježbe 10 Zvonimir Bujanović Luka Grubišić Vinko Petričević

Слични документи
Ekonomski fakultet u Osijeku Kolegij: Elektroničko i mobilno poslovanje Nositelj: prof. dr. sc. Branimir Dukić Zadaci za vježbe 7. JavaScript - zadaci

Računarski praktikum I - Vježbe 01 - Uvod

Ekonomski fakultet u Osijeku Kolegij: Elektroničko i mobilno poslovanje Nositelj: prof. dr. sc. Branimir Dukić Nastavni materijali za vježbe 3. HTML o

Web programiranje i primjene - Osnovni pojmovi WEB tehnologije korišteni u kolegiju

Slide 1

CPHP_19

SELECT statement basic form

Microsoft PowerPoint - MR - Vjezbe - 03.ppt [Compatibility Mode]

P R O G R A M I R A N J E Z A I N T E R N E T Lab. vježba 2 PROGRAMIRANJE ZA INTERNET Upute za laboratorijske vježbe (izradio: Marin Bugarić, Frano Re

Microsoft PowerPoint - 08_CSS_4.ppt [Compatibility Mode]

KORISNIČKE UPUTE APLIKACIJA ZA POTPIS DATOTEKA

Računarski praktikum II - Predavanje 02 - HTML forme. Git.

BUG.HR mediakit 2018

eredar Sustav upravljanja prijavama odjelu komunalnog gospodarstva 1 UPUTE ZA KORIŠTENJE SUSTAVA 1. O eredar sustavu eredar je sustav upravljanja prij

Ovaj fajl ima 5 stranica. Prvi i drugi domaći zadatak iz Internet tehnologija, Svi css fajlovi su u folderu css a sve slike su u folderu i

Računarski praktikum I - Vježbe 07 - Podstrukture, const, reference

Boostrap.1.1

JMBAG Ime i Prezime Mreže računala Završni ispit 16. veljače Na kolokviju je dozvoljeno koristiti samo pribor za pisanje i službeni šalabahter.

Microsoft Word - KORISNIČKA UPUTA za pripremu računala za rad s Fina potpisnim modulom_RSV_ doc

Microsoft PowerPoint - 11_JavaScript_1.ppt [Compatibility Mode]

Smjernice za korištenje sustava online prijava Ukoliko imate pristupno korisničko ime i lozinku ili ste navedeno dobili nakon zahtjeva za otvaranje no

Uvod u računarstvo 2+2

PROGRAMIRANJE Program je niz naredbi razumljivih računalu koje rješavaju neki problem. Algoritam je postupak raščlanjivanja problema na jednostavnije

Microsoft PowerPoint - Primer VI - Sadrzaj

SVEUČILIŠTE JOSIPA JURJA STROSSMAYERA U OSIJEKU FAKULTET ELEKTROTEHNIKE, RAČUNARSTVA I INFORMACIJSKIH TEHNOLOGIJA Sveučilišni studij APLIKACIJA ZA DOH

Приручник о полагању матурског испита у образовном профилу Електротехничар информационих технологија - оглед ВЕБ ДИЗАЈН У следећим задацима заокружите

Državna matura iz informatike

Računarski praktikum I - Vježbe 09 - this, static

NAPOMENA: Studenti na ispit donose kod urađenog zadatka

UNION Banka DD Sarajevo Tel.: Dubrovačka br Sarajevo, Bosna i Hercegovina Fax:

Microsoft Word - IWT0906R.doc

Microsoft Word - privitak prijedloga odluke

12.WT-javaScript-Drupal

Slide 1

Sveucilište u Zagrebu

Primenjeno programiranje - vezbe GUI i baze podataka

Tutoring System for Distance Learning of Java Programming Language

WordPress & CSP Polisa Sigurnosti Sadržaja za WordPress Milan Petrović WordCamp Niš

23. siječnja od 13:00 do 14:00 Školsko natjecanje / Osnove informatike Srednje škole RJEŠENJA ZADATAKA S OBJAŠNJENJIMA Sponzori Medijski pokrovi

Uvod u računarstvo 2+2

VEŽBA 5: KLASE I OBJEKTI U C# Cilj ove vežbe je upoznavanje sa osnovama rada sa klasama i objektima u programskom jeziku C#. Pored toga, bide demonstr

Programiranje 1 IEEE prikaz brojeva sažetak Saša Singer web.math.pmf.unizg.hr/~singer PMF Matematički odsjek, Zagreb Prog1 2018, IEEE p

SVEUČILIŠTE U RIJECI TEHNIČKI FAKULTET Preddiplomski sveučilišni studij računarstva Završni rad WEB APLIKACIJA ZA PREZENTACIJU I REZERVACIJE TURISTIČK

Pametno ogledalo

** Osnovni meni

Upute - JOPPD kreiranje obrasca

Elementi praćenja i ocjenjivanja za nastavni predmet Matematika u 4. razredu Elementi praćenja i ocjenjivanja za nastavni predmet Matematika u 4. razr

Електротехнички факултет Универзитета у Београду Катедра за рачунарску технику и информатику ИР3ПИА - Пројекат из предмета Програмирање интернет аплик

Računarski praktikum I - Vježbe 03 - Implementacija strukture string

Опис рада: Овим радом представићемо како спој традиционалне наставе и употреба ИКТ-а утиче на методичку праксу у области географије. Час је реализован

Pojačavači

Tutoring System for Distance Learning of Java Programming Language

Filesonic,Fileserve,Hotfile...premium download pomocu cookiesa

PuTTY CERT.hr-PUBDOC

Programiranje 1 drugi kolokvij, 2. veljače Ime i prezime: JMBAG: Upute: Na kolokviju je dozvoljeno koristiti samo pribor za pisanje i brisanje,

INTERPRETER LOGO NAREDBI Teodor Lozinski Tomislav Višnić Kolegij: Uporaba računala u nastavi, Fizički odsjek, PMF, Sveučilište u Zagrebu, UVOD Z

WAMSTER Prezentacija

Upute za instaliranje WordPressa 1.KORAK Da biste instalirali Wordpress, najprije morate preuzeti najnoviju verziju programa s web stranice WordPressa

Državno natjecanje / Osnove informatike Srednje škole Zadaci U sljedećim pitanjima na odgovore odgovaraš upisivanjem slova koji se nalazi ispred

Uredba o GDPR-u i Politika privatnosti Medical Elit d.o.o. Usklađivanje sa Uredbom o zaštiti privatnih podataka (GDPR) od i naša Politika p

SVEUČILIŠTE U ZADRU Odjel za promet i pomorstvo Primjena računala Vježba 3 Web preglednici Agenda Internet i internet protokoli Klijentsko

Microsoft Word - SYLLABUS -Dinamicki

RAD SA PROGRAMOM

Microsoft Word - SIR Marijana Jelenic docx

УПУТСТВО ЗА КОРИСНИКА Приступ локацији часописа Српски архив за целокупно лекарство добија се преко internet adrese: Након

CARNET Helpdesk - Podrška obrazovnom sustavu e-dnevnik upute za nadzor razrednih knjiga tel: fax: mail:

VMC_upute_MacOS

R u z v e l t o v a 5 5, B e o g r a d, t e l : ( ) , m a i l : c o n t a c p s i t. r s, w w w. p s i t. r s

ggmap

Microsoft Word - TehmedGDPR.docx

Lorem ipsum dolor sit amet lorem ipsum dolor

Microsoft PowerPoint - 04_HTML_5.ppt [Compatibility Mode]

3/20/2018 JavaScript events in detail Događaji u jeziku JavaScript Ako postavimo "click" event listener na element, što se dešava ako kliknemo na dije

Internet

8 2 upiti_izvjesca.indd

Funkcije predavač: Nadežda Jakšić

QlikView Training

Anaconda Eye Rapids HTML5 na stolnim računalima i mobilnim uređajima Vrsta igre: Video slot PVI (povratak vrijednosti igraču): 96,08 % Dragulj poznat

Microsoft PowerPoint - vjezba_03_0809_WWWBR (1) [Compatibility Mode]

Microsoft Word - ZAVRÅ€NI RAD_Marko_Golubicek - Analiza metoda i alata kod izrade responzivnih internetskih stranica.docx

Addiko Bank_Addiko Mobile_Korisnicko uputstvo_version 2

070-ALIP2-udzbenik.indb

Microsoft Word - 6. RAZRED INFORMATIKA.doc

KATALOG ZNANJA IZ INFORMATIKE

Programiranje 2 popravni kolokvij, 15. lipnja Ime i prezime: JMBAG: Upute: Na kolokviju je dozvoljeno koristiti samo pribor za pisanje i brisanj

Електротехнички факултет Универзитета у Београду Катедра за рачунарску технику и информатику ИР3ПИА - Пројекат из предмета Програмирање интернет аплик

INF INFORMATIKA INF.27.HR.R.K1.20 INF D-S INF D-S027.indd :50:41

Slide 1

PowerPoint Template

Sveučilište u Zagrebu Fakultet prometnih znanosti Zavod za inteligentne transportne sustave Katedra za primijenjeno računarstvo Vježba: #7 Kolegij: Ba

3/20/2018 Prije nastavka! "HTML5" vs HTML W3C maintains HTML5: - More stable version of WHATWG's HTML - Usually copies what WHATWG does after the dust

Microsoft Word - Uputstvo za upotrebu studentskih servisa.doc

PHP kod

XHTML 2.0 and HTML 5

Primenjeno programiranje - Vežbe

UVJETI KORIŠTENJA INTERNETSKE STRANICE Korisnik posjetom web stranicama potvrđuje da je pročitao i da u cijelosti prihvaća o

Microsoft Word - Lekcija 11.doc

Microsoft Word - Uputstvo za upotrebu studentskih servisa.doc

Europass CV

Писање и превођење модула

Транскрипт:

Sveučilište u Zagrebu PMF Matematički odsjek Mreže računala Vježbe 10 Zvonimir Bujanović Luka Grubišić Vinko Petričević

JavaScript JavaScript je programski jezik prvenstveno namijenjen za davanje dinamičnosti web-stranicama. Moderna web-stranica = HTML5 + CSS3 + JavaScript. Sintaksom sličan C/C++, objektno orijentiran. U novije vrijeme se koristi i na serverskoj strani web-a (Node.js). Na ovim vježbama ćemo samo demonstrirati mogućnosti JavaScript-a kroz nekoliko primjera. Puno više detalja Računarski prak kum 2. 18.01.2016. Mreže računala - Vježbe 10 2

Što može JavaScript? ubaciti dinamički sadržaj na web stranicu; reagirati na događaje (npr. prelazak miša preko nekog objekta, klik miša, završetak učitavanja stranice,...); čitati i mijenjati sadržaj HTML dokumenta; izvršiti validaciju podatka koje je unio korisnik prije njihovog slanja serveru; razmijenjivati podatke sa serverom bez potrebe ponovnog učitavanja cijele stranice ("Ajax"); kreirati kolačiće (eng. cookies) mehanizam zapisivanja i čitanja podataka na korisnikovom računalu. 18.01.2016. Mreže računala - Vježbe 10 3

(Bonus) Literatura za JavaScript RP2 materijali (autor: Z. Bujanović) http://www.math.hr/nastava/rp2d/ W3Schools JavaScript Tutorial http://www.w3schools.com/js/ Mozilla Developer Network (MDN): https://developer.mozilla.org/en- US/docs/Web/JavaScript/ 18.01.2016. Mreže računala - Vježbe 10 4

Gdje pisati JavaScript kod? Unutar HTML dokumenta, korištenjem elementa script: (bilo unutar <head>, bilo unutar <body>) <body> alert( "Hello world!" ); </body> U zasebnoj vanjskoj datoteci koju povežemo s HTML dokumentom: <script src="program.js"> 18.01.2016. Mreže računala - Vježbe 10 5

Primjer 1: Reakcija na klik Pritiskom na gumb, pet puta se prikaže prozor s pozdravnom porukom. function akcija() { for( var i = 1; i <= 5; ++i ) alert( "Pozdrav po " + i + ". put!" ); <button onclick="akcija();">pritisni me!</button> Moguće su reakcije i na druge događaje: onchange, onmouseover, onkeydown, onload, oninput, itd. 18.01.2016. Mreže računala - Vježbe 10 6

Primjer 2: Ispis Fibonaccijevih brojeva Po učitavanju web-stranice, ispisuje se prvih 100 Fibonaccijevih brojeva. window.onload = function() { var fibo = [0, 1]; for( var i = 2; i < 100; ++i ) { fibo[i] = fibo[i-2] + fibo[i-1]; document.getelementbyid( "par" ).innerhtml += fibo[i] + " "; <p id="par"></p> Jesu li i veliki brojevi izračunati točno? Ne: u JavaScriptu postoji samo double (a ne i int!) 18.01.2016. Mreže računala - Vježbe 10 7

Primjer 3: Zbrajanje Program za zbrajanje brojeva: unosimo brojeve u dva textbox-a, automatski se izračunava zbroj. window.onload = function() { var text1 = document.getelementbyid( "t1" ); var text2 = document.getelementbyid( "t2" ); function izracunaj() { var rez = Number(text1.value) + Number(text2.value); document.getelementbyid( "rezultat" ).innerhtml = rez; text1.oninput = izracunaj; text2.oninput = izracunaj; izracunaj(); <input type="text" id="t1"> + <input type="text" id="t2"> = <span id="rezultat"></span> 18.01.2016. Mreže računala - Vježbe 10 8

Primjer 4: Crtanje Program crta linije klikanjem po "platnu za crtanje" (canvas). window.onload = function() { var c = document.getelementbyid( "platno" ); var x = 0, y = 0; c.onclick = function( event ) { var ctx = c.getcontext("2d"); ctx.strokestyle = "black"; novi_x = event.pagex - c.getboundingclientrect().left; novi_y = event.pagey - c.getboundingclientrect().top; ctx.beginpath(); ctx.moveto( x, y ); ctx.lineto( novi_x, novi_y ); ctx.stroke(); x = novi_x; y = novi_y; <canvas width="500" height="500" id="platno"></canvas> 18.01.2016. Mreže računala - Vježbe 10 9

Primjer 5: Google Maps Program prikazuje Google mapu na zadanim koordinatama. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"> function crtajmapu() { var sir = document.getelementbyid( "sir" ).value; var duz = document.getelementbyid( "duz" ).value; var googlesirinaduljina = new google.maps.latlng( sir, duz ); var mapoptions = { zoom: 16, center: googlesirinaduljina, maptypeid: google.maps.maptypeid.roadmap ; var mapdiv = document.getelementbyid( "mapa" ); map = new google.maps.map( mapdiv, mapoptions ); window.onload = function() { crtajmapu(); Unesi širinu: <input type="text" id="sir" value="45.827" oninput="crtajmapu();" /><br /> Unesi dužinu: <input type="text" id="duz" value="15.986" oninput="crtajmapu();" /><br /> <div id="mapa" style="height: 500px; width: 500px;"></div> 18.01.2016. Mreže računala - Vježbe 10 10

JavaScript JavaScript je osnova modernih web-aplikacija (Gmail, Google Docs,...) koje imaju bogatu interakciju s korisnikom. Postoje brojne biblioteke koje mu proširuju mogućnosti i olakšavaju rad. Za dodatne demonstracije mogućnosti, vidi: https://developer.mozilla.org/en- US/demos/tag/tech:javascript?sort=likes#galler y-list 18.01.2016. Mreže računala - Vježbe 10 11