SlideShare a Scribd company logo
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 è relativamente 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/inFormazione/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­     world!');
8">
<title>My Web 
Page</title>
<script 
src="hello.js"></scri
pt>
</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://cypher.informazione.me/
                  Code:
https://github.com/inFormazione/Cypher/
                   mail:
            matteo@magni.me

More Related Content

PDF
Javascript - 1 | WebMaster & WebDesigner
PPTX
HTML (+ DOM) + CSS
PPTX
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
PDF
Web performance & Http2
ODP
PDF
Portofino per Jug Padova
PPTX
5 - Introduzione al Web (2/2)
PPT
Presentazione Corso - Parte 3
Javascript - 1 | WebMaster & WebDesigner
HTML (+ DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Web performance & Http2
Portofino per Jug Padova
5 - Introduzione al Web (2/2)
Presentazione Corso - Parte 3

What's hot (6)

PDF
Creare un tema personalizzato per wordpress
PPT
8. Architetture web
PDF
Miglioriamo le performance di wordpress
PPTX
Introduzione al web (2/2) - 18/19
PDF
Guida introduttiva al css
PDF
WordPress per giornalisti freelance
Creare un tema personalizzato per wordpress
8. Architetture web
Miglioriamo le performance di wordpress
Introduzione al web (2/2) - 18/19
Guida introduttiva al css
WordPress per giornalisti freelance
Ad

Viewers also liked (7)

PDF
Javascript - 3 | WebMaster & WebDesigner
PDF
Javascript - 5 | WebMaster & WebDesigner
PDF
Javascript - 6 | WebMaster & WebDesigner
PDF
jQuery - 5 | WebMaster & WebDesigner
PDF
Javascript - 7 | WebMaster & WebDesigner
PDF
jQuery - 3 | WebMaster & WebDesigner
PDF
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Ad

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

PPTX
Javascript, il linguaggio (non solo) del web
PDF
Corso Javascript
PPTX
5 - Introduzione al Web (2/2) - 17/18
PDF
Node.js - Server Side Javascript
PDF
Node and the Cloud
PPTX
Le Applicazioni di Internet Web, FTP, Posta e App pr il Mobile
PPTX
corso web developer - Introduzione a Javascript
PPTX
8 - Web app e CMS - 17/18
PDF
Introduzione a node: cenni storici ecc
PPT
5. Applicazioni Web e CMS
PPTX
8 - Web App e CMS - 16/17
PDF
JavaScript
PDF
Introduzione a java script
PPTX
07 - Web apps e CMS
PPT
8a. Il web 2.0
PDF
Il Web orientato al futuro: Express, Angular e nodeJS
PPTX
5 - Introduzione al Web (2/2) - 16/17
PDF
I Linguaggi Del Web (2° Giornata)
PPTX
7. Applicazioni Web e CMS
PDF
Intro to JavaScript
Javascript, il linguaggio (non solo) del web
Corso Javascript
5 - Introduzione al Web (2/2) - 17/18
Node.js - Server Side Javascript
Node and the Cloud
Le Applicazioni di Internet Web, FTP, Posta e App pr il Mobile
corso web developer - Introduzione a Javascript
8 - Web app e CMS - 17/18
Introduzione a node: cenni storici ecc
5. Applicazioni Web e CMS
8 - Web App e CMS - 16/17
JavaScript
Introduzione a java script
07 - Web apps e CMS
8a. Il web 2.0
Il Web orientato al futuro: Express, Angular e nodeJS
5 - Introduzione al Web (2/2) - 16/17
I Linguaggi Del Web (2° Giornata)
7. Applicazioni Web e CMS
Intro to JavaScript

More from Matteo Magni (20)

PDF
Introduzione DevOps con Ansible
PDF
HTML5 e Css3 - 6 | WebMaster & WebDesigner
PDF
HTML5 e Css3 - 5 | WebMaster & WebDesigner
PDF
HTML5 e Css3 - 4 | WebMaster & WebDesigner
PDF
HTML5 e Css3 - 3 | WebMaster & WebDesigner
PDF
HTML5 e Css3 - 2 | WebMaster & WebDesigner
PDF
HTML5 e Css3 - 1 | WebMaster & WebDesigner
PDF
jQuery - 4 | WebMaster & WebDesigner
PDF
jQuery - 2 | WebMaster & WebDesigner
PDF
jQuery - 1 | WebMaster & WebDesigner
PDF
Javascript - 4 | WebMaster & WebDesigner
PDF
Javascript - 2 | WebMaster & WebDesigner
PDF
Web Usability - 3 | WebMaster & WebDesigner
PDF
Web Usability - 2 | WebMaster & WebDesigner
PDF
Web Usability - 1 | WebMaster & WebDesigner
PDF
Seo e Web Marketing - 5 | WebMaster & WebDesigner
PDF
Seo e Web Marketing - 4 | WebMaster & WebDesigner
PDF
Seo e Web Marketing - 3 | WebMaster & WebDesigner
PDF
Seo e Web Marketing - 2 | WebMaster & WebDesigner
PDF
Seo e Web Marketing - 1 | WebMaster & WebDesigner
Introduzione DevOps con Ansible
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 4 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 1 | WebMaster & WebDesigner

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 è relativamente 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­ world!'); 8"> <title>My Web  Page</title> <script  src="hello.js"></scri pt> </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://cypher.informazione.me/ Code: https://github.com/inFormazione/Cypher/ mail: [email protected]