SlideShare a Scribd company logo
1 of 24
Download to read offline
Javascript [1]
Matteo Magni
JavaScript è un linguaggio di scripting
orientato agli oggetti comunemente usato nei
                   siti web.
Programmazione

Per un sacco di gente, il termine "programmazione" evoca visioni
di super-intelligenti nerd concentrati su tastiere, che digitano
parole senza senso quasi incomprensibile per ore. Probabilmente
un po 'di programmazione è così. La programmazione può
sembrare magia complessa che è ben oltre la media mortale. Ma
molti concetti di programmazione non sono difficili da afferrare, e
come linguaggio di programmazione, JavaScript è abbastanza
amichevole per non programmatori.
Client - Server

        Il client effettua una
        Request al server che
        a sua volta risponderà
        con una Response.
        Javascript agisce a
        livello di Client
Browser

    Il browser è un
    software che ha la
    capacità di interpretare
    l'HTML e di
    visualizzarlo in forma di
    ipertesto.
    E' sempre il browser
    che esegue gli script
    Javascript
Javascript

JavaScript è un linguaggio lato client, che significa che funziona
all'interno di un browser web. L'altro tipo di linguaggio di
programmazione web è chiamato linguaggio server-side, esempi di
questi sono PHP,. NET, ASP, ColdFusion, Ruby on Rails, ecc.... I
linguaggi di programmazione lato server, come suggerisce il nome, sono
eseguiti su un server web.
Si occupano di accesso ai database, elaborazione carte di credito, e
l'invio di e-mail in tutto il mondo, ecc.... Il problema con linguaggi lato
server è che richiedono che il browser web invii richieste al web server,
costringendo i visitatori ad aspettare fino a quando arriva una nuova
pagina con le nuove informazioni.
                                                      David Sawyer McFarland
Javascript [2]

Un linguaggio lato-client, invece, può reagire immediatamente e
cambiare ciò che un visitatore vede nel suo browser senza la
necessità di scaricare una nuova pagina. I contenuti possono
apparire o sparire, spostarsi sullo schermo, aggiornarsi
automaticamente in base a come un visitatore interagisce con la
pagina. Questa reattività consente di creare siti web che sembrano
programmi desktop. JavaScript non è l'unica tecnologia lato client
in città. È possibile utilizzare i plug-in per aggiungere intelligenza di
programmazione ad una pagina web. Applet Java, Flash, Silverlight
sono un esempio.
                                                David Sawyer McFarland
Javascript [3]

