Javascript [1]Matteo Magni
JavaScript è un linguaggio di scriptingorientato agli oggetti comunemente usato nei                   siti web.
ProgrammazionePer un sacco di gente, il termine "programmazione" evoca visionidi super-intelligenti nerd concentrati su ta...
Client - Server        Il client effettua una        Request al server che        a sua volta risponderà        con una Re...
Browser    Il browser è un    software che ha la    capacità di interpretare    lHTML e di    visualizzarlo in forma di   ...
JavascriptJavaScript è un linguaggio lato client, che significa che funzionaallinterno di un browser web. Laltro tipo di l...
Javascript [2]Un linguaggio lato-client, invece, può reagire immediatamente ecambiare ciò che un visitatore vede nel suo b...
Javascript [3]In verità, JavaScript può anche essere un linguaggio server-sidedi programmazione. Ad esempio, il server web...
Tecnologie Client Side         • HTML → contenuto         • Css →visualizzazione         • Javascript → interazione
Happy hacking a tutti!Inutile parlare, lasciamo che sia il codice a farlo.
The Codehttps://github.com/ilbonzo/Cypher/tree/master/html
Aggiungere uno script<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><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...
Non sono modalità             esclusive<script src="hello.js"></script><script >  alert(Hello world!);</script>
Path file esterni              Percorso assolutoUn percorso assoluto è come un indirizzopostale, che contiene tutte le inf...
Path file esterni [2]                 Percorso relativo alla radiceUn percorso root-relative indica dove il file si trova ...
Path file esterni [3]       Percorso relativo al documentoUn percorso document-relative specifica ilpercorso dalla pagina ...
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• OperaAnche loro hannodei tool peranalizzare javascript
Domande?               Slide:http://www.slideshare.net/ilbonzo               Code:https://github.com/ilbonzo/Cypher       ...
Upcoming SlideShare
Loading in...5
×

Javascript - 1 | WebMaster & WebDesigner

299
-1

Published on

Prima lezione del modulo Javascript del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
299
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript - 1 | WebMaster & WebDesigner

  1. 1. Javascript [1]Matteo Magni
  2. 2. JavaScript è un linguaggio di scriptingorientato agli oggetti comunemente usato nei siti web.
  3. 3. ProgrammazionePer un sacco di gente, il termine "programmazione" evoca visionidi super-intelligenti nerd concentrati su tastiere, che digitanoparole senza senso quasi incomprensibile per ore. Probabilmenteun po di programmazione è così. La programmazione puòsembrare magia complessa che è ben oltre la media mortale. Mamolti concetti di programmazione non sono difficili da afferrare, ecome linguaggio di programmazione, JavaScript è abbastanzaamichevole per non programmatori.
  4. 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. 5. Browser Il browser è un software che ha la capacità di interpretare lHTML e di visualizzarlo in forma di ipertesto. E sempre il browser che esegue gli script Javascript
  6. 6. JavascriptJavaScript è un linguaggio lato client, che significa che funzionaallinterno di un browser web. Laltro tipo di linguaggio diprogrammazione web è chiamato linguaggio server-side, esempi diquesti sono PHP,. NET, ASP, ColdFusion, Ruby on Rails, ecc.... Ilinguaggi di programmazione lato server, come suggerisce il nome, sonoeseguiti su un server web.Si occupano di accesso ai database, elaborazione carte di credito, elinvio di e-mail in tutto il mondo, ecc.... Il problema con linguaggi latoserver è che richiedono che il browser web invii richieste al web server,costringendo i visitatori ad aspettare fino a quando arriva una nuovapagina con le nuove informazioni. David Sawyer McFarland
  7. 7. Javascript [2]Un linguaggio lato-client, invece, può reagire immediatamente ecambiare ciò che un visitatore vede nel suo browser senza lanecessità di scaricare una nuova pagina. I contenuti possonoapparire o sparire, spostarsi sullo schermo, aggiornarsiautomaticamente in base a come un visitatore interagisce con lapagina. Questa reattività consente di creare siti web che sembranoprogrammi desktop. JavaScript non è lunica tecnologia lato clientin città. È possibile utilizzare i plug-in per aggiungere intelligenza diprogrammazione ad una pagina web. Applet Java, Flash, Silverlightsono un esempio. David Sawyer McFarland
  8. 8. Javascript [3]In verità, JavaScript può anche essere un linguaggio server-sidedi 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,laccesso al file system del server web, ed eseguire molte altreattività su un server web . David Sawyer McFarland
  9. 9. Tecnologie Client Side • HTML → contenuto • Css →visualizzazione • Javascript → interazione
  10. 10. Happy hacking a tutti!Inutile parlare, lasciamo che sia il codice a farlo.
  11. 11. The Codehttps://github.com/ilbonzo/Cypher/tree/master/html
  12. 12. Aggiungere uno script<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>My Web Page</title><script type="text/javascript"></script></head>
  13. 13. HTML 5<!doctype html><html><head><meta charset="UTF-8"><title>My Web Page</title><script></script></head>
  14. 14. Alert<!doctype html><html><head><meta charset="UTF-8"><title>My Web Page</title><script>alert(hello world!);</script></head>
  15. 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. 16. Non sono modalità esclusive<script src="hello.js"></script><script >  alert(Hello world!);</script>
  17. 17. Path file esterni Percorso assolutoUn percorso assoluto è come un indirizzopostale, che contiene tutte le informazioninecessarie al browser web per trovare il filein tutto il mondo.Un percorso assoluto include http://, il nomehost e la cartella e il nome del file.http://sosacroniro.net/js/hello.js
  18. 18. Path file esterni [2] Percorso relativo alla radiceUn percorso root-relative indica dove il file si trova rispettoalla cartella principale del sito. Un percorso relativo noninclude 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 allacartella è quello di prendere un percorso assoluto etogliere il http:// e il nome host. /js/hello.js
  19. 19. Path file esterni [3] Percorso relativo al documentoUn percorso document-relative specifica ilpercorso dalla pagina web al file JavaScript.Se si dispone di più livelli di cartelle sul tuosito, è necessario utilizzare percorsi diversiper puntare allo stesso file JavaScript.Inizia senza la / js/hello.js
  20. 20. Scrivere testo<script>document.write(<p>Hello world!</p>);</script>
  21. 21. Troviamo gli errori• Firefox Firebug Console javascript
  22. 22. Troviamo gli errori [2]• Chrome Strumenti per gli sviluppatori / Console
  23. 23. E gli altri?• Internet Explorer 9• Safari• OperaAnche loro hannodei tool peranalizzare javascript
  24. 24. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×