diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/conflicting/learn/getting_started_with_the_web | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/it/conflicting/learn/getting_started_with_the_web')
| -rw-r--r-- | files/it/conflicting/learn/getting_started_with_the_web/index.html | 278 | ||||
| -rw-r--r-- | files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html | 332 |
2 files changed, 0 insertions, 610 deletions
diff --git a/files/it/conflicting/learn/getting_started_with_the_web/index.html b/files/it/conflicting/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 4605a9e4bb..0000000000 --- a/files/it/conflicting/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: Scrivi una semplice pagina in HTML -slug: conflicting/Learn/Getting_started_with_the_web -tags: - - Guide - - HTML - - Principianti - - Web Development -translation_of: Learn/Getting_started_with_the_web -translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML -original_slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML ---- -<div class="summary"> -<p>In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Hai bisogno di <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">un editore di testo</a> e di sapere <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">come aprire un file in un browser</a>.</td> - </tr> - <tr> - <th scope="row">Obiettivo:</th> - <td>Creare una pagina web che puoi visualizzare con il browser.</td> - </tr> - </tbody> -</table> - -<h2 id="Sommario">Sommario</h2> - -<p>La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.</p> - -<h2 id="Apprendimento_attivo">Apprendimento attivo</h2> - -<p>Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.</p> - -<h3 id="Primo_passo_Un_file">Primo passo: Un file</h3> - -<p>una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Hi there</title> -</head> -<body> - This is a page - a simple page -</body> -</html></pre> - -<p>Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".</p> - -<p>Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8383/Capture%20du%202014-08-20%2021:20:25.png" style="height: 72px; width: 365px;"></p> - -<p>Facendo un doppio click sul file si aprirà nel browser, per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8385/Capture%20du%202014-08-20%2021:24:06.png" style="height: 180px; width: 311px;"></p> - -<h3 id="Secondo_passo_Un_web_browser">Secondo passo: Un web browser</h3> - -<p>All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8387/Capture%20du%202014-08-20%2021:28:22.png" style="border-style: solid; border-width: 1px; height: 111px; width: 513px;"></p> - -<p>Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.</p> - -<h3 id="Terzo_passo_Sperimenta_e_impara">Terzo passo: Sperimenta e impara</h3> - -<p>Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.</p> - -<p>La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.</p> - -<p>Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.</p> - -<p>Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.</p> - -<p>Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Hi there</title> -</head> -<body> - This is a page - a simple page - <img src="unicorn_pic.png" alt="Unicorn picture :)" /> - now with a unicorn -</body> -</html></pre> - -<p>Modifica il file per includere il tag {{HTMLElement("img")}} come questo:</p> - -<pre class="brush: html"><img src="unicorn_pic.png" alt="Unicorn picture :)" /></pre> - -<p>Può essere inserito in qualsiasi parte {{HTMLElement("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!</p> - -<p>Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).</p> - -<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p> - -<div class="note"> -<p><strong>Nota:</strong> Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.</p> -</div> - -<p>I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:</p> - -<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/8389/Capture%20du%202014-08-20%2021:37:14.png" style="height: 69px; width: 405px;"></p> - -<p>Il risultato mostrato nel browser è questo:</p> - -<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/8499/Capture%20du%202014-09-04%2021:39:16.png" style="border-style: solid; border-width: 1px; height: 404px; width: 664px;"></p> - -<p>Come hai notato il tag{{HTMLElement("img")}} ha<strong> {{Glossary("attribute","attributes")}} </strong>che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.</p> - -<p>Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.</p> - -<h2 id="Più_in_profondità">Più in profondità</h2> - -<h3 id="Questa_non_è_una_pagina_web_molto_carina">Questa non è una pagina web molto carina</h3> - -<p>Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.</p> - -<p>{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.</p> - -<p>Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Hi there</title> - <style> - body { - color: blue; - } - </style> -</head> - <body> - <p>This is a some blue text</p> - <img src="unicorn_pic.png" alt="Unicorn picture :)" /> - </body> -</html></pre> - -<p>Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.</p> - -<p>Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:</p> - -<pre class="brush: css">body { - color: blue; - text-decoration: underline; -}</pre> - -<p>Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:</p> - -<pre class="brush: css">body { - color: blue; - text-decoration: underline; - font-size: 42px; -}</pre> - -<p>Il risultato finale sarà questo:</p> - -<pre class="brush: html"><html> -<head> - <title>Hi there</title> - <style> - body { - color: blue; - text-decoration: underline; - font-size: 42px; - } - </style> -</head> -<body> - <p>This is a blue underlined big text</p> - <img src="unicorn_pic.png" alt="Unicorn picture :)" /> -</body> -</html></pre> - -<p>e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:</p> - -<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/8497/Capture%20du%202014-09-04%2021:40:18.png" style="border-style: solid; border-width: 1px; height: 494px; width: 743px;"></p> - -<h3 id="Andiamo_alla_seconda_pagina">Andiamo alla seconda pagina</h3> - -<p>Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.</p> - -<h4 id="Collega_due_pagine_locali">Collega due pagine locali</h4> - -<p>Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.</p> - -<p>Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{HTMLElement("a")}}, così:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Page 1 to ground control</title> -</head> -<body> - This is page 1. - <a href="page2.html" title="to page 2">What is going on on page 2?</a> -</body> -</html></pre> - -<p>La seconda pagina avrà un link che ci fa tornare alla prima pagina:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Page 2 :)</title> -</head> -<body> - This is a page 2. - <a href="page1.html" title="to page 1"><span>Want to go back to page 1? Click here</span></a> -</body> -</html></pre> - -<div class="note"> -<p><strong>Nota:</strong>Assicurati che il nome del file {{HTMLElement("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.</p> -</div> - -<p>Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.</p> - -<p>Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:</p> - -<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/8395/Capture%20du%202014-08-20%2022:06:05.png" style="height: 92px; width: 595px;"></p> - -<p>La Page 1 sarà così visualizzata nel browser:</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8397/Capture%20du%202014-08-20%2022:11:31.png" style="border-style: solid; border-width: 1px; height: 114px; width: 365px;"></p> - -<p>e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:</p> - -<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/8401/Capture%20du%202014-08-20%2022:15:17.png" style="border-style: solid; border-width: 1px; height: 116px; width: 366px;"></p> - -<div class="note"> -<p><strong>Nota:</strong>Il link che torna alla page 1 è violetto perchè il browser "sa" che in precedenza avevamo visitato la Page 1</p> -</div> - -<p>Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.</p> - -<h4 id="Collegamento_ad_un_altra_pagina_web">Collegamento ad un altra pagina web</h4> - -<p>In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>My page</title> -</head> -<body> - One day,...Unicorns are great...See you. - <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia"><span>Want to go know more about unicorns? Wikipedia is right here</span></a> -</body> -</html></pre> - -<p>Potrebbe più o meno assomigliare a questo nel browser:</p> - -<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/8403/Capture%20du%202014-08-20%2022:22:24.png" style="height: 158px; width: 861px;"></p> - -<p>Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un <strong>tooltip.</strong>Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.</p> - -<div class="note"> -<p><strong>Ricorda:</strong> Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.</p> -</div> - -<h2 id="Prossimi_passi">Prossimi passi</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/HTML_tags">Come usare un tag HTML</a>: Ci sono molti tag in HTML qui abbiamo visto solo i base, puoi trovare delle ulteriori risorse qui.</li> - <li><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">Anatomia della pagina web</a>: HTML ha alcune regole e una pagina può avere molto contenuto questo può aiutare a comprendere pagine più complesse come quelle usate in alcuni dei più famosi siti nel Web!</li> - <li><a href="/en-US/docs/Learn/Understanding_links_on_the_web">Comprendere i link</a>: Abbiamo usato esempi molto semplici con i link questo articolo è per te se vuoi capire perchè i "links" sono l'origine del nome del "Web".</li> - <li><a href="/en-US/docs/Learn/Using_images">Usare le immagini</a> and <a href="/en-US/docs/Learn/Adding_audio_and_video">aggiungere audio e video</a> sono utili per aggiungere del contenuto multimediale con il semplice HTML.</li> -</ul> diff --git a/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index d9b371f22b..0000000000 --- a/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Getting Started (JavaScript Tutorial) -slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started -original_slug: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Perché JavaScript?</h2> -<p>JavaScript è un linguaggio per computer potente, complicato, e spesso misconosciuto. Permette lo sviluppo rapido di applicazioni in cui gli utenti possono inserire i dati e vedere i risultati facilmente.</p> -<p>Il vantaggio primario di JavaScript, che è anche conosciuto come ECMAScript, è che è centrato intorno al Web browser, così da avere la capacità di produrre gli stessi risultati su tutte le piattaforme supportate dal browser. Gli esempi in questa pagina, proprio come Google Maps, girano su Linux, Windows, e OS X. Con la recente crescita di numerose librerie JavaScript è ora più facile traversare un documento, selezionare gli elementi del DOM, creare animazioni, trattare eventi, e sviluppare applicazioni Ajax. Diversamente dalla promozione intorno alle altre tecnologie spinta da vari interessi proprietari, JavaScript è realmente il solo linguaggio di programmazione "cross-platform" e "client-side" che è sia libero che universalmente adottato.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">Cosa dovresti già conoscere</h2> -<p>Iniziare a programmare con JavaScript è molto semplice. Tutto quello che serve per cominciare è un editor di testo e un Web browser.</p> -<p>Ci sono molte altre tecnologie che possono essere integrate e sviluppate insieme a Javascript che sono al di fuori di questo documento. Non aspettarti di fare un'intera applicazione come Google Maps tutta nel tuo primo giorno!</p> -<h2 id="Getting_Started" name="Getting_Started">Come iniziare</h2> -<p>Iniziare con JavaScript è molto semplice. Non devi aver precedentemente installato complicati programmi di sviluppo. Non devi conoscere come usare una shell, programmare Make, o usare un compilatore. JavaScript è interpretato dal tuo Web browser. Tutto quello che hai da fare è salvare il tuo programma come file testo e poi aprirlo nel tuo Web browser. E' tutto qui!</p> -<p>JavaScript è un linguaggio di programmazione ideale per linguaggi di computer introduttivi. Permette ai nuovi studenti di avere risposte immediate e insegna loro strumenti che essi troveranno di facile uso nella loro vita reale. Ciò è in assoluto contrasto con C, C++, and Java che sono veramente facili solo per sviluppatori software specializzati.</p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibility issues</h2> -<p>There are variations between what functionality is available in the different browsers. Mozilla, Chrome, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.</p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">How to try the examples</h2> -<p>The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.</p> -<p>If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!</p> -<p>You can also take use of some online programs like <a href="http://jsfiddle.net/">jsfiddle.net</a></p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Example: Catching a mouse click</h2> -<p>The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.</p> -<p>'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:</p> -<ul> - <li>Click - issued when a user clicks the mouse</li> - <li>DblClick - issued when a user double-clicks the mouse</li> - <li>MouseDown - issued when a user depresses a mouse button (the first half of a click)</li> - <li>MouseUp - issued when a user releases a mouse button (the second half of a click)</li> - <li>MouseOut - issued when the mouse pointer leaves the graphical bounds of the object</li> - <li>MouseOver - issued when the mouse pointer enters the graphical bounds of the object</li> - <li>MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object</li> - <li>ContextMenu - issued when the user clicks using the right mouse button</li> -</ul> -<p>Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.</p> -<p>The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> -<p>The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script> - function clickHandler() { - alert("Hello, World!"); - } -</script> -<span onclick="clickHandler();">Click Here</span></pre> -<p>Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:</p> -<pre class="brush:js"><script> - function clickHandler(event) { - var eType = event.type; - /* the following is for compatibility */ - /* Moz populates the target property of the event object */ - /* IE populates the srcElement property */ - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget + ")" ); - } -</script> -<span onclick="clickHandler(event);">Click Here</span></pre> -<p>In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates (creates) a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.</p> -<pre class="brush:js"><body></body> -<script> - function mouseeventHandler(event) { - /* The following is for compatibility */ - /* IE does NOT by default pass the event object */ - /* obtain a ref to the event if one was not given */ - if (!event) event = window.event; - - /* obtain event type and target as earlier */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onloadHandler() { - /* obtain a ref to the 'body' element of the page */ - var body = document.body; - /* create a span element to be clicked */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* register the span object to receive specific mouse events - - notice the lowercase of the events but the free choice in the names of the handlers you replace them with. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* display the span on the page */ - body.appendChild(span); -} - -window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Example: Catching a keyboard event</h2> -<p>Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.</p> -<p>The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:</p> -<ul> - <li>KeyPress - issued when a key is depressed and released</li> - <li>KeyDown - issued when a key is depressed but hasn't yet been released</li> - <li>KeyUp - issued when a key is released</li> - <li>TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.</li> -</ul> -<p>In a <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> event, the Unicode value of the key pressed is stored in either the <code>keyCode</code> or <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> property, never both. If the key pressed generates a character (e.g., 'a'), <code>charCode</code> is set to the code of that character, respecting the letter case (i.e., <code>charCode</code> takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in <code>keyCode</code>.</p> -<p>The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"> -</pre> -<p>As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script> - function keypressHandler() { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="keypressHandler();" /> -</pre> -<p>Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:</p> -<pre class="brush:js"><script type="text/javascript"> - function keypressHandler(evt) { - var eType = evt.type; // Will return "keypress" as the event type - /* here we again need to use a cross browser method - mozilla based browsers return which and others keyCode. - The <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">Conditional operator</a> or ternary is a good choice */ - var keyCode = evt.which?evt.which:evt.keyCode; - var eCode = 'keyCode is ' + keyCode; - var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // or evt.charCode - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);" /></pre> -<p>Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:</p> -<pre class="brush:js"><script> - document.onkeypress = keypressHandler; - document.onkeydown = keypressHandler; - document.onkeyup = keypressHandler; -</script></pre> -<p>Here is a complete example that shows key event handling:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which - var keychar = String.fromCharCode(key); - if (key == exampleKey) { - metaChar = true; - } - if (key != exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { - alert("Key pressed " + key); - } - } - } - function metaKeyUp(event) { - var key = event.keyCode || event.which; - if (key == exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Try pressing any key! -</body> -</html></pre> -<h3 id="Browser_bugs_and_quirks">Browser bugs and quirks</h3> -<p>The two properties made available through the key events are <code>keyCode</code> and <code>charCode</code>. In simple terms, <code>keyCode</code> refers to the actual keyboard key that was pressed by the user, while <code>charCode</code> is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same <code>keyCode</code>, because the user presses the same key, but a different <code>charCode</code> because the resulting character is different.</p> -<p>The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support <code>charCode</code>. However, they give the character information in <code>keyCode</code>, but only onkeypress. Onkeydown and onkeyup <code>keyCode</code> contain key information. Firefox uses a different word, "which", to distinguish the character.</p> -<p>Refer to the Mozilla Documentation on <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> for a further treatment of keyboard events.</p> -<p>{{ draft() }}</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Example: Dragging images around</h2> -<p>The following example allows moving the image of Firefox around the page:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style> -img { position: absolute; } -</style> - -<script> -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox - // Both properties return the HTML element the event took place on. - - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove = moveImage; - return false; - } - return false; - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Example: Resizing things</h2> -<div> - Example of resizing an image (the actual image is not resized, only the image's rendering.) - <pre class="brush:js"> <!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64"> - <p>Click on the image and drag for resizing.</p> - </body> - - </html></pre> -</div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Example: Drawing Lines</h2> -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> -<script> -function linedraw(ax,ay,bx,by) -{ - if(ay>by) - { - bx=ax+bx; - ax=bx-ax; - bx=bx-ax; - by=ay+by; - ay=by-ay; - by=by-ay; - } - var calc=Math.atan((ay-by)/(bx-ax)); - calc=calc*180/Math.PI; - var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); - document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" -} -</script> -</head> -<body onload="linedraw(200,400,500,900);"> <!-- Replace with your co-ordinate --> -</body> -</html></pre> -<p> </p> |