In verità, JavaScript può anche essere un linguaggio server-side
di programmazione. Ad esempio, il server web node.js
(http://nodejs.org/) utilizza JavaScript come linguaggio server-
side di programmazione per la connessione a un database,
l'accesso al file system del server web, ed eseguire molte altre
attività su un server web .
                                           David Sawyer McFarland
Tecnologie Client Side


         • HTML → contenuto
         • Css →visualizzazione
         • Javascript → interazione
Happy hacking a tutti!




Inutile parlare, lasciamo che sia il codice a farlo.
The Code
https://github.com/ilbonzo/Cypher/tree/master/html
Aggiungere uno script
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>My Web Page</title>
<script type="text/javascript">

</script>
</head>
HTML 5
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>

</script>
</head>
Alert
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
alert('hello world!');
</script>
</head>
File esterno
<!doctype html>           //hello.js
<html>
<head>                    alert('hello
<meta charset="UTF­8">    world!');
<title>My Web 
Page</title>
<script 
src="hello.js"></script
>
</head>
Non sono modalità
             esclusive
<script src="hello.js"></script>
<script >
  alert('Hello world!');
</script>
Path file esterni
              Percorso assoluto
Un percorso assoluto è come un indirizzo
postale, che contiene tutte le informazioni
necessarie al browser web per trovare il file
in tutto il mondo.
Un percorso assoluto include http://, il nome
host e la cartella e il nome del file.
http://sosacroniro.net/js/hello.js
Path file esterni [2]
                 Percorso relativo alla radice
Un percorso root-relative indica dove il file si trova rispetto
alla cartella principale del sito. Un percorso relativo non
include http:// o il nome di dominio. Si inizia con una /
(barra) che indica la cartella principale della home page.
Un modo semplice per creare un percorso relativo alla
cartella è quello di prendere un percorso assoluto e
togliere il http:// e il nome host.

                          /js/hello.js
Path file esterni [3]
       Percorso relativo al documento
Un percorso document-relative specifica il
percorso dalla pagina web al file JavaScript.
Se si dispone di più livelli di cartelle sul tuo
sito, è necessario utilizzare percorsi diversi
per puntare allo stesso file JavaScript.
Inizia senza la /
                  js/hello.js
Scrivere testo
<script>
document.write('<p>Hello world!</p>');
</script>
Troviamo gli errori
• Firefox
    Firebug
    Console javascript
Troviamo gli errori [2]
• Chrome
   Strumenti per
   gli sviluppatori /
   Console
E gli altri?
• Internet Explorer 9
• Safari
• Opera

Anche loro hanno
dei tool per
analizzare javascript
Domande?

               Slide:
http://www.slideshare.net/ilbonzo
               Code:
https://github.com/ilbonzo/Cypher
                mail:
        matteo@magni.me

More Related Content

Viewers also liked

Whymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascriptWhymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascriptFabio Franzini
 
Combustibile solido secondario (CSS)
Combustibile solido secondario (CSS)Combustibile solido secondario (CSS)
Combustibile solido secondario (CSS)Osborne Clarke
 
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)From The Front
 
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascriptcorso web developer - Introduzione a Javascript
corso web developer - Introduzione a JavascriptRiccardo Piccioni
 
Corso base di Tecnologie WEB - Primi passi in javascript
Corso base di Tecnologie WEB - Primi passi in javascriptCorso base di Tecnologie WEB - Primi passi in javascript
Corso base di Tecnologie WEB - Primi passi in javascriptStudiabo
 

Viewers also liked (8)

Css - Appunti
Css - AppuntiCss - Appunti
Css - Appunti
 
Whymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascriptWhymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascript
 
Combustibile solido secondario (CSS)
Combustibile solido secondario (CSS)Combustibile solido secondario (CSS)
Combustibile solido secondario (CSS)
 
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)
 
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascriptcorso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
 
Ueki town
Ueki townUeki town
Ueki town
 
Corso base di Tecnologie WEB - Primi passi in javascript
Corso base di Tecnologie WEB - Primi passi in javascriptCorso base di Tecnologie WEB - Primi passi in javascript
Corso base di Tecnologie WEB - Primi passi in javascript
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 

Similar to Javascript - 1 | WebMaster & WebDesigner

Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Giorgio Carpoca
 
Come funziona la navigazione Web
Come funziona la navigazione WebCome funziona la navigazione Web
Come funziona la navigazione Webextrategy
 
Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Giuseppe Vizzari
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerHtml e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerMatteo Magni
 
Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internetdadahtml
 
Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?Flavius-Florin Harabor
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Matteo Magni
 
5 - Introduzione al Web (2/2)
5 - Introduzione al Web (2/2)5 - Introduzione al Web (2/2)
5 - Introduzione al Web (2/2)Giuseppe Vizzari
 
Link. php [santi caltabiano]
  Link. php [santi caltabiano]  Link. php [santi caltabiano]
Link. php [santi caltabiano]santi caltabiano
 
Introduzione al web (2/2) - 18/19
Introduzione al web (2/2) - 18/19Introduzione al web (2/2) - 18/19
Introduzione al web (2/2) - 18/19Giuseppe Vizzari
 
5 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/185 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/18Giuseppe Vizzari
 
Webdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 OkWebdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 OkMassimo Schiro
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS DevicesAndrea Picchi
 
