javascript - 1 | webmaster & webdesigner

of 24/24
Javascript [1] Matteo Magni

Post on 28-Nov-2014

419 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. Javascript [1]Matteo Magni
  • 2. JavaScript un linguaggio di scriptingorientato agli oggetti comunemente usato nei siti web.
  • 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. 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 lHTML e di visualizzarlo in forma di ipertesto. E sempre il browser che esegue gli script Javascript
  • 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. 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 reattivitconsente 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. 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. Tecnologie Client Side HTML contenuto Css visualizzazione Javascript interazione
  • 10. Happy hacking a tutti!Inutile parlare, lasciamo che sia il codice a farlo.
  • 11. The Codehttps://github.com/inFormazione/Cypher/tree/master/html
  • 12. Aggiungere uno scriptMy Web Page
  • 13. HTML 5My Web Page
  • 14. AlertMy Web Page
  • 15. File esternohtml> //hello.js alert(helloMyWebPage
  • 16. Non sono modalit esclusive
  • 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. 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. 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. Scrivere testo
  • 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 OperaAnche loro hannodei tool peranalizzare javascript
  • 24. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: [email protected]