Javascript - 1 | WebMaster & WebDesigner

  • 225 views
Uploaded on

Prima lezione del modulo Javascript del corso per WebMaster & WebDesigner

Prima lezione del modulo Javascript del corso per WebMaster & WebDesigner

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
225
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 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. 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 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 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. 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­8"> world!);<title>My Web Page</title><script src="hello.js"></script></head>
  • 16. Non sono modalità esclusive<script src="hello.js"></script><script >  alert(Hello world!);</script>
  • 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<script>document.write(<p>Hello world!</p>);</script>
  • 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://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me