Matteo Bicocchi - Introducing HTML5
Matteo Bicocchi - Introducing HTML5Matteo Bicocchi - Introducing HTML5
Matteo Bicocchi - Introducing HTML5Pietro Polsinelli
 

Similar to Javascript - 1 | WebMaster & WebDesigner (20)

Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Presentazione Corso - Parte 3
Presentazione Corso - Parte 3
 
Web frameworks
Web frameworksWeb frameworks
Web frameworks
 
Corso Javascript
Corso JavascriptCorso Javascript
Corso Javascript
 
Come funziona la navigazione Web
Come funziona la navigazione WebCome funziona la navigazione Web
Come funziona la navigazione Web
 
Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerHtml e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Html5
Html5Html5
Html5
 
Link. javascript ajax
  Link. javascript ajax  Link. javascript ajax
Link. javascript ajax
 
Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internet
 
Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
5 - Introduzione al Web (2/2)
5 - Introduzione al Web (2/2)5 - Introduzione al Web (2/2)
5 - Introduzione al Web (2/2)
 
DDive - 8.5.2 Xpages - L'evoluzione continua
DDive - 8.5.2 Xpages - L'evoluzione continuaDDive - 8.5.2 Xpages - L'evoluzione continua
DDive - 8.5.2 Xpages - L'evoluzione continua
 
Link. php [santi caltabiano]
  Link. php [santi caltabiano]  Link. php [santi caltabiano]
Link. php [santi caltabiano]
 
Livecode
LivecodeLivecode
Livecode
 
Introduzione al web (2/2) - 18/19
Introduzione al web (2/2) - 18/19Introduzione al web (2/2) - 18/19
Introduzione al web (2/2) - 18/19
 
5 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/185 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/18
 
Webdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 OkWebdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 Ok
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
Matteo Bicocchi - Introducing HTML5
Matteo Bicocchi - Introducing HTML5Matteo Bicocchi - Introducing HTML5
Matteo Bicocchi - Introducing HTML5
 

More from Matteo Magni

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con AnsibleMatteo Magni
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner Matteo Magni
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerJavascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerJavascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerJavascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerJavascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesignerMatteo Magni
 

More from Matteo Magni (20)

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con Ansible
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesigner
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesigner
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesigner
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesigner
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesigner
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesigner
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesigner
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesigner
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesigner
 
Javascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerJavascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesigner
 
Javascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerJavascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesigner
 
Javascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerJavascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesigner
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesigner
 
Javascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerJavascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesigner
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesigner
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesigner
 

Recently uploaded

Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Associazione Digital Days
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Associazione Digital Days
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Associazione Digital Days
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Associazione Digital Days
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Associazione Digital Days
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Associazione Digital Days
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Associazione Digital Days
 
ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIinfogdgmi
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Associazione Digital Days
 

Recently uploaded (9)

Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
 
ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AI
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
 

