Javascript - 1 | WebMaster & WebDesigner

392 views

Published on

Prima lezione del modulo Javascript per il corso di WebMaster & WebDesigner

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

No Downloads
Views
Total views
392
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
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 visioni disuper-intelligenti nerd concentrati su tastiere, che digitano parolesenza senso quasi incomprensibile per ore. Probabilmente un po diprogrammazione è così. La programmazione può sembrare magiacomplessa che è ben oltre la media mortale. Ma molti concetti diprogrammazione non sono difficili da afferrare, e come linguaggio diprogrammazione, JavaScript è relativamente amichevole per nonprogrammatori.
  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 funziona allinterno diun browser web. Laltro tipo di linguaggio di programmazione web è chiamatolinguaggio server-side, esempi di questi sono PHP,. NET, ASP, ColdFusion,Ruby on Rails, ecc.... I linguaggi di programmazione lato server, comesuggerisce il nome, sono eseguiti su un server web.Si occupano di accesso ai database, elaborazione carte di credito, e linvio die-mail in tutto il mondo, ecc.... Il problema con linguaggi lato server è cherichiedono che il browser web invii richieste al web server, costringendo ivisitatori ad aspettare fino a quando arriva una nuova pagina con le nuoveinformazioni. 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 possono apparireo sparire, spostarsi sullo schermo, aggiornarsi automaticamente inbase a come un visitatore interagisce con la pagina. Questa reattivitàconsente di creare siti web che sembrano programmi desktop.JavaScript non è lunica tecnologia lato client in città. È possibileutilizzare i plug-in per aggiungere intelligenza di programmazione aduna pagina web. Applet Java, Flash, Silverlight sono un esempio. David Sawyer McFarland
  8. 8. Javascript [3]In verità, JavaScript può anche essere unlinguaggio server-side di programmazione. Adesempio, il server web node.js (http://nodejs.org/)utilizza JavaScript come linguaggio server-side diprogrammazione per la connessione a undatabase, laccesso al file system del server web,ed eseguire molte altre attività 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/inFormazione/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­ world!);8"><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://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me

×