Recommended
More Related Content
Viewers also liked
Viewers also liked (8)
Similar to Lezione 11 - Javascript
Similar to Lezione 11 - Javascript (20)
More from Giuseppe Cramarossa
More from Giuseppe Cramarossa (19)
Lezione 11 - Javascript
- 1. JAVASCRIPT GIUSEPPE CRAMAROSSA ALTERNANZA SCUOLA-LAVORO @ LICEO SCIENTIFICO «G. GALILEI» BITONTO 11 FEBBRAIO 2017
- 2. SOMMARIO Generalità Struttura Convenzioni DOM (Document Object Model) Eventi AJAX Esercizi
- 3. GENERALITÀ Linguaggio lato client È interpretato dal browser web Può essere anche disabilitato dall’utente Gestisce il comportamento degli elementi in una pagina web È case sensitive Può essere aggiunto in una pagina web Inline (tramite il tag <script></script>) Richiamando un file esterno (tramite <script src=‘script.js’></script>) Si può utilizzare qualsiasi editor di testo L’estensione utilizzata è il .js È un linguaggio che supporta la programmazione ad oggetti
- 4. CONVENZIONI I nomi delle classi devono iniziare con la lettera maiuscola I nomi delle funzioni e dei metodi devono iniziare con la lettera minuscola In una pagina web, lo script viene inserito generalmente nel tag <head> della pagina Viene permesso comunque di inserire il tag <script> nel corpo della pagina
- 5. DOM (DOCUMENT OBJECT MODEL) Ogni pagina web è composta da vari elementi organizzati in maniera gerarchica Vengono creati una serie di relazioni genitori/figli I figli di un genitore sono tra loro fratelli Questi elementi diventano oggetti Javascript, e vengono definiti nodi Javascript ha un nodo speciale, chiamato document, che rappresenta la pagina stessa. Alcuni esempi per accedere agli elementi della pagina sono: document.getElementById(‘idelemento’) permette di accedere all’oggetto contrassegnato dall’ id «idelemento» document.getElementsByClassName(‘nomeClasse’) permette di accedere all’oggetto contrassegnato dalla classe «nomeClasse»
- 6. EVENTI Gestisce il comportamento degli elementi presenti in una pagina web Alcuni eventi gestibili Load Lanciato ad esempio quando la pagina ha finito il caricamento Click Lanciato quando si clicca su un elemento Mouseover Lanciato quando si passa il mouse su un elemento Mouseout Lanciato quando il puntatore del mouse esce dall’area di un elemento
- 7. AJAX Permette di inserire dinamicamente dei contenuti in una pagina senza dover ricaricarla Usata in tutte quelle applicazioni che richiedono aggiornamenti in real time Messaggistica istantanea Giochi online Risultati di ricerca … Molte librerie semplificano l’uso di AJAX Jquery Metodo ajax
- 8. ESERCIZIO 1 var p = document.getElementById('p'); p.onclick = function() { alert("Click sul paragrafo"); } p.onmouseout = function() { p.innerHTML = "onmouseout"; } p.onmouseover = function() { p.innerHTML = "onmouseover"; } <!doctype html> <html> <head> </head> <body> <p id="p" style="border:1px solid #f00">Passa il mouse sul paragrafo</p> <script type="text/javascript" src="Esercizio2.js"> </script> </body> </html>
- 9. ESERCIZIO 2 window.onload = function() { alert("Ciao"); } window.onbeforeunload = function() { return ""; } <!doctype html> <html> <head> <script type="text/javascript" src="Esercizio1.js"></script> </head> <body> </body> </html>
- 10. ESERCIZI Creare una pagina con vari paragrafi e utilizzare il metodo getElementsByTagName Provare ad utilizzare il metodo setTimeout Provare ad utilizzare il metodo setInterval Qual è la differenza tra setTimeout e setInterval?