Javascript - 1 | WebMaster & WebDesigner

  • 2. JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nei siti web.
  • 3. Programmazione Per un sacco di gente, il termine "programmazione" evoca visioni di super-intelligenti nerd concentrati su tastiere, che digitano parole senza senso quasi incomprensibile per ore. Probabilmente un po 'di programmazione è così. La programmazione può sembrare magia complessa che è ben oltre la media mortale. Ma molti concetti di programmazione non sono difficili da afferrare, e come linguaggio di programmazione, JavaScript è abbastanza amichevole per non programmatori.
  • 4. Client - Server Il client effettua una Request al server che a sua volta risponderà con una Response. Javascript agisce a livello di Client
  • 5. Browser Il browser è un software che ha la capacità di interpretare l'HTML e di visualizzarlo in forma di ipertesto. E' sempre il browser che esegue gli script Javascript
  • 6. Javascript JavaScript è un linguaggio lato client, che significa che funziona all'interno di un browser web. L'altro tipo di linguaggio di programmazione web è chiamato linguaggio server-side, esempi di questi sono PHP,. NET, ASP, ColdFusion, Ruby on Rails, ecc.... I linguaggi di programmazione lato server, come suggerisce il nome, sono eseguiti su un server web. Si occupano di accesso ai database, elaborazione carte di credito, e l'invio di e-mail in tutto il mondo, ecc.... Il problema con linguaggi lato server è che richiedono che il browser web invii richieste al web server, costringendo i visitatori ad aspettare fino a quando arriva una nuova pagina con le nuove informazioni. David Sawyer McFarland
  • 7. Javascript [2] Un linguaggio lato-client, invece, può reagire immediatamente e cambiare ciò che un visitatore vede nel suo browser senza la necessità di scaricare una nuova pagina. I contenuti possono apparire o sparire, spostarsi sullo schermo, aggiornarsi automaticamente in base a come un visitatore interagisce con la pagina. Questa reattività consente di creare siti web che sembrano programmi desktop. JavaScript non è l'unica tecnologia lato client in città. È possibile utilizzare i plug-in per aggiungere intelligenza di programmazione ad una pagina web. Applet Java, Flash, Silverlight sono un esempio. David Sawyer McFarland
  • 8. Javascript [3] In verità, JavaScript può anche essere un linguaggio server-side di programmazione. Ad esempio, il server web node.js (http://nodejs.org/) utilizza JavaScript come linguaggio server- side di programmazione per la connessione a un database, l'accesso al file system del server web, ed eseguire molte altre attività su un server web . David Sawyer McFarland
  • 9. Tecnologie Client Side • HTML → contenuto • Css →visualizzazione • Javascript → interazione
  • 10. Happy hacking a tutti! Inutile parlare, lasciamo che sia il codice a farlo.
  • 12. Aggiungere uno script <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html> <head> <title>My Web Page</title> <script type="text/javascript"> </script> </head>
  • 13. HTML 5 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <script> </script> </head>
  • 14. Alert <!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <script> alert('hello world!'); </script> </head>
  • 15. File esterno <!doctype html> //hello.js <html> <head> alert('hello <meta charset="UTF­8"> world!'); <title>My Web  Page</title> <script  src="hello.js"></script > </head>
  • 16. Non sono modalità esclusive <script src="hello.js"></script> <script >   alert('Hello world!'); </script>
  • 17. Path file esterni Percorso assoluto Un percorso assoluto è come un indirizzo postale, che contiene tutte le informazioni necessarie al browser web per trovare il file in tutto il mondo. Un percorso assoluto include http://, il nome host e la cartella e il nome del file. http://sosacroniro.net/js/hello.js
  • 18. Path file esterni [2] Percorso relativo alla radice Un percorso root-relative indica dove il file si trova rispetto alla cartella principale del sito. Un percorso relativo non include http:// o il nome di dominio. Si inizia con una / (barra) che indica la cartella principale della home page. Un modo semplice per creare un percorso relativo alla cartella è quello di prendere un percorso assoluto e togliere il http:// e il nome host. /js/hello.js
  • 19. Path file esterni [3] Percorso relativo al documento Un percorso document-relative specifica il percorso dalla pagina web al file JavaScript. Se si dispone di più livelli di cartelle sul tuo sito, è necessario utilizzare percorsi diversi per puntare allo stesso file JavaScript. Inizia senza la / js/hello.js
  • 21. Troviamo gli errori • Firefox Firebug Console javascript
  • 22. Troviamo gli errori [2] • Chrome Strumenti per gli sviluppatori / Console
  • 23. E gli altri? • Internet Explorer 9 • Safari • Opera Anche loro hanno dei tool per analizzare javascript
  • 24. Domande? Slide: http://www.slideshare.net/ilbonzo Code: https://github.com/ilbonzo/Cypher mail: matteo@magni.me