Embed Size (px)
Citation preview
JAVASCRIPTGIUSEPPE CRAMAROSSAALTERNANZA SCUOLA-LAVORO @ LICEO SCIENTIFICO «G. GALILEI» BITONTO11 FEBBRAIO 2017
SOMMARIO
Generalità Struttura Convenzioni DOM (Document Object Model) Eventi AJAXEsercizi
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
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 paginaViene permesso comunque di inserire il tag
<script> nel corpo della pagina
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»
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
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
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>
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>
ESERCIZI
Creare una pagina con vari paragrafi e utilizzare il metodo getElementsByTagName
Provare ad utilizzare il metodo setTimeoutProvare ad utilizzare il metodo setIntervalQual è la differenza tra setTimeout e
setInterval?
