javascript - 1 | webmaster & webdesigner

Click here to load reader

Post on 24-Jun-2015

262 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

Prima lezione del modulo Javascript del corso per 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 visionidi super-intelligenti nerd concentrati su tastiere, che digitanoparole senza senso quasi incomprensibile per ore. Probabilmenteun po di programmazione cos. La programmazione pusembrare 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. Client - ServerIl client effettua unaRequest al server chea sua volta rispondercon una Response.Javascript agisce alivello di Client 5. BrowserIl browser unsoftware che ha lacapacit di interpretarelHTML e divisualizzarlo in forma diipertesto.E sempre il browserche esegue gli scriptJavascript 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. 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. 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. 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/ilbonzo/Cypher/tree/master/html 12. Aggiungere uno scriptMy Web Page 13. HTML 5My Web Page 14. AlertMy Web Page 15. File esternohtml> //hello.jsalert(helloworld!);MyWebPage 16. Non sono modalit esclusive 17. Path file esterniPercorso 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 FirefoxFirebugConsole 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://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cyphermail:[email protected]