Download to read offline
More Related Content
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 ObjectModel) Eventi AJAX Esercizi
- 3. GENERALITÀ Linguaggio latoclient È 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 nomidelle 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 OBJECTMODEL) 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 ilcomportamento 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 diinserire 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 paginacon 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?