diff options
Diffstat (limited to 'files/it/web/api')
261 files changed, 26132 insertions, 0 deletions
diff --git a/files/it/web/api/canvasrenderingcontext2d/canvas/index.html b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..bb453e4419 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,101 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +<div>{{APIRef}}</div> + +<p>La proprietà <code><strong>CanvasRenderingContext2D</strong></code><strong><code><span>.canvas</span></code></strong> è un riferimento di sola lettura verso il canvas {{domxref("HTMLCanvasElement")}} che contiene il <code>context</code> corrente. Può essere {{jsxref("null")}} se non vi è un elemento {{HTMLElement("canvas")}} associato.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre> + +<h2 id="Esempi">Esempi</h2> + +<p>Dato il seguente elmento {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>È possibile ottenere un riferimento all'elemento canvas da cui è ottenuto questo <code>CanvasRenderingContext2D </code>utilizzando la property <code>canvas:</code></p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.canvas // HTMLCanvasElement +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>L'interfaccia che la definisce, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..2f905a5241 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,209 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - CamvasRenderingContext2D + - Canvas + - Proprietà + - Riferimento +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +<div>{{APIRef}}</div> + +<p>La proprietà <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> delle Canvas 2D API specifica il colore o lo stile da usare all'interno delle forme. Il colore preimpostato è <code>#000</code> (nero).</p> + +<p>Vedi anche i capitoli <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applicare stili e colori</a> nel <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color; +</var><var><em>ctx</em>.fillStyle = gradient; +</var><var><em>ctx</em>.fillStyle = pattern;</var> +</pre> + +<h3 id="Opzioni">Opzioni</h3> + +<dl> + <dt><code>color</code></dt> + <dd>Una {{domxref("DOMString")}} letta come valore CSS {{cssxref("<color>")}}.</dd> + <dt><code>gradient</code></dt> + <dd>Un oggetto {{domxref("CanvasGradient")}} (gradiente lineare o radiale).</dd> + <dt><code>pattern</code></dt> + <dd>Un oggetto {{domxref("CanvasPattern")}} (immagine ripetuta).</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Usare la proprietà <code>fillStyle</code> per impostare un colore diverso</h3> + +<p>In questa semplice porzione di codice viene usata la proprietù <code>fillStyle</code> per impostare un colore diverso.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>Modifica il codice qui sotto e vedi i cambiamenti in tempo reale nel canvas:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="Un_esempio_di_fillStyle_con_i_cicli_for">Un esempio di <code>fillStyle</code> con i cicli for</h3> + +<p>In questo esempio, useremo due cicli <code>for </code>per disegnare una griglia di rettangoli, ognuno di un colore differente. Il risultato finale dovrebbe assomigliare allo screenshot. Niente di particolarmente spettacolare. Usiamo due variabili <code>i</code> e <code>j</code> per generare un colore RGB unico per ogni quadrato, questo modificando soltanto i valori del rosso e del verde. Il canale del blu ha un valore fisso. Modificando i canali, puoi generare ogni tipo di palette. Aumentando le ripetizioni del ciclo, puoi ottenere qualcosa di assomigliante alle palette usate da Photoshop.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +for (var i=0;i<6;i++){ + for (var j=0;j<6;j++){ + ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ',0)'; + ctx.fillRect(j*25,i*25,25,25); + } +} +</pre> + +<p>Il risultato assomiglia a questo:</p> + +<p>{{EmbedLiveSample("Un_esempio_di_fillStyle_con_i_cicli_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="WebKitBlink_note_specifiche">WebKit/Blink note specifiche</h2> + +<ul> + <li>Nei browser basati su WebKit e Blink, un metodo non standard e deprecato <code>ctx.setFillColor()</code> è implementato oltre a queste proprietà. + + <pre class="brush: js">setFillColor(color, optional alpha); +setFillColor(grayLevel, optional alpha); +setFillColor(r, g, b, a); +setFillColor(c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Come definire l'interfaccia, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> diff --git a/files/it/web/api/canvasrenderingcontext2d/index.html b/files/it/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..e6b2eb7167 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,448 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +<div>{{APIRef}}</div> + +The <code><strong>CanvasRenderingContext2D</strong></code> interface provides the 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element. + +<p>To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <code><canvas></code>, supplying "2d" as the argument:</p> + +<pre class="brush: js">var canvas = document.getElementById('mycanvas'); +var ctx = canvas.getContext('2d'); +</pre> + +<p>Once you have the 2D rendering context for a canvas, you can draw within it. For example:</p> + +<pre class="brush: js">ctx.fillStyle = "rgb(200,0,0)"; +ctx.fillRect(10, 10, 55, 50); +</pre> + +<p>See the properties and methods in the sidebar and below. The <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">canvas tutorial</a> has more information, examples, and resources as well.</p> + +<h2 id="Drawing_rectangles">Drawing rectangles</h2> + +<p>There are three methods that immediately draw rectangles to the bitmap.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd> +</dl> + +<h2 id="Drawing_text">Drawing text</h2> + +<p>The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>Draws (fills) a given text at the given (x,y) position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>Draws (strokes) a given text at the given <em>(x, y) </em>position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>Returns a {{domxref("TextMetrics")}} object.</dd> +</dl> + +<h2 id="Line_styles">Line styles</h2> + +<p>The following methods and properties control how lines are drawn.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>Width of lines. Default <code>1.0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Miter limit ratio. Default <code>10</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>Sets the current line dash pattern.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>Specifies where to start a dash array on a line.</dd> +</dl> + +<h2 id="Text_styles">Text styles</h2> + +<p>The following properties control how text is laid out.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>Font setting. Default value <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>Directionality. Possible values: <code>ltr, rtl</code>, <code>inherit</code> (default).</dd> +</dl> + +<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2> + +<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> +</dl> + +<h2 id="Gradients_and_patterns">Gradients and patterns</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>Creates a radial gradient along the line given by the coordinates represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> +</dl> + +<h2 id="Shadows">Shadows</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>Specifies the blurring effect. Default <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>Color of the shadow. Default fully-transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>Horizontal distance the shadow will be offset. Default 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>Vertical distance the shadow will be offset. Default 0.</dd> +</dl> + +<h2 id="Paths">Paths</h2> + +<p>The following methods can be used to manipulate paths of objects.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the Bézier curve.</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>Adds a quadratic Bézier curve to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd> +</dl> + +<h2 id="Drawing_paths">Drawing paths</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>Fills the subpaths with the current fill style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>Strokes the subpaths with the current stroke style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>Scrolls the current path or a given path into the view.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>Reports whether or not the specified point is contained in the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> +</dl> + +<h2 id="Transformations">Transformations</h2> + +<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> + <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>Resets the current transform by the identity matrix.</dd> +</dl> + +<h2 id="Compositing">Compositing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> +</dl> + +<h2 id="Drawing_images">Drawing images</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> +</dl> + +<h2 id="Pixel_manipulation">Pixel manipulation</h2> + +<p>See also the {{domxref("ImageData")}} object.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd> +</dl> + +<h2 id="Image_smoothing">Image smoothing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> +</dl> + +<h2 id="The_canvas_state">The canvas state</h2> + +<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> +</dl> + +<h2 id="Hit_regions">Hit regions</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Adds a hit region to the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Removes all hit regions from the canvas.</dd> +</dl> + +<h2 id="Non-standard_APIs">Non-standard APIs</h2> + +<h3 id="Blink_and_WebKit">Blink and WebKit</h3> + +<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> +</dl> + +<h3 id="Blink_only">Blink only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> +</dl> + +<h3 id="WebKit_only">WebKit only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_only">Gecko only</h3> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd> +</dl> + +<h4 id="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt> + <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt> + <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt> + <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1")}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("9")}}</td> + <td>{{CompatSafari("2")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<ul> + <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..bcb314845c --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,208 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +<div>{{APIRef}}</div> + +<p>Il metodo <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInPath()</code></strong> delle API Canvas 2D controlla se un punto specificato cade all'interno del path corrente.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInPath(x, y); +boolean <var><em>ctx</em>.isPointInPath(x, y, algorithmo); + +boolean <var><em>ctx</em>.isPointInPath(path, x, y); +boolean <var><em>ctx</em>.isPointInPath(path, x, y, algoritmo);</var></var></var></var> +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt>x</dt> + <dd>La coordinata X del punto da controllare</dd> + <dt>y</dt> + <dd>La coordinata Y del punto da controllare</dd> + <dt><code>Algoritmo</code></dt> + <dd>La'lgoritmo con cui viene verificato se il punto cade all'interno del path.<br> + Valori possibili: + <ul> + <li><code><strong>"nonzero</strong></code>": La regola <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero </a>, valore predefinito.</li> + <li><code><strong>"evenodd"</strong></code>: La regola <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd </a>.</li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>Il {{domxref("Path2D")}} path da usare come path corrente.</dd> +</dl> + +<h3 id="Restituisce">Restituisce</h3> + +<dl> + <dt>{{jsxref("Boolean")}}</dt> + <dd> + <p>Un Boolean, che sarà <code>true (vero) </code>se il punto cade all'interno della forma<code>, </code>altrimenti restitiusce false <code>(falso).</code></p> + </dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Uso_del_metodo_isPointInPath">Uso del metodo <code>isPointInPath</code></h3> + +<p>Questa è una semplice snippet che usa il metodo <code>isPointInPath</code> per controllare se un punto cade o no sulla forma corrente.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInPath(10, 10)); // true +</pre> + +<p>Modifica il codice qui sotto, e guarda live come cambia il canvas: per guardare i log apri la tua <a href="/en-US/docs/Tools/Browser_Console">console</a></p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +console.log(ctx.isPointInPath(10, 10)); // true</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Parametro path</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Parametro path</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Note_di_compatibilità">Note di compatibilità</h3> + +<ul> + <li>Prima di Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), questo metodo sbagliava a moltiplicare le coordinate del punto specificato per la matrice di trasformazione corrente, prima di controllare il se il punto cadeva o no sul path. Ora il metodo funzioa correttamente anche se il contesto è ruotato, scalato o trasformato in altro modo.</li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>L'interfaccia che lo definisce, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/it/web/api/closeevent/index.html b/files/it/web/api/closeevent/index.html new file mode 100644 index 0000000000..4d534f6858 --- /dev/null +++ b/files/it/web/api/closeevent/index.html @@ -0,0 +1,197 @@ +--- +title: CloseEvent +slug: Web/API/CloseEvent +translation_of: Web/API/CloseEvent +--- +<p>{{APIRef("Websockets API")}}</p> + +<p>Un evento di tipo <code>CloseEvent</code> viene inviato al client tramite <a href="/en-US/docs/Glossary/WebSockets">WebSockets</a> in fase di chiusura della connessione. Questo viene ricevuto dal <em>listener</em> registrato sull'attributo <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">onclose </strong>dell'oggetto di tipo <code>WebSocket</code>.</p> + +<h2 id="Attributes" name="Attributes">Costruttore</h2> + +<dl> + <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt> + <dd>Crea un nuovo <code>CloseEvent</code>.</dd> +</dl> + +<h2 id="Attributes" name="Attributes">Proprietà</h2> + +<dl> + <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt> + <dd>Restituisce un <code>unsigned short</code> che contiene il codice di chiusura inviato dal server. Questi sono i valori ammessi. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Status code</td> + <td class="header">Name</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>0</code>–<code>999</code></td> + <td> </td> + <td><strong>Riservati e non usati.</strong></td> + </tr> + <tr> + <td><code>1000</code></td> + <td><code>CLOSE_NORMAL</code></td> + <td>Chiusura normale; la connessione si è conclusa normalmente, qualsiasi fosse il suo scopo.</td> + </tr> + <tr> + <td><code>1001</code></td> + <td><code>CLOSE_GOING_AWAY</code></td> + <td>L'<em>endpoint</em> se ne è andato, o per un errore del server oppure perché la pagina che ha aperto la connessione non è più attiva.</td> + </tr> + <tr> + <td><code>1002</code></td> + <td><code>CLOSE_PROTOCOL_ERROR</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">L'</span><em>endpoint</em><span style="background-color: rgba(212, 221, 228, 0.14902);"> </span>ha terminato la connessione per un errore di protocollo.</td> + </tr> + <tr> + <td><code>1003</code></td> + <td><code>CLOSE_UNSUPPORTED</code></td> + <td>La connessione è stata terminata perché l'<em>endpoint</em> ha ricevuto dei dati che non può accettare (per esempio, dati binari a fronte di un <em>endpoint</em> che consuma solo testo).</td> + </tr> + <tr> + <td><code>1004</code></td> + <td> </td> + <td><strong>Riservato.</strong> In futuro potrebbe esserne rivelato l'uso.</td> + </tr> + <tr> + <td><code>1005</code></td> + <td><code>CLOSE_NO_STATUS</code></td> + <td><strong>Riservato.</strong> Indica che non è stato ricevuto nessuno stato di chiusura sebbene fosse atteso.</td> + </tr> + <tr> + <td><code>1006</code></td> + <td><code>CLOSE_ABNORMAL</code></td> + <td><strong>Riservato.</strong> Usato per indicare che la connessione è stata chiusa in modo anomalo (cioè, cioè senza l'invio del <em>frame</em> di chiusura) dove invece era atteso un codice di chiusura.</td> + </tr> + <tr> + <td><code>1007</code></td> + <td> </td> + <td>L'<em>endpoint</em> ha terminato la connessione perché ha ricevuto un messaggio con dati inconsistenti (<span style="line-height: 1.572;">per esempio, dati non-UTF-8 all'interno di un messaggio testuale).</span></td> + </tr> + <tr> + <td><code>1008</code></td> + <td> </td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">L'</span><em>endpoint</em><span style="background-color: rgba(212, 221, 228, 0.14902);"> </span>ha terminato la connessione perché ha ricevuto un messaggio che viola la sua politica. E' un codice generico, quando 1003 e 1009 non sono adatti.</td> + </tr> + <tr> + <td><code>1009</code></td> + <td><code>CLOSE_TOO_LARGE</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">L'</span><em>endpoint</em><span style="background-color: rgba(212, 221, 228, 0.14902);"> </span>ha terminato la connessione perché ha ricevuto un frame di dati troppo grande.</td> + </tr> + <tr> + <td><code>1010</code></td> + <td> </td> + <td>Il client ha terminato la connessione perché era attesa una negoziazione di una o più "estensioni" del protocollo che però non è avvenuta.</td> + </tr> + <tr> + <td><code>1011</code></td> + <td> </td> + <td>Il server ha terminato la connessione perché ha incontrato una condizione inattesa che gli ha impedito di completare la richiesta.</td> + </tr> + <tr> + <td><code>1012</code>–<code>1014</code></td> + <td> </td> + <td><strong>Riservati per usi futuri dallo standard WebSocket.</strong></td> + </tr> + <tr> + <td><code>1015</code></td> + <td> </td> + <td><strong>Riservato.</strong> Indica che la connessione è stata chiusa a causa di un fallimento dell'<em>handshake</em> TLS (per esempio, il certificato del server non può essere verificato).</td> + </tr> + <tr> + <td><code>1016</code>–<code>1999</code></td> + <td> </td> + <td><strong>Riservati per usi futuri dallo standard WebSocket.</strong></td> + </tr> + <tr> + <td><code>2000</code>–<code>2999</code></td> + <td> </td> + <td><strong>Riservati per estensioni WebSocket.</strong></td> + </tr> + <tr> + <td><code>3000</code>–<code>3999</code></td> + <td> </td> + <td>Disponibili per librerie e <em>framework</em>. <strong>Meglio non</strong> usarli nelle applicazioni.</td> + </tr> + <tr> + <td><code>4000</code>–<code>4999</code></td> + <td> </td> + <td>Disponibili per essere utilizzati dalle applicazioni.</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt> + <dd>Restituisce un {{ domxref("DOMString") }} che indica la ragione per cui il server ha chiuso la connessione. Questo dipende dal particolare server e sotto-protocollo.</dd> + <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt> + <dd>Restituisce un {{jsxref("Boolean")}} che indica se la connessione è stata chiusa senza problemi o meno.</dd> +</dl> + +<p> </p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p> </p> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("8.0") }} [1][2]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, Gecko inviava l'evento WebSocket {{event("close")}} come semplice evento. Il supporto al <code>CloseEvent</code> è stato implementato in Gecko 8.0.</p> + +<p>[2] Prima di Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko restituiva il codice di chiusura <code>CLOSE_NORMAL</code> anche quando il canale veniva chiuso a causa di un errore inatteso, o anche a causa di un errore non coperto dalla specifica. Adesso viene restituito <code>CLOSE_GOING_AWAY</code>.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></li> +</ul> + +<p> </p> diff --git a/files/it/web/api/console/index.html b/files/it/web/api/console/index.html new file mode 100644 index 0000000000..61521af0f3 --- /dev/null +++ b/files/it/web/api/console/index.html @@ -0,0 +1,294 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +<div>{{APIRef("Console API")}}</div> + +<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g. the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works varies from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p> + +<p>The <code>Console</code> object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p> + +<pre class="brush: js">console.log("Failed to open the specified link")</pre> + +<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Console.assert()")}}</dt> + <dd>Log a message and stack trace to console if the first argument is <code>false</code>.</dd> + <dt>{{domxref("Console.clear()")}}</dt> + <dd>Clear the console.</dd> + <dt>{{domxref("Console.count()")}}</dt> + <dd>Log the number of times this line has been called with the given label.</dd> + <dt>{{domxref("Console.countReset()")}}</dt> + <dd>Resets the value of the counter with the given label.</dd> + <dt>{{domxref("Console.debug()")}}</dt> + <dd>Outputs a message to the console with the log level <code>"debug"</code>. + <div class="note"><strong>Note</strong>: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.</div> + </dd> + <dt>{{domxref("Console.dir()")}}</dt> + <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd> + <dt>{{domxref("Console.dirxml()")}}</dt> + <dd> + <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.</p> + </dd> + <dt>{{domxref("Console.error()")}}</dt> + <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> + <dd>An alias for <code>error()</code>.</dd> + <dt>{{domxref("Console.group()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupCollapsed()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. However, unlike <code>group()</code> this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupEnd()")}}</dt> + <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd> + <dt>{{domxref("Console.info()")}}</dt> + <dd>Informative logging of information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.log()")}}</dt> + <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> + <dd>Starts the browser's built-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd> + <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> + <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd> + <dt>{{domxref("Console.table()")}}</dt> + <dd>Displays tabular data as a table.</dd> + <dt>{{domxref("Console.time()")}}</dt> + <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd> + <dt>{{domxref("Console.timeEnd()")}}</dt> + <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since it started.</dd> + <dt>{{domxref("Console.timeLog()")}}</dt> + <dd>Logs the value of the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> to the console.</dd> + <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> + <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd> + <dt>{{domxref("Console.trace()")}}</dt> + <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd> + <dt>{{domxref("Console.warn()")}}</dt> + <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> +</dl> + +<h2 id="Usage" name="Usage">Usage</h2> + +<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3> + +<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p> + +<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.</p> + +<h4 id="Outputting_a_single_object">Outputting a single object</h4> + +<p>The simplest way to use the logging methods is to output a single object:</p> + +<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +console.log(someObject); +</pre> + +<p>The output looks something like this:</p> + +<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + +<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4> + +<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p> + +<pre class="brush: js">var car = "Dodge Charger"; +var someObject = { str: "Some text", id: 5 }; +console.info("My first car was a", car, ". The object is:", someObject);</pre> + +<p>This output will look like this:</p> + +<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) +</pre> + +<h4 id="Using_string_substitutions">Using string substitutions</h4> + +<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Substitution string</td> + <td class="header">Description</td> + </tr> + <tr> + <td>%o or %O</td> + <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td> + </tr> + <tr> + <td>%d or %i</td> + <td>Outputs an integer. Number formatting is supported, for example <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td> + </tr> + <tr> + <td>%s</td> + <td>Outputs a string.</td> + </tr> + <tr> + <td>%f</td> + <td>Outputs a floating-point value. Formatting is supported, for example <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Precision formatting doesn't work in Chrome</p> +</div> + +<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p> + +<pre>for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); +} +</pre> + +<p>The output looks like this:</p> + +<pre>[13:14:13.481] Hello, Bob. You've called me 1 times. +[13:14:13.483] Hello, Bob. You've called me 2 times. +[13:14:13.485] Hello, Bob. You've called me 3 times. +[13:14:13.487] Hello, Bob. You've called me 4 times. +[13:14:13.488] Hello, Bob. You've called me 5 times. +</pre> + +<h4 id="Styling_console_output">Styling console output</h4> + +<p>You can use the <code>%c</code> directive to apply a CSS style to console output:</p> + +<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre> + +<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div> + +<div> </div> + +<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> + +<div> </div> + +<div class="note"> +<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.</p> +</div> + +<div> </div> + +<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div> + +<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p> + +<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div> + +<p>To exit the current group, simply call <code>console.groupEnd()</code>. For example, given this code:</p> + +<pre class="brush: js">console.log("This is the outer level"); +console.group(); +console.log("Level 2"); +console.group(); +console.log("Level 3"); +console.warn("More of level 3"); +console.groupEnd(); +console.log("Back to level 2"); +console.groupEnd(); +console.debug("Back to the outer level"); +</pre> + +<p>The output looks like this:</p> + +<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> + +<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> + +<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p> + +<p>For example, given this code:</p> + +<pre class="brush: js">console.time("answer time"); +alert("Click to continue"); +console.timeLog("answer time"); +alert("Do a bunch of other stuff..."); +console.timeEnd("answer time"); +</pre> + +<p>Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:</p> + +<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p> + +<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p> + +<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div> + +<h3 id="Stack_traces">Stack traces</h3> + +<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p> + +<pre class="brush: js">function foo() { + function bar() { + console.trace(); + } + bar(); +} + +foo(); +</pre> + +<p>The output in the console looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Console")}}</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li> + <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li> + <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li> + <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li> +</ul> + +<h3 id="Other_implementations">Other implementations</h3> + +<ul> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li> +</ul> diff --git a/files/it/web/api/console/log/index.html b/files/it/web/api/console/log/index.html new file mode 100644 index 0000000000..4229185824 --- /dev/null +++ b/files/it/web/api/console/log/index.html @@ -0,0 +1,88 @@ +--- +title: console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Il metodo <strong><code>log()</code></strong> di {{domxref("Console")}} stampa un messaggio sulla web console.</span> Il messaggio può essere una semplice stringa (opzionalmente, anche con valori sostituibili), o può essere uno qualsiasi o più oggetti JavaScript.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Una lista di oggetti JavaScript da stampare. La rappresentazione sotto forma di stringa di ciascuno di questi oggetti sarà messa in coda nell'ordine presentato e stampata. Perfavore fai attenzione che se tu stampi degli oggetti nelle ultime versioni si Chrome e Firefox quello che otterrai sarà un <em>riferimento all'oggetto</em>, che non necessariamente è il 'valore' dell'oggetto nel momento della chiamata di <code>console.log()</code>, ma è il valore dell'oggetto al momento in cui tu apri la console.</dd> + <dt><code>msg</code></dt> + <dd>Una stringa JavaScript contenente zero o più stringhe da sostituire.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Oggetti JavaScript con i quali verranno sostituite le stringhe da sostituire in <code>msg</code>. Questo ti offre controlli aggiuntivi sul formato dell'output</dd> +</dl> + +<p>Vedi <a href="/en-US/docs/DOM/console#Outputting_text_to_the_console">Stampare del testo sulla Console</a> nella documentazione di {{domxref("console")}} per maggiori dettagli.</p> + +<h2 id="Differenza_tra_log_e_dir">Differenza tra log() e dir()</h2> + +<p>Ti potresti esser chiesto qual è la differenza tra {{domxref("console.dir()")}} e <code>console.log()</code>.</p> + +<p>Un'altra utile differenza esiste in Chrome quando invii elementi DOM alla console.</p> + +<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p> + +<p>Nota bene:</p> + +<ul> + <li><code>console.log</code> stampa gli elementi in un albero HTML-like.</li> + <li><code>console.dir</code> stampa gli elementi in un albero JSON-like.</li> +</ul> + +<p>Specificamente, <code>console.log</code> offre un trattamento speciale agli elementi del DOM, mentre <code>console.dir</code> non lo fa. Ė spesso utile quando si prova a vedere la rappresentazione completa degli oggetti JS del DOM.</p> + +<p>Ulteriori informazioni si possono trovare sulle <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a> su questa e altre funzioni.</p> + +<h2 id="Registrare_loggare_gli_oggetti">Registrare (loggare) gli oggetti</h2> + +<p>Non usare <code>console.log(obj)</code>, usa <code>console.log(JSON.parse(JSON.stringify(obj)))</code>.</p> + +<p>In questo modo sarai sicuro di visulizzare il valore di <code>obj</code> al momento in cui lo stai registrando (loggando). Altrimenti, svariati browser offrono una vista live che aggiorna costantemente i valori non appena cambiano. Potrebbe non essere quel che cerchi.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#log", "console.log()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div class="hidden">La tabella delle compatibilità su questa pagina è generata da dati strutturati. ISe volessi contribuire sui dati, perfavore visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div> + +<p>{{Compat("api.Console.log")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Documentazione Opera Dragonfly: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Usare gli strumenti della Console F12 per vedere Errori e Stati</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supporta features aggiuntive nella sua implementazione della console.log(), come il <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">logging con stile</a>.</li> + <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li> +</ul> diff --git a/files/it/web/api/console/table/index.html b/files/it/web/api/console/table/index.html new file mode 100644 index 0000000000..d2ae5bbce2 --- /dev/null +++ b/files/it/web/api/console/table/index.html @@ -0,0 +1,143 @@ +--- +title: Console.table() +slug: Web/API/Console/table +translation_of: Web/API/Console/table +--- +<div> {{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Visualizza dati tabulari come una tabella.</span></p> + +<p>Questa funzione richiede un argomento obbligatorio <code>data</code>, che deve essere un array di oggetti, ed un parametro opzionale <code>columns</code>.</p> + +<p>La funzione visualizza <code>data</code> come una tabella ed ogni elemento dell'array (o ogni sua proprietà numerabile se <code>data</code> è un oggetto) sarà una riga della tabella.</p> + +<p>La prima colonna della tabella rappresenta l'etichetta <code>(index)</code>. Se <code>data</code> è un array allora il valore sarà il suo indice nell'array. Se, invece, <code>data</code> è un oggetto, il suo valore sarà il nome della proprietà. Nota che (in Firefox) <code>console.table</code> limita a 1000 la visualizzazione delle righe (la prima riga contiene i nomi delle etichette).</p> + +<p>{{AvailableInWorkers}}</p> + +<h3 id="Collezioni_di_tipi_di_primitive">Collezioni di tipi di primitive</h3> + +<p>L'argomento <code>data</code> può essere un array o un oggetto.</p> + +<pre class="brush: js">// array di stringhe + +console.table(["apples", "oranges", "bananas"]);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p> + +<pre class="brush: js">// un oggetto le cui proprietà sono stringhe + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var me = new Person("John", "Smith"); + +console.table(me);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p> + +<h3 id="Collezioni_di_tipi_composti">Collezioni di tipi composti</h3> + +<p>Se l'elemento nell'array o le proprietà nell'oggetto sono a loro volta array o oggetti, allora i loro elementi o proprietà sono enumerati nella riga, uno per colonna:</p> + +<pre class="brush: js">// un array di arrays + +var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] +console.table(people);</pre> + +<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p> + +<pre class="brush: js">// un array di oggetti + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily]);</pre> + +<p>Nota che se l'array contiene oggetti, allora le colonne sono etichettate con il nome della proprietà.</p> + +<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p> + +<pre class="brush: js">// un oggetto le cui proprietà sono oggetti + +var family = {}; + +family.mother = new Person("Jane", "Smith"); +family.father = new Person("John", "Smith"); +family.daughter = new Person("Emily", "Smith"); + +console.table(family);</pre> + +<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p> + +<h3 id="Restringimento_delle_colonne_visualizzate">Restringimento delle colonne visualizzate</h3> + +<p>Di default, <code>console.table()</code> visualizza la lista di elementi in ogni riga. Puoi usare il parametro opzionale <code>columns</code> per selezionare un sottoinsieme delle colonne da visualizzare:</p> + +<pre class="brush: js">// un array di oggetti, visualizzando solo firstName + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily], ["firstName"]);</pre> + +<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p> + +<h3 id="Ordinamento_delle_colonne">Ordinamento delle colonne</h3> + +<p>Puoi ordinare la tabella in base ad una particolare colonna cliccando sulla sua etichetta.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">console.table(data [, <em>columns</em>]); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>data</code></dt> + <dd>Il dato da visualizzare. Deve essere un oggetto o un array.</dd> + <dt><code>columns</code></dt> + <dd>Un array contenente i nomi delle colonne da includere nell'output.</dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#table", "console.table()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<div> + + +<p>{{Compat("api.Console.table")}}</p> +</div> diff --git a/files/it/web/api/crypto/index.html b/files/it/web/api/crypto/index.html new file mode 100644 index 0000000000..0add9721d2 --- /dev/null +++ b/files/it/web/api/crypto/index.html @@ -0,0 +1,68 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>The <code><strong>Crypto</strong></code> interface represents basic cryptography features available in the current context. It allows access to a cryptographically strong random number generator and to cryptographic primitives.</p> + +<p>An object with this interface is available on Web context via the {{domxref("Window.crypto")}} property.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface implements properties defined on {{domxref("RandomSource")}}.</em></p> + +<dl> + <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt> + <dd>Returns a {{domxref("SubtleCrypto")}} object providing access to common cryptographic primitives, like hashing, signing, encryption or decryption.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface implements methods defined on {{domxref("RandomSource")}}.</em></p> + +<dl> + <dt>{{domxref("Crypto.getRandomValues()")}}</dt> + <dd>Fills the passed {{ jsxref("TypedArray") }} with cryptographically sound random values.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td> + <td>{{Spec2("Web Crypto API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<div> + + +<p>{{Compat("api.Crypto")}}</p> +</div> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/it/web/api/crypto/subtle/index.html b/files/it/web/api/crypto/subtle/index.html new file mode 100644 index 0000000000..ae850ea329 --- /dev/null +++ b/files/it/web/api/crypto/subtle/index.html @@ -0,0 +1,52 @@ +--- +title: Crypto.subtle +slug: Web/API/Crypto/subtle +tags: + - API + - Crittografia + - D + - Proprietà + - Riferimenti + - Sola lettura + - Web Crypto API +translation_of: Web/API/Crypto/subtle +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>La proprietà in sola lettura <strong><code>Crypto.subtle</code></strong> restituisce un oggetto {{domxref("SubtleCrypto")}}, rendendo disponibili le funzioni crittografiche.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre>var <em>crypto</em> = crypto.subtle;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">La tabella di compatiblità in questa pagina è generata dai dati disponibili. Se desideri contribuire, scarica il codice da <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci uan richiesta di allineamento.</div> + +<p>{{Compat("api.Crypto.subtle")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Crypto")}}.</li> + <li>{{domxref("SubtleCrypto")}}.</li> + <li><a href="https://vibornoff.github.io/webcrypto-examples/index.html">Compatibilità</a>.</li> + <li><a href="https://github.com/vibornoff/webcrypto-shim">Adeguamento per IE11 e Safari</a>.</li> +</ul> diff --git a/files/it/web/api/datatransfer/getdata/index.html b/files/it/web/api/datatransfer/getdata/index.html new file mode 100644 index 0000000000..635da432ed --- /dev/null +++ b/files/it/web/api/datatransfer/getdata/index.html @@ -0,0 +1,161 @@ +--- +title: DataTransfer.getData() +slug: Web/API/DataTransfer/getData +translation_of: Web/API/DataTransfer/getData +--- +<div> +<p> </p> +{{APIRef("HTML DOM")}}</div> + +<p>Il metodo <strong><code>DataTransfer.getData()</code></strong> recupera i dati del trascinamento (come {{domxref("DOMString")}}) per il <em>data type</em> specificato. Se l'operazione di trascinamento non include dati, questo metodo restituisce una stringa vuota.</p> + +<p>Esempi di tipi di <em>data types</em> sono <em><code>text/plain</code></em> e <em><code>text/uri-list</code></em>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">DOMString <var>dataTransfer</var>.getData(format); +</pre> + +<h3 id="Argomenti">Argomenti</h3> + +<dl> + <dt><em>formato</em></dt> + <dd>Una {{domxref("DOMString")}} rappresentante il tipo di dato da recuperare.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<dl> + <dt>{{domxref("DOMString")}}</dt> + <dd>Una {{domxref("DOMString")}} rappresentante i dati trascinati per il formato specificato. Se l'operazione di trascinamento non ha dati o l'operazione non ha dati per il formato specificato, questo metodo restituisce una stringa vuota.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<p>Questo esempio mostra l'uso dell'oggetto {{domxref("DataTransfer")}} e dei metodi {{domxref("DataTransfer.getData()","getData()")}} e {{domxref("DataTransfer.setData()","setData()")}} .</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> + <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> +</div> +<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#div1, #div2 { + width:100px; + height:50px; + padding:10px; + border:1px solid #aaaaaa; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function allowDrop(allowdropevent) { + allowdropevent.target.style.color = 'blue'; + allowdropevent.preventDefault(); +} + +function drag(dragevent) { + dragevent.dataTransfer.setData("text", dragevent.target.id); + dragevent.target.style.color = 'green'; +} + +function drop(dropevent) { + dropevent.preventDefault(); + var data = dropevent.dataTransfer.getData("text"); + dropevent.target.appendChild(document.getElementById(data)); + document.getElementById("drag").style.color = 'black'; +} +</pre> + +<h3 id="Result">Result</h3> + +<p id="EmbedLiveSample('Example'_''_''_''_'WebAPIDataTransfergetData')">{{ EmbedLiveSample('Esempio', 600, '', '', 'Web/API/DataTransfer/getData') }}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>3.5</td> + <td>{{CompatGeckoDesktop(10)}} [1]</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(10)}}[1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] in versioni di Firefox precedenti alla 49, questo metodo restituisce sempre una lista vuota se il tipo mime non è in una white list.</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p> diff --git a/files/it/web/api/datatransfer/index.html b/files/it/web/api/datatransfer/index.html new file mode 100644 index 0000000000..a821dabb6a --- /dev/null +++ b/files/it/web/api/datatransfer/index.html @@ -0,0 +1,183 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +tags: + - API + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub + - Web Development + - drag and drop +translation_of: Web/API/DataTransfer +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p>The <code><strong>DataTransfer</strong></code> object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a>.</p> + +<p>This object is available from the {{domxref("DragEvent.dataTransfer","dataTransfer")}} property of all {{domxref("DragEvent","drag events")}}. It cannot be created separately (i.e. there is no constructor for this object).</p> + +<h2 id="Properties">Properties</h2> + +<h3 id="Standard_properties">Standard properties</h3> + +<dl> + <dt>{{domxref("DataTransfer.dropEffect")}}</dt> + <dd>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be <code>none</code> <code>copy</code> <code>link</code> or <code>move</code>.</dd> + <dt>{{domxref("DataTransfer.effectAllowed")}}</dt> + <dd>Provides all of the types of operations that are possible. Must be one of <code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code> or <code>uninitialized</code>.</dd> + <dt>{{domxref("DataTransfer.files")}}</dt> + <dd>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.</dd> + <dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt> + <dd>Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.</dd> + <dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt> + <dd>An array of {{domxref("DOMString","string")}} giving the formats that were set in the {{event("dragstart")}} event.</dd> +</dl> + +<h3 id="Gecko_properties">Gecko properties</h3> + +<p>{{SeeCompatTable}}</p> + +<div class="note"><strong>Note:</strong> All of the properties in this section are Gecko-specific.</div> + +<dl> + <dt>{{domxref("DataTransfer.mozCursor")}}</dt> + <dd>Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.</dd> + <dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}</dt> + <dd>Gives the number of items in the drag operation.</dd> + <dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt> + <dd>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</dd> + <dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt> + <dd>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<h3 id="Standard_methods">Standard methods</h3> + +<dl> + <dt>{{domxref("DataTransfer.clearData()")}}</dt> + <dd>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</dd> + <dt>{{domxref("DataTransfer.getData()")}}</dt> + <dd>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</dd> + <dt>{{domxref("DataTransfer.setData()")}}</dt> + <dd>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</dd> + <dt>{{domxref("DataTransfer.setDragImage()")}}</dt> + <dd>Set the image to be used for dragging if a custom one is desired.</dd> +</dl> + +<h3 id="Gecko_methods">Gecko methods</h3> + +<p>{{SeeCompatTable}}</p> + +<div class="note"><strong>Note:</strong> All of the methods in this section are Gecko-specific.</div> + +<dl> + <dt>{{domxref("DataTransfer.addElement()")}}</dt> + <dd>Sets the drag source to the given element.</dd> + <dt>{{domxref("DataTransfer.mozClearDataAt()")}}</dt> + <dd>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</dd> + <dt>{{domxref("DataTransfer.mozGetDataAt()")}}</dt> + <dd>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</dd> + <dt>{{domxref("DataTransfer.mozSetDataAt()")}}</dt> + <dd>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</dd> + <dt>{{domxref("DataTransfer.mozTypesAt()")}}</dt> + <dd>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>3.5 <sup>[2]</sup></td> + <td>10 <sup>[1]</sup> <sup>[2]</sup></td> + <td>12</td> + <td>3.1 <sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p><code>[1]</code><a href="http://caniuse.com/#search=drag">Partial support refers to not supporting {{domxref("DataTransfer.setDragImage()")}} [CanIUse.com]</a></p> + +<p><code>[2]</code>Does not support {{domxref("DataTransfer.items")}} property</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/Web/Guide/HTML/Drag_and_drop">Drag and drop</a></li> + <li><a href="/Web/Guide/HTML/Drag_operations">Drag Operations</a></li> + <li><a href="/Web/Guide/HTML/Recommended_Drag_Types">Recommended Drag Types</a></li> + <li><a href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li> +</ul> diff --git a/files/it/web/api/document/anchors/index.html b/files/it/web/api/document/anchors/index.html new file mode 100644 index 0000000000..2b7261420d --- /dev/null +++ b/files/it/web/api/document/anchors/index.html @@ -0,0 +1,31 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +translation_of: Web/API/Document/anchors +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>anchors</code> restituisce un Array contenente tutte le ancore presenti nel documento.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>nodeList</i> = document.anchors +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">if ( document.anchors.length >= 5 ) { + dump("Ho trovato troppe ancore"); + window.location = "http<span class="nowiki">:</span>//www.google.com"; +} +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Per ragioni di compatibilità all'indietro, l'array restituito contiene solo le ancore che hanno un attributo <code>name</code> e non quelle che hanno solo l'attributo <code>id</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></p> + +<p>{{ languages( { "ja": "ja/DOM/document.anchors", "pl": "pl/DOM/document.anchors" } ) }}</p> diff --git a/files/it/web/api/document/applets/index.html b/files/it/web/api/document/applets/index.html new file mode 100644 index 0000000000..47328fbe65 --- /dev/null +++ b/files/it/web/api/document/applets/index.html @@ -0,0 +1,25 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>applets</code> restituisce un array contenente le applet presenti nel documento.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>nodeList</i> = document.applets +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">// ( voglio la seconda applet ) +la_mia_applet_java = document.applets[1]; +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p> + +<p>{{ languages( { "pl": "pl/DOM/document.applets" } ) }}</p> diff --git a/files/it/web/api/document/body/index.html b/files/it/web/api/document/body/index.html new file mode 100644 index 0000000000..e13f8e1400 --- /dev/null +++ b/files/it/web/api/document/body/index.html @@ -0,0 +1,88 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - DOM + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<p>La proprietà <strong><code>Document.body</code></strong> rappresenta il nodo {{HTMLElement("body")}} o {{HTMLElement("frameset")}} del documento corrente, o <code>null</code> se non esiste alcun elemento di questo tipo.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>objRef</var> = document.body; +document.body = <var>objRef</var>;</pre> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:js">// Dato questo HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" + +var aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> + +<h2 id="Appunti">Appunti</h2> + +<p><code>document.body</code> è l'elemento che contiene il contenuto per il documento. Nei documenti con contenuto <code><body></code> restituisce l'elemento <code><body></code>, e nei documenti frameset, restituisce l'elemento <code><frameset></code> più esterno.</p> + +<p>Anche se <code>body</code> è settabile, l'impostazione di un nuovo corpo su un documento rimuoverà efficacemente tutti i figli attuali dell'elemento <code><body></code>.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<div>{{Compat("api.Document.body")}}</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("document.head")}}</li> +</ul> diff --git a/files/it/web/api/document/characterset/index.html b/files/it/web/api/document/characterset/index.html new file mode 100644 index 0000000000..e2062ac971 --- /dev/null +++ b/files/it/web/api/document/characterset/index.html @@ -0,0 +1,32 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce la codifica dei caratteri utilizzata per il documento corrente.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = document.characterSet +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval"><button onclick="alert(document.characterSet);" +>Mostra il set di caratteri</button> +// restituisce il set di caratteri, come "ISO-8859-1" o "UTF-8" +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>La codifica dei caratteri è il set di caratteri utilizzato per visualizzare il documento, che potrebbe essere differente dalla codifica specificata nella pagina (l'utente può reimpostare la codifica da utilizzare).</p> + +<p>Per un elenco completo delle codifiche, si veda: <a class="external" href="http://www.iana.org/assignments/character-sets" rel="freelink">http://www.iana.org/assignments/character-sets</a>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> + +<p>{{ languages( { "pl": "pl/DOM/document.characterSet" } ) }}</p> diff --git a/files/it/web/api/document/close/index.html b/files/it/web/api/document/close/index.html new file mode 100644 index 0000000000..bc86c7bacc --- /dev/null +++ b/files/it/web/api/document/close/index.html @@ -0,0 +1,27 @@ +--- +title: document.close +slug: Web/API/Document/close +translation_of: Web/API/Document/close +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>document.close()</code> termina la scrittura su un documento che è stato aperto con <a href="it/DOM/document.open">document.open()</a>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">document.close(); +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre>// apro un documento per scrivervi sopra; +// scrivo il contenuto sul documento; +// chiudo il documento. +document.open(); +document.write("<p>Testo da inserire...</p>"); +document.close(); +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-98948567">DOM Level 2 HTML: <code>close()</code> Method</a></p> diff --git a/files/it/web/api/document/createelement/index.html b/files/it/web/api/document/createelement/index.html new file mode 100644 index 0000000000..649ba72fb3 --- /dev/null +++ b/files/it/web/api/document/createelement/index.html @@ -0,0 +1,139 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Referenza + - createElement + - metodo +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">In un documento <a href="/en-US/docs/Web/HTML">HTML</a>, il metodo <strong><code>document.createElement()</code></strong> crea l'elemento HTML specificato da <var>tagName</var> o un {{domxref("HTMLUnknownElement")}} se <var>tagName</var> non viene riconosciuto.</span></p> + +<div class="note"> +<p><strong>Note</strong>: In un documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, crea l'elemento XUL specificato. In altri documenti, crea un elemento con un URI namespace <code>null</code>.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="brush: js">var <var>element</var> = <var>document</var>.createElement(<var>tagName</var>[, <var>options</var>]); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><var>tagName</var></dt> + <dd>Una stringa che specifica il tipo di elemento da creare. Il {{domxref("Node.nodeName", "nodeName")}} dell'elemento creato viene inizializzato con il valore di <var>tagName</var>. Non utilizzare nomi qualificati (come "html:a") con questo metodo. Quando chiamato su un documento HTML, <code>createElement()</code> converte <var>tagName</var> in minuscolo prima di creare l'elemento. In Firefox, Opera e Chrome, <code>createElement(null)</code> funziona come <code>createElement("null")</code>.</dd> + <dt><var>options</var>{{optional_inline}}</dt> + <dd>Un oggetto <code>ElementCreationOptions</code> opzionale contenente una singola proprietà denominata <code>is</code>, il cui valore è il nome del tag per un elemento personalizzato precedentemente definito utilizzando <code>customElements.define()</code>. Vedi {{anch("Esempio di componente Web")}} per ulteriori dettagli.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il nuovo {{domxref("Element")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Esempio_basilare">Esempio basilare</h3> + +<p>Questo crea un nuovo <code><div></code> e lo inserisce prima dell'elemento con l'ID "<code>div1</code>".</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>||Lavorare con gli elementi||</title> +</head> +<body> + <div id="div1">Il testo sopra è stato creato dinamicamente.</div> +</body> +</html> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement() { + // crea un nuovo elemento div + var newDiv = document.createElement("div"); + // ed assegnargli un contenuto + var newContent = document.createTextNode("Hi there and greetings!"); + // aggiungi il nodo di testo al div appena creato + newDiv.appendChild(newContent); + + // aggiungi l'elemento appena creato e il suo contenuto nel DOM + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +}</pre> + +<p>{{EmbedLiveSample("Esempio_basilare", 500, 50)}}</p> + +<h3 id="Esempio_di_componente_Web">Esempio di componente Web</h3> + +<p>Il seguente frammento di esempio è tratto dal nostro esempio di componente di espansione list-web (vedi anche live). In questo caso, il nostro elemento personalizzato estende {{domxref("HTMLUListElement")}}, che rappresenta l'elemento {{htmlelement("ul")}}.</p> + +<pre class="brush: js">// Crea una classe per l'elemento +class ExpandingList extends HTMLUListElement { + constructor() { + // Chiama sempre super prima nel costruttore + super(); + + // definizione del costruttore lasciata fuori per brevità + ... + } +} + +// Definisce il nuovo elemento +customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre> + +<p>Se volessimo creare un'istanza di questo elemento a livello di codice, utilizzeremmo una chiamata seguendo le linee seguenti:</p> + +<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre> + +<p>Al nuovo elemento verrà assegnato un attributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> il cui valore è il nome del tag dell'elemento personalizzato.</p> + +<div class="note"> +<p><strong>Note</strong>: Per la retrocompatibilità con le versioni precedenti della <a href="https://www.w3.org/TR/custom-elements/">specifica Elementi personalizzati</a>, alcuni browser ti permetteranno di passare una stringa qui invece di un oggetto, dove il valore della stringa è il nome del tag dell'elemento personalizzato.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.createElement")}}</p> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — per specificare esplicitamente l'URI namespace per l'elemento.</li> +</ul> diff --git a/files/it/web/api/document/createrange/index.html b/files/it/web/api/document/createrange/index.html new file mode 100644 index 0000000000..6c78f471f3 --- /dev/null +++ b/files/it/web/api/document/createrange/index.html @@ -0,0 +1,30 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +translation_of: Web/API/Document/createRange +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce un nuovo oggetto <code><a href="it/DOM/range">Range</a></code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><var>range</var> = <var>document</var>.createRange(); +</pre> + +<p><code>range</code> è l'oggetto <a href="it/DOM/range">range</a> creato.</p> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">var range = document.createRange(); +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Una volta che un <code>Range</code> è stato creato, occorre impostare il punto iniziale e quello finale prima di poter utilizzare la maggior parte dei suoi metodi.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></p> diff --git a/files/it/web/api/document/defaultview/index.html b/files/it/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..46f9ef20c0 --- /dev/null +++ b/files/it/web/api/document/defaultview/index.html @@ -0,0 +1,27 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +<div>{{APIRef("DOM")}}</div> + +<p><b>document.defaultView</b> restituisce un riferimento all'<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a> predefinita del documento, oppure <code>null</code> se non ne esiste una.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">var vista = document.defaultView; +</pre> + +<p>Questa proprietà è di sola lettura.</p> + +<h3 id="Note" name="Note">Note</h3> + +<p><code>document.defaultView</code> fa parte dell'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView">DocumentView</a> del DOM Level 2.</p> + +<p><code>document.defaultView</code> generalmente è un riferimento all'oggetto <a href="it/DOM/window">window</a> del documento, però questo non è definito nella specifica è non può essere dato per scontato in ogni tipo di ambiente, o più precisamente in ogni browser.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 defaultView</a></p> + +<p>{{ languages( { "pl": "pl/DOM/document.defaultView" } ) }}</p> diff --git a/files/it/web/api/document/doctype/index.html b/files/it/web/api/document/doctype/index.html new file mode 100644 index 0000000000..e9393d19b6 --- /dev/null +++ b/files/it/web/api/document/doctype/index.html @@ -0,0 +1,27 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +translation_of: Web/API/Document/doctype +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce la dichiarazione di tipo di documento (DTD) associata al documento corrente. L'oggetto restituito implementa l'interfaccia <a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-412266927">DocumentType</a>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><var>doctype</var> = <var>document</var>.doctype +</pre> + +<p><code>doctype</code> è un proprietà di sola lettura</p> + +<h3 id="Note" name="Note">Note</h3> + +<p>Questa proprietà restituisce <code>null</code> se non vi è alcun DTD associato al documento corrente.</p> + +<p>Lo standard DOM level 2 non permette modifiche alla DTD.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-B63ED1A31">DOM Level 2 Core: doctype</a></p> + +<p>{{ languages( { "pl": "pl/DOM/document.doctype" } ) }}</p> diff --git a/files/it/web/api/document/documentelement/index.html b/files/it/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..e48895b7a0 --- /dev/null +++ b/files/it/web/api/document/documentelement/index.html @@ -0,0 +1,68 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Document.documentElement</code></strong> ritorna l'{{domxref("Element")}} che è l'elemento principale di {{domxref("document")}} (per esempio, l'elemento {{HTMLElement("html")}} per i documenti HTML).</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>element</var> = <var>document</var>.documentElement; +</pre> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:js">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; + +// firstTier è la NodeList dei figli diretti dell'elemento root +for (var i = 0; i < firstTier.length; i++) { + // fare qualcosa con ogni child diretto dell'elemento radice + // come firstTier[i] +}</pre> + +<h2 id="Appunti">Appunti</h2> + +<p>Per qualsiasi documento HTML non vuoto, <code>document.documentElement</code> sarà sempre un elemento {{HTMLElement("html")}}. Per qualsiasi documento XML non vuoto, <code>document.documentElement</code> sarà sempre qualunque elemento sia l'elemento radice del documento.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.documentElement")}}</p> diff --git a/files/it/web/api/document/firstchild/index.html b/files/it/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..ed5a34a883 --- /dev/null +++ b/files/it/web/api/document/firstchild/index.html @@ -0,0 +1,40 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +translation_of: Web/API/Node/firstChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>document.firstChild</code> restituisce il primo nodo figlio del documento.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>child = document.firstChild</i> +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>figlio</code> è un nodo di tipo <a href="it/DOM/element">element</a>.</li> +</ul> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre>function primoFiglio() { + f = document.firstChild; + alert(f.tagName); +} +// restituisce [object DocumentType] se il documento ha una DTD +// altrimenti restituisce "HTML" + +// Per un documento HTML che ha una DTD +// document.firstChild +// restituisce [object DocumentType] + +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p> + +<p>{{ languages( { "pl": "pl/DOM/document.firstChild" } ) }}</p> diff --git a/files/it/web/api/document/forms/index.html b/files/it/web/api/document/forms/index.html new file mode 100644 index 0000000000..cda3146a42 --- /dev/null +++ b/files/it/web/api/document/forms/index.html @@ -0,0 +1,128 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Forms + - HTML DOM + - HTML forms + - Proprietà + - Referenza +translation_of: Web/API/Document/forms +--- +<p><span class="seoSummary">La proprietà di sola lettura <strong><code>forms</code></strong> dell'interfaccia {{domxref("Document")}} restituisce una {{domxref("HTMLCollection")}} che elenca tutti gli elementi {{HTMLElement("form")}} contenuti nel documento.</span></p> + +<div class="note"> +<p><strong>Note:</strong> Allo stesso modo, è possibile accedere a un elenco di elementi di input utente di un modulo utilizzando la proprietà {{domxref("HTMLFormElement.elements")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><var>collection</var> = <em>document</em>.forms;</pre> + +<h3 id="Valore">Valore</h3> + +<p>Un oggetto {{domxref("HTMLCollection")}} che elenca tutti i form del documento. Ogni elemento della collezione è un {{domxref("HTMLFormElement")}} che rappresenta un singolo elemento <code><form></code>.</p> + +<p>Se il documento non ha moduli, la raccolta restituita è vuota, con una lunghezza pari a zero.</p> + +<h2 id="Example" name="Example">Esempi</h2> + +<h3 id="Ottenere_informazioni_sul_modulo">Ottenere informazioni sul modulo</h3> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> + +<head> +<title>document.forms example</title> +</head> + +<body> + +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> +</form> + +</body> +</html> +</pre> + +<h3 id="Ottenere_un_elemento_all'interno_di_un_modulo">Ottenere un elemento all'interno di un modulo</h3> + +<pre class="brush: js">var selectForm = document.forms[index]; +var selectFormElement = document.forms[index].elements[index]; +</pre> + +<h3 id="Accesso_al_modulo_con_nome">Accesso al modulo con nome</h3> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <title>document.forms example</title> +</head> + +<body> + +<form name="login"> + <input name="email" type="email"> + <input name="password" type="password"> + <button type="submit">Log in</button> +</form> + +<script> + var loginForm = document.forms.login; // Or document.forms['login'] + loginForm.elements.email.placeholder = 'test@example.com'; + loginForm.elements.password.placeholder = 'password'; +</script> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.forms")}}</p> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> + <li>{{HTMLElement("form")}} e l'interfaccia {{domxref("HTMLFormElement")}}</li> +</ul> + +<div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/document/getelementbyid/index.html b/files/it/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..bdcfac73a5 --- /dev/null +++ b/files/it/web/api/document/getelementbyid/index.html @@ -0,0 +1,149 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elementi + - Referenza + - Web + - getElementById + - id + - metodo +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Il metodo {{domxref("Document")}} <code><strong>getElementById()</strong></code> restituisce un oggetto {{domxref("Element")}} che rappresenta l'elemento la cui proprietà {{domxref("Element.id", "id")}} corrisponde alla stringa specificata. Poiché gli ID degli elementi devono essere univoci se specificati, sono un modo utile per accedere rapidamente a un elemento specifico.</p> + +<p>Se hai bisogno di accedere a un elemento che non ha un ID, puoi usare {{domxref("Document.querySelector", "querySelector()")}} per trovare l'elemento usando un qualsiasi {{Glossary("CSS selector", "selettore")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="eval">var <em>element</em> = <em>document</em>.getElementById(<em>id</em>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><strong><code>id</code></strong></dt> + <dd>L'ID dell'elemento da localizzare. L'ID è una stringa sensibile al maiuscolo/minuscolo, che è univoca all'interno del documento; solo un elemento può avere un dato ID.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un oggetto {{domxref("Element")}} che descrive l'oggetto elemento DOM che corrisponde all'ID specificato o <code>null</code> se nel documento non è stato trovato alcun elemento corrispondente.</p> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><html> +<head> + <title>getElementById example</title> +</head> +<body> + <p id="para">text here</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function changeColor(newColor) { + var elem = document.getElementById('para'); + elem.style.color = newColor; +}</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>{{ EmbedLiveSample('Esempio', 250, 100) }}</p> + +<h2 id="Note_di_utilizzo">Note di utilizzo</h2> + +<p>La maiuscola di <code>"Id"</code> nel nome di questo metodo deve essere corretta affinché il codice funzioni; <code>getElementByID()</code> <em>non è</em> valido e non funzionerà, per quanto naturale possa sembrare.</p> + +<p>A differenza di altri metodi di ricerca degli elementi come {{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}, <code>getElementById()</code> è disponibile solo come metodo per l'oggetto globale <code>document</code>, e <em>non</em> è disponibile come metodo su tutti gli oggetti elemento nel DOM. Poiché gli ID devono essere univoci nell'intero documento, non sono necessarie versioni "locali" della funzione.</p> + +<h2 id="Esempio_2">Esempio</h2> + +<pre><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p id="test1">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById('parent-id'); + var test1 = parentDOM.getElementById('test1'); + // throw error + // Uncaught TypeError: parentDOM.getElementById is not a function + </script> +</body> +</html></pre> + +<p>Se non ci sono elementi con l'<code>id</code> fornito, questa funzione restituisce <code>null</code>. Nota che il parametro <code>id</code> è case-sensitive, quindi <code>document.getElementById("<strong>M</strong>ain")</code> restituirà <code>null</code> invece dell'elemento <code><div id="<strong>m</strong>ain"></code> perché "M" e "m" sono diversi per gli scopi di questo metodo.</p> + +<p><strong>Gli elementi non presenti nel documento </strong>non vengono cercati da <code>getElementById()</code>. Quando crei un elemento ed assegni un ID ad esso, devi inserire l'elemento nell'albero del documento con {{domxref("Node.insertBefore()")}} o un metodo simile prima di poterlo ottenere con <code>getElementById()</code>:</p> + +<pre class="brush: js">var element = document.createElement('div'); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el sarà nullo! +</pre> + +<p><strong>Documenti non HTML.</strong> L'implementazione del DOM deve avere informazioni che indicano quali attributi sono di tipo ID. Gli attributi con il nome "id" non sono di tipo ID a meno che non siano definiti nella DTD del documento. L'attributo <code>id</code> è definito come di tipo ID nei casi comuni di <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, e altri. Si prevede che le implementazioni che non sanno se gli attributi siano di tipo ID o non restituiscano <code>null</code>.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale per l'interfaccia</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Sostituisce DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Sostituisce DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intende rimpiazzare DOM 3</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.getElementById")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Document")}} riferimento per altri metodi e proprietà che è possibile utilizzare per ottenere riferimenti a elementi nel documento.</li> + <li>{{domxref("Document.querySelector()")}} per i selettori tramite query come <code>'div.myclass'</code></li> + <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - ha un metodo di utilità per consentire a <code>getElementById()</code> di ottenere 'xml:id' nei documenti XML (come restituito dalle chiamate Ajax)</li> +</ul> diff --git a/files/it/web/api/document/getelementsbyclassname/index.html b/files/it/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..c752bd665d --- /dev/null +++ b/files/it/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,82 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Il metodo <strong><code>getElementsByClassName</code></strong> dell'interfaccia {{domxref("Document")}} restituisce un array-like object di tutti gli elementi figli che hanno le classi specificate. Quando viene richiamato sull'oggetto {{domxref("document")}}, viene eseguita la ricerca del documento completo, incluso il nodo radice. Puoi anche usare {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} su qualsiasi elemento; restituirà solo gli elementi che sono discendenti dell'elemento radice specificato con le classi fornite.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><var>var elementi </var>= document.getElementsByClassName(<em>nomi</em>); // oppure: +<var>var elementi </var>= rootElement.getElementsByClassName(<em>nomi</em>);</pre> + +<ul> + <li><var>elements</var> è una {{domxref("HTMLCollection")}} dinamica degli elementi trovati.</li> + <li><var>nomi </var>è una stringa che rappresenta l'elenco di nomi di classi da abbinare; le classi sono separate da spazi bianchi</li> + <li>getElementsByClassName può essere chiamato su qualsiasi elemento, non solo sul documento. L'elemento su cui è chiamato verrà utilizzato come radice della ricerca.</li> +</ul> + +<h2 id="Examples" name="Examples">Esempi</h2> + +<p>Ottenere tutti gli elementi che hanno una come classe 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('test')</pre> + +<p>Ottenere tutti gli elementi che hanno entrambe le classi 'red' e 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('red test')</pre> + +<p>Ottenere tutti gli elementi che hanno una classe di 'test', all'interno di un elemento che ha l'ID di 'main':</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test')</pre> + +<p>Ottenere il primo elemento con classe 'test' o indefinito se non ci sono elementi corrispondenti:</p> + +<pre class="brush: js">document.getElementsByClassName('test')[0] +</pre> + +<p>Possiamo anche utilizzare il metodo Array.prototype su qualsiasi {{domxref("HTMLCollection")}} passando la <code>HTMLCollection</code> come il valore <em>this</em>. Qui troveremo tutti gli elementi div che hanno come classe 'test':</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="Ottenere_il_primo_elemento_la_cui_classe_è_'test'">Ottenere il primo elemento la cui classe è 'test'</h2> + +<p>Questo è il metodo di operazione più comunemente usato.</p> + +<pre><html> +<body> + <div id="parent-id"> + <p>hello world 1</p> + <p class="test">hello world 2</p> + <p>hello world 3</p> + <p>hello world 4</p> + </div> + + <script> + var parentDOM = document.getElementById("parent-id"); + + var test = parentDOM.getElementsByClassName("test"); // una lista di elementi corrispondenti, *non* l'elemento stesso + console.log(test); //HTMLCollection[1] + + var testTarget = parentDOM.getElementsByClassName("test")[0]; // il primo elemento, come volevamo + console.log(testTarget); //<p class="test">hello world 2</p> + </script> +</body> +</html></pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.getElementsByClassName")}}</p> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/it/web/api/document/getelementsbyname/index.html b/files/it/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..f39fdf8ef7 --- /dev/null +++ b/files/it/web/api/document/getelementsbyname/index.html @@ -0,0 +1,97 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByName +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Il metodo <strong><code>getElementsByName()</code></strong> dell'oggetto {{domxref("Document")}} ritorna una raccolta di elementi {{domxref("NodeList")}} con un determinato {{domxref("element.name","name")}} nel documento.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByName(<var>name</var>); +</pre> + +<ul> + <li><var>elements</var> è una {{domxref("NodeList")}} dinamica, il che significa che si aggiorna automaticamente man mano che nuovi elementi con lo stesso <code>name</code> vengono aggiunti / rimossi dal documento.</li> + <li><var>name</var> è il valore dell'attributo <code>name</code> degli elementi.</li> +</ul> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<title>Example: using document.getElementsByName</title> + +<input type="hidden" name="up"> +<input type="hidden" name="down"> + +<script> + var up_names = document.getElementsByName("up"); + console.log(up_names[0].tagName); // ritorna "INPUT" +</script> +</html> +</pre> + +<h2 id="Appunti">Appunti</h2> + +<p>L'attributo {{domxref("element.name","name")}} può essere applicato solo nei documenti (X)HTML.</p> + +<p>La raccolta {{domxref("NodeList")}} restituita contiene tutti gli elementi con il parametro <code>name</code> dato, come {{htmlelement("meta")}}, {{htmlelement("object")}}, e persino elementi che non supportano affatto l'attributo <code>name</code>.</p> + +<div class="warning"> +<p>Il metodo <strong>getElementsByName</strong> funziona in modo diverso in IE10 e versioni precedenti. Lì, <code>getElementsByName()</code> restituisce anche gli elementi che hanno un <a href="/en-US/docs/Web/HTML/Global_attributes/id">attributo <code>id</code></a> con il valore specificato. Fai attenzione a non usare la stessa stringa sia di un <code>name</code> che di un <code>id</code>.</p> +</div> + +<div class="warning"> +<p>Il metodo <strong>getElementsByName</strong> funziona in modo diverso in IE. Lì, <code>getElementsByName()</code> non restituisce tutti gli elementi che potrebbero non avere un attributo <code>name</code> (come <code><span></code>).</p> +</div> + +<div class="warning"> +<p>Sia IE che Edge restituiscono una {{domxref("HTMLCollection")}}, non una {{domxref("NodeList")}}</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.getElementsByName")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("document.getElementById()")}} per restituire un riferimento a un elemento tramite il suo <code>id</code> unico</li> + <li>{{domxref("document.getElementsByTagName()")}} per restituire riferimenti ad elementi con lo stesso <a href="https://developer.mozilla.org/it/docs/Web/API/Element/tagName">tag</a></li> + <li>{{domxref("document.querySelector()")}} per restituire riferimenti a elementi tramite selettori CSS come <code>'div.myclass'</code></li> +</ul> diff --git a/files/it/web/api/document/getelementsbytagname/index.html b/files/it/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..e5ad9540fb --- /dev/null +++ b/files/it/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,116 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByTagName +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Il metodo <strong><code>getElementsByTagName</code></strong> dell'interfaccia {{domxref("Document")}} ritorna una {{domxref("HTMLCollection")}} di elementi con il tag specificato.</span> Viene cercato il documento completo, incluso il nodo radice. L'<code>HTMLCollection</code> è dinamica, il che significa che si aggiorna automaticamente per rimanere sincronizzato con l'albero del DOM senza dover chiamare di nuovo <code>document.getElementsByTagName()</code>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>elementi </em>= document.getElementsByTagName(<var>nome</var>);</pre> + +<ul> + <li><em>elementi </em>è una {{domxref("HTMLCollection")}} dinamica (ma vedi la nota sotto) degli elementi trovati nell'ordine in cui appaiono nell'albero.</li> + <li><var>nome</var> è una stringa che rappresenta il nome degli elementi. La stringa speciale "*" rappresenta tutti gli elementi.</li> +</ul> + +<div class="note"><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">Le ultime specifiche W3C</a> dicono che gli elementi sono una <code>HTMLCollection</code>; tuttavia, questo metodo restituisce una {{domxref("NodeList")}} nei browser WebKit. Vedi {{bug(14869)}} per i dettagli.</div> + +<h2 id="Esempio">Esempio</h2> + +<p>Nell'esempio seguente, <code>getElementsByTagName()</code> inizia da un particolare elemento padre e ricerca dall'alto verso il basso ricorsivamente attraverso il DOM da quell'elemento padre, una raccolta di tutti i discendenti che corrispondono al parametro <code>nome</code> del tag. Questo documento mostra sia <code>document.getElementsByTagName()</code> che l'identico funzionale {{domxref("Element.getElementsByTagName()")}}, che avvia la ricerca su un elemento specifico all'interno dell'albero del DOM.</p> + +<p>Facendo click sui pulsanti viene utilizzato <code>getElementsByTagName()</code> per contare gli elementi del paragrafo discendente di un particolare genitore (il documento stesso o uno dei due elementi {{HTMLElement("div")}}).</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>esempio di getElementsByTagName</title> + <script> + function getAllParaElems() { + var allParas = document.getElementsByTagName('p'); + var num = allParas.length; + alert('Ci sono ' + num + ' paragrafi in questo documento'); + } + + function div1ParaElems() { + var div1 = document.getElementById('div1'); + var div1Paras = div1.getElementsByTagName('p'); + var num = div1Paras.length; + alert('Ci sono ' + num + ' paragrafi in #div1'); + } + + function div2ParaElems() { + var div2 = document.getElementById('div2'); + var div2Paras = div2.getElementsByTagName('p'); + var num = div2Paras.length; + alert('Ci sono ' + num + ' paragrafi in #div2'); + } + </script> +</head> +<body style="border: solid green 3px"> + <p>Qualche testo esterno</p> + <p>Qualche testo esterno</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Qualche testo div1</p> + <p>Qualche testo div1</p> + <p>Qualche testo div1</p> + + <div id="div2" style="border: solid red 3px"> + <p>Qualche testo div2</p> + <p>Qualche testo div2</p> + </div> + </div> + + <p>Qualche testo esterno/p> + <p>Qualche testo esterno</p> + + <button onclick="getAllParaElems();"> + mostra tutti gli elementi p nel documento</button><br /> + + <button onclick="div1ParaElems();"> + mostra tutti gli elementi p nell'elemento div1</button><br /> + + <button onclick="div2ParaElems();"> + mostra tutti gli elementi p nell'elemento div2</button> + +</body> +</html> +</pre> + +<h2 id="Note">Note</h2> + +<p>Quando chiamato su un documento HTML, <code>getElementsByTagName()</code> converte in minuscolo il suo argomento prima di procedere. Ciò non è desiderabile quando si cerca di far corrispondere gli elementi SVG di camelCase in una sottostruttura in un documento HTML. {{Domxref("document.getElementsByTagNameNS()")}} è utile in questo caso. Vedi anche {{Bug(499656)}}.</p> + +<p><code>document.getElementsByTagName()</code> è simile a {{domxref("Element.getElementsByTagName()")}}, ad eccezione del fatto che la sua ricerca comprende l'intero documento.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<ul> + <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> + <li><a href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li> +</ul> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.getElementsByTagName")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Element.getElementsByTagName()")}}</li> + <li>{{domxref("document.getElementById()")}} per tornare a fare riferimento a un elemento con il suo <code>id</code></li> + <li>{{domxref("document.getElementsByName()")}} per tornare a fare riferimento a un elemento con il suo <code>name</code></li> + <li>{{domxref("document.querySelector()")}} per potenti selettori tramite queries come <code>'div.myclass'</code></li> +</ul> diff --git a/files/it/web/api/document/head/index.html b/files/it/web/api/document/head/index.html new file mode 100644 index 0000000000..941a533431 --- /dev/null +++ b/files/it/web/api/document/head/index.html @@ -0,0 +1,84 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/head +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">La proprietà <code><strong>head</strong></code> di sola lettura dell'interfaccia {{domxref("Document")}} restituisce l'elemento {{HTMLElement("head")}} del documento corrente.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>objRef</var> = document.head; +</pre> + +<h3 id="Valore">Valore</h3> + +<p>Un {{domxref("HTMLHeadElement")}}.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><!doctype html> +<head id="my-document-head"> + <title>Esempio: usare document.head</title> +</head> + +<script> + var theHead = document.head; + + console.log(theHead.id); // "my-document-head"; + + console.log( theHead === document.querySelector("head") ); // true +</script> +</pre> + +<h2 id="Appunti">Appunti</h2> + +<p><code>document.head</code> è di sola lettura. Cercare di assegnare un valore a questa proprietà fallirà silenziosamente o, in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>, genera un {{jsxref("TypeError")}} .</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Document.head")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/it/web/api/document/height/index.html b/files/it/web/api/document/height/index.html new file mode 100644 index 0000000000..ee517b6c39 --- /dev/null +++ b/files/it/web/api/document/height/index.html @@ -0,0 +1,35 @@ +--- +title: document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce l'altezza in pixel dell'elemento body del documento corrente.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval"><i>height_value</i> = document.height +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>height_value</code> è il numero di pixel</li> +</ul> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">// visualizza l'altezza del documento +alert(document.height); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Si veda <code><a href="it/DOM/document.width">document.width</a></code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di uno standard.</p> + +<p>{{ languages( { "pl": "pl/DOM/document.height" } ) }}</p> diff --git a/files/it/web/api/document/images/index.html b/files/it/web/api/document/images/index.html new file mode 100644 index 0000000000..abe27b2a11 --- /dev/null +++ b/files/it/web/api/document/images/index.html @@ -0,0 +1,52 @@ +--- +title: Document.images +slug: Web/API/Document/images +translation_of: Web/API/Document/images +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>document.images</code> restituisce una collezione delle <a href="/en-US/docs/DOM/Image" title="DOM/Image">immagini</a> nel documento HTML corrente.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><em>var htmlCollection</em> = document.images;</pre> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush:js">var ilist = document.images; + +for(var i = 0; i < ilist.length; i++) { + if(ilist[i].src == "banner.gif") { + // found the banner + } +}</pre> + +<h2 id="Notes" name="Notes">Note</h2> + +<p><code>document.images.length</code> – proprietà che restituisce il numero di immagini della pagina.</p> + +<p><code>document.images</code> è parte del DOM HTML, e funziona solo per documenti HTML.</p> + +<h2 id="Specifications" name="Specifications">Specifiche tecniche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche tecniche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-images', 'Document.images')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/it/web/api/document/importnode/index.html b/files/it/web/api/document/importnode/index.html new file mode 100644 index 0000000000..354db3c0c8 --- /dev/null +++ b/files/it/web/api/document/importnode/index.html @@ -0,0 +1,45 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce un clone di un nodo preso da un documento esterno.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>nodo</i> = +<i>document</i>.importNode( +<i>nodoEsterno</i>, +<i>bool</i>) +</pre> + +<ul> + <li><code>nodo</code> è il nodo che verrà importato nel documento. Il + + <i>parentNode</i> + del nuovo nodo è <code>null</code>, perchè non è ancora stato inserito nell'albero del documento</li> + <li><code>nodoEsterno</code> è il nodo che verrà importato da un altro documento</li> + <li><code>bool</code> vale true o false. Se è true, il nodo verrà importato con tutti i suoi figli. Se è false, il nodo verrà importato senza i figli</li> +</ul> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">var iframe = document.getElementsByTagName("iframe")[0]; +var vecchioNodo = iframe.contentDocument.getElementById("mioNodo"); +var nuovoNodo = document.importNode(vecchioNodo,true); +document.getElementById("contenitore").appendChild(nuovoNodo); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il nodo non viene rimosso dal documento originale. Il nodo importato è un clone dell'originale. I nodi presi dai documenti esterni devono essere importati prima di poter essere inseriti nel documento corrente.</p> + +<p><a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="freelink">http://www.w3.org/DOM/faq.html#ownerdoc</a></p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></p> + +<p>{{ languages( { "fr": "fr/DOM/document.importNode" } ) }}</p> diff --git a/files/it/web/api/document/index.html b/files/it/web/api/document/index.html new file mode 100644 index 0000000000..108f317cc3 --- /dev/null +++ b/files/it/web/api/document/index.html @@ -0,0 +1,308 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Document +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Introduzione" name="Introduzione">Introduzione</h3> + +<p>L'oggetto document fornisce un modo generico di rappresentare documenti <a href="it/HTML">HTML</a>, <a href="it/XHTML">XHTML</a>, e <a href="it/XML">XML</a>. Implementa l'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document">DOM Core document</a>.</p> + +<p>In aggiunta all'interfaccia generalizzata DOM core document, i documenti HTML implementano pure l'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM HTMLDocument</a>, che è un'interfaccia più specializzata per interagire con i documenti HTML (contiene ad esempio <a href="it/DOM/document.cookie">document.cookie</a>). In questa pagina, le proprietà e i metodi che fanno parte di questa interfaccia più specializzata sono seguite da un asterisco.</p> + +<p>L'oggetto document è contenuto nell'oggetto window e può contenere un numero qualsiasi di <a href="it/DOM/element">elementi</a>.</p> + +<p>L'interfaccia di document fornisce accesso a informazioni come il tipo di documento, i plugin e le applet, e fornisce metodi per creare e manipolare i suoi nodi figli.</p> + +<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3> + +<dl> + <dt><a href="it/DOM/document.alinkColor">document.alinkColor</a>*{{ Deprecated_inline() }}</dt> + <dd>Restituisce o setta il colore dei link attivi nel corpo del documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.anchors">document.anchors</a>*</dt> + <dd>Restituisce una collezione delle ancore presenti nel documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.applets">document.applets</a>*</dt> + <dd>Restituisce una collezione delle applet presenti nel documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.bgColor">document.bgColor</a>*{{ Deprecated_inline() }}</dt> + <dd>Restituisce/setta il colore di sfondo dell'elemento body del documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.body">document.body</a>*</dt> + <dd>Restituisce il nodo BODY del documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.characterSet">document.characterSet</a></dt> + <dd>Restituisce il set di caratteri usato nel documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.compatMode">document.compatMode</a>*</dt> + <dd>Indica se il documento viene letto dal browser in modalità standard o in modalità compatibile.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.cookie">document.cookie</a>*</dt> + <dd>Restituisce una stringa contenente la lista dei cookie(separati da un punto e virgola) usati dal documento o setta un singolo cookie.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.contentWindow">document.contentWindow</a>*</dt> + <dd>Restituisce l'oggetto window in cui è contenuto il documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.defaultView">document.defaultView</a></dt> + <dd>Restituisce un riferimento all'oggetto window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.designMode">document.designMode</a></dt> + <dd>Restituisce/setta lo stato di attivazione del Rich Text Editor di firefox, <a href="it/Midas">Midas</a>.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.doctype">document.doctype</a></dt> + <dd>Restituisce la Dichiarazione del Tipo di Documento(DTD) del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.documentElement">document.documentElement</a></dt> + <dd>Restituisce l'elemento che è figlio diretto di document, cioè nella maggior parte dei casi l'elemento HTML.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.domain">document.domain</a>*</dt> + <dd>Restituisce il dominio del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.embeds">document.embeds</a>*</dt> + <dd>Restituisce una lista degli elementi object contenuti nel documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.fgColor">document.fgColor</a>*{{ Deprecated_inline() }}</dt> + <dd>Restituisce/setta il colore di default per il testo del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.firstChild">document.firstChild</a></dt> + <dd>Restituisce il primo nodo figlio di document. (Guarda anche <a href="it/FirstChild">firstChild</a> presente nell'intefaccia element).</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.forms">document.forms</a>*</dt> + <dd>Restituisce una collezione degli elementi FORM contenuti nel documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.height">document.height</a>*</dt> + <dd>Restituisce/setta l'altezza del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.images">document.images</a>*</dt> + <dd>Restituisce una collezione delle immagini contenute nel documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.implementation">document.implementation</a>*</dt> + <dd>Restituisce l'implementazione DOM associata al documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.lastModified">document.lastModified</a>*</dt> + <dd>Restituisce la data in cui il documento è stato modificato l'ultima volta.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.linkColor">document.linkColor</a>*{{ Deprecated_inline() }}</dt> + <dd>Restituisce/setta il colore dei collegamenti nel documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.links">document.links</a>*</dt> + <dd>Restituisce una collezione dei collegamenti presenti nel documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.location">document.location</a>*</dt> + <dd>Restituisce l'URI del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.namespaceURI">document.namespaceURI</a></dt> + <dd>Restituisce lo spazio dei nomi XML del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.plugins">document.plugins</a>*</dt> + <dd>Restituisce una lista dei plugin disponibili.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.referrer">document.referrer</a>*</dt> + <dd>Restituisce l'URI della pagina che ha portato al documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.styleSheets">document.styleSheets</a>*</dt> + <dd>Restituisce una collezione degli oggetti <a href="it/DOM/stylesheet">stylesheet</a> presenti nel documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.title">document.title</a>*</dt> + <dd>Restituisce il titolo del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.URL">document.URL</a></dt> + <dd>Restituisce una stringa che rappresenta l'URI del documento corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.vlinkColor">document.vlinkColor</a>*{{ Deprecated_inline() }}</dt> + <dd>Restituisce/setta il colore dei collegamenti visitati.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.width">document.width</a>*</dt> + <dd>Restituisce la larghezza del documento corrente.</dd> +</dl> + +<h3 id="Metodi" name="Metodi">Metodi</h3> + +<dl> + <dt><a href="it/DOM/document.clear">document.clear</a> {{ Deprecated_inline() }}</dt> + <dd>Cancella i contenuti del documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.close">document.close</a></dt> + <dd>Chiude lo stream per la scrittura del documento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.createAttribute">document.createAttribute</a></dt> + <dd>Crea (e restituisce) un nuovo nodo attributo.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.createDocumentFragment">document.createDocumentFragment</a></dt> + <dd>Crea un frammento.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.createElement">document.createElement</a>*</dt> + <dd>Crea un elemento a partire dal nome di tag dato. Non funziona con documenti xml.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.createElementNS">document.createElementNS</a></dt> + <dd>Crea un elmento col nome di tag e l'URI per lo spazio dei nomi dati.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.createTextNode">document.createTextNode</a></dt> + <dd>Crea un nodo testuale.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.createEvent">document.createEvent</a></dt> + <dd>Crea un oggetto di classe Event.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.createRange">document.createRange</a></dt> + <dd>Crea un oggetto di classe Range.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.execCommand">document.execCommand</a></dt> + <dd>Esegue un comando <a href="it/Midas">Midas</a>.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.evaluate">document.evaluate</a></dt> + <dd>Valuta una espressione XPath.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.getElementById">document.getElementById</a></dt> + <dd>Restituisce un riferimento a oggetto per l'elemento che ha il dato id.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.getElementsByName">document.getElementsByName</a></dt> + <dd>Restituisce una collezione di elementi con il dato attributo name.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.getElementsByTagName">document.getElementsByTagName</a></dt> + <dd>Restituisce una collezione degli elementi con il dato nome di tag.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.importNode">document.importNode</a></dt> + <dd>Restituisce un clone di un nodo preso da un documento esterno.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.loadOverlay">document.loadOverlay</a></dt> + <dd>Carica un <a href="it/XUL_Overlays"> overlay XUL</a> dinamicamente. Funziona solo con i documenti XUL.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.open">document.open</a></dt> + <dd>Apre uno stream di documento per la scrittura.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.queryCommandEnabled">document.queryCommandEnabled</a></dt> + <dd>Restituisce true se il comando <a href="it/Midas">Midas</a> può essere eseguito sul range corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.queryCommandIndeterm">document.queryCommandIndeterm</a></dt> + <dd>Restituisce true se il comando <a href="it/Midas">Midas</a> è in uno stato indeterminato per il range corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.queryCommandState">document.queryCommandState</a></dt> + <dd>Restituisce true se il comando <a href="it/Midas">Midas</a> è stato eseguito sul range corrente.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.queryCommandValue">document.queryCommandValue</a></dt> + <dd>Restituisce il valore corrente del range corrente per il comando <a href="it/Midas">Midas</a>.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.write">document.write</a>*</dt> + <dd>Scrive del codice all'interno del documento.Non funziona con i documenti xml.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/document.writeln">document.writeln</a></dt> + <dd>Scrive una linea di codice all'interno del documento. Non funziona con i documenti xml.</dd> +</dl> + +<p>{{ languages( { "fr": "fr/DOM/document", "pl": "pl/DOM/document", "en": "en/DOM/document" } ) }}</p> diff --git a/files/it/web/api/document/lastmodified/index.html b/files/it/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..4e56851ee4 --- /dev/null +++ b/files/it/web/api/document/lastmodified/index.html @@ -0,0 +1,31 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce una stringa contenente la data e l'ora dell'utlima modifica apportata al documento corrente.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = document.lastModified +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">dump(document.lastModified); +// restituisce: Tuesday, July 10, 2001 10:19:42 +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Si noti che essendo una stringa, <code>lastModified</code> non può essere utilizzata facilmente per le comparazioni tra le date di modifica di un altro documento.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> + +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/lastmodified.asp?frame=true">MSDN: proprietà lastModified</a></p> + +<p>{{ languages( { "pl": "pl/DOM/document.lastModified" } ) }}</p> diff --git a/files/it/web/api/document/links/index.html b/files/it/web/api/document/links/index.html new file mode 100644 index 0000000000..fff02b997f --- /dev/null +++ b/files/it/web/api/document/links/index.html @@ -0,0 +1,100 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/links +--- +<div> +<p>{{ APIRef("DOM") }}</p> + +<p>La proprietà links restituisce una collezione di tutti gli elementi {{HTMLElement("area")}} e di tutti gli elementi {{HTMLElement("a")}} in un documento con un valore per l'attributo <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.href">href</a> .</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="eval line-numbers language-html"><code class="language-html">nodeList = document.links</code></pre> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> links <span class="operator token">=</span> document<span class="punctuation token">.</span>links<span class="punctuation token">;</span> +<span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> links<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> linkHref <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>links<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> lineBreak <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"br"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>linkHref<span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>lineBreak<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Specifiche_tecniche">Specifiche tecniche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche tecniche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> +</div> diff --git a/files/it/web/api/document/namespaceuri/index.html b/files/it/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..704185463f --- /dev/null +++ b/files/it/web/api/document/namespaceuri/index.html @@ -0,0 +1,29 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +translation_of: Web/API/Node/namespaceURI +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>namespaceURI</code> restituisce lo spazio dei nomi XML del documento corrente.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>NSURI</i> = document.namespaceURI +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>NSURI</code> è una stringa contenente lo spazio dei nomi.</li> +</ul> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il DOM di per sè non supporta la validazione del namespace. Spetta all'applicazione DOM effettuare la necessaria validazione. Si noti inoltre che il prefisso del namespace, una volta associato a un nodo particolare, non può più cambiare.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: namespaceURI</a></p> + +<p>{{ languages( { "fr": "fr/DOM/document.namespaceURI", "pl": "pl/DOM/document.namespaceURI" } ) }}</p> diff --git a/files/it/web/api/document/open/index.html b/files/it/web/api/document/open/index.html new file mode 100644 index 0000000000..7f4c1eb77a --- /dev/null +++ b/files/it/web/api/document/open/index.html @@ -0,0 +1,46 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/open +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo <code>document.open()</code> apre un documento in <a href="it/DOM/document.write">scrittura</a> (document.write()).</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">document.open(); +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre>// In questo esempio, i contenuti del documento +// vengono sovrascritti quando il documento +// viene reinizializzato con open(). +document.write("<html><p>eliminami</p></html>"); +document.open(); +// il documento è vuoto +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Se un documento esiste, questo metodo lo svuota (si veda l'esempio sopra).</p> + +<p>Inoltre <code>document.open()</code> viene chiamato implicitamente quando si chiama <a href="it/DOM/document.write">document.write()</a> dopo che la pagina è stata caricata, nonostante ciò non sia richiesto dalle specifiche del W3C.</p> + +<p>Non confondere questo metodo con <a href="it/DOM/window.open">window.open()</a>. <code>document.open()</code> permette di sovrascrivere il documento corrente o aggiungere testo allo stesso, mentre <code>window.open</code> fornisce un modo per apreire una finestra, lasciando intatto il documento. Poiché <code>window</code> è l'oggetto globale, scrivere solamente <code>open(...)</code> fa la stessa cosa</p> + +<p>Puoi chiudere il documento aperto usando <a href="it/DOM/document.close">document.close()</a>.</p> + +<h3 id="Specification" name="Specification">Specificazioni</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-72161170">DOM Level 2 HTML: <code>open()</code> Method</a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "fr": "fr/DOM/document.open", "ja": "ja/DOM/document.open", "pl": "pl/DOM/document.open" } ) }}</p> diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..6d8000818d --- /dev/null +++ b/files/it/web/api/document/queryselector/index.html @@ -0,0 +1,121 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +translation_of: Web/API/Document/querySelector +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Il metodo {{domxref("Document")}} <code><strong>querySelector()</strong></code> ritorna il primo {{domxref("Element")}} all'interno del documento che corrisponde al selettore specificato o al gruppo di selettori. Se non vengono trovate corrispondenze, viene restituito <code>null</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: Il matching viene eseguito utilizzando il deep-pre-order traversal dei nodi del documento partendo dal primo elemento nel markup del documento e iterando attraverso i nodi sequenziali per ordine del numero di nodi figli.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><var>selectors</var></dt> + <dd>Una {{domxref("DOMString")}} contenente uno o più selettori da trovare. Questa stringa deve essere una stringa di selettore CSS valida; se non lo è, viene generata un'eccezione <code>SYNTAX_ERR</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sui selettori e su come gestirli.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.</p> +</div> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un oggetto {{domxref ("Element")}} che rappresenta il primo elemento nel documento che corrisponde al set specificato di <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>, o <code>null</code> viene restituito se non ci sono corrispondenze.</p> + +<p>Se hai bisogno di un elenco di tutti gli elementi che corrispondono ai selettori specificati, dovresti usare {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>La sintassi dei <em>selettori</em> specificati non è valida.</dd> +</dl> + +<h2 id="Note_di_utilizzo">Note di utilizzo</h2> + +<p>Se il selettore specificato corrisponde a un ID erroneamente utilizzato più di una volta nel documento, viene restituito il primo elemento con quell'ID.</p> + +<p>Gli <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi CSS</a> non restituiranno mai alcun elemento, come specificato nelle <a href="http://www.w3.org/TR/selectors-api/#grammar">API dei selettori.</a></p> + +<h3 id="Escaping_caratteri_speciali">Escaping caratteri speciali</h3> + + + +<p>Per eseguire la corrispondenza con un ID o selettori che non seguono la sintassi CSS standard (ad esempio utilizzando due punti o uno spazio in modo inappropriato), è necessario eseguire l'escape del carattere con un backslash ("\"). Poiché il backslash è anche un carattere di escape in JavaScript, se si immette una stringa letterale, è necessario eseguire l'escape due volte (una per la stringa JavaScript e un'altra per querySelector ()):</p> + +<pre class="brush: html notranslate"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" (\b è il carattere di controllo backspace) + document.querySelector('#foo\bar'); // Non corrisponde a nulla + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\\\bar'); // Seleziona il primo div + + document.querySelector('#foo:bar'); // Non corrisponde a nulla + document.querySelector('#foo\\:bar'); // Seleziona il secondo div</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Trovare_il_primo_elemento_che_corrisponde_a_una_classe">Trovare il primo elemento che corrisponde a una classe</h3> + +<p>In questo esempio, viene restituito il primo elemento del documento con la classe "<code>myclass</code>":</p> + +<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); +</pre> + +<h3 id="Un_selettore_più_complesso">Un selettore più complesso</h3> + +<p>I selettori possono anche essere molto potenti, come dimostrato nel seguente esempio. Qui, il primo elemento {{HTMLElement("input")}} con il nome "login" (<code><input name="login"/></code>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<code><div class="user-panel main"></code>) nel documento viene restituito:</p> + +<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']"); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<div>{{Compat("api.Document.querySelector")}}</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippet di codice per querySelector</a></li> +</ul> diff --git a/files/it/web/api/document/queryselectorall/index.html b/files/it/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..a8e614ce9e --- /dev/null +++ b/files/it/web/api/document/queryselectorall/index.html @@ -0,0 +1,180 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Cercare elementi + - Document + - Localizzare Elementi + - Referenza + - Selettori + - Selettori CSS + - Selezionare Elementi + - Trovare elementi + - metodo + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo {{domxref("Document")}} <code><strong>querySelectorAll()</strong></code> ritorna una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.</p> + +<div class="note"> +<p><strong>Note:</strong> This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve contenere dei <a href="/en-US/docs/Web/CSS/CSS_Selectors">selettori CSS</a> validi; se non lo sono, viene generata un'eccezione <code>SyntaxError</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sull'uso dei selettori per cercare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.</p> +</div> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ogni elemento che corrisponde ad almeno uno dei selettori specificati o una {{domxref("NodeList")}} vuota in caso di assenza di corrispondenze.</p> + +<div class="note"> +<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono uno <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>, l'elenco restituito è sempre vuoto.</p> +</div> + +<h3 id="Eccezioni">Eccezioni</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>La sintassi della stringa <code>selectors</code> specificata non è valida.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Ottenere_un_elenco_di_elementi">Ottenere un elenco di elementi</h3> + +<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> + +<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} all'interno del documento con la classe "<code>note</code>" o "<code>alert</code>":</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>Qui, otteniamo un elenco di elementi <code><p></code> il cui elemento padre immediato è un {{domxref("div")}} con la classe <code>"highlighted"</code> e che si trovano all'interno di un contenitore il cui ID è <code>"test"</code>.</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>Questo esempio utilizza un <a href="/en-US/docs/Web/CSS/Attribute_selectors">selettore tramite attributo</a> per restituire un elenco degli elementi {{domxref("iframe")}} nel documento che contengono un attributo denominato <code>"data-src"</code>:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è <code>"userlist"</code> con l'attributo <code>"data-active"</code> il cui valore è <code>"1"</code>:</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="Accedere_ai_risultati">Accedere ai risultati</h3> + +<p>Una volta che viene restituita la {{domxref("NodeList")}} degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà <code>length</code> è 0), non è stato trovato alcun elemento.</p> + +<p>Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="Note_dell'utente">Note dell'utente</h2> + +<p><code>querySelectorAll()</code> si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.</p> + +<h3 id="HTML">HTML</h3> + +<p>Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} nidificati.</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>In questo esempio, quando si seleziona <code>".outer .inner"</code> nel contesto <code><div></code> con la classe <code>"select"</code>, si trova ancora l'elemento con la classe <code>".inner"</code> anche se <code>.outer</code> non è un discendente dell'elemento base su cui viene eseguita la ricerca (<code>".select"</code>). Per impostazione predefinita, <code>querySelectorAll()</code> verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.</p> + +<p>La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, trova solo i selettori corrispondenti sui discendenti dell'elemento base:</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Standard di vita</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Definizione iniziale</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Definizione originale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("api.Document.querySelectorAll")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> nella guida sul CSS</li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> nell'area di apprendimento di MDN</li> + <li>{{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} e {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} e {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li> +</ul> diff --git a/files/it/web/api/document/referrer/index.html b/files/it/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8cefd3c9ac --- /dev/null +++ b/files/it/web/api/document/referrer/index.html @@ -0,0 +1,23 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +translation_of: Web/API/Document/referrer +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce l'<a class="external" href="http://www.w3.org/Addressing/#background">URI</a> della pagina che l'utente ha visitato e che conteneva il link al documento corrente.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = document.referrer +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il valore è una stringa vuota se l'utente si è recato alla pagina corrente digitando l'indirizzo direttamente o attraverso un bookmark. Siccome questa proprietà restituisce solo una stringa, non fornisce un accesso al DOM della pagina a cui si riferisce.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></p> + +<p>{{ languages( { "pl": "pl/DOM/document.referrer" } ) }}</p> diff --git a/files/it/web/api/document/stylesheets/index.html b/files/it/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..9de0ad0fc5 --- /dev/null +++ b/files/it/web/api/document/stylesheets/index.html @@ -0,0 +1,43 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +<p>{{APIRef("DOM")}}</p> + +<p>Restituisce una lista di oggetti <a href="it/DOM/stylesheet">stylesheet</a> per i fogli stile esplicitamente linkati o inclusi nel documento.</p> + +<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3> + +<p><code>styleSheetList.length</code> - restituisce il numero di oggetti stylesheet contenuti nell'oggetto.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>styleSheetList</i> = +<i>document</i>.styleSheets +</pre> + +<p>L'oggetto restituito è di tipo <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">StyleSheetList</a>.</p> + +<p>E' una collezione ordinata di oggetti <a href="it/DOM/stylesheet">stylesheet</a>. <code> + <i>styleSheetList</i> + .item( + + <i>indice</i> + )</code> o semplicemente <code> + <i>styleSheetList</i> + {{ mediawiki.external(' + + <i>indice</i> + ') }}</code> restituisce un singolo oggetto stylesheet indicato dall'indice (<code>indice</code> comincia da 0).</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></p> + +<p>{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}</p> diff --git a/files/it/web/api/document/title/index.html b/files/it/web/api/document/title/index.html new file mode 100644 index 0000000000..5e93fa8318 --- /dev/null +++ b/files/it/web/api/document/title/index.html @@ -0,0 +1,32 @@ +--- +title: document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +<p>{{APIRef("DOM")}}<code>document.title</code> restituisce il titolo del documento.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>sTitle</i> = document.title +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>sTitle</code> è una stringa che contiene il titolo del documento corrente.</li> +</ul> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre><html> + <title>Ciao mondo!</title> + <body> +... +// document.title restituisce "Ciao mondo!" +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2: title</a></p> + +<p>{{ languages( { "pl": "pl/DOM/document.title" } ) }}</p> diff --git a/files/it/web/api/document/url/index.html b/files/it/web/api/document/url/index.html new file mode 100644 index 0000000000..e3a04cf953 --- /dev/null +++ b/files/it/web/api/document/url/index.html @@ -0,0 +1,29 @@ +--- +title: document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce l'URL del documento corrente.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = document.URL +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">var currentURL = document.URL; +alert(currentURL); +</pre> + +<h3 id="Notes.C3.B9" name="Notes.C3.B9">Notesù</h3> + +<p><code>URL</code> è un sostituto della proprietà non standard <code>document.location.href</code>. Tuttavia <code>document.URL</code> è di sola lettura, diversamente da <code>document.location.href</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></p> + +<p>{{ languages( { "ja": "ja/DOM/document.URL", "pl": "pl/DOM/document.URL" } ) }}</p> diff --git a/files/it/web/api/document/width/index.html b/files/it/web/api/document/width/index.html new file mode 100644 index 0000000000..82756dbbc7 --- /dev/null +++ b/files/it/web/api/document/width/index.html @@ -0,0 +1,32 @@ +--- +title: document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +<div>{{APIRef("DOM")}}</div> + +<p>Restituisce la larghezza in pixel dell'elemento body del documento corrente.</p> + +<p>Non supportato da IE.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>pixels</i> = document.width; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">function init() { + alert("La larghezza del documento è di " + document.width + " pixel."); +} +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Si veda <code><a href="it/DOM/document.height">document.height</a></code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di uno standard.</p> + +<p>{{ languages( { "pl": "pl/DOM/document.width" } ) }}</p> diff --git a/files/it/web/api/document/write/index.html b/files/it/web/api/document/write/index.html new file mode 100644 index 0000000000..0337177181 --- /dev/null +++ b/files/it/web/api/document/write/index.html @@ -0,0 +1,74 @@ +--- +title: Document.write() +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Summary" name="Summary">Riassunto</h3> + +<p>Scrive una stringa di testo in un flusso di documento aperto da <a href="/en-US/docs/Web/API/document.open" title="/en-US/docs/Web/API/document.open">document.open()</a>.</p> + +<h3 id="Syntax" name="Syntax">Sintassi</h3> + +<pre class="eval">document.write(<em>markup</em>); +</pre> + +<ul> + <li><code>markup</code> è una stringa contenente il testo da scrivere nel documento.</li> +</ul> + +<h3 id="Example" name="Example">Example</h3> + +<pre class="brush: html"><html> + +<head> +<title>write example</title> + +<script type="text/javascript"> + +function newContent() +{ +alert("load new content"); +document.open(); +document.write("<h1>Out with the old - in with the new!</h1>"); +document.close(); +} + +</script> +</head> + +<body onload="newContent();"> +<p>Some original document content.</p> +</body> +</html> +</pre> + +<h3 id="Notes" name="Notes">Note</h3> + +<p>La scrittura di un documento che è gia stato caricato senza <a href="/en-US/docs/Web/API/document.open" title="/en-US/docs/Web/API/document.open">document.open()</a> eseguirà automaticamente <code>document.open</code>. Una volta che hai finito di scrivere, si consiglia di chiamare <a href="/en-US/docs/Web/API/document.close" title="/en-US/docs/Web/API/document.close">document.close()</a>, per dire al browser di completare il caricamento della pagina. Il testo che si scrive viene analizzato nel modello struttura del documento. Nell'esempio precedente, l'<code>h1</code> diventa nodo del documento.</p> + +<p>Se il <code>document.write()</code> viene incorporato direttamente nel codice HTML, allora non chiamerà il <code>document.open()</code>. Per esempio:</p> + +<pre class="brush: html"> <div> + <script type="text/javascript"> + document.write("<h1>Main title</h1>") + </script> + </div> +</pre> + +<div class="note"><strong>Nota:</strong> <strong>document.write</strong> (come <strong>document.writeln</strong>) non lavora in documenti XHTML (si otterrà "Operazione non ammessa" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) nella console). Questo è il caso se l'apertura di un file locale con estensione .xhtml, o per qualsiasi documento servito con un tipo MIME application/xhtml+xml . Ulteriori informazioni sono disponibili nel <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<h3 id="Specification" name="Specification">Specificazioni</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li> + <li><a class="external" href="http://www.w3.org/html/wg/drafts/html/CR/webappapis.html#dynamic-markup-insertion" title="http://dev.w3.org/html5/spec/content-models.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li> +</ul> + +<h3 id="See_also" name="See_also">Vedi anche</h3> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/it/web/api/document/writeln/index.html b/files/it/web/api/document/writeln/index.html new file mode 100644 index 0000000000..080eb49c4e --- /dev/null +++ b/files/it/web/api/document/writeln/index.html @@ -0,0 +1,34 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Scrive una stringa di testo seguita da un carattere di accapo nel documento.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="eval">document.writeln(<em>riga</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<ul> + <li><code>riga</code> è una stringa contenente una riga di testo.</li> +</ul> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre>document.writeln("<p>inserisci una password:</p>"); +</pre> + +<h2 id="Notes" name="Notes">Note</h2> + +<p><strong>document.writeln</strong> è uguale a <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write</a>, in più aggiunge una nuova riga.</p> + +<div class="note"><strong>Nota:</strong> <strong>document.writeln</strong> (come <strong>document.write</strong>) non funziona nei documenti XHTML (restituisce un errore "Operation is not supported" (Operazione non supportata) (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) sulla console degli errori). Questo può capitare per esempio aprendo un file locale con estensione .xhtml o qualsiasi documento da un server che abbia MIME type application/xhtml+xml. Altre informazioni sono disponibili nelle <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p> diff --git a/files/it/web/api/document_object_model/index.html b/files/it/web/api/document_object_model/index.html new file mode 100644 index 0000000000..c1877f3642 --- /dev/null +++ b/files/it/web/api/document_object_model/index.html @@ -0,0 +1,435 @@ +--- +title: Document Object Model (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - DOM Reference + - Intermediate + - Reference +translation_of: Web/API/Document_Object_Model +--- +<div>{{DefaultAPISidebar("DOM")}}</div> + +<p>Il <strong>Document Object Model (<em>DOM</em>)</strong> rappresenta una pagina web come un documento con un albero logico di oggetti.</p> + +<p>Ogni ramo dell'albero termina in un nodo, e ogni nodo contiene oggetti. Il modello DOM collega le pagine web agli script o ai linguaggi di programmazione. Usualmente significa usare JavaScript, anche se modellare documenti HTML, SVG o XML come oggetti non è parte del linguaggio JavaScript.</p> + +<p>I metodi del DOM permettono un accesso programmatico all'albero; tramite i metodi e le proprietà del DOM è possibile modificare la struttura del documento stesso, lo stile e/o il contenuto.</p> + +<p>I nodi possono avere degli eventi aggangiati ad essi e quando un evento viene scatenato, l'<em>handler</em> dell'evento viene eseguito.</p> + +<p>E' disponibile una <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introduzione</a> al DOM.</p> + +<h2 id="Interfacce_DOM">Interfacce DOM</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("NonDocumentTypeChildNode")}}</li> + <li>{{domxref("ParentNode")}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Selection")}}{{experimental_inline}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TextDecoder")}} {{experimental_inline}}</li> + <li>{{domxref("TextEncoder")}} {{experimental_inline}}</li> + <li>{{domxref("TimeRanges")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="Interfacce_DOM_obsolete_obsolete_inline">Interfacce DOM obsolete {{obsolete_inline}}</h2> + +<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:</p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DocumentTouch")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("ElementTraversal")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> +</ul> +</div> + +<h2 id="HTML_interfaces">HTML interfaces</h2> + +<p>A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.</p> + +<p>An <code>HTMLDocument</code> object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.</p> + +<h3 id="HTML_element_interfaces">HTML element interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDialogElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Other_interfaces">Other interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="Obsolete_HTML_interfaces_obsolete_inline">Obsolete HTML interfaces {{obsolete_inline}}</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SVG_interfaces">SVG interfaces</h2> + +<h3 id="SVG_element_interfaces">SVG element interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEDropShadowElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGeometryElement")}}</li> + <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGGraphicsElement")}}</li> + <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li> +</ul> +</div> + +<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3> + +<p>Here are the DOM API for data types used in the definitions of SVG properties and attributes.</p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Static_type">Static type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGNameList")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Animated_type">Animated type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("GetSVGDocument")}}</li> + <li>{{domxref("ShadowAnimation")}}</li> + <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGDocument")}}</li> + <li>{{domxref("SVGException")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGUseElementShadowRoot")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> + <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li> +</ul> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a></li> +</ul> diff --git a/files/it/web/api/document_object_model/introduzione/index.html b/files/it/web/api/document_object_model/introduzione/index.html new file mode 100644 index 0000000000..328caa0c5c --- /dev/null +++ b/files/it/web/api/document_object_model/introduzione/index.html @@ -0,0 +1,257 @@ +--- +title: Introduzione al DOM +slug: Web/API/Document_Object_Model/Introduzione +tags: + - Beginner + - DOM + - Guida + - HTML DOM + - Introduzione + - Principianti + - Tutorial +translation_of: Web/API/Document_Object_Model/Introduction +--- +<p><span class="seoSummary">Il <strong>Document Object Model</strong> (<strong>DOM</strong>) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta </span>un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.</p> + +<h2 id="Che_cosè_il_DOM">Che cos'è il DOM?</h2> + +<p>Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.</p> + +<p>La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.</p> + +<p>Gli standard <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> e <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.</p> + +<p>Per esempio, lo standard DOM specifica che il metodo <code>getElementsByTagName</code> usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <code><p></code> nel documento.</p> + +<pre class="brush: js">const paragrafi = document.getElementsByTagName("p"); +// paragrafi[0] è il primo <p> elemento +// paragrafi[1] è il secondo <p> elemento, etc. +alert(paragrafi[0].nodeName); +</pre> + +<p>Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto <code>document</code> che rappresenta il documento stesso, l'oggetto <code>table</code> che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.</p> + +<p>Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'<a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.</p> + +<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM e JavaScript</h2> + +<p>Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.</p> + +<p>Agli inizi, JavaScript e il DOM </p> + +<p>All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:</p> + +<p>API = DOM + JavaScript</p> + +<p>Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:</p> + +<pre class="brush: python"># Esempio DOM in Python +import xml.dom.minidom as m +doc = m.parse(r"C:\Projects\Py\chap1.xml") +doc.nodeName # DOM property of document object +p_list = doc.getElementsByTagName("para") +</pre> + +<p>Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Accedere al DOM</h2> + +<p>Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di </p> + +<p>Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .</p> + +<p>Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <code><script></code> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.</p> + +<pre class="brush: html"><body onload="window.alert('Benvenuto nella mia pagina web!');"> +</pre> + +<p>Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.</p> + +<pre class="brush: html"><html> + <head> + <script> + // esegui questa funzione quando la pagina è stata caricata + window.onload = function() { + + // crea un paio di elementi in una pagina HTML altrimenti vuota + const heading = document.createElement("h1"); + const heading_text = document.createTextNode("Big Head!"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> +</pre> + +<h2 id="Important_Data_Types" name="Important_Data_Types">Tipi di dati fondamentali</h2> + +<p>Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come <strong>elementi</strong> anche se, a rigor di termini, non tutti i nodi sono un elemento.</p> +</div> + +<p>La tabella seguente descrive brevemente questi tipi di dati.</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Tipi di dati (Interfaccia)</th> + <th>Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Document")}}</td> + <td> + <p>Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà <code>ownerDocument</code> di un elemento restituisce il <code>document</code> a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> descrive l'oggetto del documento.</p> + </td> + </tr> + <tr> + <td>{{domxref("Node")}}</td> + <td>Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.</td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td>Il tipo <code>element</code> è basado sul <code>node</code>. Si riferisce a un elemento o un nodo di tipo <code>element</code> restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un <code>node</code>, diciamo solo che questo metodo restituisce l'<code>element</code> che è stato appena creato nel DOM. Gli oggetti <code>element</code> implementano l'interfaccia DOM <code>Element</code> e anche l'interfaccia <code>Node</code> più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).</td> + </tr> + <tr> + <td>{{domxref("NodeList")}}</td> + <td>Una <code>nodeList</code> è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel <code>nodeList</code> sono accessibili, da indice, tramite due opzioni: + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + Questi due sono equivalenti. Nel primo, <code>item()</code> è un singolo metodo dell'oggetto <code>nodeList</code>. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.</td> + </tr> + <tr> + <td>{{domxref("Attribute")}}</td> + <td>Quando un <code>attribute</code> viene restituito da un membro (ad es. con il metodo <code>createAttribute()</code>), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.</td> + </tr> + <tr> + <td>{{domxref("NamedNodeMap")}}</td> + <td>Un <code>namedNodeMap</code> è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un <code>namedNodeMap</code> ha un metodo <code>item()</code> per questo scopo e puoi anche aggiungere e rimuovere elementi da una <code>namedNodeMap</code>.</td> + </tr> + </tbody> +</table> + +<p>Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un <code>attribute</code>, ad esempio, e fare riferimento a un array di nodi DOM come <code>nodeList</code>. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.</p> + +<h2 id="DOM_interfaces" name="DOM_interfaces">interfaccia DOM</h2> + +<p>Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia <code>HTMLFormElement</code> ma la sua proprietà <code>className</code> dall'interfaccia <code>HTMLElement</code>. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.<br> + <br> + Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.</p> + +<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfacce ed oggetti</h3> + +<p>Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come <code>createCaption</code> e <code>insertRow</code>. Ma poiché è anche un elemento HTML, la <code>table</code> implementa l'interfaccia <code>Element</code> descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia <code>Node</code> di base, da quale <code>Element</code> deriva.</p> + +<p>Quando si ottiene un riferimento a un oggetto <code>table</code>, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.</p> + +<pre class="brush: js">const table = document.getElementById("table"); +const tableAttrs = table.attributes; // Node/Element interface +for (let i = 0; i < tableAttrs.length; i++) { + // HTMLTableElement interface: border attribute + if(tableAttrs[i].nodeName.toLowerCase() == "border") + table.border = "1"; +} +// HTMLTableElement interface: summary attribute +table.summary = "note: increased border"; +</pre> + +<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Principali interfacce nel DOM</h3> + +<p>Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a> alla fine di questo libro.</p> + +<p>Gli oggetti <code>document</code> e <code>window</code> sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto <code>window</code> rappresenta qualcosa di simile al browser e l'oggetto <code>document</code> è la radice del documento stesso. L'<code>Element</code> eredita dall'interfaccia del <code>Node</code> generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.</p> + +<p>Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.</p> + +<ul> + <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> + <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li> + <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li> + <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li> + <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li> + <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li> + <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li> + <li><code>{{domxref("window.content", "", "", "1")}}</code></li> + <li><code>{{domxref("window.onload", "", "", "1")}}</code></li> + <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> +</ul> + +<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Test dell'API DOM</h2> + +<p>Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <code><script></code>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.</p> + +<p>Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento <script> nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.</p> + +<p>Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione <code>test()</code> secondo necessità, creare più pulsanti o aggiungere elementi se necessario.</p> + +<pre class="brush: html"><html> +<head> + <title>DOM Tests</title> + <script> + function setBodyAttr(attr, value) { + if (document.body) document.body[attr] = value; + else throw new Error("no support"); + } + </script> +</head> +<body> + <div style="margin: .5in; height: 400px;"> + <p><b><tt>text</tt></b></p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black</option> + <option value="red">red</option> + </select> + <p><b><tt>bgColor</tt></b></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white</option> + <option value="lightgrey">gray</option> + </select> + <p><b><tt>link</tt></b></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue</option> + <option value="green">green</option> + </select> + <small> + <a href="http://some.website.tld/page.html" id="sample"> + (sample link) + </a> + </small><br /> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> +</body> +</html> +</pre> + +<p>Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.</p> + +<figure> +<figcaption>Figure 0.1 Esempio DOM Test Page</figcaption> +<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> + +<p>In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (<code>bgColor</code>), il colore dei collegamenti ipertestuali (<code>aLink</code>) e il colore del testo (<code>text</code>). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.</p> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> + +<div>{{DefaultAPISidebar("DOM")}}</div> diff --git a/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..7e82547d5d --- /dev/null +++ b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,46 @@ +--- +title: Individuazione degli elementi DOM mediante selettori +slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +<p>L'API dei selettori fornisce metodi che consentono di recuperare in modo rapido e semplice i nodi {{domxref("Element")}} dal DOM confrontando una serie di selettori. Questo è molto più rapido rispetto alle tecniche passate, in cui era necessario, ad esempio, utilizzare un loop nel codice JavaScript per individuare gli elementi specifici che dovevi trovare.</p> + +<h2 id="L'interfaccia_NodeSelector">L'interfaccia NodeSelector</h2> + +<p>Questa specifica aggiunge due nuovi metodi a qualsiasi oggetto che implementa le interfacce {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}}:</p> + +<dl> + <dt><code>querySelector</code></dt> + <dd>Restituisce il primo nodo {{domxref("Element")}} corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito <code>null</code>.</dd> + <dt><code>querySelectorAll</code></dt> + <dd>Restituisce una {{domxref("NodeList")}} contenente tutti i nodi <code>Element</code> corrispondenti all'interno della sottostruttura del nodo o una <code>NodeList</code> vuota se non vengono trovate corrispondenze.</dd> +</dl> + +<div class="note"><strong>Note:</strong> La {{domxref("NodeList")}} restituita da {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} non è dinamica, il che significa che le modifiche nel DOM non si riflettono nella collezione. Questo è diverso dagli altri metodi di DOM querying che restituiscono gli elenchi dei nodi dinamici.</div> + +<p>È possibile trovare esempi e dettagli leggendo la documentazione per i metodi {{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}, nonché nell'articolo <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p> + +<h2 id="Selettori">Selettori</h2> + +<p>I metodi di selezione accettano uno o più selettori separati da virgola per determinare quale elemento o elementi devono essere restituiti. Ad esempio, per selezionare tutti gli elementi paragrafo (<code>p</code>) in un documento la cui classe CSS è <code>warning</code> o <code>note</code>, è possibile effettuare le seguenti operazioni:</p> + +<pre><code>var special = document.querySelectorAll("p.warning, p.note");</code></pre> + +<p>Puoi anche effettuare una query per ID. Per esempio:</p> + +<pre><code>var el = document.querySelector("#main, #basic, #exclamation");</code></pre> + +<p>Dopo aver eseguito il codice sopra, <code>el</code> contiene il primo elemento nel documento il cui ID è uno di <code>main</code>, <code>basic</code>, o <code>exclamation</code>.</p> + +<p>Puoi usare qualsiasi selettore CSS con i metodi <code>querySelector()</code> e <code>querySelectorAll()</code>.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/it/web/api/domapplicationsregistry/getinstalled/index.html b/files/it/web/api/domapplicationsregistry/getinstalled/index.html new file mode 100644 index 0000000000..24657e5900 --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/getinstalled/index.html @@ -0,0 +1,49 @@ +--- +title: DOMApplicationsRegistry.getInstalled() +slug: Web/API/DOMApplicationsRegistry/getInstalled +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled +--- +<p> </p> + +<p> </p> + +<p>{{ ApiRef("Apps") }}</p> + +<p>{{ non-standard_header() }}</p> + +<h2 id="Summary">Summary</h2> + +<p>Get a list of all installed apps from this origin. For example, if you call this on the Firefox Marketplace, you will get the list of apps installed by the Firefox Marketplace.</p> + +<div class="note"> +<p><strong>Note</strong>: Installable open web apps used to have a "single app per origin" security policy, but this was lifted as of Firefox 34/Firefox OS 2.1 (read <a href="https://developer.mozilla.org/en-US/Apps/Build/installable_apps_for_Firefox_OS/App_manifest_FAQ#Can_I_have_more_than_one_app_at_my_origin.3F">this FAQ entry</a> for more information). If you still need to support older versions, consider hosting your apps at separate origins; one strategy is to <a href="/en-US/Marketplace/Publishing/Adding_a_subdomain">create different subdomains</a> for your apps.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre><code>var request = window.navigator.mozApps.<code>getInstalled</code>()</code>; +</pre> + +<h3 id="Errors">Errors</h3> + +<p>The string <code>ERROR</code> can be returned in <code>DOMRequest.error</code>.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var request = window.navigator.mozApps.getInstalled(); +request.onerror = function(e) { + alert("Error calling getInstalled: " + request.error.name); +}; +request.onsuccess = function(e) { + alert("Success, number of apps: " + request.result.length); + var appsRecord = request.result; +};</pre> + +<p>Callers are expected to set the <code>onsuccess</code> and <code>onerror</code> callback properties of the returned object, as shown in this example. If the call is successful an array of <a href="/en-US/docs/Web/API/App"><code>App</code> objects</a> is returned in the <code>result</code> property of the returned object. In the example this is <code>request.result</code>.</p> + +<h2 id="Related_topics">Related topics</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/App"><code>App</code> object</a></li> + <li><a href="/en-US/docs/Web/Apps/JavaScript_API">Apps JavaScript API</a></li> +</ul> diff --git a/files/it/web/api/domapplicationsregistry/index.html b/files/it/web/api/domapplicationsregistry/index.html new file mode 100644 index 0000000000..4effc6546e --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/index.html @@ -0,0 +1,89 @@ +--- +title: DOMApplicationsRegistry +slug: Web/API/DOMApplicationsRegistry +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - Non-standard + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry +--- +<p>{{ ApiRef("Apps") }}</p> + +<p>{{ non-standard_header() }}</p> + +<p>Provides support for installing, managing, and controlling Open Web apps in a browser. Currently implemented as {{ domxref('window.navigator.mozApps') }}.</p> + +<h2 id="Property">Property</h2> + +<dl> + <dt>{{domxref("DOMApplicationsRegistry.mgmt")}}</dt> + <dd>A <code>mgmt</code> object that exposes functions that let dashboards manage and launch apps on a user's behalf.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}</dt> + <dd>Checks whether an app has already been installed, taking its manifest as parameter.</dd> + <dt>{{ domxref("DOMApplicationsRegistry.install()") }}</dt> + <dd>Triggers the installation of an app. During the installation process, the app is validated and the user is prompted to approve the installation.</dd> + <dt>{{ domxref("DOMApplicationsRegistry.getSelf()") }}</dt> + <dd>Returns an object that contains an {{ domxref('app') }} object for the app.</dd> + <dt>{{ domxref("DOMApplicationsRegistry.getInstalled()") }}</dt> + <dd>Gets a list of all installed apps.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>16.0</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>16.0</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/it/web/api/domstring/index.html b/files/it/web/api/domstring/index.html new file mode 100644 index 0000000000..625d5762d3 --- /dev/null +++ b/files/it/web/api/domstring/index.html @@ -0,0 +1,56 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - Referenza + - String +translation_of: Web/API/DOMString +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>DOMString</code></strong> è una stringa UTF-16. Poiché JavaScript utilizza già tali stringhe, <code>DOMString</code> viene mappato direttamente su {{jsxref("String")}}.</p> + +<p>Passare {{jsxref("null")}} ad un metodo o parametro che accetta una <code>DOMString</code> tipicamente si trasforma in <code>"null"</code>.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td> + <td>{{Spec2('WebIDL')}}</td> + <td>Riformulazione della definizione per rimuovere casi di bordo strani.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM1')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>JavaScript {{jsxref("String")}}</li> + <li>{{domxref("USVString")}}</li> + <li>{{domxref("CSSOMString")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Stringhe Binarie</a></li> +</ul> diff --git a/files/it/web/api/domtokenlist/index.html b/files/it/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..dab0967959 --- /dev/null +++ b/files/it/web/api/domtokenlist/index.html @@ -0,0 +1,115 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - DOM + - DOMTokenList + - Interfaccia + - Referenza +translation_of: Web/API/DOMTokenList +--- +<div>{{APIRef("DOM")}}</div> + +<p>L'interfaccia <strong><code>DOMTokenList</code></strong> rappresenta un insieme di token separati dallo spazio. Tale insieme viene restituito da {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, o {{domxref("HTMLOutputElement.htmlFor")}}. Viene indicizzato a partire da <code>0</code> come con gli JavaScript {{jsxref("Array")}} oggetti. <code>DOMTokenList</code> è sempre case-sensitive.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt> + <dd>È un <code>integer</code> che rappresenta il numero di oggetti memorizzati nell'oggetto.</dd> + <dt>{{domxref("DOMTokenList.value")}}</dt> + <dd>Il valore della lista come una {{domxref("DOMString")}}.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{domxref("DOMTokenList.item()")}}</dt> + <dd>Restituisce un elemento nell'elenco per il suo indice (restituisce undefined se il numero è maggiore o uguale alla lunghezza dell'elenco).</dd> + <dt>{{domxref("DOMTokenList.contains()")}}</dt> + <dd>Restituisce <code>true</code> se la lista contiene il <em>token</em> dato, altrimenti <code>false</code>.</dd> + <dt>{{domxref("DOMTokenList.add()")}}</dt> + <dd>Aggiunge il <em>token</em> indicato alla lista.</dd> + <dt>{{domxref("DOMTokenList.remove()")}}</dt> + <dd>Rimuove il <em>token</em> specificato dall'elenco.</dd> + <dt>{{domxref("DOMTokenList.replace()")}}</dt> + <dd>Sostituisce un <em>token</em> esistente con un nuovo token.</dd> + <dt>{{domxref("DOMTokenList.supports()")}}</dt> + <dd>Restituisce <code>true</code> se un determinato <em>token</em> si trova nei token supportati dell'attributo associato.</dd> + <dt>{{domxref("DOMTokenList.toggle()")}}</dt> + <dd>Rimuove un determinato <em>token</em> dall'elenco e restituisce false. Se il <em>token</em> non esiste viene aggiunto e la funzione restituisce <code>true</code>.</dd> + <dt>{{domxref("DOMTokenList.entries()")}}</dt> + <dd>Restituisce un {{jsxref("Iteration_protocols","iterator")}} consentendoti di passare attraverso tutte le coppie chiave/valore contenute in questo oggetto.</dd> + <dt>{{domxref("DOMTokenList.forEach()")}}</dt> + <dd>Esegue una funzione fornita una volta per elemento <code>DOMTokenList</code>.</dd> + <dt>{{domxref("DOMTokenList.keys()")}}</dt> + <dd>Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutte le chiavi delle coppie chiave/valore contenute in questo oggetto.</dd> + <dt>{{domxref("DOMTokenList.values()")}}</dt> + <dd>Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutti i valori delle coppie chiave/valore contenute in questo oggetto.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<p>Nel seguente semplice esempio, recuperiamo l'elenco di classi impostato su un elemento {{htmlelement("p")}} come una <code>DOMTokenList</code> usando {{domxref("Element.classList")}}, aggiungi una classe usando {{domxref("DOMTokenList.add()")}}, quindi aggiorna il {{domxref("Node.textContent")}} di <code><p></code> per uguagliare <code>DOMTokenList</code>.</p> + +<p>Innanzitutto, l'HTML:</p> + +<pre class="brush: html"><p class="a b c"></p></pre> + +<p>Ora JavaScript:</p> + +<pre class="brush: js">var para = document.querySelector("p"); +var classes = para.classList; +para.classList.add("d"); +para.textContent = 'paragraph classList is "' + classes + '"';</pre> + +<p>L'output è simile a questo:</p> + +<p>{{ EmbedLiveSample('Esempi', '100%', 60) }}</p> + +<h2 id="Taglio_di_spazi_bianchi_e_rimozione_di_duplicati">Taglio di spazi bianchi e rimozione di duplicati</h2> + +<p>I metodi che modificano <code>DOMTokenList</code> (come {{domxref("DOMTokenList.add()")}}) tagliano automaticamente gli spazi bianchi in eccesso e rimuovono i valori duplicati dall'elenco. Per esempio:</p> + +<pre class="brush: html"><span class=" d d e f"></span></pre> + +<pre class="brush: js">var span = document.querySelector("span"); +var classes = span.classList; +span.classList.add("x"); +span.textContent = 'span classList is "' + classes + '"';</pre> + +<p>L'output è simile a questo:</p> + +<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div> + +<p>{{Compat("api.DOMTokenList")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{domxref("DOMSettableTokenList")}} (oggetto che estende <code>DOMTokenList</code> con la proprietà settabile <em>.value</em>)</li> +</ul> diff --git a/files/it/web/api/domtokenlist/item/index.html b/files/it/web/api/domtokenlist/item/index.html new file mode 100644 index 0000000000..c81eedcbc9 --- /dev/null +++ b/files/it/web/api/domtokenlist/item/index.html @@ -0,0 +1,67 @@ +--- +title: DOMTokenList.item() +slug: Web/API/DOMTokenList/item +translation_of: Web/API/DOMTokenList/item +--- +<p>{{APIRef("DOM")}}</p> + +<p>Il metodo <strong><code>item()</code></strong> dell'interfaccia {{domxref("DOMTokenList")}} restituisce un elemento nell'elenco per il suo indice.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">tokenList.item(index);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt>index</dt> + <dd>Una {{domxref("DOMString")}} che rappresenta l'indice dell'elemento che si desidera restituire.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una {{domxref("DOMString")}} che rappresenta l'elemento restituito. Restituisce <code>undefined</code> se il numero è maggiore o uguale alla lunghezza della lista.</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Nel seguente esempio recuperiamo l'elenco di classi impostate su un elemento {{htmlelement("span")}} come <code>DOMTokenList</code> usando {{domxref("Element.classList")}}. Quindi recuperiamo l'ultimo elemento nell'elenco usando <em>item(length-1)</em> e lo scriviamo nel <code><span></code>'s {{domxref("Node.textContent")}}.</p> + +<p>Innanzitutto, l'HTML:</p> + +<pre class="brush: html"><span class="a b c"></span></pre> + +<p>Ora JavaScript:</p> + +<pre class="brush: js">var span = document.querySelector("span"); +var classes = span.classList; +var item = classes.item(classes.length-1); +span.textContent = item;</pre> + +<p>L'output è simile a questo:</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + +<div> + + +<p>{{Compat("api.DOMTokenList.item")}}</p> +</div> diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..6608e69bd3 --- /dev/null +++ b/files/it/web/api/element/addeventlistener/index.html @@ -0,0 +1,694 @@ +--- +title: EventTarget.addEventListener() +slug: Web/API/Element/addEventListener +tags: + - API + - DOM + - EventTarget + - Gestori di Eventi + - JavaScript + - Referenza + - Ricevere Eventi + - Rilevare Eventi + - addEventListener + - attachEvent + - eventi + - metodo + - mselementresize +translation_of: Web/API/EventTarget/addEventListener +--- +<div>{{APIRef("DOM Events")}}</div> + +<p><span class="seoSummary">Il metodo {{domxref("EventTarget")}} <code><strong>addEventListener()</strong></code> imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione.</span> I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come <code><a href="/it/docs/DOM/XMLHttpRequest">XMLHttpRequest</a></code>).</p> + +<p><code>addEventListener()</code> funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>options</em>]); +<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>]); +<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // Gecko/Mozilla only</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>type</code></dt> + <dd>Una stringa sensibile al maiuscolo/minuscolo che rappresenta il <a href="/it/docs/Web/Events">tipo di evento</a> da assegnare.</dd> + <dt><code>listener</code></dt> + <dd>L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Guida/Functions">funzione</a>. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono: + <ul> + <li><code>capture</code>: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al <code>listener</code> registrato prima di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM.</li> + <li><code>once</code>: Un {{jsxref("Boolean")}} che indica che il <code>listener</code> dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna <code>true</code>, il <code>listener</code> verrebbe automaticamente rimosso quando invocato.</li> + <li><code>passive</code>: Un {{jsxref("Boolean")}} che, se <code>true</code>, indica che la funzione specificata da <code>listener</code> non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama <code>preventDefault()</code>, l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.</li> + <li>{{non-standard_inline}} <code>mozSystemGroup</code>: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.</li> + </ul> + </dd> + <dt><code>useCapture</code> {{optional_inline}}</dt> + <dd>Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al <code>listener</code> registrato <em>prima</em> di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> e <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> per una spiegazione dettagliata. Se non specificato, <code>useCapture</code> di default è <code>false</code>.</dd> + <dd> + <div class="note"><strong>Note:</strong> Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro <code>useCapture</code>.</div> + + <div class="note"><strong>Note:</strong> <code>useCapture</code> non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.</div> + </dd> + <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt> + <dd>Un parametro specifico per Firefox (Gecko). Se è <code>true</code>, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è <code>false</code> per il browser {{glossary("chrome")}} e <code>true</code> per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p><code>undefined</code></p> + +<h2 id="Note_di_utilizzo">Note di utilizzo</h2> + +<h3 id="Il_callback_del_listener_di_eventi">Il callback del listener di eventi</h3> + +<p>Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.</p> + +<p>La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo <code>handleEvent()</code> cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.</p> + +<p>Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:</p> + +<pre class="brush: js">function eventHandler(event) { + if (event.type == 'fullscreenchange') { + /* gestire un interruttore a schermo intero */ + } else /* fullscreenerror */ { + /* gestire un errore di commutazione a schermo intero */ + } +}</pre> + +<h3 id="Rilevamento_sicuro_del_supporto_opzionale">Rilevamento sicuro del supporto opzionale</h3> + +<p>Nelle versioni precedenti della specifica DOM, il terzo parametro di <code>addEventListener()</code> era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.</p> + +<p>Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.</p> + +<p>Ad esempio, se si desidera verificare l'opzione <code>passive</code>:</p> + +<pre class="brush: js">var passiveSupported = false; + +try { + var options = { + get passive() { // Questa funzione verrà chiamata quando il browser + // tenta di accedere alla proprietà passiva. + passiveSupported = true; + } + }; + + window.addEventListener("test", options, options); + window.removeEventListener("test", options, options); +} catch(err) { + passiveSupported = false; +} +</pre> + +<p>Questo crea un oggetto <code>options</code> con una funzione getter per la proprietà <code>passive</code>; il getter imposta una flag, <code>passiveSupported</code>, è <code>true</code> se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà <code>passive</code> sull'oggetto <code>options</code>, <code>passiveSupported</code> sarà impostato su <code>true</code>; altrimenti rimarrà <code>false</code>. Chiamiamo quindi <code>addEventListener()</code> per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo <code>removeEventListener()</code> per pulire dopo noi stessi. (Nota che <code>handleEvent()</code> viene ignorato sui listener di eventi che non vengono chiamati.)</p> + +<p>Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.</p> + +<p>Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:</p> + +<pre class="brush: js">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported + ? { passive: true } : false);</pre> + +<p>Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento <code>someElement</code>. Per il terzo parametro, se <code>passiveSupported</code> è <code>true</code>, stiamo specificando un oggetto <code>options</code> con <code>passive</code> impostato su <code>true</code>; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo <code>false</code> come valore del parametro <code>useCapture</code>.</p> + +<p>Se preferisci, puoi usare una libreria di terze parti come <a href="https://modernizr.com/docs">Modernizr</a> o <a href="https://github.com/rafrex/detect-it">Detect It</a> per fare questo test per te.</p> + +<p>È possibile ottenere ulteriori informazioni dall'articolo su <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> dal gruppo di <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community</a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Aggiungere_un_semplice_listener">Aggiungere un semplice listener</h3> + +<p>Questo esempio dimostra come utilizzare <code>addEventListener()</code> per controllare i click del mouse su un elemento.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table id="outside"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">// Funzione per modificare il contenuto di t2 +function modifyText() { + var t2 = document.getElementById("t2"); + if (t2.firstChild.nodeValue == "three") { + t2.firstChild.nodeValue = "two"; + } else { + t2.firstChild.nodeValue = "three"; + } +} + +// Aggiungere listener di eventi alla tabella +var el = document.getElementById("outside"); +el.addEventListener("click", modifyText, false); +</pre> + +<p>In questo codice, <code>modifyText()</code> è un listener per gli eventi <code>click</code> registrati usando <code>addEventListener()</code>. Un click in qualsiasi punto della tabella esegue il gestore ed esegue <code>modifyText()</code>.</p> + +<h4 id="Risultato">Risultato</h4> + +<p>{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}</p> + +<h3 id="Listener_di_eventi_con_funzione_anonima">Listener di eventi con funzione anonima</h3> + +<p>Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><table id="outside"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">// Funzione per modificare il contenuto di t2 +function modifyText(new_text) { + var t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = new_text; +} + +// Funzione per aggiungere listener alla tabella +var el = document.getElementById("outside"); +el.addEventListener("click", function(){modifyText("four")}, false); +</pre> + +<p>Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione <code>modifyText()</code>, che è responsabile per rispondere effettivamente all'evento.</p> + +<h4 id="Risultato_2">Risultato</h4> + +<p>{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}</p> + +<h3 id="Listener_di_eventi_con_una_funzione_a_freccia">Listener di eventi con una funzione a freccia</h3> + +<p>Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><table id="outside"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table></pre> + +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js">// Funzione per modificare il contenuto di t2 +function modifyText(new_text) { + var t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = new_text; +} + +// Aggiungere un listener alla tabella con una funzione a freccia +var el = document.getElementById("outside"); +el.addEventListener("click", () => { modifyText("four"); }, false); +</pre> + +<h4 id="Risultato_3">Risultato</h4> + +<p>{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}</p> + +<p>Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti <code>this</code>. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti <code>this</code>, le funzioni a freccia ereditano il vincolo <code>this</code> della funzione di contenimento.</p> + +<p>Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.</p> + +<h3 id="Esempio_di_utilizzo_delle_opzioni">Esempio di utilizzo delle opzioni</h3> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><div class="outer"> + outer, once & none-once + <div class="middle" target="_blank"> + middle, capture & none-capture + <a class="inner1" href="https://www.mozilla.org" target="_blank"> + inner1, passive & preventDefault(which is not allowed) + </a> + <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> + inner2, none-passive & preventDefault(not open new page) + </a> + </div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css"> .outer, .middle, .inner1, .inner2 { + display:block; + width:520px; + padding:15px; + margin:15px; + text-decoration:none; + } + .outer{ + border:1px solid red; + color:red; + } + .middle{ + border:1px solid green; + color:green; + width:460px; + } + .inner1, .inner2{ + border:1px solid purple; + color:purple; + width:400px; + } +</pre> + +<h4 id="JavaScript_4">JavaScript</h4> + +<pre class="brush: js"> let outer = document.getElementsByClassName('outer') [0]; + let middle = document.getElementsByClassName('middle')[0]; + let inner1 = document.getElementsByClassName('inner1')[0]; + let inner2 = document.getElementsByClassName('inner2')[0]; + + let capture = { + capture : true + }; + let noneCapture = { + capture : false + }; + let once = { + once : true + }; + let noneOnce = { + once : false + }; + let passive = { + passive : true + }; + let nonePassive = { + passive : false + }; + + + outer.addEventListener('click', onceHandler, once); + outer.addEventListener('click', noneOnceHandler, noneOnce); + middle.addEventListener('click', captureHandler, capture); + middle.addEventListener('click', noneCaptureHandler, noneCapture); + inner1.addEventListener('click', passiveHandler, passive); + inner2.addEventListener('click', nonePassiveHandler, nonePassive); + + function onceHandler(event) { + alert('outer, once'); + } + function noneOnceHandler(event) { + alert('outer, none-once, default'); + } + function captureHandler(event) { + //event.stopImmediatePropagation(); + alert('middle, capture'); + } + function noneCaptureHandler(event) { + alert('middle, none-capture, default'); + } + function passiveHandler(event) { + // Unable to preventDefault inside passive event listener invocation. + event.preventDefault(); + alert('inner1, passive, open new page'); + } + function nonePassiveHandler(event) { + event.preventDefault(); + //event.stopPropagation(); + alert('inner2, none-passive, default, not open new page'); + } +</pre> + +<h4 id="Risultato_4">Risultato</h4> + +<p>Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.</p> + +<p>{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p> + +<p>Prima di utilizzare un particolare valore nell'oggetto <code>options</code> è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.</p> + +<h2 id="Altre_note">Altre note</h2> + +<h3 id="Perchè_usare_addEventListener">Perchè usare <code>addEventListener</code>?</h3> + +<p><code>addEventListener()</code> è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:</p> + +<ul> + <li>Permette di aggiungere più di un singolo gestore per un evento. Ciò è particolarmente utile per le librerie {{Glossary("AJAX")}} i moduli JavaScript o qualsiasi altro tipo di codice che deve funzionare bene con altre librerie / estensioni.</li> + <li>Ti dà il controllo più fine della fase quando l'ascoltatore è attivato (capturing vs. bubbling).</li> + <li>Funziona su qualsiasi elemento del DOM, non solo sugli elementi HTML.</li> +</ul> + +<p>Il modo alternativo, <a href="#Il_modo_più_antico_per_registrare_i_listeners">più vecchio per registrare i listener</a>, è descritto di seguito.</p> + +<h3 id="Aggiunta_di_un_listener_durante_la_spedizione_dell'evento">Aggiunta di un listener durante la spedizione dell'evento</h3> + +<p>Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.</p> + +<h3 id="Più_listeners_identici">Più listeners identici</h3> + +<p>Se più <code>EventListener</code> indentici sono registrati sullo stesso <code>EventTarget</code> con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'<code>EventListener</code> da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi <a href="#Problemi_di_memoria">Problemi di memoria</a> di seguito.)</p> + +<h3 id="Il_valore_di_this_all'interno_del_gestore">Il valore di <code>this</code> all'interno del gestore</h3> + +<p>È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.</p> + +<p>Se si collega un handler ad un elemento utilizzando <code>addEventListener()</code>, il valore di <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">this</a></code> all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà <code>currentTarget</code> dell'argomento evento che viene passato al gestore.</p> + +<pre class="brush: js">my_element.addEventListener('click', function (e) { + console.log(this.className) // registra il className di my_element + console.log(e.currentTarget === this) // ritorna `true` +}) +</pre> + +<p>Come promemoria, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">le funzioni freccia non hanno il loro <code>this</code> contesto</a>.</p> + +<pre class="brush: js">my_element.addEventListener('click', (e) => { + console.log(this.className) // WARNING: `this` is not `my_element` + console.log(e.currentTarget === this) // logs `false` +})</pre> + +<p>Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di <code>this</code> in modo coerente con <code>addEventListener()</code>; un'occorrenza di <code>this</code> all'interno del codice rappresenta un riferimento all'elemento.</p> + +<pre class="brush: html"><table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> + ... +</table> +</pre> + +<p>Si noti che il valore di <code>this</code> all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">regole standard</a>. Questo è mostrato nel seguente esempio:</p> + +<pre class="brush: html"><script> + function logID() { console.log(this.id); } +</script> +<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object --> + ... +</table> +</pre> + +<p>Il valore di <code>this</code> all'interno di <code>logID()</code> è un riferimento all'oggetto globale {{domxref("Window")}} (o <code>undefined</code> nel caso della <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>).</p> + +<h4 id="Specificare_this_usando_bind()">Specificare <code>this</code> usando <code>bind()</code></h4> + +<p>Il metodo <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> consente di specificare il valore che dovrebbe essere usato come <code>this</code> per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà <code>this</code> a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.</p> + +<p>Questo è un esempio con e senza <code>bind()</code>:</p> + +<pre class="brush: js">var Something = function(element) { + // |this| is a newly created object + this.name = 'Something Good'; + this.onclick1 = function(event) { + console.log(this.name); // undefined, as |this| is the element + }; + this.onclick2 = function(event) { + console.log(this.name); // 'Something Good', as |this| is bound to newly created object + }; + element.addEventListener('click', this.onclick1, false); + element.addEventListener('click', this.onclick2.bind(this), false); // Trick +} +var s = new Something(document.body); +</pre> + +<p>Un'altra soluzione sta utilizzando una funzione speciale chiamata <code>handleEvent()</code> per catturare qualsiasi evento:</p> + +<pre class="brush: js">var Something = function(element) { + // |this| is a newly created object + this.name = 'Something Good'; + this.handleEvent = function(event) { + console.log(this.name); // 'Something Good', as this is bound to newly created object + switch(event.type) { + case 'click': + // some code here... + break; + case 'dblclick': + // some code here... + break; + } + }; + + // Note that the listeners in this case are |this|, not this.handleEvent + element.addEventListener('click', this, false); + element.addEventListener('dblclick', this, false); + + // You can properly remove the listeners + element.removeEventListener('click', this, false); + element.removeEventListener('dblclick', this, false); +} +var s = new Something(document.body); +</pre> + +<p>Un altro modo di gestire il riferimento a <em>this </em>è passare ad <code>EventListener</code> una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:</p> + +<pre class="brush: js">class SomeClass { + + constructor() { + this.name = 'Something Good'; + } + + register() { + var that = this; + window.addEventListener('keydown', function(e) {return that.someMethod(e);}); + } + + someMethod(e) { + console.log(this.name); + switch(e.keyCode) { + case 5: + // some code here... + break; + case 6: + // some code here... + break; + } + } + +} + +var myObject = new SomeClass(); +myObject.register();</pre> + +<h3 id="Legacy_Internet_Explorer_e_attachEvent">Legacy Internet Explorer e attachEvent</h3> + +<p>Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard <code>addEventListener()</code>. Per IE, modifichiamo l'esempio precedente per:</p> + +<pre class="brush: js">if (el.addEventListener) { + el.addEventListener('click', modifyText, false); +} else if (el.attachEvent) { + el.attachEvent('onclick', modifyText); +} +</pre> + +<p>C'è un inconveniente di <code>attachEvent()</code>: il valore di <code>this</code> sarà un riferimento all'oggetto <code>window</code>, invece dell'elemento su cui è stato chiamato.</p> + +<p>Il metodo <code>attachEvent()</code> potrebbe essere associato all'evento <code>onresize</code> per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario <code>mselementresize</code> quando abbinato al metodo <code>addEventListener</code> di registrazione dei gestori di eventi, fornisce funzionalità simili a <code>onresize</code>, attivando quando alcuni elementi HTML vengono ridimensionati.</p> + +<h3 id="Compatibilità">Compatibilità</h3> + +<p>Puoi lavorare attorno a <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di <code>handleEvent()</code> e anche l'evento {{event("DOMContentLoaded")}}.</p> + +<div class="note"> +<p><strong>Note: </strong><code>useCapture</code> non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.</p> +</div> + +<pre class="brush: js">(function() { + if (!Event.prototype.preventDefault) { + Event.prototype.preventDefault=function() { + this.returnValue=false; + }; + } + if (!Event.prototype.stopPropagation) { + Event.prototype.stopPropagation=function() { + this.cancelBubble=true; + }; + } + if (!Element.prototype.addEventListener) { + var eventListeners=[]; + + var addEventListener=function(type,listener /*, useCapture (will be ignored) */) { + var self=this; + var wrapper=function(e) { + e.target=e.srcElement; + e.currentTarget=self; + if (typeof listener.handleEvent != 'undefined') { + listener.handleEvent(e); + } else { + listener.call(self,e); + } + }; + if (type=="DOMContentLoaded") { + var wrapper2=function(e) { + if (document.readyState=="complete") { + wrapper(e); + } + }; + document.attachEvent("onreadystatechange",wrapper2); + eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2}); + + if (document.readyState=="complete") { + var e=new Event(); + e.srcElement=window; + wrapper2(e); + } + } else { + this.attachEvent("on"+type,wrapper); + eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper}); + } + }; + var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) { + var counter=0; + while (counter<eventListeners.length) { + var eventListener=eventListeners[counter]; + if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) { + if (type=="DOMContentLoaded") { + this.detachEvent("onreadystatechange",eventListener.wrapper); + } else { + this.detachEvent("on"+type,eventListener.wrapper); + } + eventListeners.splice(counter, 1); + break; + } + ++counter; + } + }; + Element.prototype.addEventListener=addEventListener; + Element.prototype.removeEventListener=removeEventListener; + if (HTMLDocument) { + HTMLDocument.prototype.addEventListener=addEventListener; + HTMLDocument.prototype.removeEventListener=removeEventListener; + } + if (Window) { + Window.prototype.addEventListener=addEventListener; + Window.prototype.removeEventListener=removeEventListener; + } + } +})();</pre> + +<h3 id="Il_modo_più_antico_per_registrare_i_listeners">Il modo più antico per registrare i listeners</h3> + +<p><code>addEventListener()</code> è stato introdotto con la specifica DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Prima di allora, gli ascoltatori di eventi sono stati registrati come segue</a>:</p> + +<pre class="brush: js">// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione! +el.onclick = modifyText; + +// Using a function expression +element.onclick = function() { + // ... function logic ... +}; +</pre> + +<p>Questo metodo sostituisce il listener dell'evento <code>click</code> esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come <code>blur</code> (<code>onblur</code>) e <code>keypress</code> (<code>onkeypress</code>) si comportano in modo simile.</p> + +<p>Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di <code>addEventListener()</code>.</p> + +<h3 id="Problemi_di_memoria">Problemi di memoria</h3> + +<pre class="brush: js">var els = document.getElementsByTagName('*'); + + +// Case 1 +for(var i = 0; i < els.length; i++) { + els[i].addEventListener("click", function(e){/* do something */}, false); +} + + +// Case 2 +function processEvent(e) { + /* do something */ +} + +for(var i = 0; i < els.length; i++){ + els[i].addEventListener("click", processEvent, false); +} +</pre> + +<p>Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire <code>myElement.removeEventListener("click", processEvent, false)</code> perchè <code>processEvent</code> è il riferimento alla funzione.</p> + +<p>In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).</p> + +<p>Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.</p> + +<pre class="brush: js">// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento + +// Case 3 +for (var i = 0, j = 0 ; i < els.length ; i++) { + /* do lots of stuff with */ + els[j].addEventListener("click", processEvent = function(e){/* do something */}, false); +} + +// Case 4 +for (var i = 0, j = 0 ; i < els.length ; i++) { + /* do lots of stuff with j */ + function processEvent(e){/* do something */}; + els[j].addEventListener("click", processEvent, false); +}</pre> + +<h3 id="Miglioramento_delle_prestazioni_di_scorrimento_con_i_listeners_passivi">Miglioramento delle prestazioni di scorrimento con i listeners passivi</h3> + +<p>Secondo la specifica, il valore predefinito per l'opzione <code>passive</code> è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.</p> + +<p>Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione <code>passive</code> in <code>true</code> per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.</p> + +<div class="note"> +<p><strong>Note:</strong> Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.</p> +</div> + +<p>Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di <code>passive</code> a <code>false</code>, come mostrato qui:</p> + +<pre class="brush: js">/* Feature detection */ +var passiveIfSupported = false; + +try { + window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } })); +} catch(err) {} + +window.addEventListener('scroll', function(event) { + /* do something */ + // can't use event.preventDefault(); +}, passiveIfSupported ); +</pre> + +<p>Nei browser meno recenti che non supportano il parametro <code>options</code> su <code>addEventListener()</code>, il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento <code>useCapture</code> senza utilizzare correttamente il <a href="#Safely_detecting_option_support">rilevamento delle funzionalità</a>.</p> + +<p>Non è necessario preoccuparsi del valore di <code>passive</code> per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specificazione</th> + <th>Stato</th> + <th>Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Definizione inziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("EventTarget.removeEventListener()")}}</li> + <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creazione e attivazione di eventi personalizzati</a></li> + <li><a href="http://www.quirksmode.org/js/this.html">Maggiori dettagli sull'uso di <code>this</code> nei gestori di eventi</a></li> +</ul> diff --git a/files/it/web/api/element/attributes/index.html b/files/it/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5bd14f3e4b --- /dev/null +++ b/files/it/web/api/element/attributes/index.html @@ -0,0 +1,120 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributi + - DOM + - Element + - Proprietà + - Referenza +translation_of: Web/API/Element/attributes +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La proprietà <strong><code>Element.attributes</code></strong> restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un <code>Array</code>, quindi non ha metodi predefiniti degli {{jsxref("Array")}} e non ha i metodi {{domxref("Attr")}} dei nodi che possono differire tra i browser. Per essere più specifici, <code>attributes</code> è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; +</pre> + +<h2 id="Example" name="Example">Esempio</h2> + +<h3 id="Esempi_basilari">Esempi basilari</h3> + +<pre class="brush: js">// Ottenere il primo elemento <p> nel documento +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes;</pre> + +<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">Enumerazione degli attributi degli elementi</h3> + +<p>L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.<br> + L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // First, let's verify that the paragraph has some attributes + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "No attributes to show"; + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">Sample Paragraph</p> + <form action=""> + <p> + <input type="button" value="Show first attribute name and value" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Element.attributes")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("NamedNodeMap")}}, l'interfaccia dell'oggetto restituito</li> + <li>Considerazioni sulla compatibilità con ross-browser: su <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li> +</ul> diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..f56bcc4380 --- /dev/null +++ b/files/it/web/api/element/childnodes/index.html @@ -0,0 +1,99 @@ +--- +title: Node.childNodes +slug: Web/API/Element/childNodes +translation_of: Web/API/Node/childNodes +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La proprietà di sola lettura <code><strong>Node.childNodes</strong></code> restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>nodeList</var> = <var>elementNodeReference</var>.childNodes; +</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzo_semplice">Utilizzo semplice</h3> + +<pre class="brush:js">// parg è un riferimento a un elemento <p> + +// Innanzitutto controlliamo che l'elemento abbia dei nodi figli +if (parg.hasChildNodes()) { + var children = parg.childNodes; + + for (var i = 0; i < children.length; i++) { + // fare qualcosa con ogni bambino da children[i] + // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco + } +}</pre> + +<h3 id="Rimuovi_tutti_i_bambini_da_un_nodo">Rimuovi tutti i bambini da un nodo</h3> + +<pre class="brush:js">// Questo è un modo per rimuovere tutti i bambini da una +// finestra di nodo è un riferimento ad un oggetto + +while (box.firstChild) { + //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata + box.removeChild(box.firstChild); +}</pre> + +<h2 id="Appunti">Appunti</h2> + +<p>Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio <code>elementNodeReference.childNodes[1].nodeName</code> per ottenere il nome, ecc.).</p> + +<p>L'oggetto <code>document</code> ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere <code>documentElement</code>. (Nei documenti (X)HTML questo è l'elemento <code>HTML</code>.)</p> + +<p><code>childNodes</code> include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.childNodes")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Node.firstChild")}}</li> + <li>{{domxref("Node.lastChild")}}</li> + <li>{{domxref("Node.nextSibling")}}</li> + <li>{{domxref("Node.previousSibling")}}</li> + <li>{{domxref("ParentNode.children")}}</li> +</ul> diff --git a/files/it/web/api/element/classlist/index.html b/files/it/web/api/element/classlist/index.html new file mode 100644 index 0000000000..3d86fa8400 --- /dev/null +++ b/files/it/web/api/element/classlist/index.html @@ -0,0 +1,288 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Element + - Proprietà + - Read-only + - Referenza +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p>La proprietà <code><strong>Element.classList</strong></code> di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.</p> + +<p>L'utilizzo di <code>classList</code> è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><em>elementClasses</em> è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di <em>elementNodeReference</em>. Se l'attributo class non è stato impostato o è vuoto <em>elementClasses.length</em> ritorna <code>0</code>. <code>element.classList</code> è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi <code>add()</code> e <code>remove()</code>.</p> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt><code>add( String [, String [, ...]] )</code></dt> + <dd>Aggiunge le classi specificate. Se queste classi esistono già nell'attributo <code>class</code> dell'elemento, vengono ignorate.</dd> + <dt><code>remove( String [, String [, ...]] )</code></dt> + <dd> + <p>Rimuove le classi specificate.</p> + + <div class="note"><strong>Nota:</strong> La rimozione di una classe inesistente NON genera un errore.</div> + </dd> + <dt><code><strong>item</strong>( Number )</code></dt> + <dd>Restituisce il valore della classe per indice nella collezione.</dd> + <dt><code><strong>toggle</strong>( String [, force] )</code></dt> + <dd>Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce <code>false</code>, altrimenti, la aggiunge e restituisce <code>true</code>.<br> + <br> + Quando è presente un secondo argomento: Se il secondo argomento restituisce <code>true</code>, aggiunge la classe specificata; se restituisce <code>false</code>, la rimuove.</dd> + <dt><code>contains( String )</code></dt> + <dd>Verifica se il valore di classe specificato esiste nell'attributo <code>class</code> dell'elemento.</dd> + <dt><code>replace( vecchiaClasse, nuovaClasse )</code></dt> + <dd>Sostituisce una classe esistente con una nuova classe.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">const div = document.createElement('div'); +div.className = 'foo'; + +// il nostro stato iniziale: <div class="foo"></div> +console.log(div.outerHTML); + +// usare l'API classList per rimuovere e aggiungere classi +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// <div class="anotherclass"></div> +console.log(div.outerHTML); + +// se visible è impostato rimuovilo, altrimenti aggiungilo +div.classList.toggle("visible"); + +// aggiungi/rimuovi visible, a seconda del test condizionale, i meno di 10 +div.classList.toggle("visible", i < 10 ); + +console.log(div.classList.contains("foo")); + +// aggiungere o rimuovere più classi +div.classList.add("foo", "bar", "baz"); +div.classList.remove("foo", "bar", "baz"); + +// aggiungere o rimuovere più classi utilizzando la spread syntax +const cls = ["foo", "bar"]; +div.classList.add(...cls); +div.classList.remove(...cls); + +// sostituire la classe "foo" con la classe "bar" +div.classList.replace("foo", "bar");</pre> + +<div class="note"> +<p>Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014" rel="noopener">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> +</div> + +<dl> +</dl> + +<h2 id="Polyfill">Polyfill</h2> + +<p>L'evento legacy <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> può essere utilizzato per creare un mockup dinamico di <code>classList</code> dinamico grazie alla proprietà <code>Element.prototype.className</code> che attiva l'evento specificato una volta modificato.</p> + +<p>Il seguente polyfill sia per <code>classList</code> che per <code>DOMTokenList</code> garantisce <strong>la piena</strong> conformità (copertura) per tutti i metodi e le proprietà standard di <code>Element.prototype.classList</code> per i browser <strong>IE10-IE11</strong> oltre ad un comportamento <em>quasi</em> conforme per <strong>IE 6-9</strong>. Controlla:</p> + +<pre class="brush: js">// 1. String.prototype.trim polyfill +if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; +(function(window){"use strict"; // prevent global namespace pollution +if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error; +var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) { + if (V === "") throw new DOMException( + "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." ); + if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " + + "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens."); +} +// 2. Implement the barebones DOMTokenList livelyness polyfill +if (typeof DOMTokenList !== "function") (function(window){ + var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty; + var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0; + function DOMTokenList(){ + if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through + } + DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value}; + DOMTokenList.prototype.add = function(){ + a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) { + val = arguments[v] + "", checkIfValidClassListEntry("add", val); + for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i) + if (this[i] === val) continue a; else resStr += " " + this[i]; + this[Len] = val, proto.length += 1, proto.value = resStr; + } + skipPropChange = 1, ele.className = proto.value, skipPropChange = 0; + }; + DOMTokenList.prototype.remove = function(){ + for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) { + val = arguments[v] + "", checkIfValidClassListEntry("remove", val); + for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i) + if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } } + if (!is) continue; + delete this[Len], proto.length -= 1, proto.value = resStr; + } + skipPropChange = 1, ele.className = proto.value, skipPropChange = 0; + }; + window.DOMTokenList = DOMTokenList; + function whenPropChanges(){ + var evt = window.event, prop = evt.propertyName; + if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) { + var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop]; + var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"]; + var oldLen = protoObjProto.length; + a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){ + for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;} + resTokenList[cI-sub] = tokens[cI]; + } + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + if(prop !== "classList") return; + skipPropChange = 1, target.classList = resTokenList, target.className = strval; + skipPropChange = 0, resTokenList.length = tokens.length - sub; + } + } + function polyfillClassList(ele){ + if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation"); + ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop + allowTokenListConstruction = 1; + try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); } + finally { allowTokenListConstruction = 0 } + var protoObjProto = protoObj.prototype, resTokenList = new protoObj(); + a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){ + for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; } + this[cI-sub] = toks[cI]; + } + protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele; + if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM + enumerable: 1, get: function(){return resTokenList}, + configurable: 0, set: function(newVal){ + skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0; + var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length; + a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){ + for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;} + resTokenList[cI-sub] = toks[cI]; + } + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + } + }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype + enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype + }); defineProperty(protoObjProto, " uCL", { + enumerable: 0, configurable: 0, writeable: 0, value: ele + }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; } + ele.attachEvent( "onpropertychange", whenPropChanges ); + } + try { // Much faster & cleaner version for IE8 & IE9: + // Should work in IE8 because Element.prototype instanceof Node is true according to the specs + window.Object.defineProperty(window.Element.prototype, "classList", { + enumerable: 1, get: function(val){ + if (!hasOwnProp.call(this, "classList")) polyfillClassList(this); + return this.classList; + }, + configurable: 0, set: function(val){this.className = val} + }); + } catch(e) { // Less performant fallback for older browsers (IE 6-8): + window[" uCL"] = polyfillClassList; + // the below code ensures polyfillClassList is applied to all current and future elements in the doc. + document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=( + '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + // IE6 + '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8 + ); + } +})(window); +// 3. Patch in unsupported methods in DOMTokenList +(function(DOMTokenListProto, testClass){ + if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){ + function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]); + }; + if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){ + if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]); + var oldValue = this.value; + return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/); + }; + if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean") + DOMTokenListProto.replace = function(oldToken, newToken){ + checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken); + var oldValue = this.value; + return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true)); + }; + if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){ + for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true; + return false; + }; + if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){ + if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this); + else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this); + }; + if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true}; + }}; + }; + if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: that[nextIndex], done: false} : {done: true}; + }}; + }; + if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: nextIndex, done: false} : {done: true}; + }}; + }; +})(window.DOMTokenList.prototype, window.document.createElement("div").classList); +})(window); +</pre> + +<h3 id="Avvertenze">Avvertenze</h3> + +<p>Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da <code>document.createElement</code> prima di essere appesi su un nodo padre) in IE6-7.</p> + +<p>Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di <code>classList</code> e le specifiche W3 è che per IE6-8, non esiste un modo per creare un oggetto immutabile (un oggetto le cui proprietà non possono essere modificate direttamente). In IE9, tuttavia, è possibile estendere il prototipo, congelando l'oggetto visibile e sovrascrivendo i metodi di proprietà native. Tuttavia, tali azioni non funzionerebbero in IE6-IE8 e, in IE9, rallenterebbero le prestazioni dell'intera pagina Web fino alla scansione di una lumaca, rendendo queste modifiche completamente impraticabili per questo polyfill.</p> + +<p>Una nota minore è che in IE6-7, questo polyfill usa la proprietà <code>window[" uCL"]</code> sull'oggetto window per comunicare con le espressioni CSS, la proprietà css <code>x-uCLp</code> su tutti gli elementi e la proprietà <code>element[" uCL"]</code> su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva <code>element[" uCLp"]</code> viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà <code>DOMTokenList[" uCL"]</code> viene aggiunta ad ogni oggetto <code>element["classList"]</code> per garantire che la DOMTokenList sia limitata al proprio elemento.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Definizione iniziale</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.classList")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> diff --git a/files/it/web/api/element/classname/index.html b/files/it/web/api/element/classname/index.html new file mode 100644 index 0000000000..ca463f5f75 --- /dev/null +++ b/files/it/web/api/element/classname/index.html @@ -0,0 +1,84 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Proprietà + - Referenza +translation_of: Web/API/Element/className +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">La proprietà <code><strong>className</strong></code> dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore <a href="/en-US/docs/Web/HTML/Global_attributes/class">dell'attributo <code>class</code></a> dell'elemento specificato.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; +<var>elementNodeReference</var>.className = <var>cName</var>;</pre> + +<ul> + <li><code>cName</code> è una variabile stringa che rappresenta le classi o le classi separate dallo spazio dell'elemento corrente.</li> +</ul> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">let el = document.getElementById('item'); + +if (el.className === 'active'){ + el.className = 'inactive'; +} else { + el.className = 'active'; +}</pre> + +<h2 id="Appunti">Appunti</h2> + +<p>Il nome <code>className</code> viene utilizzato per questa proprietà anziché <code>class</code> a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.</p> + +<p><code>className</code> può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se <code>element</code> è un {{domxref("SVGElement")}}. È meglio ottenere/impostare <code>className</code> di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> anzichè <code>""</code> se <code>element</code> ha un <a href="/en-US/docs/Web/HTML/Global_attributes/class">attributo <code>class</code></a> vuoto.</p> + +<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre> + +<div class="note"> +<p><code>class</code> è un <strong>Attributo</strong> <strong>HTML</strong>, mentre <code>className</code> è una <strong>proprietà del DOM</strong>.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.className")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/it/web/api/element/clientheight/index.html b/files/it/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..167dd00ca3 --- /dev/null +++ b/files/it/web/api/element/clientheight/index.html @@ -0,0 +1,36 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce l'altezza interna di un elemento in pixel, incluso il padding, ed esclusi il bordo, il margine e l'altezza della barra di scorrimento orizzontale.</p> +<p><code>clientHeight</code> può essere calcolato come CSS <code>height</code> + CSS <code>padding</code> - altezza della barra di scorrimento orizzontale(se presente).</p> +<h3 id="Sintassi_e_valori" name="Sintassi_e_valori">Sintassi e valori</h3> +<pre class="eval">var <var>altezza</var> = <var>elemento</var>.clientHeight; +</pre> +<p><var>altezza</var> è un numero intero che rappresenta l'altezza in pixel di <var>elemento</var>.</p> +<p><code>clientHeight</code> è di sola lettura.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div> +<p style="margin-top: 270px;"><img alt="Image:clientHeight.png"></p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>Non fa parte di nessuna specifica W3C.</p> +<h3 id="Note" name="Note">Note</h3> +<p><code>clientHeight</code> è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.</p> +<h3 id="Riferimenti" name="Riferimenti">Riferimenti</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN clientHeight definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a></li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "en": "en/DOM/element.clientHeight" } ) }}</p> diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html new file mode 100644 index 0000000000..cded9f95bb --- /dev/null +++ b/files/it/web/api/element/closest/index.html @@ -0,0 +1,147 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +<p>{{APIRef('Shadow DOM')}}</p> + +<div>Il metodo <code><strong>closest()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce <code>null</code>.</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>closestElement =</em><em> element</em>.closest(<em>selectors</em>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<ul> + <li><code>selectors</code> è una {{domxref("DOMString")}} contenente una lista di selettori come <code>"p:hover, .toto + q"</code></li> + <li><code>element</code> è l'{{domxref("Element")}} in cima all'albero degli elementi da trattare.</li> +</ul> + +<h3 id="Valore_del_risultato">Valore del risultato</h3> + +<ul> + <li><code>closestElement</code> è l'{{domxref("Element")}} che è l'antenato più vicino degli elementi selezionati. Può essere <code>null</code>.</li> +</ul> + +<h3 id="Eccezioni">Eccezioni</h3> + +<ul> + <li>{{exception("SyntaxError")}} viene ritornato se i <em>selectors</em> non sono una stringa di elenco di selettori valida.</li> +</ul> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><article> + <div id="div-01">Here is div-01 + <div id="div-02">Here is div-02 + <div id="div-03">Here is div-03</div> + </div> + </div> +</article></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var el = document.getElementById('div-03'); + +var r1 = el.closest("#div-02"); +// returns the element with the id=div-02 + +var r2 = el.closest("div div"); +// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso + +var r3 = el.closest("article > div"); +// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01 + +var r4 = el.closest(":not(div)"); +// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Per i browser che non supportano <code>Element.closest()</code>, ma supportano il supporto per <code>element.matches()</code> (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:</p> + +<pre class="brush: js">if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} + +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this; + + do { + if (el.matches(s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; +}</pre> + +<p>Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.</p> + +<pre class="brush: js">if (window.Element && !Element.prototype.closest) { + Element.prototype.closest = + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i, + el = this; + do { + i = matches.length; + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); + return el; + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("api.Element.closest")}}</p> + +<h3 id="Note_di_compatibilità">Note di compatibilità</h3> + +<ul> + <li>In Edge <code>document.createElement(element).closest(element)</code> restituirà <code>null</code> se l'elemento non è prima collegato al DOM</li> +</ul> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>L'interfaccia {{domxref("Element")}}.</li> + <li> + <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">La sintassi dei Selettori</a></div> + </li> + <li> + <div class="syntaxbox">Altri metodi che accettano i selettori: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div> + </li> +</ul> diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..b5052f5dfe --- /dev/null +++ b/files/it/web/api/element/firstchild/index.html @@ -0,0 +1,90 @@ +--- +title: Node.firstChild +slug: Web/API/Element/firstChild +tags: + - API + - DOM + - Node + - Proprietà + - Referenza +translation_of: Web/API/Node/firstChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.firstChild</strong></code> restituisce il primo figlio del nodo nell'albero o <code>null</code> se il nodo non ha figli.</span> Se il nodo è un <code>Document</code>, restituisce il primo nodo nell'elenco dei suoi figli diretti.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild; +</pre> + +<h2 id="Esempio">Esempio</h2> + +<p>Questo esempio dimostra l'uso di <code>firstChild</code> e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.</p> + +<pre class="brush:html"><p id="para-01"> + <span>First span</span> +</p> + +<script> + var p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName); +</script></pre> + +<p>In quanto sopra, la <a href="/en-US/docs/Web/API/Console">console</a> console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <code><p></code> e <code><span></code>. <strong>Qualsiasi</strong> <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">spazio bianco</a> creerà un nodo <code>#text</code> da un singolo spazio a più spazi, ritorni, schede e così via.</p> + +<p>Un altro nodo <code>#text</code> viene inserito tra i tag di chiusura <code></span></code> e <code></p></code>.</p> + +<p>Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.</p> + +<pre class="brush:html"><p id="para-01"><span>First span</span></p> + +<script> + var p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName); +</script> +</pre> + +<p>Ora l'avviso mostrerà 'SPAN'.</p> + +<p>Per evitare il problema con <code>node.firstChild</code> che restituisce i nodi <code>#text</code> o <code>#comment</code>, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, <code>node.firstElementChild</code> richiede uno shim per Internet Explorer 9 e versioni precedenti.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commentp</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.firstChild")}}</p> diff --git a/files/it/web/api/element/getattribute/index.html b/files/it/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..e10427e5bd --- /dev/null +++ b/files/it/web/api/element/getattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code>getAttribute()</code> restituisce il valore di un attributo specificato sull'elemento.</span> Se l'attributo specificato non esiste, il valore restituito sarà <code>null</code> o <code>""</code> (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><em>var attributo</em> = element.getAttribute(<em>attributeName</em>); +</pre> + +<p>dove</p> + +<ul> + <li><code><em>attributo</em></code> è una stringa contenente il valore di <code><em>attributeName</em></code>.</li> + <li><code><em>attributeName</em></code> è il nome dell'attributo di cui si desidera ottenere il valore.</li> +</ul> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush:js">let div1 = document.getElementById('div1'); +let align = div1.getAttribute('align'); + +alert(align); // Mostra il valore di "align" per l'elemento con id="div1"</pre> + +<h2 id="Notes" name="Notes">Appunti</h2> + +<p>Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, <code>getAttribute()</code> converte in minuscolo il suo argomento prima di procedere.</p> + +<p>Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono <code>null</code> quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">l'attuale bozza della specifica DOM</a> specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la <em>stringa vuota</em>, e alcune implementazioni DOM implementano questo comportamento. L'implementazione di getAttribute in XUL (Gecko) segue effettivamente la specifica DOM 3 Core e restituisce una stringa vuota. Di conseguenza, dovresti usare {{domxref("element.hasAttribute()")}} per verificare l'esistenza di un attributo prima di chiamare <code>getAttribute()</code> se è possibile che l'attributo richiesto non esista sull'elemento specificato.</p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("api.Element.getAttribute")}}</p> +</div> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introdotto in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/it/web/api/element/getelementsbytagname/index.html b/files/it/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..9239135259 --- /dev/null +++ b/files/it/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,80 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - Method + - Referenza +translation_of: Web/API/Element/getElementsByTagName +--- +<div>{{ APIRef("DOM") }}</div> + +<p><span class="seoSummary">Il metodo <code><strong>Element.getElementsByTagName()</strong></code> ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il <a href="/it/docs/Web/API/Element/tagName">tag name</a> specificato.</span> Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è <em>dinamico</em>, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare <code>Element.getElementsByTagName()</code> con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.</p> + +<p>Quando viene chiamato su un elemento HTML in un documento HTML, <code>getElementsByTagName</code> converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <code><a href="/en-US/docs/Web/SVG/Element/linearGradient"><linearGradient></a></code>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.</p> + +<p><code>Element.getElementsByTagName</code> è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre> + +<ul> + <li><code>elements</code> è una {{domxref("HTMLCollection")}} <em>dinamica</em> di elementi con un nome di tag corrispondente, nell'ordine in cui appaiono. Se non vengono trovati elementi, la <code>HTMLCollection</code> è vuota.</li> + <li><code>element</code> è l'elemento da cui inizia la ricerca. Sono inclusi solo i discendenti dell'elemento, non l'elemento stesso.</li> + <li><code>tagName</code> è il nome qualificato da cercare. La stringa speciale <code>"*"</code> rappresenta tutti gli elementi. Per compatibilità con XHTML, è necessario scriverlo in minuscolo.</li> +</ul> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">// Controlla lo stato di ogni cella in una tabella +const table = document.getElementById('forecast-table'); +const cells = table.getElementsByTagName('td'); + +for (let cell of cells) { + let status = cell.getAttribute('data-status'); + if (status === 'open') { + // Prendi i dati + } +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.getElementsByTagName")}}</p> diff --git a/files/it/web/api/element/hasattribute/index.html b/files/it/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..4cd6d2a9d2 --- /dev/null +++ b/files/it/web/api/element/hasattribute/index.html @@ -0,0 +1,75 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo <strong><code>Element.hasAttribute()</code></strong> restituisce un valore <strong>booleano</strong> che indica se l'elemento specificato ha o meno l'attributo specificato.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>var <em>risultato</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>); +</pre> + +<dl> + <dt><code>risultato</code></dt> + <dd>detiene il valore di ritorno <code>true</code> o <code>false</code>.</dd> + <dt><code>name</code></dt> + <dd>è una stringa che rappresenta il nome dell'attributo.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasAttribute("bar")) { + // fare qualcosa +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasAttribute = prototype.hasAttribute || function(name) { + return !!(this.attributes[name] && + this.attributes[name].specified); + } +})(Element.prototype); +</pre> + +<h2 id="Appunti">Appunti</h2> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.hasAttribute")}}</p> diff --git a/files/it/web/api/element/hasattributes/index.html b/files/it/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..ca408ca96d --- /dev/null +++ b/files/it/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Element/hasAttributes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce un valore booleano: <code>true</code> se l'elemento ha un qualunque numero di attributi, altrimenti <code>false</code>.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<p> + <i> + bool</i> + = element.hasAttributes()</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre>t1 = document.getElementById("tabella-dati"); +if (t1.hasAttributes()) { + // fai qualcosa con + // t1.attributes +} +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes </a></p> +<p>{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "pl": "pl/DOM/element.hasAttributes" } ) }}</p> diff --git a/files/it/web/api/element/index.html b/files/it/web/api/element/index.html new file mode 100644 index 0000000000..f518252bc7 --- /dev/null +++ b/files/it/web/api/element/index.html @@ -0,0 +1,475 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Referenza + - Referenza del DOM + - Web API +translation_of: Web/API/Element +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Element</code></strong> è la classe base più generale da cui ereditano tutti gli oggetti in un {{DOMxRef("Document")}}. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da <code>Element</code>.</span> Ad esempio, l'interfaccia {{DOMxRef("HTMLElement")}} è l'interfaccia di base per gli elementi HTML, mentre l'interfaccia {{DOMxRef("SVGElement")}} è la base per tutti gli elementi SVG. La maggior parte delle funzionalità è specificata più in basso nella gerarchia delle classi.</p> + +<p>Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia <code>XULElement</code>, implementano anche <code>Element</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">Proprietà</h2> + +<p><em>Eredita le proprietà dalla sua interfaccia genitore, {{DOMxRef("Node")}}, e per estensione l'interfaccia genitore, {{DOMxRef("EventTarget")}}. Implementa le proprietà di {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>e {{DOMxRef("Animatable")}}.</p> + +<dl> + <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> + <dd>Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.</dd> + <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> + <dd>Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.</dd> + <dt>{{DOMxRef("Element.className")}}</dt> + <dd>È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.</dd> + <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> + <dd>Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.</dd> + <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> + <dd>Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.</dd> + <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> + <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.</dd> + <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.</dd> + <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd> + <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd> + <dt>{{DOMxRef("Element.id")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd> + <dt>{{DOMxRef("Element.innerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd> + <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd> + <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>The namespace URI of the element, or <code>null</code> if it is no namespace. + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> + <dt>{{DOMxRef("Element.outerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd> + <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> + <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> + <dt>{{DOMxRef("Element.scrollLeft")}}</dt> + <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> + <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollTop")}}</dt> + <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd> + <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> + <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> + <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd> + <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> + <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd> + <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> + <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd> + <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> + +<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> +</div> + +<h3 id="Proprietà_incluse_da_Slotable">Proprietà incluse da Slotable</h3> + +<p><em>L'interfaccia <code>Element</code> include la seguente proprietà, definita nel mixin {{DOMxRef("Slotable")}}.</em></p> + +<dl> + <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> + <dd>Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">Gestori di eventi</h3> + +<dl> + <dt>{{domxref("Element.onfullscreenchange")}}</dt> + <dd>Un gestore di eventi per l'evento {{event("fullscreenchange")}} che viene inviato quando l'elemento entra o esce dalla modalità a schermo intero. Questo può essere usato per guardare sia le transizioni attese con successo, ma anche per osservare cambiamenti inaspettati, come quando l'app è in background.</dd> + <dt>{{domxref("Element.onfullscreenerror")}}</dt> + <dd>Un gestore di eventi per l'evento {{event("fullscreenerror")}} che viene inviato quando si verifica un errore durante il tentativo di passare alla modalità a schermo intero.</dd> +</dl> + +<h4 id="Gestori_di_eventi_obsoleti">Gestori di eventi obsoleti</h4> + +<dl> + <dt>{{DOMxRef("Element.onwheel")}}</dt> + <dd>Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. <strong>Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd> +</dl> + +<h2 id="Methods" name="Methods">Metodi</h2> + +<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p> + +<dl> + <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{DOMxRef("Element.attachShadow()")}}</dt> + <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> + <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> + <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> + <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd> + <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd> + <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd> + <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>Returns an array of Animation objects currently active on the element.</dd> + <dt>{{DOMxRef("Element.getAttribute()")}}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> + <dd>Returns an array of attribute names from the current element.</dd> + <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> + <dd>Returns the size of an element and its position relative to the viewport.</dd> + <dt>{{DOMxRef("Element.getClientRects()")}}</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd> + <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> + <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> + <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd> + <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> + <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> + <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{DOMxRef("Element.querySelector()")}}</dt> + <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> + <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> + <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd> + <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{domxref("Element.scroll()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{domxref("Element.scrollBy()")}}</dt> + <dd>Scrolls an element by the given amount.</dd> + <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{domxref("Element.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{DOMxRef("Element.setAttribute()")}}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> + <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd> + <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> + <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br> + Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt> + <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br> + Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd> + <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> + <dd>Fired when the document view or an element has been scrolled.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd> + <dt>{{domxref("Element/select_event", "select")}}</dt> + <dd>Fired when some text has been selected.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd> + <dt>{{domxref("Element/show_event", "show")}}</dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd> + <dt>{{domxref("Element/wheel_event","wheel")}}</dt> + <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}</dd> +</dl> + +<h3 id="Clipboard_events">Clipboard events</h3> + +<dl> + <dt>{{domxref("Element/copy_event", "copy")}}</dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd> + <dt>{{domxref("Element/cut_event", "cut")}}</dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd> + <dt>{{domxref("Element/paste_event", "paste")}}</dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd> +</dl> + +<h3 id="Composition_events">Composition events</h3> + +<dl> + <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> + <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd> + <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> + <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd> + <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> + <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd> +</dl> + +<h3 id="Focus_events">Focus events</h3> + +<dl> + <dt>{{domxref("Element/blur_event", "blur")}}</dt> + <dd>Fired when an element has lost focus.<br> + Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd> + <dt>{{domxref("Element/focus_event", "focus")}}</dt> + <dd>Fired when an element has gained focus.<br> + Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd> + <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> + <dd>Fired when an element is about to gain focus.</dd> + <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> + <dd>Fired when an element is about to lose focus.</dd> +</dl> + +<h3 id="Fullscreen_events">Fullscreen events</h3> + +<dl> + <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt> + <dd>Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.<br> + Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}} property.</dd> + <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt> + <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.<br> + Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.</dd> +</dl> + +<h3 id="Mouse_events">Mouse events</h3> + +<dl> + <dt>{{domxref("Element/Activate_event", "Activate")}}</dt> + <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.</dd> + <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> + <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd> + <dt>{{domxref("Element/click_event", "click")}}</dt> + <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br> + Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd> + <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> + <dd>Fired when the user attempts to open a context menu.<br> + Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd> + <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> + <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br> + Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd> + <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> + <dd>Fired when a pointing device button is pressed on an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd> + <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd> + <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> + <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd> + <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd> + <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd> + <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> + <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd> + <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> + <dd>Fired when a pointing device button is released on an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd> + <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> + <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd> + <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> + <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd> + <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> + <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd> + <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> + <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd> +</dl> + +<h3 id="Touch_events">Touch events</h3> + +<dl> + <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> + <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd> + <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> + <dd>Fired when one or more touch points are removed from the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd> + <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> + <dd>Fired when one or more touch points are moved along the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd> + <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> + <dd>Fired when one or more touch points are placed on the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd> +</dl> + +<dl> + <dt> </dt> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Aggiunto il metodo <code>getAnimations()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Aggiunge le proprietà <code>undoScope</code> e <code>undoManager</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> e <code>onlostpointercapture</code>.<br> + Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Aggiunti i seguenti metodi: <code>querySelector()</code> e <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Aggiunto il metodo <code>requestPointerLock()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Aggiunto il metodo <code>requestFullscreen()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Aggiunte le seguenti proprietà: <code>innerHTML</code>, e <code>outerHTML</code>.<br> + Aggiunti i seguenti metodi: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Aggiunte le seguenti proprietà: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Aggiunti i seguenti metodi: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Aggiunti i seguenti metodi: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br> + Spostato <code>hasAttributes()</code> dall'interfaccia <code>Node</code> a questa.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Rimossi i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Modificato il valore di ritorno di <code>getElementsByTagName()</code> e <code>getElementsByTagNameNS()</code>.<br> + Rimossa la proprietà <code>schemaTypeInfo</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Aggiunti i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.<br> + Aggiunta la proprietà <code>schemaTypeInfo</code>. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Il metodo <code>normalize()</code> è stato spostato su {{DOMxRef("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element")}}</p> diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..6fbdb3c47b --- /dev/null +++ b/files/it/web/api/element/innerhtml/index.html @@ -0,0 +1,213 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing HTML + - Proprietà + - Referenza + - innerHTML +translation_of: Web/API/Element/innerHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">La proprietà {{domxref("Element")}} <strong><code>innerHTML</code></strong> ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.</span></p> + +<div class="note"><strong>Note: </strong>Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri <code>(&)</code>, <code>(<)</code>, o <code>(>)</code>, <code>innerHTML</code> restituisce questi caratteri come entità HTML <code>"&amp;"</code>, <code>"&lt;"</code> e <code>"&gt;"</code> rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.</div> + +<p>Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML; + +<var>element</var>.innerHTML = <var>htmlString</var>; +</pre> + +<h3 id="Valore">Valore</h3> + +<p>Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di <code>innerHTML</code> rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa <var>htmlString</var>.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>È stato effettuato un tentativo di impostare il valore di <code>innerHTML</code> utilizzando una stringa che non è HTML correttamente formato.</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.</dd> +</dl> + +<h2 id="Note_di_utilizzo">Note di utilizzo</h2> + +<p>La proprietà <code>innerHTML</code> può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.</p> + +<h3 id="Leggere_i_contenuti_HTML_di_un_elemento">Leggere i contenuti HTML di un elemento</h3> + +<p>La lettura di <code>innerHTML</code> fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.</p> + +<pre class="brush: js">let contents = myElement.innerHTML;</pre> + +<p>Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.</p> + +<div class="note"> +<p><strong>Note:</strong> Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.</p> +</div> + +<h3 id="Sostituzione_del_contenuto_di_un_elemento">Sostituzione del contenuto di un elemento</h3> + +<p>L'impostazione del valore di <code>innerHTML</code> consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.</p> + +<p>Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:</p> + +<pre class="brush: js">document.body.innerHTML = "";</pre> + +<p>Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri <code>"<"</code> con l'entità HTML <code>"&lt;"</code>, convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di <code>innerHTML</code> viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.</p> + +<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</pre> + +<h4 id="Dettagli_operativi">Dettagli operativi</h4> + +<p>Cosa succede esattamente quando imposti il valore di <code>innerHTML</code>? In questo modo, l'user agent deve seguire questi passaggi:</p> + +<ol> + <li>Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.</li> + <li>Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <code><template></code> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo <code>DocumentFragment</code> creato nel passaggio 1.</li> + <li>Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo <code>DocumentFragment</code>.</li> +</ol> + +<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3> + +<p>Non è raro vedere <code>innerHTML</code> utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.</p> + +<pre class="brush: js">const name = "John"; +// supponiamo che 'el' sia un elemento DOM HTML +el.innerHTML = name; // innocuo in questo caso + +// ... + +name = "<script>alert('Sono John in una noiosa allerta!')</script>"; +el.innerHTML = name; // innocuo in questo caso</pre> + +<p>Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">non deve essere eseguito</a>.</p> + +<p>Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi <code>innerHTML</code> per impostare le stringhe su cui non si ha il controllo. Per esempio:</p> + +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // mostra l'alert</pre> + +<p>Per questo motivo, si consiglia di non utilizzare <code>innerHTML</code> quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</p> + +<div class="warning"> +<p><strong>Warning:</strong> Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando <code>innerHTML</code> molto probabilmente il tuo codice verrà rifiutato. Ad esempio, <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">se utilizzi <code>innerHTML</code></a> in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">un'estensione del browser</a> e si invia l'estensione a <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, non verrà passato il processo di revisione automatica.</p> +</div> + +<h2 id="Esempio">Esempio</h2> + +<p>In questo esempio viene utilizzato <code>innerHTML</code> per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function log(msg) { + var logElem = document.querySelector(".log"); + + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} + +log("Registrazione degli eventi del mouse in questo contenitore..."); +</pre> + +<p>La funzione <code>log()</code> crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe <code>"log"</code>.</p> + +<p>Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):</p> + +<pre class="brush: js">function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</pre> + +<p>Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:</p> + +<pre class="brush: js">var boxElem = document.querySelector(".box"); + +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</pre> + +<h3 id="HTML">HTML</h3> + +<p>L'HTML è abbastanza semplice per il nostro esempio.</p> + +<pre class="brush: html"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></pre> + +<p>Il {{HTMLElement("div")}} con la classe <code>"box"</code> è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <code><div></code> la cui classe è <code>"log"</code> è il contenitore per il testo del log stesso.</p> + +<h3 id="CSS">CSS</h3> + +<p>I seguenti stili CSS del nostro contenuto di esempio.</p> + +<pre class="brush: css">.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} + +.log { + margin-top: 8px; + font-family: monospace; +}</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.</p> + +<p>{{EmbedLiveSample("Esempio", 640, 350)}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.innerHTML")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Node.textContent")}} e {{domxref("Node.innerText")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>Parsificare HTML in un albero del DOM: {{domxref("DOMParser")}}</li> + <li>Serializzare di XML o HTML in un albero del DOM: {{domxref("XMLSerializer")}}</li> +</ul> diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..f69fbb1daf --- /dev/null +++ b/files/it/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,102 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiare il DOM + - DOM + - Element + - HTML + - Inserire elementi + - Inserire nodi + - Referenza + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo <strong><code>insertAdjacentHTML()</code></strong> dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>position</code></dt> + <dd>Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad <code>element</code>; deve essere una delle seguenti stringhe: + <ul> + <li><code style="color: red;">'beforebegin'</code>: Davanti ad <code>element</code> stesso.</li> + <li><code style="color: green;">'afterbegin'</code>: Appena dentro <code>element</code>, prima del suo primo figlio.</li> + <li><code style="color: blue;">'beforeend'</code>: Appena dentro <code>element</code>, prima del suo ultimo figlio.</li> + <li><code style="color: magenta;">'afterend'</code>: Dopo ad <code>element</code> stesso.</li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>La stringa da analizzare come HTML o XML e inserita nell'albero.</dd> +</dl> + +<h3 id="Visualizzazione_dei_nomi_delle_posizioni">Visualizzazione dei nomi delle posizioni</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Note: </strong> Le posizioni <code>beforebegin</code> e <code>afterend</code> funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.</div> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// A questo punto, la nuova struttura è: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Note">Note</h2> + +<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3> + +<p>Quando si inserisce HTML in una pagina utilizzando <code>insertAdjacentHTML()</code>, fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.</p> + +<p>Non è consigliabile utilizzare <code>insertAdjacentHTML()</code> quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("XMLSerializer")}}: Costruire una rappresentazione DOM del testo XML</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> di Henri Sivonen, incluso benchmark che mostra che insertAdjacentHTML può essere molto più veloce in alcuni casi.</span></li> +</ul> diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html new file mode 100644 index 0000000000..2030226b37 --- /dev/null +++ b/files/it/web/api/element/nodename/index.html @@ -0,0 +1,116 @@ +--- +title: Node.nodeName +slug: Web/API/Element/nodeName +tags: + - API + - DOM + - Gecko + - NeedsSpecTable + - Node + - Property + - Read-only +translation_of: Web/API/Node/nodeName +--- +<div>{{APIRef("DOM")}}</div> + +<p>La proprietà di sola lettura <code><strong>nodeName</strong></code> restituisce il nome dell'attuale {{domxref("Node")}} come stringa.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName; +</pre> + +<h3 id="Valore">Valore</h3> + +<p>Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Interfaccia</th> + <th>valore nodeName</th> + </tr> + <tr> + <td>{{domxref("Attr")}}</td> + <td>Il valore di {{domxref("Attr.name")}}</td> + </tr> + <tr> + <td>{{domxref("CDATASection")}}</td> + <td><code>"#cdata-section"</code></td> + </tr> + <tr> + <td>{{domxref("Comment")}}</td> + <td><code>"#comment"</code></td> + </tr> + <tr> + <td>{{domxref("Document")}}</td> + <td><code>"#document"</code></td> + </tr> + <tr> + <td>{{domxref("DocumentFragment")}}</td> + <td><code>"#document-fragment"</code></td> + </tr> + <tr> + <td>{{domxref("DocumentType")}}</td> + <td>Il valore di {{domxref("DocumentType.name")}}</td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td>Il valore di {{domxref("Element.tagName")}}</td> + </tr> + <tr> + <td>{{domxref("Entity")}}</td> + <td>Il nome dell'entità</td> + </tr> + <tr> + <td>{{domxref("EntityReference")}}</td> + <td>Il nome del riferimento all'entità</td> + </tr> + <tr> + <td>{{domxref("Notation")}}</td> + <td>Il nome della notazione</td> + </tr> + <tr> + <td>{{domxref("ProcessingInstruction")}}</td> + <td>Il valore di {{domxref("ProcessingInstruction.target")}}</td> + </tr> + <tr> + <td>{{domxref("Text")}}</td> + <td><code>"#text"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Esempio">Esempio</h2> + +<p>Dato il seguente markup:</p> + +<pre class="brush:html"><div id="d1">hello world</div> +<input type="text" id="t"> +</pre> + +<p>e il seguente script:</p> + +<pre class="brush:js">var div1 = document.getElementById("d1"); +var text_field = document.getElementById("t"); + +text_field.value = div1.nodeName; +</pre> + +<p>IIn XHTML (o in qualsiasi altro formato XML), il valore di <code>text_field</code> sarebbe letto <code>"div"</code>. Tuttavia, in HTML, il valore di <code>text_field</code> sarebbe letto <code>"DIV"</code>, poichè <code>nodeName</code> e <code>tagName</code> restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">details on nodeName case sensitivity in different browsers</a>.</p> + +<p>Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché <code>nodeName</code> ha lo stesso valore di <code>tagName</code> per un elemento. Tieni presente, tuttavia, che <code>nodeName</code> ritornerà <code>"#text"</code> per i nodi di testo mentre <code>tagName</code> restituirà <code>undefined</code>.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.nodeName")}}</p> diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..fba395288a --- /dev/null +++ b/files/it/web/api/element/nodetype/index.html @@ -0,0 +1,178 @@ +--- +title: Node.nodeType +slug: Web/API/Element/nodeType +tags: + - API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/nodeType +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.nodeType</strong></code> è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em><var>type</var></em> = <em>node</em>.nodeType; +</pre> + +<p>Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.</p> + +<h2 id="Constanti">Constanti</h2> + +<h3 id="Tipi_di_nodi_costanti">Tipi di nodi costanti</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Constante</th> + <th scope="col">Valore</th> + <th scope="col">Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Node.ELEMENT_NODE</code></td> + <td><code>1</code></td> + <td>Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.</td> + </tr> + <tr> + <td><code>Node.TEXT_NODE</code></td> + <td><code>3</code></td> + <td>L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.</td> + </tr> + <tr> + <td><code>Node.CDATA_SECTION_NODE</code></td> + <td><code>4</code></td> + <td>Una {{domxref("CDATASection")}}, ad esempio <code><!CDATA[[ … ]]></code>.</td> + </tr> + <tr> + <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + <td>Una {{domxref("ProcessingInstruction")}} di un documento XML, come <code><?xml-stylesheet … ?></code>.</td> + </tr> + <tr> + <td><code>Node.COMMENT_NODE</code></td> + <td><code>8</code></td> + <td>Un nodo {{domxref("Comment")}}, come <code><!-- … --></code>.</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_NODE</code></td> + <td><code>9</code></td> + <td>Un nodo {{domxref("Document")}}.</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + <td>Un nodo {{domxref("DocumentType")}}, come <code><!DOCTYPE html></code>.</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + <td>Un nodo {{domxref("DocumentFragment")}}.</td> + </tr> + </tbody> +</table> + +<h3 id="Tipi_di_nodo_deprecati_deprecated_inline()">Tipi di nodo deprecati {{deprecated_inline()}}</h3> + +<div class="blockIndicator note"> +<p>Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <td>Constante</td> + <td>Valore</td> + <td>Descrizione</td> + </tr> + <tr> + <td><code>Node.ATTRIBUTE_NODE</code></td> + <td>2</td> + <td>Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.</td> + </tr> + <tr> + <td><code>Node.ENTITY_REFERENCE_NODE</code></td> + <td>5</td> + <td>Un nodo di riferimento di entità XML, come <code>&foo;</code>. Rimosso nel {{SpecName("DOM4")}}.</td> + </tr> + <tr> + <td><code>Node.ENTITY_NODE</code></td> + <td>6</td> + <td>Un nodo XML <code><!ENTITY …></code>. Rimosso nel {{SpecName("DOM4")}}.</td> + </tr> + <tr> + <td><code>Node.NOTATION_NODE</code></td> + <td>12</td> + <td>Un nodo XML <code><!NOTATION …></code>. Rimosso nel {{SpecName("DOM4")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Diversi_tipi_di_nodi">Diversi tipi di nodi</h3> + +<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true +document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true + +document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true + +var p = document.createElement("p"); +p.textContent = "Once upon a time…"; + +p.nodeType === Node.ELEMENT_NODE; // true +p.firstChild.nodeType === Node.TEXT_NODE; // true +</pre> + +<h3 id="Commenti">Commenti</h3> + +<p>Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.</p> + +<pre class="brush: js">var node = document.documentElement.firstChild; +if (node.nodeType !== Node.COMMENT_NODE) { + console.warn("Dovresti commentare il tuo codice!"); +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Deprecated <code>ATTRIBUTE_NODE</code>, <code>ENTITY_REFERENCE_NODE</code> and <code>NOTATION_NODE</code> types.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.nodeType")}}</p> diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..547ba77939 --- /dev/null +++ b/files/it/web/api/element/nodevalue/index.html @@ -0,0 +1,75 @@ +--- +title: element.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/nodeValue +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il valore del nodo corrente.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><em>valore</em> = document.nodeValue +</pre> +<p><code>valore</code> è una stringa contenente il valore del nodo corrente, se esiste.</p> +<h3 id="Note" name="Note">Note</h3> +<p>La proprietà <code>nodeValue</code> dell'intero documento, restituisce <code>null</code>. Per un nodo di tipo testo, commento o CDATA, <code>nodeValue</code> restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.</p> +<p>La tabella seguente mostra i valori restituiti per i vari tipi di elementi:</p> +<table> + <tbody> + <tr> + <td>Attr</td> + <td>il valore dell'attributo</td> + </tr> + <tr> + <td>CDATASection</td> + <td>il contenuto della sezione CDATA</td> + </tr> + <tr> + <td>Comment</td> + <td>il commento</td> + </tr> + <tr> + <td>Document</td> + <td>null</td> + </tr> + <tr> + <td>DocumentFragment</td> + <td>null</td> + </tr> + <tr> + <td>DocumentType</td> + <td>null</td> + </tr> + <tr> + <td>Element</td> + <td>null</td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td>null</td> + </tr> + <tr> + <td>EntityReference</td> + <td>null</td> + </tr> + <tr> + <td>Notation</td> + <td>null</td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>l'intero contenuto, escluso il target</td> + </tr> + <tr> + <td>Text</td> + <td>il contenuto del nodo testo</td> + </tr> + </tbody> +</table> +<p>Quando <code>nodeValue</code> è impostato a <code>null</code>, reimpostarlo non ha alcun effetto.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D080">nodeValue </a></p> diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..03e89aa432 --- /dev/null +++ b/files/it/web/api/element/parentnode/index.html @@ -0,0 +1,61 @@ +--- +title: Node.parentNode +slug: Web/API/Element/parentNode +tags: + - API + - DOM + - Gecko + - Proprietà +translation_of: Web/API/Node/parentNode +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La proprietà di sola lettura <code><strong>Node.parentNode</strong></code> restituisce il genitore del nodo specificato nell'albero DOM.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode +</pre> + +<p><code>parentNode</code> è il genitore del nodo corrente. Il genitore di un elemento è un nodo <code>Element</code>, un nodo <code>Document</code>, o un nodo <code>DocumentFragment</code>.</p> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush:js">if (node.parentNode) { + // rimuovi un nodo dall'albero, a meno che + // non sia già nell'albero + node.parentNode.removeChild(node); +}</pre> + +<h2 id="Notes" name="Notes">Note</h2> + +<p>I <a href="/it/docs/Web/API/Element/nodeType">nodi</a> <code>Document</code> e <code>DocumentFragment</code> non possono mai avere un genitore, quindi <code>parentNode</code> ritornerà sempre <code>null</code>.</p> + +<p>Restituisce anche <code>null</code> se il nodo è appena stato creato e non è ancora collegato all'albero.</p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.parentNode")}}</p> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> +</ul> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{Domxref("Node.firstChild")}}</li> + <li>{{Domxref("Node.lastChild")}}</li> + <li>{{Domxref("Node.childNodes")}}</li> + <li>{{Domxref("Node.nextSibling")}}</li> + <li>{{Domxref("Node.parentElement")}}</li> + <li>{{Domxref("Node.previousSibling")}}</li> + <li>{{Domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/element/prefix/index.html new file mode 100644 index 0000000000..3371ff1f8d --- /dev/null +++ b/files/it/web/api/element/prefix/index.html @@ -0,0 +1,26 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/prefix +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il namespace del nodo, oppure <code>null</code> se il nodo non ha alcun prefisso.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>stringa</i> = element.prefix +element.prefix =<i>stringa</i> +</pre> +<h3 id="Esempi" name="Esempi">Esempi</h3> +<p>Il seguente esempio produce il messaggio "x".</p> +<pre class="eval"><x:div onclick="alert(this.prefix)"/> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (introdotto in DOM2).</p> +<p>{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}</p> diff --git a/files/it/web/api/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..f6455563d9 --- /dev/null +++ b/files/it/web/api/element/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo <code><strong>querySelector()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>var element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} <code>baseElement</code> contro; questa deve essere una sintassi CSS valida o si verificherà un <code>SyntaxError</code>. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il primo elemento discendente di <code>baseElement</code> che corrisponde al gruppo specificato di <code>selectors</code>. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso <code>baseElement</code> e i suoi discendenti; in altre parole, <code>selectors</code> viene prima applicato all'intero documento, non a <code>baseElement</code>, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di <code>baseElement</code>. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo <code>querySelector()</code>.</p> + +<p>Se non vengono trovate corrispondenze, il valore restituito è <code>null</code>.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>I <code>selectors</code> specificati non sono validi.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<p>Consideriamo alcuni esempi.</p> + +<h3 id="Trova_un_elemento_specifico_con_valori_specifici_di_un_attributo">Trova un elemento specifico con valori specifici di un attributo</h3> + +<p>In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h3 id="L'intera_gerarchia_conta">L'intera gerarchia conta</h3> + +<p>Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i <code>selectors</code>, in modo che i livelli al di fuori di <code>baseElement</code> specificato siano ancora considerati quando si localizzano le corrispondenze.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <h5>Original content</h5> + <p> + inside paragraph + <span>inside span</span> + inside paragraph + </p> +</div> +<div> + <h5>Output</h5> + <div id="output"></div> +</div></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var baseElement = document.querySelector("p"); +document.getElementById("output").innerHTML = + (baseElement.querySelector("div span").innerHTML);</pre> + +<h4 id="Risultato">Risultato</h4> + +<p>Il risultato è simile a questo:</p> + +<p>{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}</p> + +<p>Nota come il selettore <code>"div span"</code> corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il<br> + i nodi figli di <code>baseElement</code> non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).</p> + +<h3 id="More_examples">More examples</h3> + +<p>Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i <code>selectors</code>.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.querySelector")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> + <li><a href="https://developer.mozilla.org/it/docs/Web/CSS/Attribute_selectors">Selettori di attributi</a> nella guida sul CSS</li> + <li><a href="https://developer.mozilla.org/it/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Selettori di attributi</a> nell'Area di apprendimento MDN</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets per querySelector</a></li> + <li>Other methods that take selectors: {{domxref("element.closest()")}} and {{domxref("element.matches()")}}.</li> +</ul> diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..696b449cb6 --- /dev/null +++ b/files/it/web/api/element/queryselectorall/index.html @@ -0,0 +1,182 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Element + - Finding Elements + - Method + - Referenza + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo {{domxref("Element")}} <code><strong>querySelectorAll()</strong></code> restituisce una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.</p> + +<div class="note"> +<p><strong>Note:</strong> This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> valido; se non lo è, viene generata un'eccezione <code>SyntaxError</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.</p> +</div> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.</p> + +<div class="note"> +<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono un <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, l'elenco restituito è sempre vuoto.</p> +</div> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>La sintassi della stringa <code>selectors</code> specificata non è valida.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Ottenere_un_elenco_di_risultati">Ottenere un elenco di risultati</h3> + +<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento <code>"myBox"</code>:</p> + +<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre> + +<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di <code>"myBox"</code> con la classe "<code>note</code>" o "<code>alert</code>":</p> + +<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert"); +</pre> + +<p>Qui, otteniamo un elenco degli elementi <code><p></code> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe <code>"highlighted"</code> e che si trovano all'interno di un contenitore il cui ID è <code>"test"</code>.</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>Questo esempio usa un <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato <code>"data-src"</code>:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è <code>"userlist"</code> che hanno un attributo <code>"data-active"</code> il cui valore è <code>"1"</code>:</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="Accedere_ai_risultati">Accedere ai risultati</h3> + +<p>Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà <code>length</code> è 0), non è stata trovata alcuna corrispondenza.</p> + +<p>Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<div class="note"> +<p><strong>Note: </strong>NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova <code>Array.from(nodeList)</code>.</p> +</div> + +<h2 id="Note_dell'utente">Note dell'utente</h2> + +<p><code>querySelectorAll()</code> si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.</p> + +<h3 id="HTML">HTML</h3> + +<p>Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>In questo esempio, quando si seleziona <code>".outer .inner"</code> nel contesto il <code><div></code> con la classe <code>"select"</code>, tsi trova ancora l'elemento con la classe <code>".inner"</code>, anche se <code>.outer</code> non è un discendente dell'elemento base su cui viene eseguita la ricerca (<code>".select"</code>). Per impostazione predefinita, <code>querySelectorAll()</code> verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.</p> + +<p>La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Standard di vita</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Definizione iniziale</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Definizione originale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("api.Element.querySelectorAll")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> nella guida sul CSS</li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> nell'area di apprendimento MDN</li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} e {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} e {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Snippets per <code>querySelector()</code></a></li> +</ul> diff --git a/files/it/web/api/element/removeattribute/index.html b/files/it/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..2a64205cc3 --- /dev/null +++ b/files/it/web/api/element/removeattribute/index.html @@ -0,0 +1,57 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Riferimento + - metodo +translation_of: Web/API/Element/removeAttribute +--- +<div>{{ APIRef("DOM") }}</div> + +<p><span class="seoSummary">Il metodo {{domxref("Element")}} <strong><code>removeAttribute()</code></strong> rimuove l'attributo con il nome specificato dall'elemento.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>attrName</code></dt> + <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, <code>removeAttribute()</code> restituisce senza generare un errore.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p><code>undefined</code>.</p> + +<div class="note"> +<p><strong>Note:</strong> Poiché <code>removeAttribute()</code> non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.</p> +</div> + +<h2 id="Note_di_utilizzo">Note di utilizzo</h2> + +<p>Dovresti usare <code>removeAttribute()</code> <font><font>invece di impostare il valore dell'attributo </font></font><code>null</code> <font><font>direttamente o usando</font></font> {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a <code>null</code>.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">// Prima: <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// Dopo: <div id="div1" width="200px"> +</pre> + +<h2 id="Specifica">Specifica</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introdotta nel <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.removeAttribute")}}</p> diff --git a/files/it/web/api/element/requestfullscreen/index.html b/files/it/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..624e2da766 --- /dev/null +++ b/files/it/web/api/element/requestfullscreen/index.html @@ -0,0 +1,110 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +<div>{{APIRef("Fullscreen API")}}</div> + +<p>Il metodo <code><strong>Element.requestFullscreen()</strong></code> invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).</p> + +<p>Non c'è garanzia che l'elemento verrà effettivamente visualizzato a schermo intero. Se il permesso di entrare in modalità full-screen è accordato, il documento riceverà un evento di tipo {{event("fullscreenchange")}} che lo informarà dell'avvenuto passaggio in modalità full-screen. Viceversa, se il permesso è negato, il documento riceve un evento di tipo {{event('fullscreenerror')}}.</p> + +<div class="note"> +<p>Soltanto gli elementi nel documento principale o in un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero. Questo signigica che gli elementi all'interno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} non possono.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>elt</em>.requestFullscreen(); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Stato</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>11{{property_prefix("ms")}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] implementato anche come <code>webkitRequestFullScreen</code>.</p> + +<p>[2] Implementato come <code>mozRequestFullScreen</code> (notare la letterea S maiuscola per Screen). Prima di Firefox 44, Gecko erroneamente permetteva agli elementi all'inderno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} di richiedere e ottenere il full screen. Da Firefox 44 in poi ciò è stato corretto: solo gli elementi del documento principale o di un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero.</p> + +<p>[3] Vedi <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentazione su MSDN</a>.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Using full-screen mode</li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/it/web/api/element/scrollheight/index.html b/files/it/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..05cc48fd15 --- /dev/null +++ b/files/it/web/api/element/scrollheight/index.html @@ -0,0 +1,170 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +<p>{{ APIRef("DOM") }}</p> + +<p>L' <strong><code>Element.scrollHeight</code></strong> è una proprietà di sola lettura e contiene la misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore dello <code>scrollHeight</code> è uguale al minimo valore del clientHeight che l'elemento richiederebbe per adattare tutto il contenuto nel punto di vista, senza usare una barra di scorrimento verticale. Esso include il padding, ma non il bordo dell'elemento.</p> + +<div class="note"> +<p>Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2> + +<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>"nome dell'id"</em>).scrollHeight; +</pre> + +<p>La variabile <em>intElemScrollHeight</em> è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.</p> + +<h2 id="Example" name="Example">Esempio</h2> + +<div id="offsetContainer" style="margin: 26px 0px; border: 4px dashed black; left: 260px; color: black; position: absolute; background-color: rgb(255, 255, 204);"> +<div id="idDiv" style="margin: 24px 29px; padding: 0px 28px; border: 24px solid black; width: 199px; height: 102px; overflow: auto; font-family: Arial, sans-serif; font-size: 13px !important; background-color: white;"> +<p id="PaddingTopLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/44/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: _fckstyle="position: _fckstyle="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p> + +<h2 id="Problemi_e_soluzioni">Problemi e soluzioni</h2> + +<h3 id="Determinare_se_un_elemento_è_arrivato_in_fondo_con_lo_scroll.">Determinare se un elemento è arrivato in fondo con lo scroll.</h3> + +<p>La seguente funzione ritorna <code>true</code> se l'elemento è in fondo al suo scorrimento, <code>false</code> altrimenti.</p> + +<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight</pre> + +<p> </p> + +<p>Associato all'evento <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> e <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Per esempio:</p> + +<div style="height: 500px; overflow: auto; margin-bottom: 12px;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example</title> +<script type="text/javascript"> +function checkReading () { + if (checkReading.read) { return; } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? + "Thank you." : + "Please, scroll and read the following text."; +} + +onload = function () { + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); +} + +</script> +<style type="text/css"> + +#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} + +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +} +</style> +</head> + +<body> + + <form name="registration"> + + <p> + <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. + +Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu. + +Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc. + +Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque. + +Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.</textarea> + </p> + + <p> + <input type="checkbox" name="accept" id="agree" /> + <label for="agree">I agree</label> + <input type="submit" id="nextstep" value="Next" /> + </p> + + </form> + +</body> +</html></pre> +</div> + +<p><a href="https://developer.mozilla.org/files/4589/readme-example.html" title="readme-example.html">Guarda l'esempio qui sopra</a></p> + +<h2 id="Specification" name="Specification">Specificazioni</h2> + +<p><code>scrollHeight</code> è parte del modello dell'oggetto MSIE's <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> . s<code>crollHeight</code> funziona su questi browser: {{SpecName("CSSOM View")}}.</p> + +<h2 id="Supported" name="Supported">Compatibilità dei Browser</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versioni</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>8.0</strong></td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.0</strong> (1.9)</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari | Chrome | WebKit</td> + <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td> + </tr> + </tbody> +</table> + +<p><strong>Nelle versioni più vecchie di FireFox:</strong> <span style="line-height: 1.5;">Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo </span><code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> sarebbe uguale al suo </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;"> . Questo ci può dire che, o il contenuto è talmente corto da non richiedere una barra di scorrimento verticale, o che quell'elemento ha impostato la proprietà CSS overflow su visible (non-scrollabile).</span></p> + +<h2 id="See_Also" name="See_Also">Guarda anche</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.offsetHeight")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> +</ul> diff --git a/files/it/web/api/element/scrolltop/index.html b/files/it/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..52d7520f6f --- /dev/null +++ b/files/it/web/api/element/scrolltop/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - Proprietà + - Referenza +translation_of: Web/API/Element/scrollTop +--- +<div>{{ APIRef("DOM") }}</div> + +<p><span class="seoSummary">La proprietà <code><strong>Element.scrollTop</strong></code> ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.</span></p> + +<p>Il valore <code>scrollTop</code> di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto <em>visibile</em> più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore <code>scrollTop</code> è <code>0</code>.</p> + +<div class="warning"> +<p>Sui sistemi che usano il ridimensionamento del display, <code>scrollTop</code> può darti un valore decimale.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="brush: js">// Get the number of pixels scrolled. +var <var>intElemScrollTop</var> = someElement.scrollTop; +</pre> + +<p><var>Dopo aver eseguito questo codice, </var><code><var>intElemScrollTop</var></code> è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.</p> + +<pre class="brush: js">// Set the number of pixels scrolled. +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><code>scrollTop</code> può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:</p> + +<ul> + <li>Se l'elemento non può essere scrollato (ad es. Non ha overflow o se l'elemento ha una proprietà di "<strong>non-scrollable"</strong>), <code>scrollTop</code> è <code>0</code>.</li> + <li><code>scrollTop</code> non risponde ai valori negativi; invece, si riporta su <code>0</code>.</li> + <li>Se impostato su un valore superiore al massimo disponibile per l'elemento, scrollTop si assesterà sul valore massimo.</li> +</ul> + +<h2 id="Esempio">Esempio</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> +<em><strong>If you can see this, scrollTop = 0</strong></em> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> +<strong><em>If you can see this, scrollTop is > 0</em></strong> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +<strong><em>If you can see this, scrollTop is maxed-out</em></strong> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.scrollTop")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/it/web/api/element/setattribute/index.html b/files/it/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..b3644c8bb2 --- /dev/null +++ b/files/it/web/api/element/setattribute/index.html @@ -0,0 +1,83 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary">Imposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.</span></p> + +<p>Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>nome</em>, <em>valore</em>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>nome</code></dt> + <dd>Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>setAttribute()</code> viene chiamato su un elemento in un documento HTML.</dd> + <dt><code>valore</code></dt> + <dd>Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.</dd> +</dl> + +<p>Gli attributi booleani sono considerati <code>true</code> se sono presenti sull'elemento, indipendentemente dal loro <code>valore</code> effettivo; di norma, è necessario specificare la stringa vuota (<code>""</code>) in <code>valore</code> (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.</p> + +<p>Poiché il <code>valore</code> specificato viene convertito in una stringa, specificare <code>null</code> non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa <code>null</code>. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<dl> + <dt><code>InvalidCharacterError</code></dt> + <dd>L'attributo specificato <code>nome</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd> +</dl> + +<h2 id="Example" name="Example">Esempio</h2> + +<p>Nell'esempio seguente, <code>setAttribute()</code> viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><button>Hello World</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">var b = document.querySelector("button"); + +b.setAttribute("name", "helloButton"); +b.setAttribute("disabled", ""); +</pre> + +<p>Questo dimostra due cose:</p> + +<ul> + <li>La prima chiamata a <code>setAttribute()</code> mostra la modifica del valore dell'attributo <code>name</code> su "helloButton". Puoi vederlo usando l'ispettore di pagina del tuo browser (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li> + <li>Per impostare il valore di un attributo booleano, come <code>disabled</code>, puoi specificare qualsiasi valore. Una stringa vuota o il nome dell'attributo sono valori consigliati. Tutto ciò che conta è che se l'attributo è presente a tutti, <em>indipendentemente dal suo valore reale</em>, il suo valore è considerato <code>true</code>. L'assenza dell'attributo significa che il suo valore è <code>false</code>. Impostando il valore dell'attributo <code>disabled</code> sulla stringa vuota (<code>""</code>), stiamo impostando <code>disabled</code> su <code>true</code>, il risultato è che il pulsante è disabilitato.</li> +</ul> + +<p>{{ EmbedLiveSample('Example', '300', '50') }}</p> + +<p>{{DOMAttributeMethods}}</p> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.setAttribute")}}</p> + +<h3 id="Notes" name="Notes">Gecko notes</h3> + +<p>L'utilizzo di <code>setAttribute()</code> per modificare determinati attributi, in particolare <code>value</code> in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare <code>Element.value</code> anziché <code>Element.setAttribute()</code>.</p> diff --git a/files/it/web/api/element/tagname/index.html b/files/it/web/api/element/tagname/index.html new file mode 100644 index 0000000000..950a9a17a4 --- /dev/null +++ b/files/it/web/api/element/tagname/index.html @@ -0,0 +1,72 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Di sola lettura + - Element + - Gecko + - Proprietà + - Referenza + - Referenza del DOM + - tagName +translation_of: Web/API/Element/tagName +--- +<div>{{ApiRef("DOM")}}</div> + +<p><span class="seoSummary">La proprietà <strong><code>tagName</code> </strong>di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato.</span> Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà <code>tagName</code> è <code>"IMG"</code> (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>elementName</em> = <em>Element</em>.tagName; +</pre> + +<h3 id="Valore">Valore</h3> + +<p>Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:</p> + +<ul> + <li>Per gli alberi del DOM che rappresentano documenti HTML, il nome del tag restituito è sempre nel formato maiuscolo canonico. Ad esempio, <code>tagName</code> chiamato su un elemento {{HTMLElement("div")}} ritorna <code>"DIV"</code>.</li> + <li>I nomi dei tag degli elementi in un albero del DOM di XML vengono restituiti nello stesso caso in cui sono scritti nel file XML originale. Se un documento XML include un tag <code>"<SomeTag>"</code>, il valore della proprietà <code>tagName</code> è <code>"SomeTag"</code>.</li> +</ul> + +<p>Per gli oggetti {{domxref("Element")}}, il valore di <code>tagName</code> è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.</p> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span id="born">Quando sono nato...</span> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var span = document.getElementById("born"); +console.log(span.tagName); +</pre> + +<p>In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi <code>"span"</code> verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, <code>"SPAN"</code> verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specifica</th> + <th>Stato</th> + <th>Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.tagName")}}</p> diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..137c76a3eb --- /dev/null +++ b/files/it/web/api/element/textcontent/index.html @@ -0,0 +1,138 @@ +--- +title: Node.textContent +slug: Web/API/Element/textContent +tags: + - API + - Command API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<p>La proprietà <code><strong>textContent</strong></code> dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <code>textContent</code> e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma <a href="#Differenze_da_innerText">i due sono diversi in modi molto importanti</a>.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>text</em> = <em>Node</em>.textContent; +<em>Node</em>.textContent = <em>string</em>; +</pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una stringa o <code>null</code>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Quando ottieni questa proprietà:</p> + +<ul> + <li>Se il nodo è <a href="/en-US/docs/DOM/document">document</a>, <a href="/en-US/docs/Glossary/Doctype">DOCTYPE</a>, o una <a href="/en-US/docs/Web/API/Notation">notation</a>, <code>textContent</code> ritorna <code>null</code>. (Per ottenere tutto il testo e i <a href="/en-US/docs/Web/API/CDATASection">dati CDATA</a> per l'intero documento, si potrebbe usare <code><a href="https://developer.mozilla.org/it/docs/Web/API/Document/documentElement">document.documentElement</a>.textContent</code>.)</li> + <li>Se il nodo è una <a href="/en-US/docs/Web/API/CDATASection">sezione CDATA</a>, un commento, <a href="/en-US/docs/Web/API/ProcessingInstruction">istruzione di elaborazione</a>, o <a href="/en-US/docs/Web/API/Document/createTextNode">nodo di testo</a>, <code>textContent</code> restituisce il testo all'interno del nodo, cioè {{domxref("Node.nodeValue")}}.</li> + <li>Per altri tipi di nodo, <code>textContent</code> restituisce la concatenazione del <code>textContent</code> di ogni nodo figlio, esclusi i commenti e le istruzioni di elaborazione. Questa è una stringa vuota se il nodo non ha figli.</li> +</ul> + +<p>L'impostazione di <code>textContent</code> su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.</p> + +<h3 id="Differenze_da_innerText">Differenze da innerText</h3> + +<p>Non lasciarti confondere dalle differenze tra <code>Node.textContent</code> e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:</p> + +<ul> + <li><code>textContent</code> ottiene il contenuto di tutti gli elementi, compresi gli elementi {{HTMLElement("script")}} e {{HTMLElement("style")}}. Al contrario, <code>innerText</code> mostra solo elementi "leggibili".</li> + <li><code>textContent</code> restituisce ogni elemento nel nodo. Al contrario, <code>innerText</code> è consapevole dello stile e non restituirà il testo di elementi "nascosti". Inoltre, poiché <code>innerText</code> prende in considerazione gli stili CSS, la lettura del valore di <code>innerText</code> aziona un <a href="/it/docs/Glossary/Reflow">reflow</a> per garantire stili aggiornati. (I reflow possono essere computazionalmente costosi, e quindi dovrebbero essere evitati quando possibile.)</li> + <li>A differenza di <code>textContent</code>, la modifica di <code>innerText</code> in Internet Explorer (versione 11 e inferiore) rimuove i nodi figlio dall'elemento e <em>distrugge in modo permanente</em> tutti i nodi di testo discendenti. È impossibile inserire nuovamente i nodi in qualsiasi altro elemento o nello stesso elemento.</li> +</ul> + +<h3 id="Differenze_da_innerHTML">Differenze da innerHTML</h3> + +<p>{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano <code>innerHTML</code> per recuperare o scrivere testo all'interno di un elemento, ma <code>textContent</code> ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di <code>textContent</code> può impedire <a href="/en-US/docs/Glossary/Cross-site_scripting">gli attacchi XSS</a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Dato questo codice HTML:</p> + +<pre class="brush: html"><div id="divA">Questo è <span>un</span> testo!</div></pre> + +<p>...puoi usare <code>textContent</code> per ottenere il contenuto del testo dell'elemento:</p> + +<pre class="brush: js">let text = document.getElementById('divA').textContent; +// La variabile text è ora: "Questo è un testo!"</pre> + +<p>...o imposta il contenuto del testo dell'elemento:</p> + +<pre class="brush: js">document.getElementById('divA').textContent = 'Questo testo è diverso!'; +// L'HTML per divA è ora: +// <div id="divA">Questo testo è diverso!</div> +</pre> + +<h2 id="Polyfill_per_IE8">Polyfill per IE8</h2> + +<pre class="brush: js">// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8 +if (Object.defineProperty + && Object.getOwnPropertyDescriptor + && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") + && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) { + (function() { + var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); + Object.defineProperty(Element.prototype, "textContent", + // Passare innerText o innerText.get direttamente non funziona, + // è richiesta la funzione wrapper. + { + get: function() { + return innerText.get.call(this); + }, + set: function(s) { + return innerText.set.call(this, s); + } + } + ); + })(); +} +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Nessun cambiamento vs. DOM4</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Introdotto</td> + </tr> + </tbody> +</table> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("HTMLElement.innerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> + <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Maggiori informazioni sulle differenze tra <code>innerText</code> e <code>textContent</code></a> (blog post)</li> +</ul> diff --git a/files/it/web/api/element/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html new file mode 100644 index 0000000000..c997b4efdd --- /dev/null +++ b/files/it/web/api/element/toggleattribute/index.html @@ -0,0 +1,104 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +translation_of: Web/API/Element/toggleAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo <code><strong>toggleAttribute()</strong></code> dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>Element</em>.toggleAttribute(<em>name</em> [, <em>force</em>]); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>toggleAttribute()</code> viene chiamato su un elemento HTML in un documento HTML.</dd> + <dt><code>force</code> {{optional_inline}}</dt> + <dd>Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p><code>true</code> se l'attributo <strong><code>name</code></strong> è eventualmente presente, in caso contrario <code>false</code>.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>InvalidCharacterError</code></dt> + <dd>L'attributo specificato <code>name</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<p>Nell'esempio seguente, <code>toggleAttribute()</code> viene utilizzato per commutare l'attributo <code>readonly</code> di un {{HTMLElement("input")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input value="text"> +<button>toggleAttribute("readonly")</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">var button = document.querySelector("button"); +var input = document.querySelector("input"); + +button.addEventListener("click", function(){ + input.toggleAttribute("readonly"); +}); +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>{{ EmbedLiveSample('Esempio', '300', '50') }}</p> + +<p>{{DOMAttributeMethods}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Element.prototype.toggleAttribute) { + Element.prototype.toggleAttribute = function(name, force) { + if(force !== void 0) force = !!force + + if (this.getAttribute(name) !== null) { + if (force) return true; + + this.removeAttribute(name); + return false; + } else { + if (force === false) return false; + + this.setAttribute(name, ""); + return true; + } + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.toggleAttribute")}}</p> diff --git a/files/it/web/api/event/altkey/index.html b/files/it/web/api/event/altkey/index.html new file mode 100644 index 0000000000..1ab63e4329 --- /dev/null +++ b/files/it/web/api/event/altkey/index.html @@ -0,0 +1,46 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/altKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica se il tasto ALT era premuto mentre l'evento si verificava.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval"><i>bool</i> = event.altKey +</pre> +<p><code>bool</code> vale <code>true</code> se il tasto ALT era premuto, altrimenti <code>false</code>.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio tasto ALT</title> + +<script type="text/javascript"> + +function mostraCarattere(e){ + alert( + "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n" + + "Codice carattere: " + e.charCode + "\n" + + "Tasto ALT premuto: " + e.altKey + "\n" + ); +} + +</script> +</head> + +<body onkeypress="mostraCarattere(event);"> +<p> +Prova a premere un tasto tenendo premuto ALT e prova a premere un tasto senza premere ALT.<br /> +Puoi anche provare a premere ALT+SHIFT. +</p> +</body> +</html> +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-altKey">altKey </a></p> +<p>{{ languages( { "en": "en/DOM/event.altKey", "pl": "pl/DOM/event.altKey" } ) }}</p> diff --git a/files/it/web/api/event/bubbles/index.html b/files/it/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..e75e385070 --- /dev/null +++ b/files/it/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/bubbles +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica se un dato evento può emergere attraverso il DOM oppure no.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>bool</i> = event.bubbles +</pre> +<p><code>bool</code> vale <code>true</code> se l'evento può emergere, altrimenti vale <code>false</code>.</p> +<h3 id="Note" name="Note">Note</h3> +<p>Solo alcuni eventi possono emergere. Tali eventi hanno questa proprietà impostata a <code>true</code>. E' possibile utilizzarla per controllare se un evento può emergere.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre> function leggiInput(e) { + // controlla se emerge + if not e.bubbles { + // in caso negativo, passa oltre + passaOltre(e); + } + // altrimenti emerge + scriviOutput(e) +} +</pre> +<p>{{ languages( { "en": "en/DOM/event.bubbles", "pl": "pl/DOM/event.bubbles" } ) }}</p> diff --git a/files/it/web/api/event/button/index.html b/files/it/web/api/event/button/index.html new file mode 100644 index 0000000000..5862d54439 --- /dev/null +++ b/files/it/web/api/event/button/index.html @@ -0,0 +1,57 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/button +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce un intero che indica quale tasto del mouse è stato premuto.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre>var codiceBottone = event.button; +</pre> +<p>codiceBottone può assumere uno dei seguenti valori:</p> +<ul> + <li>0 standard click, di solito il tasto sinistro</li> + <li>1 tasto centrale, che di solito è la rotella</li> + <li>2 tasto destro</li> +</ul> +<p>L'ordine dei bottoni è inverso se il mouse è configurato per l'utilizzo da parte dei mancini.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><script type="text/javascript"> + +function qualeTasto(e) +{ + var e = e || window.event; + var codiceTasto; + + if ('object' == typeof e){ + codiceTasto = e.button; + + switch (codiceTasto){ + case 0 : alert('Hai premuto il tasto sinistro'); + break; + case 1 : alert('Hai premuto il tasto centrale'); + break; + case 2 : alert('Hai premuto il tasto destro'); + break; + default : alert('Codice sconosciuto: ' + btnCode); + } + } +} + +</script> + +<p onclick="qualeBottone(event);">Clicca con il mouse...</p> + +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Poichè i click del mouse spesso vengono intercettati dall'interfaccia utente, in alcuni casi potrebbe essere difficile rilevare la pressione di un bottone che non sia quello standard (generalmente il sinistro).</p> +<p>Gli utenti possono cambiare la configurazione dei tasti del loro dispositivo di puntamento in modo tale che se il valore di codiceBottone è 0, questo non è causato dal tasto che si trova fisicamente a sinistra, ma questo non ha molta importanza.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> +<p>{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}</p> diff --git a/files/it/web/api/event/cancelable/index.html b/files/it/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..3258a2b37d --- /dev/null +++ b/files/it/web/api/event/cancelable/index.html @@ -0,0 +1,23 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/cancelable +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica se è possibile cancellare la risposta predefinita di questo evento o meno.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>bool</i> =<i>event</i>.cancelable; +</pre> +<p><code>bool</code> vale <code>true</code> se l'evento è cancellabile, altrimenti <code>false</code>.</p> +<h3 id="Note" name="Note">Note</h3> +<p>Se un evento possa essere cancellato o meno, viene determinato al momento dell'inizializzazione dell'evento.</p> +<p>Per cancellare un evento, si chiami il metodo <a href="it/DOM/event.preventDefault">preventDefault</a>. Questo impedisce al browser di eseguire l'azione di default associata a tale evento.</p> +<h3 id="Specification" name="Specification">Specification</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></p> +<p>{{ languages( { "en": "en/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}</p> diff --git a/files/it/web/api/event/charcode/index.html b/files/it/web/api/event/charcode/index.html new file mode 100644 index 0000000000..fb785e722e --- /dev/null +++ b/files/it/web/api/event/charcode/index.html @@ -0,0 +1,49 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/charCode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il valore Unicode del tasto carattere che è stato premuto e ha scatenato un evento <a href="it/DOM/element/keypress">keypress</a>.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>valore</i> = event.charCode +</pre> +<ul> + <li><code>valore</code> è il valore Unicode del carattere digitato</li> +</ul> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio di charCode</title> + +<script type="text/javascript"> + +function mostraCarattere(e) +{ +alert("Tasto premuto: " + String.fromCharCode(e.charCode) + "\n" + + "Codice carattere: " + e.charCode); +} + +</script> +</head> + +<body onkeypress="mostraCarattere(event);"> +<p>Premere un qualsiasi tasto carattere.</p> +</body> +</html> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>In un evento <a href="it/DOM/event/keypress">keypress</a>, il valore Unicode del tasto premuto viene registrato nella proprietà <code><a href="it/DOM/event.keyCode">keyCode</a></code> oppure nella proprietà <code>charCode</code>, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), <code>charCode</code> assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà <code>keyCode</code>.</p> +<p><code>charCode</code> non viene mai impostato durante gli eventi <a href="it/DOM/event/keydown">keydown</a> e <a href="it/DOM/event/keyup">keyup</a>. In questi casi, viene impostato <code>keyCode</code>.</p> +<p>Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in <code>keyCode</code> o in <code>charCode</code>, si può utilizzare la proprietà <code><a href="it/DOM/event.which">which</a></code>.</p> +<p>I caratteri inseriti attraverso un IME non vengono registrati nè in <code>keyCode</code> nè in <code>charCode</code>.</p> +<p>Per una lista dei possibili valori di <code>charCode</code> e per conoscere i tasti ai quali sono associati, vedere l'esempio <a href="it/Reference_del_DOM_di_Gecko/Esempi#Example_7:_Mostrare_le_costanti_dell.27oggetto_Event">Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event</a>.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>Non è parte di alcuna specifica. Si veda <a href="it/NsIDOMKeyEvent">nsIDOMKeyEvent</a></p> +<p>{{ languages( { "en": "en/DOM/event.charCode", "pl": "pl/DOM/event.charCode" } ) }}</p> diff --git a/files/it/web/api/event/ctrlkey/index.html b/files/it/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..02fe7f82bf --- /dev/null +++ b/files/it/web/api/event/ctrlkey/index.html @@ -0,0 +1,44 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/ctrlKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica se il tasto CTRL è stato premuto mentre l'evento si verificava.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>bool</i> = event.ctrlKey +</pre> +<p><code>bool</code> vale <code>true</code> se il tasto CTRL era premuto, altrimenti <code>false</code>.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio tasto control</title> + +<script type="text/javascript"> + +function mostraCarattere(e){ + alert( + "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n" + + "Codice carattere: " + e.charCode + "\n" + + "Tasto CTRL premuto: " + e.ctrlKey + "\n" + ); +} + +</script> +</head> + +<body onkeypress="mostraCarattere(event);"> +<p>Prova a premere un tasto tenendo premuto CTRL e prova a premere un tasto senza premere CTRL.<br /> +Puoi anche provare a premere CTRL+SHIFT.</p> +</body> +</html> +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-ctrlKey">ctrlKey </a></p> +<p>{{ languages( { "en": "en/DOM/event.ctrlKey", "pl": "pl/DOM/event.ctrlKey" } ) }}</p> diff --git a/files/it/web/api/event/currenttarget/index.html b/files/it/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..7fcc81f4b3 --- /dev/null +++ b/files/it/web/api/event/currenttarget/index.html @@ -0,0 +1,99 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +translation_of: Web/API/Event/currentTarget +--- +<p>{{APIRef("DOM")}}</p> + +<p>Identifica l'elemento del DOM a cui è stato assegnato l'event handler diversamente dall' <code>event.target</code> che rappresenta l'elemento da cui è stato generato l'evento.</p> + +<h2 id="Esempio">Esempio</h2> + +<p>L' <code>event.currentTarget </code>risulta utile da usare quando si assegna lo stesso event handler a numerosi elementi.</p> + +<pre class="brush: js">function hide(e){ + e.currentTarget.style.visibility = "hidden"; + // When this function is used as an event handler: this === e.currentTarget +} + +var ps = document.getElementsByTagName('p'); + +for(var i = 0; i < ps.length; i++){ + ps[i].addEventListener('click', hide, false); +} + +// click around and make paragraphs disappear +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Il modello degli eventi implementato dagli Internet Explorer da 6 a 8 è diverso. Gli event listerner sono attaccati attraverso il metodo non standard <code>element.attachEvent. </code>In questo modello non esiste un equivalente dell' <code>event.currentTarget</code> inoltre <code>this</code> è l'oggetto globale. Una possibile soluzione è quella di wrappare la gestione dell' <code>event.currentTarget </code>in una funzione che chiami la funzione di handler attraverso la <code>Function.prototype.call</code> passando come primo parametro l'elemento. In questo modo il valore associato allo <code>this</code> è quello aspettato.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></p> diff --git a/files/it/web/api/event/eventphase/index.html b/files/it/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..d695a1451a --- /dev/null +++ b/files/it/web/api/event/eventphase/index.html @@ -0,0 +1,19 @@ +--- +title: event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/eventPhase +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica quale fase del flusso degli eventi è attualmente in elaborazione.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>fase</i> = event.eventPhase +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-eventPhase">eventPhase </a></p> +<p>{{ languages( { "en": "en/DOM/event.eventPhase", "pl": "pl/DOM/event.eventPhase" } ) }}</p> diff --git a/files/it/web/api/event/index.html b/files/it/web/api/event/index.html new file mode 100644 index 0000000000..6ae75ff300 --- /dev/null +++ b/files/it/web/api/event/index.html @@ -0,0 +1,240 @@ +--- +title: event +slug: Web/API/Event +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event +--- +<p>{{ ApiRef() }}</p> +<h3 id="Introduzione" name="Introduzione">Introduzione</h3> +<p>Questo capitolo descrive il modello degli eventi del DOM Level 2 così come è implementato in <a href="it/Gecko">Gecko</a>. Viene descritta l'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, così come le interfacce per la registrazione di eventi per i nodi del DOM, i gestori di eventi, i listener e diversi esempi che mostrano come le interfacce dei diversi eventi si relazionano tra loro.</p> +<p>Vi è un diagramma eccellente che spiega chiaramente le tre fasi del flusso degli eventi nella <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow">bozza di DOM Level 3</a>.</p> +<h4 id="L.27interfaccia_Event" name="L.27interfaccia_Event">L'interfaccia <code>Event</code></h4> +<p>I gestori degli eventi possono essere assegnati a vari elementi DOM. Quando un dato evento si verifica, un oggetto evento viene creato dinamicamente e passato agli event listener che permettono di gestirlo. L'interfaccia <code>Event</code> del DOM è quindi accessibile dalla funzione che gestisce l'evento, alla quale viene passato un oggetto evento come primo e unico argomento.</p> +<p>Vi sono tre modi di assegnare un listener a un elemento. Con due di queste tecniche, l'oggetto evento viene passato implicitamente alla funzione che gestisce l'evento. Con la terza tecnica, occorre passare esplicitamente l'oggetto evento come parametro.</p> +<p>L'esempio seguente mostra come un oggetto evento viene passato a tale funzione e come può essere utilizzato all'interno della funzione.</p> +<p>Si noti che nel codice non viene passato alcun parametro "evt". L'oggetto evento viene passato automaticamente a <code>foo</code>. Tutto ciò che occorre fare è definire un parametro nel gestore di eventi che riceva l'oggetto evento.</p> +<pre>function foo(evt) { + // le funzioni per la gestione degli eventi come questa + // ricevono un riferimento implicito all'oggetto evento che gestiscono + // (in questo caso abbiamo scelto di chiamarlo "evt"). + alert(evt); +} +elementoTabella.onclick = foo; +</pre> +<p>Questo esempio è molto semplice, ma mostra una caratteristica importante degli eventi nel DOM di Gecko, cioè che è possibile accedere all'oggetto evento dalla funzione gestore. Una volta che si ha un riferimento a un evento, si può accedere a tutte le proprietà e ai metodi descritti in questo capitolo.</p> +<h4 id="Gestori_degli_eventi_DOM" name="Gestori_degli_eventi_DOM">Gestori degli eventi DOM</h4> +<p>Oltre all'oggetto <code>event</code> qui descritto, il DOM di Gecko fornisce anche metodi per la registrazione dei listener sui nodi del DOM, la rimozione di questi listeners ed eliminare gli eventi dal DOM. Questi event listener sugli elementi HTML o XML sono i modi principali per accedere agli eventi. Questi tre metodi sono descritti nella lista sottostante.</p> +<p>Si può anche passare un riferimento all'oggetto evento sotto forma di un parametro definito, chiamato <code>event</code>, alla funzione che gestisce l'evento. Il funzionamento è molto simile a quello della parola chiave <code>this</code>.</p> +<pre><html> +<head> +<title>esempio sul parametro evento</title> + +<script type="text/javascript"> + +function mostraCoordinate(evt){ + alert( + "valore clientX: " + evt.clientX + "\n" + + "valore clientY: " + evt.clientY + "\n" + ); +} + +</script> +</head> + +<body onmousedown="mostraCoordinate(event)"> +<p>Per conoscere le coordinate della posizione del mouse, clicca in qualunque punto di questa pagina.</p> +</body> +</html> +</pre> +<p>Utilizzando l'oggetto <code>event</code> predefinito è possibile passare altri parametri alla funzione, come mostrato nel seguente esempio:</p> +<pre><html> +<head> +<title>esempio sul parametro evento + parametri extra</title> + +<script type="text/javascript"> + +var par2 = 'ciao'; +var par3 = 'mondo!'; + +function mostraCoordinate(evt, p2, p3){ + alert( + "valore clientX: " + evt.clientX + "\n" + + "valore clientY: " + evt.clientY + "\n" + + "parametro 2: " + p2 + "\n" + + "parametro 3: " + p3 + "\n" + ); +} + +</script> +</head> + +<body onmousedown="mostraCoordinate(event, par2, par3)"> +<p>Per conoscere le coordinate della posizione del mouse e visualizzare un saluto al mondo, clicca in qualunque punto di questa pagina.</p> +</body> +</html> +</pre> +<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3> +<dl> + <dt> + <a href="it/DOM/event.altKey">event.altKey</a></dt> + <dd> + Restituisce un booleano che indica se il tasto <code><alt></code> è stato premuto durante l'evento.</dd> + <dt> + <a href="it/DOM/event.bubbles">event.bubbles</a></dt> + <dd> + Restituisce un booleano che indica se l'evento emerge dal DOM.</dd> + <dt> + <a href="it/DOM/event.button">event.button</a></dt> + <dd> + Restituisce un intero che indica quale tasto del mouse è stato premuto.</dd> + <dt> + <a href="it/DOM/event.cancelBubble">event.cancelBubble</a></dt> + <dd> + {{ Deprecated_inline() }} Restituisce un booleano che indica se l'evento è stato cancellato.</dd> + <dt> + <a href="it/DOM/event.cancelable">event.cancelable</a></dt> + <dd> + Restituisce un booleano che indica se l'evento è cancellabile.</dd> + <dt> + <a href="it/DOM/event.charCode">event.charCode</a></dt> + <dd> + Restituisce il tasto carattere che è stato premuto e che ha scatenato l'evento <a href="it/DOM/event/keypress">keypress</a>.</dd> + <dt> + <a href="it/DOM/event.clientX">event.clientX</a></dt> + <dd> + Restituisce la posizione orizzontale del puntatore del mouse.</dd> + <dt> + <a href="it/DOM/event.clientY">event.clientY</a></dt> + <dd> + Restituisce la posizione verticale del puntatore del mouse.</dd> + <dt> + <a href="it/DOM/event.ctrlKey">event.ctrlKey</a></dt> + <dd> + Restituisce un booleano che indica se il tasto <code><ctrl></code> è stato premuto durante l'evento.</dd> + <dt> + <a href="it/DOM/event.currentTarget">event.currentTarget</a></dt> + <dd> + Restituisce un riferimento all'elemento a cui appartiene l'evento.</dd> + <dt> + <a href="it/DOM/event.detail">event.detail</a></dt> + <dd> + Restituisce alcuni dettagli sull'evento.</dd> + <dt> + <a href="it/DOM/event.eventPhase">event.eventPhase</a></dt> + <dd> + Indica in quale fase si trova il flusso dell'elaborazione degli eventi.</dd> + <dt> + <a href="it/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></dt> + <dd> + Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).</dd> + <dt> + <a href="it/DOM/event.isChar">event.isChar</a></dt> + <dd> + Restituisce un booleano che indica se l'evento è stato causato dalla pressione di un tasto carattere.</dd> + <dt> + <a href="it/DOM/event.keyCode">event.keyCode</a></dt> + <dd> + Restituisce un valore Unicode per un tasto non carattere che è stato premuto.</dd> + <dt> + <a href="it/DOM/event.layerX">event.layerX</a></dt> + <dd> + Restituisce la coordinata orizzontale relativa al layer corrente.</dd> + <dt> + <a href="it/DOM/event.layerY">event.layerY</a></dt> + <dd> + Restituisce la coordinata verticale relativa al layer corrente.</dd> + <dt> + <a href="it/DOM/event.metaKey">event.metaKey</a></dt> + <dd> + Restituisce un booleano che indica se il tasto <code>meta</code> è stato premuto durante l'evento.</dd> + <dt> + <a href="it/DOM/event.originalTarget">event.originalTarget</a></dt> + <dd> + Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).</dd> + <dt> + <a href="it/DOM/event.pageX">event.pageX</a></dt> + <dd> + Restituisce la coordinata orizzontale relativa alla pagina.</dd> + <dt> + <a href="it/DOM/event.pageY">event.pageY</a></dt> + <dd> + Restituisce la coordinata verticale relativa alla pagina.</dd> + <dt> + <a href="it/DOM/event.relatedTarget">event.relatedTarget</a></dt> + <dd> + Identifica un elemento secondario legato all'evento.</dd> + <dt> + <a href="it/DOM/event.screenX">event.screenX</a></dt> + <dd> + Restituisce la posizione orizzontale relativa allo schermo.</dd> + <dt> + <a href="it/DOM/event.screenY">event.screenY</a></dt> + <dd> + Restituisce la posizione verticale relativa allo schermo.</dd> + <dt> + <a href="it/DOM/event.shiftKey">event.shiftKey</a></dt> + <dd> + Restituisce un booleano che indica se il tasto <code><shift></code> è stato premuto durante l'evento.</dd> + <dt> + <a href="it/DOM/event.target">event.target</a></dt> + <dd> + Restituisce un riferimento all'elemento al quale l'evento era legato originariamente.</dd> + <dt> + <a href="it/DOM/event.timeStamp">event.timeStamp</a></dt> + <dd> + Restituisce il timestamp nel quale l'evento è stato scatenato.</dd> + <dt> + <a href="it/DOM/event.type">event.type</a></dt> + <dd> + Restituisce il nome dell'evento (case-insensitive).</dd> + <dt> + <a href="it/DOM/event.view">event.view</a></dt> + <dd> + Identifica l'<code>AbstractView</code> dal quale l'evento è stato generato.</dd> + <dt> + <a href="it/DOM/event.which">event.which</a></dt> + <dd> + Restituisce il valore Unicode del tasto che è stato premuto, indipendentemente da quale tipo di tasto sia stato premuto.</dd> +</dl> +<h3 id="Metodi" name="Metodi">Metodi</h3> +<dl> + <dt> + <a href="it/DOM/event.initEvent">event.initEvent</a></dt> + <dd> + Inizializza il valore di un evento che è stato creato tramite l'interfaccia <code>DocumentEvent</code>.</dd> + <dt> + <a href="it/DOM/event.initKeyEvent">event.initKeyEvent</a></dt> + <dd> + Inizializza un evento legato alla tastiera (specifico di Gecko).</dd> + <dt> + <a href="it/DOM/event.initMouseEvent">event.initMouseEvent</a></dt> + <dd> + Inizializza un evento legato al mouse</dd> + <dt> + <a href="it/DOM/event.initUIEvent">event.initUIEvent</a></dt> + <dd> + Inizializza un evento legato all'interfaccia utente</dd> + <dt> + <a href="it/DOM/event.preventBubble">event.preventBubble</a></dt> + <dd> + {{ Obsolete_inline() }} Previene l'emergere di un evento. Questo metodo è deprecato in favore dello standard <a href="it/DOM/event.stopPropagation">stopPropagation</a> ed è stato rimosso in Gecko 1.9.</dd> + <dt> + <a href="it/DOM/event.preventCapture">event.preventCapture</a></dt> + <dd> + {{ Obsolete_inline() }} Questo metodo è deprecato in favore dello standard <a href="it/DOM/event.stopPropagation">stopPropagation</a> ed è stato rimosso in Gecko 1.9.</dd> + <dt> + <a href="it/DOM/event.preventDefault">event.preventDefault</a></dt> + <dd> + Cancella l'evento (se è cancellabile).</dd> + <dt> + <a href="it/DOM/event.stopPropagation">event.stopPropagation</a></dt> + <dd> + Arresta un'ulteriore propagazione degli eventi DOM.</dd> +</dl> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "pl": "pl/DOM/event" } ) }}</p> diff --git a/files/it/web/api/event/ischar/index.html b/files/it/web/api/event/ischar/index.html new file mode 100644 index 0000000000..ae1edd3975 --- /dev/null +++ b/files/it/web/api/event/ischar/index.html @@ -0,0 +1,30 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/isChar +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce un booleano che indica se è stato premuto un tasto carattere o meno.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>bool</i> = event.isChar +</pre> +<ul> + <li><code>bool</code> vale <code>true</code> se il tasto premuto è un tasto carattere, altrimenti <code>false</code></li> +</ul> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre> if e.isChar + ripetiInput(e.type); + } +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Alcune combinazioni di tasti potrebbero produrre degli eventi ma non produrre alcun carattere (per esempio CTRL+b). Quando questo accade, <code>isChar</code> restituisce <code>false</code>.</p> +<p><b>Attenzione:</b> attualmente <code>isChar</code> è afflitto da un <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312552">bug</a>, a causa del quale il risultato è sempre <code>false</code>. Gli sviluppatori di Mozilla potrebbero correggere questo bug, ma potrebbero anche decidere di eliminare questa proprietà non standard.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>Non è parte di alcuna specifica.</p> +<p>{{ languages( { "en": "en/DOM/event.isChar", "pl": "pl/DOM/event.isChar" } ) }}</p> diff --git a/files/it/web/api/event/keycode/index.html b/files/it/web/api/event/keycode/index.html new file mode 100644 index 0000000000..d1d69dec46 --- /dev/null +++ b/files/it/web/api/event/keycode/index.html @@ -0,0 +1,48 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/keyCode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il valore Unicode di un tasto non-carattere che è stato premuto scatenando un evento <a href="it/DOM/event/keypress">keypress</a>, oppure il valore di qualsiasi tasto premuto scatenando un qualsiasi altro evento relativo alla tastiera.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>valore</i> = event.keyCode +</pre> +<ul> + <li><code>valore</code> è il codice Unicode del tasto premuto.</li> +</ul> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio di keyCode</title> + +<script type="text/javascript"> + +function mostraCodiceTasto(e) +{ +alert("Codice del tasto premuto: " + e.keyCode + "\n"); +} + +</script> +</head> + +<body onkeydown="mostraCodiceTasto(event);"> +<p>Premere un tasto qualsiasi.</p> +</body> +</html> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>In un evento <a href="it/DOM/event/keypress">keypress</a>, il valore Unicode del tasto premuto viene registrato nella proprietà <code>keyCode</code> oppure nella proprietà <code><a href="it/DOM/event.charCode">charCode</a></code>, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), <code>charCode</code> assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà <code>keyCode</code>.</p> +<p><code>charCode</code> non viene mai impostato durante gli eventi <a href="it/DOM/event/keydown">keydown</a> e <a href="it/DOM/event/keyup">keyup</a>. In questi casi, viene impostato <code>keyCode</code>.</p> +<p>Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in <code>keyCode</code> o in <code>charCode</code>, si può utilizzare la proprietà <code><a href="it/DOM/event.which">which</a></code>.</p> +<p>I caratteri inseriti attraverso un IME non vengono registrati nè in <code>keyCode</code> nè in <code>charCode</code>.</p> +<p>Per una lista dei possibili valori di <code>charCode</code> e per conoscere i tasti ai quali sono associati, vedere l'esempio <a href="it/Reference_del_DOM_di_Gecko/Esempi#Example_7:_Mostrare_le_costanti_dell.27oggetto_Event">Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event</a>.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>Non è parte di alcuna specifica. Si veda <a href="it/NsIDOMKeyEvent">nsIDOMKeyEvent</a></p> +<p>{{ languages( { "en": "en/DOM/event.keyCode", "pl": "pl/DOM/event.keyCode" } ) }}</p> diff --git a/files/it/web/api/event/layerx/index.html b/files/it/web/api/event/layerx/index.html new file mode 100644 index 0000000000..80dc20b35b --- /dev/null +++ b/files/it/web/api/event/layerx/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce la coordinata orizzontale del punto in cui si è scatenato l'evento, relativamente al layer corrente.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>X</i> = event.layerX +</pre> +<ul> + <li><code>X</code> è un valore intero che rappresenta la coordinata X del puntatore del mouse nel momento in cui si è verificato l'evento.</li> +</ul> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio di pageX/pageY e layerX/layerY</title> + +<script type="text/javascript"> + +function mostraCoordinate(evt){ + var form = document.forms.form_coords; + var idPadre = evt.target.parentNode.id; + form.idPadre.value = idPadre; + form.coordinataXpagina.value = evt.pageX; + form.coordinataYpagina.value = evt.pageY; + form.coordinataXlayer.value = evt.layerX; + form.coordinataYlayer.value = evt.layerY; +} + +</script> + +<style type="text/css"> + + #d1 { + border: solid blue 1px; + padding: 20px; + } + + #d2 { + position: absolute; + top: 180px; + left: 80%; + right:auto; + width: 40%; + border: solid blue 1px; + padding: 20px; + } + + #d3 { + position: absolute; + top: 240px; + left: 20%; + width: 50%; + border: solid blue 1px; + padding: 10px; + } + +</style> +</head> + +<body onmousedown="mostraCoordinate(event)"> + +<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p> + +<div id="d1"> +<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY +saranno simili a quelli di pageX e pageY. +</span> +</div> + +<div id="d2"> +<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina. +</span> + +<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span> +</div> + +<div id="d3"> +<form name="form_coordinate"> + Id elemento padre: <input type="text" name="idPadre" size="7" /><br /> + pageX:<input type="text" name="coordinataXpagina" size="7" /> + pageY:<input type="text" name="coordinataYpagina" size="7" /><br /> + layerX:<input type="text" name="coordinataXlayer" size="7" /> + layerY:<input type="text" name="coordinataYlayer" size="7" /> +</form> +</div> + +</body> +</html> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p><code>layerX</code> tiene conto di eventuali scorrimenti orizzontali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>DOM level 0. Non è parte di alcuna specifica.</p> +<p>{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}</p> diff --git a/files/it/web/api/event/layery/index.html b/files/it/web/api/event/layery/index.html new file mode 100644 index 0000000000..9bb4f99947 --- /dev/null +++ b/files/it/web/api/event/layery/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce la coordinata verticale del punto in cui si è scatenato l'evento, relativamente al layer corrente.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>Y</i> = event.layerY +</pre> +<ul> + <li><code>Y</code> è un valore intero che rappresenta la coordinata Y del puntatore del mouse nel momento in cui si è verificato l'evento.</li> +</ul> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio di pageX/pageY e layerX/layerY</title> + +<script type="text/javascript"> + +function mostraCoordinate(evt){ + var form = document.forms.form_coords; + var idPadre = evt.target.parentNode.id; + form.idPadre.value = idPadre; + form.coordinataXpagina.value = evt.pageX; + form.coordinataYpagina.value = evt.pageY; + form.coordinataXlayer.value = evt.layerX; + form.coordinataYlayer.value = evt.layerY; +} + +</script> + +<style type="text/css"> + + #d1 { + border: solid blue 1px; + padding: 20px; + } + + #d2 { + position: absolute; + top: 180px; + left: 80%; + right:auto; + width: 40%; + border: solid blue 1px; + padding: 20px; + } + + #d3 { + position: absolute; + top: 240px; + left: 20%; + width: 50%; + border: solid blue 1px; + padding: 10px; + } + +</style> +</head> + +<body onmousedown="mostraCoordinate(event)"> + +<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p> + +<div id="d1"> +<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY +saranno simili a quelli di pageX e pageY. +</span> +</div> + +<div id="d2"> +<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina. +</span> + +<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span> +</div> + +<div id="d3"> +<form name="form_coordinate"> + Id elemento padre: <input type="text" name="idPadre" size="7" /><br /> + pageX:<input type="text" name="coordinataXpagina" size="7" /> + pageY:<input type="text" name="coordinataYpagina" size="7" /><br /> + layerX:<input type="text" name="coordinataXlayer" size="7" /> + layerY:<input type="text" name="coordinataYlayer" size="7" /> +</form> +</div> + +</body> +</html> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p><code>layerY</code> tiene conto di eventuali scorrimenti verticali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>DOM level 0. Non è parte di alcuna specifica.</p> +<p>{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}</p> diff --git a/files/it/web/api/event/metakey/index.html b/files/it/web/api/event/metakey/index.html new file mode 100644 index 0000000000..b3a22bfa38 --- /dev/null +++ b/files/it/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/metaKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica se il tasto META era premuto mentre l'evento si verificava. Questo tasto è il tasto Apple sui computer Mac, il tasto Windows sui pc con tastiere per Windows sui quali gira questo sistema operativo e potrebbe corrispondere ad altri tasti su altre piattaforme. Non esiste però un unico tasto standard sulla cui presenza si possa fare affidamento per qualsiasi tipo di piattaforma.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>bool</i> = event.metaKey +</pre> +<p><code>bool</code> vale <code>true</code> se il tasto META era premuto, altrimenti <code>false</code>.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre> function leggiInput(e) { + // controlla il tasto meta + if e.metaKey + // se era premuto si comporta di conseguenza + outputBellissimo(e); + else + outputMediocre(e) + } +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-metaKey">metaKey </a></p> +<p>{{ languages( { "en": "en/DOM/event.metaKey", "pl": "pl/DOM/event.metaKey" } ) }}</p> diff --git a/files/it/web/api/event/pagex/index.html b/files/it/web/api/event/pagex/index.html new file mode 100644 index 0000000000..90cf1beaac --- /dev/null +++ b/files/it/web/api/event/pagex/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce la coordinata orizzontale dell'evento, all'interno dell'intero documento.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>X</i> =<i>event</i>.pageX; +</pre> +<p><code>X</code> è un intero che rappresenta il valore in pixel della coordinata X del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento orizzontale che è stato effettuato all'interno del browser.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio di pageX/pageY e layerX/layerY</title> + +<script type="text/javascript"> + +function mostraCoordinate(evt){ + var form = document.forms.form_coords; + var idPadre = evt.target.parentNode.id; + form.idPadre.value = idPadre; + form.coordinataXpagina.value = evt.pageX; + form.coordinataYpagina.value = evt.pageY; + form.coordinataXlayer.value = evt.layerX; + form.coordinataYlayer.value = evt.layerY; +} + +</script> + +<style type="text/css"> + + #d1 { + border: solid blue 1px; + padding: 20px; + } + + #d2 { + position: absolute; + top: 180px; + left: 80%; + right:auto; + width: 40%; + border: solid blue 1px; + padding: 20px; + } + + #d3 { + position: absolute; + top: 240px; + left: 20%; + width: 50%; + border: solid blue 1px; + padding: 10px; + } + +</style> +</head> + +<body onmousedown="mostraCoordinate(event)"> + +<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p> + +<div id="d1"> +<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY +saranno simili a quelli di pageX e pageY. +</span> +</div> + +<div id="d2"> +<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina. +</span> + +<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span> +</div> + +<div id="d3"> +<form name="form_coordinate"> + Id elemento padre: <input type="text" name="idPadre" size="7" /><br /> + pageX:<input type="text" name="coordinataXpagina" size="7" /> + pageY:<input type="text" name="coordinataYpagina" size="7" /><br /> + layerX:<input type="text" name="coordinataXlayer" size="7" /> + layerY:<input type="text" name="coordinataYlayer" size="7" /> +</form> +</div> + +</body> +</html> +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>Non è parte di alcuno standard.</p> +<p>{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX", "pl": "pl/DOM/event.pageX" } ) }}</p> diff --git a/files/it/web/api/event/pagey/index.html b/files/it/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d0d87573cc --- /dev/null +++ b/files/it/web/api/event/pagey/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce la coordinata verticale dell'evento, all'interno dell'intero documento.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>Y</i> =<i>event</i>.pageY; +</pre> +<p><code>Y</code> è un intero che rappresenta il valore in pixel della coordinata Y del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento verticale che è stato effettuato all'interno del browser.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio di pageX/pageY e layerX/layerY</title> + +<script type="text/javascript"> + +function mostraCoordinate(evt){ + var form = document.forms.form_coords; + var idPadre = evt.target.parentNode.id; + form.idPadre.value = idPadre; + form.coordinataXpagina.value = evt.pageX; + form.coordinataYpagina.value = evt.pageY; + form.coordinataXlayer.value = evt.layerX; + form.coordinataYlayer.value = evt.layerY; +} + +</script> + +<style type="text/css"> + + #d1 { + border: solid blue 1px; + padding: 20px; + } + + #d2 { + position: absolute; + top: 180px; + left: 80%; + right:auto; + width: 40%; + border: solid blue 1px; + padding: 20px; + } + + #d3 { + position: absolute; + top: 240px; + left: 20%; + width: 50%; + border: solid blue 1px; + padding: 10px; + } + +</style> +</head> + +<body onmousedown="mostraCoordinate(event)"> + +<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p> + +<div id="d1"> +<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY +saranno simili a quelli di pageX e pageY. +</span> +</div> + +<div id="d2"> +<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina. +</span> + +<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span> +</div> + +<div id="d3"> +<form name="form_coordinate"> + Id elemento padre: <input type="text" name="idPadre" size="7" /><br /> + pageX:<input type="text" name="coordinataXpagina" size="7" /> + pageY:<input type="text" name="coordinataYpagina" size="7" /><br /> + layerX:<input type="text" name="coordinataXlayer" size="7" /> + layerY:<input type="text" name="coordinataYlayer" size="7" /> +</form> +</div> + +</body> +</html> +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>Non è parte di alcuno standard.</p> +<p>{{ languages( { "es": "es/DOM/event.pageY", "pl": "pl/DOM/event.pageY" } ) }}</p> diff --git a/files/it/web/api/event/preventdefault/index.html b/files/it/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..040257b4a3 --- /dev/null +++ b/files/it/web/api/event/preventdefault/index.html @@ -0,0 +1,176 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/preventDefault +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Il metodo <code><strong>preventDefault()</strong></code> dell'interfaccia {{domxref("Event")}} dice all'{{Glossary("user agent")}} che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami {{domxref("Event.stopPropagation", "stopPropagation()")}} o {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, uno dei due interrompa la propagazione contemporaneamente.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre> + +<h3 id="Parametri">Parametri</h3> + +<p>Nessuno.</p> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p><code>undefined</code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Blocco_della_gestione_dei_click_predefinita">Blocco della gestione dei click predefinita</h3> + +<p>La commutazione di una casella di controllo è l'azione predefinita di fare click su una casella di controllo. Questo esempio mostra come impedire che ciò accada:</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) { + document.getElementById("output-box").innerHTML += "Mi dispiace! <code>preventDefault()</code> non ti lascerà controllare questo!<br>"; + event.preventDefault(); +}, false);</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Si prega di fare click sul controllo casella di controllo.</p> + +<form> + <label for="id-checkbox">Checkbox:</label> + <input type="checkbox" id="id-checkbox"/> +</form> + +<div id="output-box"></div></pre> + +<h4 id="Risultato">Risultato</h4> + +<p>Puoi vedere questo in azione qui:</p> + +<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> + +<h3 id="Interruzione_delle_sequenze_di_tasti_per_raggiungere_un_campo_di_modifica">Interruzione delle sequenze di tasti per raggiungere un campo di modifica</h3> + +<p>L'esempio seguente dimostra come interrompere l'input di testo non valido per raggiungere il campo di input con <code>preventDefault()</code>. Al giorno d'oggi, di solito dovresti usare <a href="/it-US/docs/Learn/HTML/Forms/Form_validation">convalida del modulo HTML nativo</a>.</p> + +<h4 id="HTML_2">HTML</h4> + +<p>Ecco il modulo:</p> + +<pre class="brush: html"><div class="container"> + <p>Inserisci il tuo nome utilizzando solo lettere minuscole.</p> + + <form> + <input type="text" id="my-textbox"> + </form> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p>Usiamo un po' di CSS per la finestra di avviso che disegneremo quando l'utente preme una chiave non valida:</p> + +<pre class="brush: css">.warning { + border: 2px solid #f39389; + border-radius: 2px; + padding: 10px; + position: absolute; + background-color: #fbd8d4; + color: #3b3c40; +}</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>Ed ecco il codice JavaScript che fa il lavoro. Per prima cosa, ascolta gli eventi {{event("keypress")}}:</p> + +<pre class="brush: js">var myTextbox = document.getElementById('my-textbox'); +myTextbox.addEventListener('keypress', checkName, false); +</pre> + +<p>La funzione <code>checkName()</code>, che controlla il tasto premuto e decide se permetterlo:</p> + +<pre class="brush: js">function checkName(evt) { + var charCode = evt.charCode; + if (charCode != 0) { + if (charCode < 97 || charCode > 122) { + evt.preventDefault(); + displayWarning( + "Per favore usa solo lettere minuscole." + + "\n" + "charCode: " + charCode + "\n" + ); + } + } +} +</pre> + +<p>la funzione <code>displayWarning()</code> presenta la notifica di un problema. Non è una funzione elegante ma fa il lavoro ai fini di questo esempio:</p> + +<pre class="brush: js">var warningTimeout; +var warningBox = document.createElement("div"); +warningBox.className = "warning"; + +function displayWarning(msg) { + warningBox.innerHTML = msg; + + if (document.body.contains(warningBox)) { + window.clearTimeout(warningTimeout); + } else { + // inserisci warningBox dopo myTextbox + myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling); + } + + warningTimeout = window.setTimeout(function() { + warningBox.parentNode.removeChild(warningBox); + warningTimeout = -1; + }, 2000); +}</pre> + +<h4 id="Risultato_2">Risultato</h4> + +<p>Ecco il risultato del codice precedente:</p> + +<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> + +<h2 id="Note">Note</h2> + +<p>Chiamando <code>preventDefault()</code> durante qualsiasi fase del flusso di eventi annulla l'evento, il che significa che non verrà eseguita alcuna azione predefinita normalmente eseguita dall'implementazione come risultato dell'evento.</p> + +<div class="note"> +<p>A partire da {{Gecko("6.0")}}, chiamare <code>preventDefault()</code> fa sì che il valore della proprietà {{ domxref("Event.defaultPrevented()") }} diventi <code>true</code>.</p> +</div> + +<p>Puoi utilizzare {{domxref("Event.cancelable")}} per verificare se l'evento è cancellabile. Chiamare <code>preventDefault()</code> per un evento non cancellabile non ha alcun effetto.</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Event.preventDefault")}}</p> diff --git a/files/it/web/api/event/shiftkey/index.html b/files/it/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..fcc11142ef --- /dev/null +++ b/files/it/web/api/event/shiftkey/index.html @@ -0,0 +1,45 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/shiftKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica se il tasto SHIFT è stato premuto durante l'evento.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>bool</i> = event.shiftKey +</pre> +<p><code>bool</code> restituisce <code>true</code> se il tasto SHIFT era premuto mentre l'evento si verificava, altrimenti <code>false</code>.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio tasto shift</title> + +<script type="text/javascript"> + +function mostraCarattere(e){ + alert( + "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n" + + "Codice carattere: " + e.charCode + "\n" + + "Tasto SHIFT premuto: " + e.shiftKey + "\n" + + "Tasto ALT premuto: " + e.altKey + "\n" + ); +} + +</script> +</head> + +<body onkeypress="mostraCarattere(event);"> +<p>Prova a premere un tasto tenendo premuto SHIFT e prova a premere un tasto senza premere SHIFT.<br /> +Puoi anche provare a premere SHIFT+ALT.</p> +</body> +</html> +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-shiftKey">shiftKey </a></p> +<p>{{ languages( { "en": "en/DOM/event.shiftKey", "pl": "pl/DOM/event.shiftKey" } ) }}</p> diff --git a/files/it/web/api/event/stoppropagation/index.html b/files/it/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..1eef27bf30 --- /dev/null +++ b/files/it/web/api/event/stoppropagation/index.html @@ -0,0 +1,60 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/stopPropagation +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary">Il metodo <code><strong>stopPropagation()</strong></code> dell'interfaccia {{domxref("Event")}} impedisce un'ulteriore propagazione dell'evento corrente nelle fasi di cattura e bubbling.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> + +<h2 id="Esempio">Esempio</h2> + +<p>Vedi Esempio 5: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation">Propagazione degli eventi</a> nel capitolo degli Esempi per un esempio più dettagliato di questo metodo e la propagazione degli eventi nel DOM.</p> + +<h2 id="Note">Note</h2> + +<p>Vedi la <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">specificazione DOM</a> per la spiegazione del flusso di eventi. (La <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">bozza degli eventi di DOM Level 3"</a> ha un'illustrazione.)</p> + +<p><a href="https://developer.mozilla.org/it/docs/Web/API/Event/preventDefault">preventDefault</a> è un metodo complementare che può essere utilizzato per impedire l'azione predefinita dall'evento.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specifica</th> + <th>Stato</th> + <th>Commento</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Definzione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Event.stopPropagation")}}</p> diff --git a/files/it/web/api/event/timestamp/index.html b/files/it/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..d01ab1986a --- /dev/null +++ b/files/it/web/api/event/timestamp/index.html @@ -0,0 +1,45 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/timeStamp +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il timestamp (cioè il numero di millisecondi trascorsi dalla Unix Epoch, le ore 00:00:00 del 1/1/1970) corrispondente al momento in cui si è verificato l'evento.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>ts</i> = event.timeStamp +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> + +<title>esempio di timeStamp</title> + +<script type="text/javascript"> +var ora = null; + +function leggiOrario(evt) { + ora = evt.timeStamp; + document.getElementById("time").firstChild.nodeValue = ora; +} +</script> +</head> + +<body onkeypress="leggiOrario(event)"> + +<p>Premi un tasto per conoscere il timestamp corrente grazie all'evento onkeypress.</p> +<p>timeStamp: <span id="time">-</span></p> + +</body> +</html> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Il sistema di eventi potrebbe non supportare questa proprietà per ogni possibile tipo di evento.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-timeStamp">timestamp </a></p> +<p>{{ languages( { "en": "en/DOM/event.timeStamp", "pl": "pl/DOM/event.timeStamp" } ) }}</p> diff --git a/files/it/web/api/event/type/index.html b/files/it/web/api/event/type/index.html new file mode 100644 index 0000000000..108e944059 --- /dev/null +++ b/files/it/web/api/event/type/index.html @@ -0,0 +1,50 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/type +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il nome dell'evento (case-insensitive).</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>stringa</i> = event.type +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> + +<title>esempio su event.type</title> + +<script type="text/javascript"> +var eventoCorrente = null; + +function tipoEvento(evt) { + eventoCorrente = evt.type; + document.getElementById("Etype").firstChild.nodeValue = eventoCorrente; +} + +</script> +</head> + +<body + onkeydown="tipoEvento(event)" + onkeyup="tipoEvento(event)" + onmousedown="tipoEvento(event)" + onmouseup="tipoEvento(event)"> + +<p>Premi un tasto della tastiera o del mouse per visualizzare il nome dell'evento.</p> +<p>Tipo evento: <span id="Etype">-</span></p> + +</body> +</html> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Il è un nome XML valido.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-type">type </a></p> +<p>{{ languages( { "en": "en/DOM/event.type", "pl": "pl/DOM/event.type" } ) }}</p> diff --git a/files/it/web/api/event/view/index.html b/files/it/web/api/event/view/index.html new file mode 100644 index 0000000000..00d9f88004 --- /dev/null +++ b/files/it/web/api/event/view/index.html @@ -0,0 +1,22 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/view +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce l'oggetto <code>AbstractView</code> nel quale si è verificato l'evento. Nei browser web, questo è l'oggetto <a href="it/DOM/window">window</a> che ha generato l'evento.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>view</i> =<i>event</i>.view +</pre> +<ul> + <li><code>view</code> è un riferimento ad un oggetto <code>AbstractView</code>.</li> +</ul> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-UIEvent-view">DOM Level 2 Events: UIEvent.view</a></p> +<p>{{ languages( { "en": "en/DOM/event.view", "pl": "pl/DOM/event.view" } ) }}</p> diff --git a/files/it/web/api/event/which/index.html b/files/it/web/api/event/which/index.html new file mode 100644 index 0000000000..0ab544b60c --- /dev/null +++ b/files/it/web/api/event/which/index.html @@ -0,0 +1,60 @@ +--- +title: event.which +slug: Web/API/Event/which +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/which +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il valore di <code>keyCode</code> se il tasto premuto non è un tasto carattere, altrimenti restituisce il valore di <code>charCode</code> se è stato premuto un tasto alfanumerico.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>int</i> = event.which +</pre> +<p><code>int</code> è il codice numerico del tasto che è stato premuto, sia esso alfanumerico oppure no. Si vedano <code><a href="it/DOM/event.charCode">charCode</a></code> e <code><a href="it/DOM/event.keyCode">keyCode</a></code> per ulteriori informazioni.</p> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre><html> +<head> +<title>esempio con charCode/keyCode/which</title> + +<script type="text/javascript"> + +function mostraTastoPremuto(evt) +{ +alert("Evento onkeypress: \n" + + "proprietà keyCode: " + evt.keyCode + "\n" + + "proprietà which: " + evt.which + "\n" + + "proprietà charCode: " + evt.charCode + "\n" + + "Tasto premuto (se alfanumerico): " + + String.fromCharCode(evt.charCode) + "\n" + ); +} + + +function pressioneTasto(evt) +{ +alert("onkeydown handler: \n" + + "proprietà keyCode: " + evt.keyCode + "\n" + + "proprietà which: " + evt.which + "\n" + ); +} + + +</script> +</head> + +<body + onkeypress="mostraTastoPremuto(event);" + onkeydown="pressioneTasto(event);" +> + +<p>Premere un tasto</p> + +</body> +</html> +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>Non è parte di alcuna specifica.</p> diff --git a/files/it/web/api/fetch_api/index.html b/files/it/web/api/fetch_api/index.html new file mode 100644 index 0000000000..1a458fb681 --- /dev/null +++ b/files/it/web/api/fetch_api/index.html @@ -0,0 +1,170 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +tags: + - API + - Documentazione + - Fetch + - Response + - Sperimentale + - XMLHttpRequest + - request +translation_of: Web/API/Fetch_API +--- +<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}</p> + +<p>La Fetch API fornisce un'interfaccia per ottenere risorse (anche attraverso la rete). Sembrerá familiare a tutti coloro che hanno usato {{domxref("XMLHttpRequest")}}, ma la nuova API fornisce un'insieme piú potente e flessibile di funzionalitá.</p> + +<h2 id="Concetti_e_uso">Concetti e uso</h2> + +<p>Fetch fornisce una definizione generica di oggetti {{domxref("Request")}} e {{domxref("Response")}} (e altri inclusi nelle richieste di rete). Questo permette loro di essere usati ovunque necessari, in futuro, sia che servano per service workers, Cache API e altri oggetti simili che usano o modificano richieste e risposte, sia per qualunque altro caso d'uso che richieda di generare le proprie risposte via codice.</p> + +<p>Esso fornisce anche una definizione per concetti correlati come CORS e la semantica degli header HTTP di tipo origin, ovviando alla necessità di doverli definire separatamente altrove.</p> + +<p>Per effettuare una richiesta e ottenere una risorsa, si usa il metodo {{domxref("GlobalFetch.fetch")}}. Esso è implementato in piú interfacce (specificatamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}). Questo lo rende disponibile all'incirca in ogni contesto in cui si puó voler ottenere risorse.</p> + +<p>Il metodo <code>fetch()</code> richiede un parametro obbligatorio, il percorso (path) alla risorsa che si vuole ottenere, e ritorna una {{domxref("Promise")}} che risolve la {{domxref("Response")}} a quella richiesta, sia essa stata eseguita con successo oppure no. Si puó anche passare in via opzionale un oggetto <code>init</code> (per definire opzioni facoltative) come secondo parametro (per l'elenco completo delle opzioni visitare {{domxref("Request")}}).</p> + +<p>Non appena una {{domxref("Response")}} è recuperata, vi è un certo numero di metodi disponibile allo scopo di definire cosa sia il corpo della risposta e come dovrebbe essere gestito (in dettaglio : {{domxref("Body")}}.)</p> + +<p>È possibile creare una richiesta e una risposta direttamente usando i costruttori delle classi {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, ma non e' una pratica comune. Invece, e' piu' frequente che essi vengano creati come risultato delle altre azioni della API (ad esempio, {{domxref("FetchEvent.respondWith")}} dei service workers.)</p> + +<div class="note"> +<p><strong>Note</strong>: Puoi trovare informazioni aggiuntive riguardo l'uso di fetch sulla pagina <a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, e studiare i concetti sulla pagina <a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p> +</div> + +<h3 id="Annullare_un_fetch">Annullare un fetch</h3> + +<p>I browsers hanno cominciato a supportare in via sperimentale le interfacce {{domxref("AbortController")}} e {{domxref("AbortSignal")}} (meglio note come Abort API), che permettono di annullare operazioni come Fetch e XHR quando non sono ancora state completate. Per maggiori informazioni controlla la pagina con la descrizione delle interfacce.</p> + +<h2 id="Fetch_Interfaces">Fetch Interfaces</h2> + +<dl> + <dt>{{domxref("GlobalFetch")}}</dt> + <dd>Contiene il metodo globale <code>fetch()</code> usato per ottenere una risorsa.</dd> + <dt>{{domxref("Headers")}}</dt> + <dd>Rappresenta un header di richiesta/risposta, permettendo di interrogarlo ed eseguire azioni differenti in base ai risultati.</dd> + <dt>{{domxref("Request")}}</dt> + <dd>Rappresenta una richiesta.</dd> + <dt>{{domxref("Response")}}</dt> + <dd>Rappresenta una risposta a una richiesta.</dd> +</dl> + +<h2 id="Fetch_mixin">Fetch mixin</h2> + +<dl> + <dt>{{domxref("Body")}}</dt> + <dd>Fornisce metodi relativi al corpo di una richiesta/risposta permettendo di dichiarare quale sia il tipo di contenuto e come dovrebbe essere gestito.</dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('Fetch')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definizione di cui sopra</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitá_coi_Browsers">Compatibilitá coi Browsers</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(42)}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop(39)}}<br> + 34<sup>[1]</sup><br> + {{ CompatGeckoDesktop(52)}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>29<br> + 28<sup>[1]</sup></td> + <td>10.1</td> + </tr> + <tr> + <td>{{domxref('ReadableStream')}}</td> + <td>{{CompatChrome(43)}}</td> + <td>14</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(42)}}</td> + <td>{{CompatChrome(42)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.1</td> + </tr> + <tr> + <td>{{domxref('ReadableStream')}}</td> + <td>{{CompatChrome(43)}}</td> + <td>{{CompatChrome(43)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Questa API è implementata ma dev'essere abilitata da un'opzione di Firefox.</p> + +<p>[2] Per le versioni di Firefox precedenti la 52, <code>get()</code> ottiene solamente il primo valore nell'header specificato, mentre <code>getAll()</code> ottiene tutti i valori. Dalla versione 52 in avanti, <code>get()</code> ottiene tutti i valori e <code>getAll()</code> è stato eliminato.</p> + +<p>[3] La lettura degli streams è disponibile nell'attuale versione di Firefox, ma deve essere abilitata tramite le opzioni <code>dom.streams.enabled</code> e <code>javascript.options.streams</code>.</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> + <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/docs/Web/HTTP">HTTP</a></li> + <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li> + <li><a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li> +</ul> diff --git a/files/it/web/api/file/index.html b/files/it/web/api/file/index.html new file mode 100644 index 0000000000..1d1941d482 --- /dev/null +++ b/files/it/web/api/file/index.html @@ -0,0 +1,101 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/API/File +--- +<div>{{APIRef}}</div> + +<p>The <strong><code>File</code></strong> interface provides information about files and allows JavaScript in a web page to access their content.</p> + +<p><code>File</code> objects are generally retrieved from a {{DOMxRef("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{DOMxRef("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{DOMxRef("HTMLCanvasElement")}}.</p> + +<p>A <code>File</code> object is a specific kind of a {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{DOMxRef("XMLHttpRequest", "", "send()")}} accept both <code>Blob</code>s and <code>File</code>s.</p> + +<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for more information and examples.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{DOMxRef("File.File", "File()")}}</dt> + <dd>Returns a newly constructed <code>File</code>.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}</dt> + <dd>Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).</dd> + <dt>{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the last modified {{JSxRef("Date")}} of the file referenced by the <code>File</code> object.</dd> + <dt>{{DOMxRef("File.name")}}{{ReadOnlyInline}}</dt> + <dd>Returns the name of the file referenced by the <code>File</code> object.</dd> + <dt>{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the path the URL of the {{DOMxRef("File")}} is relative to.</dd> +</dl> + +<p><code>File</code> implements {{DOMxRef("Blob")}}, so it also has the following properties available to it:</p> + +<dl> + <dt>{{DOMxRef("File.size")}} {{ReadOnlyInline}}</dt> + <dd>Returns the size of the file in bytes.</dd> + <dt>{{DOMxRef("File.type")}} {{ReadOnlyInline}}</dt> + <dd>Returns the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>type of the file.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>File</code> interface doesn't define any methods, but inherits methods from the {{DOMxRef("Blob")}} interface:</em></p> + +<dl> + <dt>{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> + <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd> + <dt>{{DOMxRef("Blob.stream()")}}</dt> + <dd>Transforms the <code>File</code> into a {{DOMxRef("ReadableStream")}} that can be used to read the <code>File</code> contents.</dd> + <dt>{{DOMxRef("Blob.text()")}}</dt> + <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with a {{DOMxRef("USVString")}} (text).</dd> + <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt> + <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}}.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('File API', "#file-section", "The <code>File</code> interface")}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.File")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> + <li>{{DOMxRef("FileReader")}}</li> + <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li> +</ul> diff --git a/files/it/web/api/file/using_files_from_web_applications/index.html b/files/it/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..00d0b5f28c --- /dev/null +++ b/files/it/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,506 @@ +--- +title: Using files from web applications +slug: Web/API/File/Using_files_from_web_applications +translation_of: Web/API/File/Using_files_from_web_applications +--- +<div><font><font>{{APIRef ("File API")}}</font></font></div> + +<p><font><font>Utilizzando l'API File, che è stata aggiunta al DOM in HTML5, è ora possibile per il contenuto Web chiedere all'utente di selezionare i file locali e quindi leggere il contenuto di tali file. </font><font>Questa selezione può essere effettuata utilizzando un </font></font><code>{{HTMLElement("input/file", '<input type="file">')}}</code><font><font>elemento </font><font>HTML </font><font>o trascinandolo.</font></font></p> + +<p><font><font>Se si desidera utilizzare l'API del file DOM da estensioni o altro codice Chrome del browser, è possibile; </font><font>tuttavia, nota che ci sono alcune funzionalità aggiuntive di cui essere a conoscenza. </font><font>Per i dettagli, vedi </font></font><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code"><font><font>Utilizzo dell'API del file DOM nel codice Chrome</font></font></a><font><font> .</font></font></p> + +<h2 id="Accesso_ai_file_selezionati"><font><font>Accesso ai file selezionati</font></font></h2> + +<p><font><font>Considera questo HTML:</font></font></p> + +<pre class="brush: html notranslate"><font><font><input type = "file" id = "input" multiple></font></font></pre> + +<p><font><font>L'API File consente di accedere a un {{DOMxRef ("FileList")}} contenente {{DOMxRef ("File")}} oggetti che rappresentano i file selezionati dall'utente.</font></font></p> + +<p><font><font>L' </font></font><code>multiple</code><font><font>attributo </font></font><code>input</code><font><font>sull'elemento consente all'utente di selezionare più file.</font></font></p> + +<p><font><font>Accesso al primo file selezionato usando un classico selettore DOM:</font></font></p> + +<pre class="brush: js notranslate"><font><font>const selectedFile = document.getElementById ('input'). files [0];</font></font></pre> + +<h3 id="Accesso_ai_file_selezionati_su_un_evento_di_modifica"><font><font>Accesso ai file selezionati su un evento di modifica</font></font></h3> + +<p><font><font>È anche possibile (ma non obbligatorio) accedere a {{DOMxRef ("FileList")}} tramite l' </font></font><code>change</code><font><font>evento. </font><font>È necessario utilizzare {{DOMxRef ("EventTarget.addEventListener ()")}} per aggiungere il </font></font><code>change</code><font><font>listener di eventi, in questo modo:</font></font></p> + +<pre class="brush: js notranslate"><font><font>const inputElement = document.getElementById ("input");</font></font><font><font> +inputElement.addEventListener ("change", handleFiles, false);</font></font><font><font> +funzione handleFiles () {</font></font><font><font> + const fileList = this.files; </font><font>/ * ora puoi lavorare con l'elenco dei file * /</font></font><font><font> +}</font></font></pre> + +<h2 id="Ottenere_informazioni_sui_file_selezionati"><font><font>Ottenere informazioni sui file selezionati</font></font></h2> + +<p><font><font>L'oggetto {{DOMxRef ("FileList")}} fornito dal DOM elenca tutti i file selezionati dall'utente, ognuno specificato come oggetto {{DOMxRef ("File")}}. </font><font>È possibile determinare il numero di file selezionato dall'utente controllando il valore dell'attributo dell'elenco file </font></font><code>length</code><font><font>:</font></font></p> + +<pre class="brush: js notranslate"><font><font>const numFiles = fileList.length;</font></font></pre> + +<p><font><font>I singoli oggetti {{DOMxRef ("File")}} possono essere recuperati semplicemente accedendo all'elenco come un array:</font></font></p> + +<pre class="brush: js notranslate"><font><font>for (let i = 0, numFiles = fileList.length; i <numFiles; i ++) {</font></font><font><font> + const file = fileList [i];</font></font><font><font> + // ...</font></font><font><font> +}</font></font> +</pre> + +<p><font><font>Questo ciclo scorre su tutti i file nell'elenco dei file.</font></font></p> + +<p><font><font>Esistono tre attributi forniti dall'oggetto {{DOMxRef ("File")}} che contengono informazioni utili sul file.</font></font></p> + +<dl> + <dt><code>name</code></dt> + <dd><font><font>Il nome del file come stringa di sola lettura. </font><font>Questo è solo il nome del file e non include alcuna informazione sul percorso.</font></font></dd> + <dt><code>size</code></dt> + <dd><font><font>La dimensione del file in byte come numero intero a 64 bit di sola lettura.</font></font></dd> + <dt><code>type</code></dt> + <dd><font><font>Il tipo MIME del file come stringa di sola lettura o </font></font><code>""</code><font><font>se il tipo non può essere determinato.</font></font></dd> +</dl> + +<h3 id="Esempio_visualizzazione_delle_dimensioni_dei_file"><font><font>Esempio: visualizzazione delle dimensioni dei file</font></font></h3> + +<p><font><font>L'esempio seguente mostra un possibile utilizzo della </font></font><code>size</code><font><font>proprietà:</font></font></p> + +<pre class="brush: html notranslate"><font><font><! DOCTYPE html></font></font><font><font> +<Html></font></font><font><font> +<Head></font></font><font><font> +<meta charset = "UTF-8"></font></font><font><font> +<title> Dimensioni file </title></font></font><font><font> +<Script></font></font><font><font> +funzione updateSize () {</font></font><font><font> + let nBytes = 0,</font></font><font><font> + oFiles = this.files,</font></font><font><font> + nFiles = oFiles.length;</font></font><font><font> + for (let nFileId = 0; nFileId <nFiles; nFileId ++) {</font></font><font><font> + nBytes + = oFiles [nFileId] .size;</font></font><font><font> + }</font></font><font><font> + let sOutput = nBytes + "bytes";</font></font><font><font> + // codice opzionale per l'approssimazione di multipli</font></font><font><font> + const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];</font></font><font><font> + per (nMultiple = 0, nApprox = nBytes / 1024; nApprox> 1; nApprox / = 1024, nMultiple ++) {</font></font><font><font> + sOutput = nApprox.toFixed (3) + "" + aMultiples [nMultiple] + "(" + nBytes + "bytes)";</font></font><font><font> + }</font></font><font><font> + // fine del codice opzionale</font></font><font><font> + document.getElementById ("fileNum"). innerHTML = nFiles;</font></font><font><font> + document.getElementById ("fileSize"). innerHTML = sOutput;</font></font><font><font> +}</font></font> +<font><font> +document.getElementById ("uploadInput"). addEventListener ("change", updateSize, false);</font></font><font><font> +</ Script></font></font><font><font> +</ Head></font></font> +<font><font> +<Body></font></font><font><font> + <form name = "uploadForm"></font></font><font><font> + <Div></font></font><font><font> + <input id = "uploadInput" type = "file" name = "myFiles" multiple></font></font><font><font> + file selezionati: <span id = "fileNum"> 0 </span>;</font></font><font><font> + dimensione totale: <span id = "fileSize"> 0 </span></font></font><font><font> + </ Div></font></font><font><font> + <div> <input type = "submit" value = "Invia file"> </div></font></font><font><font> + </ Form></font></font><font><font> +</ Body></font></font><font><font> +</ Html></font></font> +</pre> + +<h2 id="Utilizzo_di_elementi_di_input_di_file_nascosti_utilizzando_il_metodo_click"><font><font>Utilizzo di elementi di input di file nascosti utilizzando il metodo click ()</font></font></h2> + +<p><font><font>Puoi nascondere l'elemento file {{HTMLElement ("input")}}, ammesso, brutto e presentare la tua interfaccia per aprire il selettore di file e visualizzare il file o i file selezionati dall'utente. </font><font>Puoi farlo stilando l'elemento di input con </font></font><code>display:none</code><font><font>e chiamando il metodo {{DOMxRef ("HTMLElement.click", "click ()")}} sull'elemento {{HTMLElement ("input")}}.</font></font></p> + +<p><font><font>Considera questo HTML:</font></font></p> + +<pre class="brush: html notranslate"><input type="file" id="fileElem" multiple accept="image/*" style="display:none"> +<button id="fileSelect">Select some files</button></pre> + +<p>The code that handles the <code>click</code> event can look like this:</p> + +<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"), + fileElem = document.getElementById("fileElem"); + +fileSelect.addEventListener("click", function (e) { + if (fileElem) { + fileElem.click(); + } +}, false); +</pre> + +<p>You can style the new button for opening the file picker as you wish.</p> + +<h2 id="Using_a_label_element_to_trigger_a_hidden_file_input_element">Using a label element to trigger a hidden file input element</h2> + +<p>To allow opening the file picker without using JavaScript (the click() method), a {{HTMLElement("label")}} element can be used. Note that in this case the input element must not be hidden using <code>display: none</code> (nor <code>visibility: hidden</code>), otherwise the label would not be keyboard-accessible. Use the <a href="https://a11yproject.com/posts/how-to-hide-content/">visually-hidden technique</a> instead.</p> + +<p>Consider this HTML:</p> + +<pre class="brush: html notranslate"><input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"> +<label for="fileElem">Select some files</label></pre> + +<p>and this CSS:</p> + +<pre class="brush: css notranslate">.visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + +/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */ +input.visually-hidden:focus + label { + outline: thin dotted; +} +input.visually-hidden:focus-within + label { + outline: thin dotted; +} +</pre> + +<p>There is no need to add JavaScript code to call <code>fileElem.click()</code>. Also in this case you can style the label element as you wish. You need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (As of time of writing, Firefox doesn’t show this visual cue for <code><input type="file"></code> elements.)</p> + +<h2 id="Selecting_files_using_drag_and_drop">Selecting files using drag and drop</h2> + +<p>You can also let the user drag and drop files into your web application.</p> + +<p>The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:</p> + +<pre class="brush: js notranslate">let dropbox; + +dropbox = document.getElementById("dropbox"); +dropbox.addEventListener("dragenter", dragenter, false); +dropbox.addEventListener("dragover", dragover, false); +dropbox.addEventListener("drop", drop, false); +</pre> + +<p>In this example, we're turning the element with the ID <code>dropbox</code> into our drop zone. This is done by adding listeners for the {{event('dragenter')}}, {{event('dragover')}}, and {{event('drop')}} events.</p> + +<p>We don't actually need to do anything with the <code>dragenter</code> and <code>dragover</code> events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:</p> + +<pre class="brush: js notranslate">function dragenter(e) { + e.stopPropagation(); + e.preventDefault(); +} + +function dragover(e) { + e.stopPropagation(); + e.preventDefault(); +} +</pre> + +<p>The real magic happens in the <code>drop()</code> function:</p> + +<pre class="brush: js notranslate">function drop(e) { + e.stopPropagation(); + e.preventDefault(); + + const dt = e.dataTransfer; + const files = dt.files; + + handleFiles(files); +} +</pre> + +<p>Here, we retrieve the <code>dataTransfer</code> field from the event, pull the file list out of it, and then pass that to <code>handleFiles()</code>. From this point on, handling the files is the same whether the user used the <code>input</code> element or drag and drop.</p> + +<h2 id="Example_Showing_thumbnails_of_user-selected_images">Example: Showing thumbnails of user-selected images</h2> + +<p>Let's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the <code>handleFiles()</code> function below.</p> + +<pre class="brush: js notranslate">function handleFiles(files) { + for (let i = 0; i < files.length; i++) { + const file = files[i]; + + if (!file.type.startsWith('image/')){ continue } + + const img = document.createElement("img"); + img.classList.add("obj"); + img.file = file; + preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed. + + const reader = new FileReader(); + reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); + reader.readAsDataURL(file); + } +} +</pre> + +<p>Here our loop handling the user-selected files looks at each file's <code>type</code> attribute to see if its MIME type begins with the string "<code>image/</code>"). For each file that is an image, we create a new <code>img</code> element. CSS can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here.</p> + +<p>Each image has the CSS class <code>obj</code> added to it, making it easy to find in the DOM tree. We also add a <code>file</code> attribute to each image specifying the {{DOMxRef("File")}} for the image; this will let us fetch the images for actual upload later. We use {{DOMxRef("Node.appendChild()")}} to add the new thumbnail to the preview area of our document.</p> + +<p>Next, we establish the {{DOMxRef("FileReader")}} to handle asynchronously loading the image and attaching it to the <code>img</code> element. After creating the new <code>FileReader</code> object, we set up its <code>onload</code> function and then call <code>readAsDataURL()</code> to start the read operation in the background. When the entire contents of the image file are loaded, they are converted into a <code>data:</code> URL which is passed to the <code>onload</code> callback. Our implementation of this routine sets the <code>img</code> element's <code>src</code> attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen.</p> + +<h2 id="Using_object_URLs">Using object URLs</h2> + +<p>The DOM {{DOMxRef("URL.createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL()")}} methods let you create simple URL strings that can be used to reference any data that can be referred to using a DOM {{DOMxRef("File")}} object, including local files on the user's computer.</p> + +<p>When you have a {{DOMxRef("File")}} object you'd like to reference by URL from HTML, you can create an object URL for it like this:</p> + +<pre class="brush: js notranslate">const objectURL = window.URL.createObjectURL(fileObj);</pre> + +<p>The object URL is a string identifying the {{DOMxRef("File")}} object. Each time you call {{DOMxRef("URL.createObjectURL()")}}, a unique object URL is created even if you've created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling {{DOMxRef("URL.revokeObjectURL()")}}:</p> + +<pre class="brush: js notranslate">URL.revokeObjectURL(objectURL);</pre> + +<h2 id="Example_Using_object_URLs_to_display_images">Example: Using object URLs to display images</h2> + +<p>This example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes.</p> + +<p>The HTML that presents the interface looks like this:</p> + +<pre class="brush: html notranslate"><input type="file" id="fileElem" multiple accept="image/*" style="display:none"> +<a href="#" id="fileSelect">Select some files</a> +<div id="fileList"> + <p>No files selected!</p> +</div> +</pre> + +<p>This establishes our file {{HTMLElement("input")}} element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). This is explained in the section {{anch("Using hidden file input elements using the click() method")}}, as is the method that invokes the file picker.</p> + +<p>The <code>handleFiles()</code> method follows:</p> + +<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"), + fileElem = document.getElementById("fileElem"), + fileList = document.getElementById("fileList"); + +fileSelect.addEventListener("click", function (e) { + if (fileElem) { + fileElem.click(); + } + e.preventDefault(); // prevent navigation to "#" +}, false); + +fileElem.addEventListener("change", handleFiles, false); + +function handleFiles() { + if (!this.files.length) { + fileList.innerHTML = "<p>No files selected!</p>"; + } else { + fileList.innerHTML = ""; + const list = document.createElement("ul"); + fileList.appendChild(list); + for (let i = 0; i < this.files.length; i++) { + const li = document.createElement("li"); + list.appendChild(li); + + const img = document.createElement("img"); + img.src = URL.createObjectURL(this.files[i]); + img.height = 60; + img.onload = function() { + URL.revokeObjectURL(this.src); + } + li.appendChild(img); + const info = document.createElement("span"); + info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes"; + li.appendChild(info); + } + } +} +</pre> + +<p>This starts by fetching the URL of the {{HTMLElement("div")}} with the ID <code>fileList</code>. This is the block into which we'll insert our file list, including thumbnails.</p> + +<p>If the {{DOMxRef("FileList")}} object passed to <code>handleFiles()</code> is <code>null</code>, we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:</p> + +<ol> + <li>A new unordered list ({{HTMLElement("ul")}}) element is created.</li> + <li>The new list element is inserted into the {{HTMLElement("div")}} block by calling its {{DOMxRef("Node.appendChild()")}} method.</li> + <li>For each {{DOMxRef("File")}} in the {{DOMxRef("FileList")}} represented by <code>files</code>: + <ol> + <li>Create a new list item ({{HTMLElement("li")}}) element and insert it into the list.</li> + <li>Create a new image ({{HTMLElement("img")}}) element.</li> + <li>Set the image's source to a new object URL representing the file, using {{DOMxRef("URL.createObjectURL()")}} to create the blob URL.</li> + <li>Set the image's height to 60 pixels.</li> + <li>Set up the image's load event handler to release the object URL since it's no longer needed once the image has been loaded. This is done by calling the {{DOMxRef("URL.revokeObjectURL()")}} method and passing in the object URL string as specified by <code>img.src</code>.</li> + <li>Append the new list item to the list.</li> + </ol> + </li> +</ol> + +<p>Here is a live demo of the code above:</p> + +<p>{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}</p> + +<h2 id="Example_Uploading_a_user-selected_file">Example: Uploading a user-selected file</h2> + +<p>Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.</p> + +<h3 id="Creating_the_upload_tasks">Creating the upload tasks</h3> + +<p>Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class <code>obj</code> with the corresponding {{DOMxRef("File")}} attached in a <code>file</code> attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:</p> + +<pre class="brush: js notranslate">function sendFiles() { + const imgs = document.querySelectorAll(".obj"); + + for (let i = 0; i < imgs.length; i++) { + new FileUpload(imgs[i], imgs[i].file); + } +} +</pre> + +<p>Line 2 fetches a {{DOMxRef("NodeList")}}, called <code>imgs</code>, of all the elements in the document with the CSS class <code>obj</code>. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new <code>FileUpload</code> instance for each. Each of these handles uploading the corresponding file.</p> + +<h3 id="Handling_the_upload_process_for_a_file">Handling the upload process for a file</h3> + +<p>The <code>FileUpload</code> function accepts two inputs: an image element and a file from which to read the image data.</p> + +<pre class="brush: js notranslate">function FileUpload(img, file) { + const reader = new FileReader(); + this.ctrl = createThrobber(img); + const xhr = new XMLHttpRequest(); + this.xhr = xhr; + + const self = this; + this.xhr.upload.addEventListener("progress", function(e) { + if (e.lengthComputable) { + const percentage = Math.round((e.loaded * 100) / e.total); + self.ctrl.update(percentage); + } + }, false); + + xhr.upload.addEventListener("load", function(e){ + self.ctrl.update(100); + const canvas = self.ctrl.ctx.canvas; + canvas.parentNode.removeChild(canvas); + }, false); + xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); + xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); + reader.onload = function(evt) { + xhr.send(evt.target.result); + }; + reader.readAsBinaryString(file); +} +</pre> + +<p>The <code>FileUpload()</code> function shown above creates a throbber, which is used to display progress information, and then creates an {{DOMxRef("XMLHttpRequest")}} to handle uploading the data.</p> + +<p>Before actually transferring the data, several preparatory steps are taken:</p> + +<ol> + <li>The <code>XMLHttpRequest</code>'s upload <code>progress</code> listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.</li> + <li>The <code>XMLHttpRequest</code>'s upload <code>load</code> event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.</li> + <li>The request to upload the image file is opened by calling <code>XMLHttpRequest</code>'s <code>open()</code> method to start generating a POST request.</li> + <li>The MIME type for the upload is set by calling the <code>XMLHttpRequest</code> function <code>overrideMimeType()</code>. In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.</li> + <li>The <code>FileReader</code> object is used to convert the file to a binary string.</li> + <li>Finally, when the content is loaded the <code>XMLHttpRequest</code> function <code>send()</code> is called to upload the file's content.</li> +</ol> + +<h3 id="Asynchronously_handling_the_file_upload_process">Asynchronously handling the file upload process</h3> + +<p>This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.</p> + +<pre class="brush: js notranslate"><?php +if (isset($_FILES['myFile'])) { + // Example: + move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); + exit; +} +?><!DOCTYPE html> +<html> +<head> + <title>dnd binary upload</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <script type="application/javascript"> + function sendFile(file) { + const uri = "/index.php"; + const xhr = new XMLHttpRequest(); + const fd = new FormData(); + + xhr.open("POST", uri, true); + xhr.onreadystatechange = function() { + if (xhr.readyState == 4 && xhr.status == 200) { + alert(xhr.responseText); // handle response. + } + }; + fd.append('myFile', file); + // Initiate a multipart/form-data upload + xhr.send(fd); + } + + window.onload = function() { + const dropzone = document.getElementById("dropzone"); + dropzone.ondragover = dropzone.ondragenter = function(event) { + event.stopPropagation(); + event.preventDefault(); + } + + dropzone.ondrop = function(event) { + event.stopPropagation(); + event.preventDefault(); + + const filesArray = event.dataTransfer.files; + for (let i=0; i<filesArray.length; i++) { + sendFile(filesArray[i]); + } + } + } + </script> +</head> +<body> + <div> + <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> + </div> +</body> +</html> +</pre> + +<h2 id="Example_Using_object_URLs_to_display_PDF">Example: Using object URLs to display PDF</h2> + +<p>Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.</p> + +<p>In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference <code>pdfjs.disabled</code> must be set to <code>false</code> {{non-standard_inline()}}.</p> + +<pre class="brush: html notranslate"><iframe id="viewer"> +</pre> + +<p>And here is the change of the <code>src</code> attribute:</p> + +<pre class="brush: js notranslate">const obj_url = URL.createObjectURL(blob); +const iframe = document.getElementById('viewer'); +iframe.setAttribute('src', obj_url); +URL.revokeObjectURL(obj_url);</pre> + +<h2 id="Example_Using_object_URLs_with_other_file_types">Example: Using object URLs with other file types</h2> + +<p>You can manipulate files of other formats the same way. Here is how to preview uploaded video:</p> + +<pre class="brush: js notranslate">const video = document.getElementById('video');<font><font> +const obj_url = URL.createObjectURL (blob);</font></font><font><font> +video.src = obj_url;</font></font><font><font> +Video.play ();</font></font><font><font> +URL.revokeObjectURL (obj_url);</font></font></pre> + +<h2 id="specificazioni"><font><font>specificazioni</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>specificazione</font></font></th> + <th scope="col"><font><font>Stato</font></font></th> + <th scope="col"><font><font>Commento</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><font><font>{{SpecName ('HTML WHATWG', 'numero-stato.html # concetto-input-tipo-file-selezionato', 'Stato caricamento file')}}</font></font></td> + <td><font><font>{{Spec2 ('HTML WHATWG')}}</font></font></td> + <td></td> + </tr> + <tr> + <td><font><font>{{SpecName ('File API')}}</font></font></td> + <td><font><font>{{Spec2 ('API file')}}</font></font></td> + <td><font><font>Definizione iniziale</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="Guarda_anche"><font><font>Guarda anche</font></font></h2> + +<ul> + <li><font><font>{{DOMxRef ( "File")}}</font></font></li> + <li><font><font>{{DOMxRef ( "FileList")}}</font></font></li> + <li><font><font>{{DOMxRef ( "FileReader")}}</font></font></li> + <li><font><font>{{DOMxRef ( "URL")}}</font></font></li> + <li><font><font>{{DOMxRef ( "XMLHttpRequest")}}</font></font></li> + <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En / Using XMLHttpRequest"><font><font>Utilizzando XMLHttpRequest</font></font></a></li> +</ul> diff --git a/files/it/web/api/geolocation/index.html b/files/it/web/api/geolocation/index.html new file mode 100644 index 0000000000..290260cdd6 --- /dev/null +++ b/files/it/web/api/geolocation/index.html @@ -0,0 +1,133 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +translation_of: Web/API/Geolocation +--- +<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> + +<p>L'interfaccia <code><strong>Geolocation</strong></code> rappresenta un oggetto in grado di ottenere tramite codice la posizione del dispositivo utilizzato. Questo permette ai contenuti web di accedere alla posizione del dispositivo: ad esempio un sito web o una applicaziomne possono mostrare risultati personalizzati in base alla posizione del dispositivo.</p> + +<p>Un oggetto con questa interfaccia si ottiene usando la proprietà {{domxref("navigator.geolocation")}}, implementata dall'oggetto {{domxref("Navigator")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> Per ragioni di sicurezza, quando una pagina web cerca di accedere alla posizione, l'utente viene notificato e gli viene chiesto il permesso. Considera che ogni browser ha una propria policy e un modo differente per chiedere il permesso.</p> +</div> + +<h2 id="Proprietà">Proprietà</h2> + +<p><em>L'interfaccia <code>Geolocation</code> non ha né implementazioni né proprietà.</em></p> + +<h2 id="Metodi">Metodi</h2> + +<p><em><em>L'interfaccia <code>Geolocation</code> non eredita alcun metodo.</em></em></p> + +<dl> + <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt> + <dd>Determina la posizione corrente del dispositivo e ritorna un oggetto {{domxref("Position")}} con i dati.</dd> + <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt> + <dd>Ritorna un valore <code>long</code> che rappresenta l'ultima chiamata alla funzione eseguita, quando la posizione del dispositivo cambia.</dd> + <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt> + <dd>Rimuove l'handler installato con <code>watchPosition()</code>.</dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Specifiche iniziali.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Rimosso nella 15.0<br> + Reintrodotto nella 16.0</td> + <td>5</td> + </tr> + <tr> + <td>Secure context-only</td> + <td>47</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("55")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>Secure context-only</td> + <td>{{CompatNo}}</td> + <td>47</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("55")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Uso della geolocalizzazione</a></li> +</ul> diff --git a/files/it/web/api/geolocation/using_geolocation/index.html b/files/it/web/api/geolocation/using_geolocation/index.html new file mode 100644 index 0000000000..303cb4a8bb --- /dev/null +++ b/files/it/web/api/geolocation/using_geolocation/index.html @@ -0,0 +1,321 @@ +--- +title: Using geolocation +slug: Web/API/Geolocation/Using_geolocation +translation_of: Web/API/Geolocation_API +--- +<p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p> + +<p>Le<strong> API per la geolocalizzazione</strong> permettono agli utenti di fornire la propria posizione alle applicazioni web. Per ragioni di privacy, all'utente viene richiesta l'autorizzazione all'uso della posizione.</p> + +<h2 id="L'oggetto_della_geolocalizzazione">L'oggetto della geolocalizzazione</h2> + +<p>Le API di geolocalizzazione sono pubblicate tramite l'oggetto {{domxref("navigator.geolocation")}}.</p> + +<p>Se l'oggetto esiste, il servizio di geolocalizzazione è disponibile. Puoi testare l'esistenza dell'oggetto tramite:</p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* la geolocalizzazione è disponibile */ +} else { + /* la geolocalizzazione NON È disponibile */ +} +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Su Firefox 24 e versioni più vecchie, <code>"geolocation" in navigator</code> ritorna sempre <code>true</code> anche se l'API è stata disabilitata. Questa cosa è stata sistemata con <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a>. ({{bug(884921)}}).</p> +</div> + +<h3 id="Ottenere_la_posizione_corrente">Ottenere la posizione corrente</h3> + +<p>Per ottenere la posizione corrente dell'utente devi chiamare il metodo {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Viene così lanciata una richiesta asincrona che calcola la posizione attuale dell'utente. Quando la posizione viene calcolata, la funzione viene eseguita. Puoi creare una funzione che viene chiamata in caso di errore. Un terzo parametro opzionale è un oggetto che permette di settare il tempo massimo della posizione calcolata, il tempo di attessa per una nuova richiesta e la possibilità di usare la massima accuratezza per il cacolo della posizione.</p> + +<div class="note"> +<p><strong>Nota:</strong> Per default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} cerca di calcolare la posizione nel modo più veloce possibile avendo però una bassa accuratezza. Questo metodo è utile se ti serve una risposta veloce. Dispositivi con il GPS possono richiedere anche alcuni minuti per fare un calcolo preciso della posizione, quindi dei dati meno accurati (come l'indirizzo IP o il wifi) possono essere usati da {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>L'esempio qui sopra chiama la funzione <code>do_something()</code> quando la posizione viene calcolata.</p> + +<h3 id="Controllare_la_posizione_attuale">Controllare la posizione attuale</h3> + +<p>Se la posizione cambia (perché il dispositivo di sposta o perché viene calcolata una posizione più accurata), puoi settare una funzione che viene chiamata quando la posizione attuale si aggiorna. Basta usare la funzione {{domxref("Geolocation.watchPosition()","watchPosition()")}}, che ha gli stessi parametri di input di {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Questa funzione viene chiamata più volte così da permettere al browser di sapere sempre la posizione del dispositivo. La funzione di errore è opzionale come lo era per {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> Puoi usare {{domxref("Geolocation.watchPosition()","watchPosition()")}} senza una chiamata iniziale a {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}</p> +</div> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>Il metodo {{domxref("Geolocation.watchPosition()","watchPosition()")}} ritorna un ID numerico che può essere usato per identificare univocamente il controllo della posizione; puoi usare questo valore insieme al metodo {{domxref("Geolocation.clearWatch()","clearWatch()")}} per fermare il controllo della posizione.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="Risposta_positiva">Risposta positiva</h3> + +<p>Sia {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} che {{domxref("Geolocation.watchPosition()","watchPosition()")}} accettano una risposta positiva, opzionalmente una risposta di errore e un oggetto <a href="/en-US/docs/Web/API/PositionOptions">PositionOptions</a>.</p> + +<p>{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> + +<p>Una chiamata a {{domxref("Geolocation.watchPosition()","watchPosition")}} è più o meno così:</p> + +<pre class="brush: js">function geo_success(position) { + do_something(position.coords.latitude, position.coords.longitude); +} + +function geo_error() { + alert("Nessuna posizione disponibile."); +} + +var geo_options = { + enableHighAccuracy: true, + maximumAge : 30000, + timeout : 27000 +}; + +var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre> + +<h2 id="Descrivere_una_posizione">Descrivere una posizione</h2> + +<p>La posizione dell'utente è descritta usando un oggetto <code>Position</code>, che deriva dall'oggetto <code>Coordinates</code>.</p> + +<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}</p> + +<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}</p> + +<h2 id="Errori">Errori</h2> + +<p>La funzione che viene invocata in caso di errore quando si chiamano <code>getCurrentPosition()</code> o <code>watchPosition()</code> vuole un oggetto <a href="/en-US/docs/Web/API/PositionError">PositionError</a> come primo parametro.</p> + +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> + +<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}</p> + +<h2 id="Esempi_live">Esempi live</h2> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +p { margin : 0; } +</pre> +</div> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html;"><p><button onclick="geoFindMe()">Viasualizza la mia posizione</button></p> +<div id="out"></div> +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js;">function geoFindMe() { + var output = document.getElementById("out"); + + if (!navigator.geolocation){ + output.innerHTML = "<p>La geolocalizzazione non è supportata dal tuo browser</p>"; + return; + } + + function success(position) { + var latitude = position.coords.latitude; + var longitude = position.coords.longitude; + + output.innerHTML = '<p>Latitudine: ' + latitude + '° <br>Longitudine: ' + longitude + '°</p>'; + + var img = new Image(); + img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; + + output.appendChild(img); + } + + function error() { + output.innerHTML = "Impossibile calcolare la tua posizione"; + } + + output.innerHTML = "<p>Locating…</p>"; + + navigator.geolocation.getCurrentPosition(success, error); +} +</pre> + +<h3 id="Risultato_live">Risultato live</h3> + +<p>{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}</p> + +<h2 id="I_permessi">I permessi</h2> + +<p>Tutte le estensioni presenti su <a href="https://addons.mozilla.org/">addons.mozilla.org</a> che richiedono la posizione sono obbligate a chiedere un permesso all'utente. La seguente funzione richiede il permesso per l'uso della posizione. La risposta dell'utente viene salvata nelle preferenze tramite il parametro <code>pref</code>. La funzione fornita nel parametro <code>callback</code> viene chiamata con un valore booleano (<code>true</code> o <code>false</code>) che indica la risposta dell'utente. Se la risposta è <code>true</code>, l'estensione può accedere alla posizione dell'utente.</p> + +<pre class="brush: js">function prompt(window, pref, message, callback) { + let branch = Components.classes["@mozilla.org/preferences-service;1"] + .getService(Components.interfaces.nsIPrefBranch); + + if (branch.getPrefType(pref) === branch.PREF_STRING) { + switch (branch.getCharPref(pref)) { + case "always": + return callback(true); + case "never": + return callback(false); + } + } + + let done = false; + + function remember(value, result) { + return function() { + done = true; + branch.setCharPref(pref, value); + callback(result); + } + } + + let self = window.PopupNotifications.show( + window.gBrowser.selectedBrowser, + "geolocation", + message, + "geo-notification-icon", + { + label: "Share Location", + accessKey: "S", + callback: function(notification) { + done = true; + callback(true); + } + }, [ + { + label: "Always Share", + accessKey: "A", + callback: remember("always", true) + }, + { + label: "Never Share", + accessKey: "N", + callback: remember("never", false) + } + ], { + eventCallback: function(event) { + if (event === "dismissed") { + if (!done) callback(false); + done = true; + window.PopupNotifications.remove(self); + } + }, + persistWhileVisible: true + }); +} + +prompt(window, + "extensions.foo-addon.allowGeolocation", + "Foo Add-on wants to know your location.", + function callback(allowed) { alert(allowed); }); +</pre> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(5.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>9</td> + <td>10.60<br> + {{CompatNo}} 15.0<br> + 16.0</td> + <td>5</td> + </tr> + <tr> + <td>Secure origins only</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("55")}}</td> + <td>{{CompatNo}}</td> + <td>39</td> + <td>10</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>1.0.1</td> + <td>{{CompatUnknown}}</td> + <td>10.60<br> + {{CompatNo}} 15.0<br> + 16.0</td> + <td>3.2</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Secure origins only</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("55")}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>10.1</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox calcola la tua posizione anche usando il tuo WiFi grazie ai Google Location Services. Durante il trasferimento tra Firefox e Google, i dati scambiati includono dei dati sul WiFi Access Point, un token di accesso (simile a un cookie) e l'indirizzo IP dell'utente. Per maggiori informazioni, dai un'occhiata alla <a href="http://www.mozilla.com/en-US/legal/privacy/">Privacy Policy</a> di Mozzilla e alla <a href="http://www.google.com/privacy-lsf.html">Privacy Policy</a> di Google.</p> + +<p>[2] A causa del punto [1], questa API non si può usare in China. Puoi usare le API di Baidu o di Autonavi.</p> + +<p>Firefox 3.6 (Gecko 1.9.2) ha aggiunta il supporto per l'uso del servizio <a href="http://catb.org/gpsd/">GPSD</a> (GPS daemon) per usare la geolocalizzazione su Linux.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("navigator.geolocation")}}</li> + <li><a href="/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map">Plotting yourself on the map</a></li> + <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">Geolocation API on w3.org</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks blog)</li> +</ul> diff --git a/files/it/web/api/geolocation/watchposition/index.html b/files/it/web/api/geolocation/watchposition/index.html new file mode 100644 index 0000000000..e218675cf7 --- /dev/null +++ b/files/it/web/api/geolocation/watchposition/index.html @@ -0,0 +1,166 @@ +--- +title: Geolocation.watchPosition() +slug: Web/API/Geolocation/watchPosition +translation_of: Web/API/Geolocation/watchPosition +--- +<p>{{securecontext_header}}{{ APIref("Geolocation API") }}</p> + +<p>Il metodo <code>watchPosition()</code> viene usato per creare una funzione che viene chiamata automaticamente ogni volta che cambia la posizione del dispositivo. Si può anche specificare una funzione da chiamare in caso di errore.</p> + +<p>Questo metodo ritorna un valore ID che può essere usato per terminare il metodo {{domxref("Geolocation.clearWatch()")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>successo[</em>, <em>errore[</em>, <em>opzioni]]</em>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>successo</code></dt> + <dd>Un funzione che prende come parametro di input un oggetto {{domxref("Position")}}.</dd> + <dt><code>errore</code> {{optional_inline}}</dt> + <dd>Una funzione che prende come parametro di input un oggetto {{domxref("PositionError")}}.</dd> + <dt><code>opzioni</code> {{optional_inline}}</dt> + <dd>Un oggetto {{domxref("PositionOptions")}} che permette di configurare la funzione che controlla la posizione.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">var id, target, options; + +function success(pos) { + var crd = pos.coords; + + if (target.latitude === crd.latitude && target.longitude === crd.longitude) { + console.log('Congratulazioni, hai raggiunto il target'); + navigator.geolocation.clearWatch(id); + } +} + +function error(err) { + console.warn('ERROR(' + err.code + '): ' + err.message); +} + +target = { + latitude : 0, + longitude: 0 +}; + +options = { + enableHighAccuracy: false, + timeout: 5000, + maximumAge: 0 +}; + +id = navigator.geolocation.watchPosition(success, error, options); +</pre> + +<div class="note"> +<p>Se la tua applicazione gira su Firefox OS, controlla la pagina <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a> per fare in modo che la posizione del dispositivo venga aggiornata in backgound o quando lo schermo del dispositivo è spento.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Specifica iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Rimosso nella 15.0<br> + Reintrodotto nella 16.0</td> + <td>5</td> + </tr> + <tr> + <td>Secure context-only</td> + <td>47</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("55")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>Secure context-only</td> + <td>{{CompatNo}}</td> + <td>47</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("55")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a></li> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Uso della geolocalizzazione</a></li> + <li>The interface it belongs to, {{domxref("Geolocation")}}, and the way to access it {{domxref("NavigatorGeolocation.geolocation")}}.</li> + <li>L'operazione opposta: {{domxref("Geolocation.clearWatch()")}}</li> + <li>Un metodo simile: {{domxref("Geolocation.getCurrentPosition()")}}</li> +</ul> diff --git a/files/it/web/api/geolocationposition/index.html b/files/it/web/api/geolocationposition/index.html new file mode 100644 index 0000000000..7498033a57 --- /dev/null +++ b/files/it/web/api/geolocationposition/index.html @@ -0,0 +1,126 @@ +--- +title: Position +slug: Web/API/GeolocationPosition +translation_of: Web/API/GeolocationPosition +--- +<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> + +<p>L'interfaccia <strong><code>Position</code></strong> rappresenta la posizione di un particolare dispositivo in un preciso istante. La posizione, rappresentata da un oggetto {{domxref("Coordinates")}}, comprende la posizione in 2D del dispositivo, su una sfera che rappresenta la Terra, l'altitudine e la velocità.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<p><em>L'interfaccia <code>Position</code> non estende alcuna proprietà.</em></p> + +<dl> + <dt>{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt> + <dd>Ritorna un oggetto {{domxref("Coordinates")}} che rappresenta la posizione attuale.</dd> + <dt>{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt> + <dd>Ritorna {{domxref("DOMTimeStamp")}} che rappresenta l'orario in cui è stata calcolata la posizione.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<p><em><em>L'interaccia <code>Position</code> non va implementata e non estende alcun metodo.</em></em></p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation', '#position', 'Position')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Specifica iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(5)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Rimosso nella 15.0<br> + Reintrodotto nella 16.0</td> + <td>5</td> + </tr> + <tr> + <td>Secure context-only</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("55")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>Secure context-only</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("55")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation">Uso della geolocalizzazione</a></li> + <li>L'interfaccia {{domxref("Geolocation")}} utilizzata.</li> +</ul> diff --git a/files/it/web/api/globaleventhandlers/index.html b/files/it/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/it/web/api/globaleventhandlers/index.html @@ -0,0 +1,714 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p> +</div> + +<h2 id="Properties_2">Properties</h2> + +<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.</p> + +<div id="Properties"> +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt> + <dd> + <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</p> + </dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)</dd> + <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt> + <dd> + <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.</p> + </dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd> + <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.</dd> + <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchmove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt> + <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt> + <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd> +</dl> +</div> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no methods.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectionchange.</code></td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatGeckoDesktop(10)}}</td> + <td>{{CompatChrome(30.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>5.5</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[2] </sup>{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td> + <td>{{CompatGeckoDesktop(51)}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onauxclick</code></td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onwheel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(10)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(55.0)}}</td> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + </tr> + <tr> + <td><code>onauxclick</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(53)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onwheel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko this is implemented as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p> + +<p>[2] In Blink this is implemented as <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p> + +<p>[3] This is implemented behind the <code>dom.w3c_pointer_events.enabled</code> preference, defaulting to <code>false</code>.</p> + +<p>[4] This is implemented behind the <code>dom.select_events.enabled</code> preference, that default to <code>false</code>, except on Nightly.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}}</li> + <li>{{domxref("EventHandler")}}</li> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/it/web/api/globaleventhandlers/onresize/index.html b/files/it/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..27e71c3438 --- /dev/null +++ b/files/it/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,77 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Proprietà +translation_of: Web/API/GlobalEventHandlers/onresize +--- +<p>{{ ApiRef() }}</p> + +<p>La proprietà <code><strong>GlobalEventHandlers.onresize</strong></code> contiene un {{domxref("EventHandler")}} il quale viene lanciato quando un evento {{event("resize")}} viene ricevuto.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="eval">window.onresize = <em>funcRef</em>; +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>funcRef</code> è un riferimento ad una funzione.</li> +</ul> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre>window.onresize = doFunc; +</pre> + +<pre><html> +<head> + +<title>onresize test</title> + +</head> + +<body> +<p>Ridimensiona la finestra del browser per lanciare l'evento resize.</p> + +<p>Altezza finestra: <span id="height"></span></p> +<p>Larghezza finestra: <span id="width"></span></p> + +<script type="text/javascript"> + var heightOutput = document.querySelector('#height'); + var widthOutput = document.querySelector('#width'); + + function resize() { + heightOutput.textContent = window.innerHeight; + widthOutput.textContent = window.innerWidth; + } + + window.onresize = resize; +</script> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Note</h2> + +<p>L'evento resize viene scatenato dopo che la finestra è stata ridimensionata.</p> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/it/web/api/htmlcanvaselement/index.html b/files/it/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..763a2bc7bc --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/index.html @@ -0,0 +1,245 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interfaccia + - Riferimenti +translation_of: Web/API/HTMLCanvasElement +--- +<div> +<div>{{APIRef("Canvas API")}}</div> + +<div>L'interfaccia <strong>HTMLCanvasElement</strong> fornisce proprietà e metodi per manipolare il layout e la presentazione degli elementi del canvas. L'interfaccia HTMLCanvasElement eredita anche le proprietà ed i metodi della interfaccia {{domxref("HTMLElement")}}.</div> +</div> + +<p> </p> + +<p>Proprietà</p> + +<p><em>Eredita propriet</em>à<em> dalla interfaccia genitore, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.height")}}</dt> + <dd>Intero positivo che rispecchia l'attributo dell'elemento HTML {{htmlattrxref("height", "canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, come un numero negativo, è usato il valore di default 150.</dd> + <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt> + <dd>Un {{jsxref("Boolean")}} che rispecchia l'attributo HTML {{htmlattrxref("moz-opaque", "canvas")}} dell'elemento {{HTMLElement("canvas")}}. Permette al canvas di sapere se la traslucenza sarà un fattore. Se il canvas sa che non ci sarà traslucenza, la prestazione del dipingere puo' essere ottimizzata.</dd> + <dt>{{domxref("HTMLCanvasElement.width")}}</dt> + <dd>Intero positivo che rispecchia l'attributo HTML {{htmlattrxref("width", "canvas")}} dell'elemento {{HTMLElement("canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, ad esempio negativo, è usato il valore di default 300.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<p><em>Eredita dal proprio genitore, </em><em>{{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt> + <dd>Restituisce un oggetto {{domxref("CanvasCaptureMediaStream")}} che è una capture video in tempo reale della superficie del canvas.</dd> + <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt> + <dd>Restituisce un contesto di disegno sul canvas, oppure <code>null</code> se l'identificativo del contesto non ha supporto. Un contesto di disegno permette di disegnare sul canvas. Chiamare getContext con "<code>2d</code>" come parametro restituisce un oggetto {{domxref("CanvasRenderingContext2D")}}, mentre chiamarlo con "<code>experimental-webgl</code>" (o "<code>webgl</code>") restituisce un oggetto {{domxref("WebGLRenderingContext")}}. Questo contesto è disponibile solo su browsers che implementano <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> + <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt> + <dd>Restituisce un URL dati contentente una rappresentazione della immagine nel formato specificato dal parametro tipo (il valore di default è <code>png</code>). L'immagine restituita ha una risoluzione di 96dpi.</dd> + <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt> + <dd>Crea un oggetto {{domxref("Blob")}} che rappresenta l'immagine contenuta nel canvas; questo file puo' essere immagazzinato temporaneamente su disco oppure nella memoria a discrezione dell'agente per l'utente (user agent).</dd> + <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt> + <dd>Trasferisce il controllo ad un oggetto {{domxref("OffscreenCanvas")}}, o nella thread principale oppure in una worker.</dd> + <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Restituisce un oggetto {{domxref("File")}} che rappresenta l'immagine contenuta nel canvas; questo è un file immagazzinato nella memoria, col nome indicato. Se il tipo del file non è specificato, il tipo di default per l'immagine <code>è </code><code>image/png</code>.</dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>Aggiunge il metodo <code>captureStream()</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Il metodo <code>getContext()</code> ora restituisce {{domxref("RenderingContext")}} invece di un oggetto opaco.<br> + Sono stati aggiunti i metodi <code>probablySupportsContext()</code>, <code>setContext()</code> e<code>transferControlToProxy()</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_coi_Browsers">Compatibilità coi Browsers</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (<code>2D</code> context)</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop('1.9.2')}}</td> + <td>9.0</td> + <td>9.0 [1]</td> + <td>3.1</td> + </tr> + <tr> + <td><code>toBlob()</code></td> + <td>50</td> + <td>{{CompatGeckoDesktop('19')}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> + </tr> + <tr> + <td><code>probablySupportsContext()</code>,<br> + <code>setContext()</code>,<br> + <code>transferControlToProxy()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop('2')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>captureStream()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop('41')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44)}} [3]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (<code>2D</code> context)</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0 [1]</td> + <td>3.2</td> + </tr> + <tr> + <td><code>webgl</code> context</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>toBlob()</code></td> + <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> + <td>50</td> + <td>{{CompatGeckoMobile('18')}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> + </tr> + <tr> + <td><code>probablySupportsContext()</code>,<br> + <code>setContext()</code>,<br> + <code>transferControlToProxy() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile('2')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>captureStream() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile('41')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(44)}} [3]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Supporto parziale in Opera Mini 5.0 e successivi.</p> + +<p>[2] Il supporto per il terzo parametro, è stato aggiunto solo con Gecko 25: quando viene usato col tipo "image/jpeg," questo argomento specifica la qualità dell'immagine.</p> + +<p>[3] Da questa funzionalità dipende una impostazione di preferenza di funzionalità. Imposta<code> come true gfx.offscreencanvas.enabled</code> in about:config .</p> + +<h2 id="Vedi_anche">Vedi anche:</h2> + +<ul> + <li>elemento HTML che implementa questa interfaccia: {{HTMLElement("canvas")}}.</li> +</ul> diff --git a/files/it/web/api/htmlcanvaselement/toblob/index.html b/files/it/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..f0793eb393 --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,262 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +<div> +<div> +<div>{{APIRef("Canvas API")}}</div> +</div> +</div> + +<p>Il metodo<strong><code>HTMLCanvasElement.toBlob()</code></strong> crea un oggetto {{domxref("Blob")}} rappresentante l'immagine contenuta nel canvas; questo file potrebbe essere immagazzinato per usi futuri su disco o in memoria a discrezione dell'user agent. Se <code>type</code> non è specificato, il tipo immagine è impostato a<code>image/png</code>. L'immagine creata ha una risoluzione di 96dpi.<br> + Il terzo argomento è usato con immagini di tipo<code>image/jpeg</code> per specificare la qualità dell'output.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">void <var>canvas</var>.toBlob(<var>callback</var>, <var>mimeType</var>, <var>qualityArgument</var>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt>callback</dt> + <dd>Funzione di callback con l'oggetto {{domxref("Blob")}} risultante come singolo argomento.</dd> + <dt><code>mimeType</code> {{optional_inline}}</dt> + <dd>Un oggetto {{domxref("DOMString")}} indicante il tipo immagine. Quella di default è<code>image/png</code>.</dd> + <dt><code>qualityArgument</code> {{optional_inline}}</dt> + <dd>Un oggetto {{jsxref("Number")}} tra<code>0</code> e<code>1</code> indicante la qualità immagine se il tipo richiesto è <code>image/jpeg </code>o<code>image/webp</code>. Se questo argomento è diverso dai due precedenti è utilizzato il valore di qualità immagine di default. Altri argomenti verranno ignorati.</dd> +</dl> + +<h3 id="Valore_ritornato">Valore ritornato</h3> + +<p>Nessuno.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Ottenere_un_file_rappresentante_il_canvas">Ottenere un file rappresentante il canvas</h3> + +<p>Una volta aver disegnato il contenuto in un canvas, è possibile convertirlo in un file di un qualsiasi. Lo snippet di codice in basso, ad esempio, prende l'immagine contenuta nell'elemento {{HTMLElement("canvas")}} avente ID "canvas", ottenendo una sua copia in formato immagine PNG, quindi aggiunge un nuovo elemento {{HTMLElement("img")}} al documento, la cui immagine di origine è quella creata utilizzando il canvas.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); + +canvas.toBlob(function(blob) { + var newImg = document.createElement('img'), + url = URL.createObjectURL(blob); + + newImg.onload = function() { + // no longer need to read the blob so it's revoked + URL.revokeObjectURL(url); + }; + + newImg.src = url; + document.body.appendChild(newImg); +}); +</pre> + +<p>Si noti che si sta creando un'immagine PNG; se si specifica un secondo parametro nella chiamata a <code>toBlob()</code>, si può specificare il formato immagine. Ad esempio, per ottenere l'immagine in formato JPEG:</p> + +<pre class="brush: js"> canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality</pre> + +<div> +<h3 id="Convertire_un_canvas_in_icona_(solo_su_Mozilla)">Convertire un canvas in icona (solo su Mozilla)</h3> + +<p>Ora si userà <code>-moz-parse</code> per convertire un canvas in icona. Windows XP non supporta la conversione dal formato PNG ad ICO, quindi usa quello bitmap (BMP) al suo posto. Un link di download è creato impostando l'attributo download. Il valore dello stesso è il nome che verrà utilizzato come nome del file.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var d = canvas.width; +ctx = canvas.getContext('2d'); +ctx.beginPath(); +ctx.moveTo(d / 2, 0); +ctx.lineTo(d, d); +ctx.lineTo(0, d); +ctx.closePath(); +ctx.fillStyle = 'yellow'; +ctx.fill(); + +function blobCallback(iconName) { + return function(b) { + var a = document.createElement('a'); + a.textContent = 'Download'; + document.body.appendChild(a); + a.style.display = 'block'; + a.download = iconName + '.ico'; + a.href = window.URL.createObjectURL(b); + } +} +canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', + '-moz-parse-options:format=bmp;bpp=32');</pre> +</div> + +<h3 id="Salvare_toBlob_su_disco_con_OS.File_(valido_solo_per_chromeadd-on)">Salvare toBlob su disco con OS.File (valido solo per chrome/add-on)</h3> + +<div class="note"> +<p>This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.</p> +</div> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var d = canvas.width; +ctx = canvas.getContext('2d'); +ctx.beginPath(); +ctx.moveTo(d / 2, 0); +ctx.lineTo(d, d); +ctx.lineTo(0, d); +ctx.closePath(); +ctx.fillStyle = 'yellow'; +ctx.fill(); + +function blobCallback(iconName) { + return function(b) { + var r = new FileReader(); + r.onloadend = function () { + // r.result contains the ArrayBuffer. + Cu.import('resource://gre/modules/osfile.jsm'); + var writePath = OS.Path.join(OS.Constants.Path.desktopDir, + iconName + '.ico'); + var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), + {tmpPath:writePath + '.tmp'}); + promise.then( + function() { + console.log('successfully wrote file'); + }, + function() { + console.log('failure writing file') + } + ); + }; + r.readAsArrayBuffer(b); + } +} + +canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', + '-moz-parse-options:format=bmp;bpp=32');</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("50")}}</td> + <td>{{CompatGeckoDesktop('19')}}</td> + <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Image quality parameter</td> + <td>{{CompatChrome("50")}}</td> + <td>{{CompatGeckoDesktop('25')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("50")}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome("50")}}</td> + </tr> + <tr> + <td>Image quality parameter</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("50")}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome("50")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{WebKitBug("71270")}}.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>A low performance polyfill based on toDataURL.</p> + +<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) { + Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { + value: function (callback, type, quality) { + + var binStr = atob( this.toDataURL(type, quality).split(',')[1] ), + len = binStr.length, + arr = new Uint8Array(len); + + for (var i = 0; i < len; i++ ) { + arr[i] = binStr.charCodeAt(i); + } + + callback( new Blob( [arr], {type: type || 'image/png'} ) ); + } + }); +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li> + <li>{{domxref("Blob")}}</li> +</ul> diff --git a/files/it/web/api/htmlcollection/index.html b/files/it/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..53eb23edd1 --- /dev/null +++ b/files/it/web/api/htmlcollection/index.html @@ -0,0 +1,101 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +tags: + - API + - DOM + - HTML DOM + - HTMLCollection + - Interfaccia + - Lista di elementi + - Referenza + - Referenza DOM +translation_of: Web/API/HTMLCollection +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>L'interfaccia <strong><code>HTMLCollection</code></strong> rappresenta una raccolta generica (array-like object simile agli <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argomenti</a>) di elementi (nell'ordine del documento) e offre metodi e proprietà per la selezione dall'elenco.</p> + +<div class="note"><strong>Note:</strong> Questa interfaccia è chiamata <code>HTMLCollection</code> per ragioni storiche (prima del DOM moderno, le raccolte che implementano questa interfaccia potevano avere solo elementi HTML come elementi).</div> + +<p>Una <code>HTMLCollection</code> nell'HTML DOM è attiva; viene aggiornata automaticamente quando viene modificato il documento sottostante.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt> + <dd>Restituisce il numero di elementi nella raccolta.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{domxref("HTMLCollection.item()")}}</dt> + <dd>Restituisce il nodo specifico al dato <code>index</code> a base zero nella lista. Restituisce <code>null</code> se <code>index</code> non è compreso nell'intervallo</dd> + <dt>{{domxref("HTMLCollection.namedItem()")}}</dt> + <dd>Restituisce il nodo specifico il cui ID o, come nome di fallback, corrisponde alla stringa specificata da <code>nome</code>. La corrispondenza per nome viene eseguita solo come ultima risorsa, solo in HTML, e solo se l'elemento di riferimento supporta l'attributo <code>name</code>. Restituisce <code>null</code> se nessun nodo corrisponde con il nome specificato.</dd> +</dl> + +<h2 id="Utilizzo_in_JavaScript">Utilizzo in JavaScript</h2> + +<p><code>HTMLCollection</code> espone anche i suoi membri direttamente come proprietà sia per nome che per indice. Gli ID HTML possono contenere <code>:</code> e <code>.</code> come caratteri validi, che richiederebbero l'uso della notazione della parentesi per l'accesso alla proprietà. Attualmente HTMLCollections non riconosce gli ID puramente numerici, il che causerebbe un conflitto con l'accesso in stile array, sebbene HTML5 li autorizzi.</p> + +<p>Ad esempio, supponendo che esista un elemento <code><form></code> nel documento e il suo <code>id</code> sia <code>"myForm"</code>:</p> + +<pre class="brush:js">var elem1, elem2; + +// document.forms è una HTMLCollection + +elem1 = document.forms[0]; +elem2 = document.forms.item(0); + +alert(elem1 === elem2); // ritorna: "true" + +elem1 = document.forms.myForm; +elem2 = document.forms.namedItem("myForm"); + +alert(elem1 === elem2); // ritorna: "true" + +elem1 = document.forms["named.item.with.periods"];</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td> + <td>{{ Spec2('DOM2 HTML') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td> + <td>{{ Spec2('DOM1') }}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.HTMLCollection")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li> +</ul> diff --git a/files/it/web/api/htmlcollection/item/index.html b/files/it/web/api/htmlcollection/item/index.html new file mode 100644 index 0000000000..f53047ffbc --- /dev/null +++ b/files/it/web/api/htmlcollection/item/index.html @@ -0,0 +1,50 @@ +--- +title: HTMLCollection.item +slug: Web/API/HTMLCollection/item +translation_of: Web/API/HTMLCollection/item +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">Il metodo {{domxref("HTMLCollection")}} <code>item()</code> restituisce il nodo situato nell'offset specificato nella raccolta.</span></p> + +<div class="note"> +<p><strong>Note:</strong> Poiché il contenuto di una <code>HTMLCollection</code> è attivo, le modifiche al DOM sottostante possono e causano la modifica della posizione dei singoli nodi nella raccolta, pertanto il valore dell'indice non resterà necessariamente costante per un determinato nodo.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>elemento</em> = <em>HTMLCollection</em>.item(<em>index</em>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>index</code></dt> + <dd>La posizione del {{domxref("Node")}} da restituire. Gli elementi appaiono in una <code>HTMLCollection</code> nello stesso ordine in cui appaiono nella fonte del documento.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il {{domxref("Node")}} nell'indice specificato, o <code>null</code> se <code>index</code> è minore di zero o maggiore o uguale alla proprietà length.</p> + +<h2 id="Note_di_utilizzo">Note di utilizzo</h2> + +<p>Il metodo <code>item()</code> estituisce un elemento numerato da una <code>HTMLCollection</code>. In JavaScript, è più semplice trattare <code>HTMLCollection</code> come una matrice e indicizzarla mediante la notazione degli array. Vedi l'{{anch ("Esempio", "esempio")}} sotto.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">var c = document.images; // Questa è una HTMLCollection +var img0 = c.item(0); // Puoi usare il metodo item() in questo modo +var img1 = c[1]; // Ma questa notazione è più facile e più comune +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.HTMLCollection.item")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{domxref("NodeList.item()")}}</li> +</ul> diff --git a/files/it/web/api/htmlelement/index.html b/files/it/web/api/htmlelement/index.html new file mode 100644 index 0000000000..a1b53a7528 --- /dev/null +++ b/files/it/web/api/htmlelement/index.html @@ -0,0 +1,481 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - Referenza +translation_of: Web/API/HTMLElement +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>L'interfaccia <strong><code>HTMLElement</code></strong> rappresenta un qualsiasi elemento <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Alcuni elementi implementano direttamente questa interfaccia, altri la implementano attraverso un'interfaccia che la eredita.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<p><em>Eredita le proprietà dai propri genitori, da {{domxref("Element")}} e da {{domxref("GlobalEventHandlers")}}.</em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nome</th> + <th scope="col">Tipo</th> + <th scope="col">Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("HTMLElement.accessKey")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>La chiave d'accesso assegnata all'elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Una stringa che rappresenta la chiave d'accesso assegnata all'elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contentEditable")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Ritorna o assegna la modificabilità dell'elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>Indica se il contenuto dell'elemento sia modificabile.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</td> + <td>{{domxref("DOMStringMap")}}</td> + <td>Permette di leggere e scrivere attributi personalizzati (<code>data-*</code>) nell'elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dir")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Ritorna o assegna la direzione dell'elemento</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.draggable")}}</td> + <td>{{domxref("Boolean")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.hidden")}}</td> + <td>{{domxref("Boolean")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</td> + <td>{{domxref("Boolean")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</td> + <td>{{domxref("DOMString")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</td> + <td><code>any</code></td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.lang")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Ritorna o assegna la lingua di un attributo, di un elemento, del testo e del contenuto di un elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</td> + <td><code>double</code></td> + <td>L'altezza di un elemento, relativa al layout.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</td> + <td><code>double</code></td> + <td>La distanza tra il bordo sinistro dell'elemento e il bordo sinistro del suo <code>offsetParent</code>.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("Element")}}</td> + <td>L'elemento a partire dal quale tutti i calcoli dell'offset sono effettuati.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</td> + <td><code>double</code></td> + <td>La distanza tra il bordo superiore dell'elemento e il bordo superiore del suo <code>offsetParent</code>.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</td> + <td><code>double</code></td> + <td>La larghezza di un elemento, relativa al layout.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("HTMLPropertiesCollection")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</td> + <td>{{domxref("Boolean")}}</td> + <td>Controlla il <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">controllo ortografico</a> (presente in tutti gli elementi HTML)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.style")}}</td> + <td>{{domxref("CSSStyleDeclaration")}}</td> + <td>Un oggetto che rappresenta la dichiarazione degli attributi di stile di un elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.tabIndex")}}</td> + <td><code>long</code></td> + <td>Ritorna o assegna la posizione di un elemento nell'ordine di tabbing.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.title")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Una stringa che appare in un popup quando il mouse si trova sopra all'elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</td> + <td>{{domxref("Boolean")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Gestori_degli_eventi">Gestori degli eventi</h3> + +<p>Le proprietà degli eventi, nella forma <code>onXYZ</code>, sono definite nei {{domxref("GlobalEventHandlers")}} implementati da <code>HTMLElement</code>. Alcune altre sono specifiche per <code>HTMLElement</code>.</p> + +<dl> + <dt>{{domxref("HTMLElement.onTouchStart")}} {{non-standard_inline}}</dt> + <dd>Restituisce il codice di gestione dell'evento {{event("touchstart")}}.</dd> + <dt>{{domxref("HTMLElement.onTouchEnd")}} {{non-standard_inline}}</dt> + <dd>Restituisce il codice di gestione dell'evento {{event("touchend")}}.</dd> + <dt>{{domxref("HTMLElement.onTouchMove")}} {{non-standard_inline}}</dt> + <dd>Restituisce il codice di gestione dell'evento {{event("touchmove")}}.</dd> + <dt>{{domxref("HTMLElement.onTouchEnter")}} {{non-standard_inline}}</dt> + <dd>Restituisce il codice di gestione dell'evento {{event("touchenter")}}.</dd> + <dt>{{domxref("HTMLElement.onTouchLeave")}} {{non-standard_inline}}</dt> + <dd>Restituisce il codice di gestione dell'evento {{event("touchleave")}}.</dd> + <dt>{{domxref("HTMLElement.onTouchCancel")}} {{non-standard_inline}}</dt> + <dd>Restituisce il codice di gestione dell'evento {{event("touchcancel")}}.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<p><em>Eredita i metodi dal genitore, {{domxref("Element")}}.</em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nome e argomenti</th> + <th scope="col">Restituisce</th> + <th scope="col">Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("HTMLElement.blur()")}}</td> + <td><code>void</code></td> + <td>Rimuove il focus della tastiera dall'elemento attualmente in focus.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()")}}</td> + <td><code>void</code></td> + <td>Invia un evento di clic del mouse all'elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()")}}</td> + <td><code>void</code></td> + <td>Porta il focus della tastiera sull'elemento.</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</td> + <td><code>void</code></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Aggiunge le seguenti proprietà: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, e <code>offsetHeight</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aggiunge le seguenti proprietà: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, e <code>itemValue</code>.<br> + Aggiunti i seguenti metodi: <code>forceSpellcheck()</code>.<br> + Spostati gli attributi <code>onXYZ</code> all'interfaccia {{domxref("GlobalEventHandlers")}} e aggiunta la sua ereditarietà.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Aggiunge le seguenti proprietà: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, e tutte le proprietà <code>onXYZ</code>.<br> + Spostate le proprietà <code>id</code> e <code>className</code> all'interfaccia {{domxref("Element")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Nessun cambiamento da {{SpecName('DOM2 HTML')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>17.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}{{WebkitBug(72715)}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>9.0</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>5.1</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>8.0</td> + <td>11</td> + <td>11.10</td> + <td>6</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.draggable", "draggable")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>11.60<br> + (Removed in Opera 15)</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td> + <p>{{CompatGeckoMobile("1.0")}}</p> + </td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoMobile("8.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> diff --git a/files/it/web/api/htmlelement/offsetheight/index.html b/files/it/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..46b7232b50 --- /dev/null +++ b/files/it/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,123 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +translation_of: Web/API/HTMLElement/offsetHeight +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p>La proprietà <strong><code>HTMLElement.offsetHeight</code></strong> è una proprietà di tipo read-only e rappresenta l'altezza dell'elemento incluso padding verticale e magini, in pixels, come intero.</p> + +<p>Di solito, l'<code>offsetHeight</code> di un elemento è una misura che include i bordi dell'elemento, il padding verticale dell'elemento, la scrollbar orizzontale dell'elemento (se presente , se renderizzata) e l'altezza nel css dell'elemento.</p> + +<p>Per l'oggetto body, la misua include la totale altezza lineare invece dell'altezza CSS. Elementi floattati sotto altri contenuti lineari sono ignorati.</p> + +<div class="note"> +<p>Questa proprietà arrotonderà il valore ad un intero. Se vi serve un valore decimale usate {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2> + +<pre class="eval">var <em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight; +</pre> + +<p><em>intElemOffsetHeight</em> è una variabile che associa un intero corrispondente al valore dell'offsetHeight in pixel dell'elemento. La proprietà offsetHeight è di tipo readonly.</p> + +<h2 id="Example" name="Example">Esempio</h2> + +<p> </p> + +<p> <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> + + +<p>L'immagine nell'esempio sopra mosta una scrollbar e un offsetHeigh che si adatta alla finestra. Comunque, elementi non scrollabili potrebbero avere un offsetHeights largo, molto più largo del contenuto visibile. Questi elemnti sono tipicamente contenuti in un elemento scrollabile; di conseguenza questi elementi non scrollabili possono essere invisibili completamente o parzialmente, dipende dal settaggio dello scrollTop del contenitore scrollabile.</p> + +<p> </p> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Status</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">Note</h3> + +<p><code>offsetHeight</code> è una proprietà del DHTML object model la quale era stata introdotta precedentemente da MSIE. Questa si riferisce a volte alla dimensione fisica/grafica di un elemento, o all'altezza del border-box di un elemento.</p> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi Anche</h2> + +<ul> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/it/web/api/htmlformelement/acceptcharset/index.html b/files/it/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..5100a8d7f4 --- /dev/null +++ b/files/it/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,22 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><b>acceptCharset</b> restituisce una lista delle <a href="it/Codifiche_dei_caratteri">codifiche dei caratteri</a> supportate per un dato elemento <code>form</code>. Questa lista è una stringa e gli elementi possono essere separati da virgole o da spazi.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = form.acceptCharset; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">inputs = document.forms["myform"].acceptCharset +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p> diff --git a/files/it/web/api/htmlformelement/action/index.html b/files/it/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..8b55910259 --- /dev/null +++ b/files/it/web/api/htmlformelement/action/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +translation_of: Web/API/HTMLFormElement/action +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><b>action</b> legge o imposta l'attributo <code>action</code> dell'elemento <code>FORM</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = form.action +form.action = +<i>stringa</i> +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">form.action = "/cgi-bin/publish"; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>L'attributo <code>action</code> di un form è il programma che viene eseguito sul server quando il form viene inviato. Questa proprietà può essere letta o impostata.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.action" } ) }}</p> diff --git a/files/it/web/api/htmlformelement/elements/index.html b/files/it/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..3ea2a2aa32 --- /dev/null +++ b/files/it/web/api/htmlformelement/elements/index.html @@ -0,0 +1,34 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement/elements +--- +<div> +<div>{{APIRef("HTML DOM")}}</div> +</div> + +<p>Restituisce una <code><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-2-HTML-20011025/html.html#ID-75708506">HTMLCollection</a></code> contenente tutti i controlli dell'elemento form a cui si riferisce.</p> + +<p>Puoi accedere un elemento della collezione sia usando l'indice che usando l'<a href="it/DOM/element.id">id</a> o il <a href="it/DOM/element.name">name</a>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>nodeList</i> = +<i>HTMLFormElement</i>.elements +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">var input = document.getElementById("form1").elements; +var inputByIndex = inputs[2]; //indice +var inputByName = inputs["login"]; //id oppure name +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>Specifica W3C DOM 2 HTML Specifica <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">elements</a></p> diff --git a/files/it/web/api/htmlformelement/enctype/index.html b/files/it/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..082db19303 --- /dev/null +++ b/files/it/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +translation_of: Web/API/HTMLFormElement/enctype +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><b>enctype</b> legge o imposta il tipo di contenuto del form.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = form.enctype +form.enctype = +<i>stringa</i> +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">form.enctype = "application/x-www-form-urlencoded"; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il tipo di codifica predefinito è "application/x-www-form-urlencoded".</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p> diff --git a/files/it/web/api/htmlformelement/index.html b/files/it/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..35ef7bcb58 --- /dev/null +++ b/files/it/web/api/htmlformelement/index.html @@ -0,0 +1,125 @@ +--- +title: form +slug: Web/API/HTMLFormElement +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="HTML_Form_Element_Interface" name="HTML_Form_Element_Interface">HTML Form Element Interface</h3> +<p>L'elemento <code>FORM</code> possiede tutte le proprietà e i metodi di qualunque <a href="it/DOM/element">element</a>, e inoltre ha un'interfaccia specializzata: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">HTMLFormElement</a>.</p> +<p>Questa interfaccia fornisce i metodi per creare e modificare gli elementi del <code>FORM</code>. L'esempio seguente mostra come creare un nuovo elemento form, modificare i suoi attributi e inviarlo.</p> +<pre>// Crea un form +var f = document.createElement("form"); + +// Lo aggiungere come ultimo nodo all'interno dell'elemento Body +document.body.appendChild(f); + +// Setta l'attributo action e l'attributo method +f.action = "/cgi-bin/some.cgi"; +f.method = "POST" + +// Invia il form tramite il metodo submit +f.submit(); +</pre> +<p>Il seguente esempio di pagina HTML mostra come estrarre informazioni da un form e come settare alcuni dei suoi attributi.</p> +<pre></html> +<head> +<title>Esempio di Form</title> +<script type="text/javascript"> + function getFormInfo() { + var info; + + // Ricava un riferimento al form usando la collezione di form disponibile in document + var f = document.forms["formA"]; + info = "f.elements: " + f.elements + "\n" + + "f.length: " + f.length + "\n" + + "f.name: " + f.elements + "\n" + + "f.acceptCharset: " + f.acceptCharset + "\n" + + "f.action: " + f.action + "\n" + + "f.enctype: " + f.enctype + "\n" + + "f.encoding: " + f.encoding + "\n" + + "f.method: " + f.method + "\n" + + "f.target: " + f.target; + document.forms["formA"].elements['tex'].value = info; + } + + // Un riferimento al form viene passato + // dall'attributo onclick del button usando 'this.form' + function setFormInfo(f) { + f.method = "GET"; + f.action = "/cgi-bin/evil_executable.cgi"; + f.name = "totally_new"; + } +</script> +</head> +<body> +<h1>Form example</h1> + +<form id="formA" + action="/cgi-bin/test" method="POST"> + <p>Clicca "Info" per vedere delle info sul form. + Cllica set per cambiare i settaggi,quindi di nuovo info per vedere l'effetto</p> + <p> + <input type="button" value="info" + onclick="getFormInfo();"> + <input type="button" value="set" + onclick="setFormInfo(this.form);"> + <input type="reset" value="reset"> + <br> + <textarea id="tex" style="height:15em; width:20em"> + </p> +</form> +</body> +</html> +</pre> +<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3> +<dl> + <dt> + <a href="it/DOM/form.elements">form.elements</a></dt> + <dd> + Restituisce una collezione dei controlli contenuti form corrente.</dd> + <dt> + <a href="it/DOM/form.length">form.length</a></dt> + <dd> + Restituisce il numero di controlli contenuti nel form corrente.</dd> + <dt> + <a href="it/DOM/form.name">form.name</a></dt> + <dd> + Restituisce una stringa con con il valore dell'attributo name del form corrente.</dd> + <dt> + <a href="it/DOM/form.acceptCharset">form.acceptCharset</a></dt> + <dd> + Restituisce una lista dei set di caratteri supportati per il form corrente.</dd> + <dt> + <a href="it/DOM/form.action">form.action</a></dt> + <dd> + Restituisce/setta l'URI a cui verranno spediti i dati del form.</dd> + <dt> + <a href="it/DOM/form.enctype">form.enctype</a></dt> + <dd> + Restituisce/setta il tipo di contenuto che il form corrente invierà al server.</dd> + <dt> + <a href="it/DOM/form.method">form.method</a></dt> + <dd> + Restituisce/setta il metodo con cui inviare le informazioni al server.</dd> + <dt> + <a href="it/DOM/form.target">form.target</a></dt> + <dd> + Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.</dd> +</dl> +<h3 id="Metodi" name="Metodi">Metodi</h3> +<dl> + <dt> + <a href="it/DOM/form.submit">form.submit</a></dt> + <dd> + Invia il form.</dd> + <dt> + <a href="it/DOM/form.reset">form.reset</a></dt> + <dd> + Riporta il form al suo stato iniziale.</dd> +</dl> +<p>{{ languages( { "fr": "fr/DOM/form", "pl": "pl/DOM/form", "en": "en/DOM/form" } ) }}</p> diff --git a/files/it/web/api/htmlformelement/length/index.html b/files/it/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..34f1e82ef3 --- /dev/null +++ b/files/it/web/api/htmlformelement/length/index.html @@ -0,0 +1,26 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +translation_of: Web/API/HTMLFormElement/length +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><b>length</b> restituisce il numero di controlli contenuti dall'elemento <code>FORM</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>integer</i> = form.length +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">if (document.getElementById("form1").length > 1) { + // vi è più di un controllo +} +</pre> + +<h4 id="Specification" name="Specification">Specification</h4> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.length" } ) }}</p> diff --git a/files/it/web/api/htmlformelement/method/index.html b/files/it/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..bffd4f7faf --- /dev/null +++ b/files/it/web/api/htmlformelement/method/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +translation_of: Web/API/HTMLFormElement/method +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><b>method</b> legge o imposta il metodo HTTP utilizzato per l'invio del form.</p> + +<p> + </p><h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<p></p> + +<pre class="eval"><i>stringa</i> = form.method +form.method = +<i>stringa</i> +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">document.forms["myform"].method = "POST"; +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.method" } ) }}</p> diff --git a/files/it/web/api/htmlformelement/name/index.html b/files/it/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..1e6c741329 --- /dev/null +++ b/files/it/web/api/htmlformelement/name/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +translation_of: Web/API/HTMLFormElement/name +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code>name</code> restituisce il nome dell'elemento <code>FORM</code> corrente come stringa.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = form.name +form.name = +<i>stringa</i> +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">form1 = document.getElementById("form1").name; +if (form1 != document.form.form1) { + // il browser non supporta questo tipo di riferimenti +} +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Si noti che questa proprietà può essere letta o impostata, il chè significa che è possibile modificare o impostare il nome del form.</p> + +<p>Se l'elemento <code>FORM</code> contiene un elemento chiamato "name", questo elemento coprirà la proprietà <code>form.name</code>, quindi non sarà possibile utilizzarla.</p> + +<p>Internet Explorer (IE) non permette di modificare l'attributo <code>name</code> di un elemento che è stato creato con <code>createElement()</code> utilizzando la proprietà <code>name</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></p> diff --git a/files/it/web/api/htmlformelement/reset/index.html b/files/it/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..0d373e6938 --- /dev/null +++ b/files/it/web/api/htmlformelement/reset/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +translation_of: Web/API/HTMLFormElement/reset +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code>reset</code> resetta il form al suo stato iniziale.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>HTMLForm</i>.reset() +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">document.forms["mioForm"].reset(); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Questo metodo simula ciò che accadrebbe se l'utente cliccasse il bottone reset.</p> + +<p>Se un controllo di un form (come il bottone reset) ha come nome <var>reset</var>, questo coprirà il metodo reset.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767677">DOM Level 2 HTML: reset</a></p> diff --git a/files/it/web/api/htmlformelement/submit/index.html b/files/it/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..b762349b6c --- /dev/null +++ b/files/it/web/api/htmlformelement/submit/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.submit() +slug: Web/API/HTMLFormElement/submit +translation_of: Web/API/HTMLFormElement/submit +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code>submit</code> invia il form.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>HTMLForm</i>.submit() +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">document.forms["mioForm"].submit() +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Questo metodo simula ciò che accadrebbe se l'utente cliccasse sul bottone "invia".</p> + +<p>Se il controllo di un form (come il bottone di invio) ha come nome o un id <var>submit</var>, questo coprirà il metodo submit.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767676">DOM Level 2 HTML: submit</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.submit" } ) }}</p> diff --git a/files/it/web/api/htmlformelement/target/index.html b/files/it/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..c94b8a78f9 --- /dev/null +++ b/files/it/web/api/htmlformelement/target/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +translation_of: Web/API/HTMLFormElement/target +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><b>target</b> legge o imposta il contenuto dell'attributo target (per esempio, il frame dove verrà visualizzato l'output del form).</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = form.target +form.target = +<i>stringa</i> +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">myForm.target = document.frames[1].name; +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p> diff --git a/files/it/web/api/htmliframeelement/index.html b/files/it/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..4138970a78 --- /dev/null +++ b/files/it/web/api/htmliframeelement/index.html @@ -0,0 +1,455 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLIFrameElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <strong><code>HTMLIFrameElement</code></strong> interface provides special properties and methods (beyond those of the {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.</p> + +<p>{{InheritanceDiagram(600,120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.</dd> + <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("Boolean")}} indicating whether the inline frame is willing to be placed into full screen mode. See <a href="/en-US/docs/DOM/Using_full-screen_mode" title="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Using full-screen mode</a> for details.</dd> + <dt>{{domxref("HTMLIFrameElement.allowPaymentRequest")}}</dt> + <dd>Is a {{domxref("Boolean")}} indicating whether the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a> may be invoked inside a cross-origin iframe.</dd> + <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.</dd> + <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.</dd> + <dt>{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.</dd> + <dt>{{domxref("HTMLIFrameElement.height")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.</dd> + <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.</dd> + <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} being the height of the frame margin.</dd> + <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} being the width of the frame margin.</dd> + <dt>{{domxref("HTMLIFrameElement.name")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.</dd> + <dt>{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerPolicy", "iframe")}} HTML attribute indicating which referrer to use when fetching the linked resource.</dd> + <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt> + <dd>Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.</dd> + <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.</dd> + <dt>{{domxref("HTMLIFrameElement.src")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.</dd> + <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt> + <dd>Is a {{domxref("DOMString")}} that represents the content to display in the frame.</dd> + <dt>{{domxref("HTMLIFrameElement.width")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p> + +<h3 id="Browser_API_methods">Browser API methods</h3> + +<p>To support the requirement of a browser {{HTMLElement("iframe")}}, <code>HTMLIFrameElement</code> has been extended with new methods that give the {{HTMLElement("iframe")}} some super powers. These are non-standard (see {{anch("Browser compatibility")}}.)</p> + +<h4 id="Navigation_methods">Navigation methods</h4> + +<p>The following navigation methods allow navigation through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.reload()")}}</dt> + <dd>Allows reloading of the {{HTMLElement("iframe")}} element content.</dd> + <dt>{{domxref("HTMLIFrameElement.stop()")}}</dt> + <dd>Allows stopping of the {{HTMLElement("iframe")}}'s content loading.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoBack()")}}</dt> + <dd>Indicates whether it's possible to navigate backwards.</dd> + <dt>{{domxref("HTMLIFrameElement.goBack()")}}</dt> + <dd>Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoForward()")}}</dt> + <dd>Indicates whether it's possible to navigate forward.</dd> + <dt>{{domxref("HTMLIFrameElement.goForward()")}}</dt> + <dd>Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.</dd> +</dl> + +<h4 id="Management_methods">Management methods</h4> + +<p>The next set of methods manage the resources used by a browser {{HTMLElement("iframe")}}. These are especially useful for implementing tabbed browser application.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.executeScript()")}}</dt> + <dd>Allows a specified script to be executed against a page loaded in the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.purgeHistory()")}}</dt> + <dd>Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.setVisible()")}}</dt> + <dd>Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resource allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.getVisible()")}}</dt> + <dd>Indicates the current visibility state of the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.setActive()")}}</dt> + <dd>Sets the current {{HTMLElement("iframe")}} as the active frame, which has an effect on how it is prioritized by the process manager.</dd> + <dt>{{domxref("HTMLIFrameElement.getActive()")}}</dt> + <dd>Indicates whether the current browser {{htmlelement("iframe")}} is the currently active frame.</dd> +</dl> + +<h4 id="Audio-related_methods">Audio-related methods</h4> + +<p>The following methods allow direct control of sound in the browser element.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.getVolume()")}}</dt> + <dd>Gets the current volume of the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.setVolume()")}}</dt> + <dd>Sets the current volume of the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.mute()")}}</dt> + <dd>Mutes any audio playing in the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.unmute()")}}</dt> + <dd>Unmutes any audio playing in the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.getMuted()")}}</dt> + <dd>Indicates whether the browser {{HTMLElement("iframe")}} is currently muted.</dd> +</dl> + +<h4 id="Search_methods">Search methods</h4> + +<p>New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.findAll()")}}</dt> + <dd>Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.</dd> + <dt>{{domxref("HTMLIFrameElement.findNext()")}}</dt> + <dd>Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.</dd> + <dt>{{domxref("HTMLIFrameElement.clearMatch()")}}</dt> + <dd>Clears any content highlighted by {{domxref("HTMLIFrameElement.findAll","findAll()")}} or {{domxref("HTMLIFrameElement.findNext","findNext()")}}.</dd> +</dl> + +<h4 id="Event-related_methods">Event-related methods</h4> + +<p>In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:</p> + +<dl> + <dt>The {{HTMLElement("iframe")}} gains support for the methods of the {{domxref("EventTarget")}} interface</dt> + <dd>{{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}}, and {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.sendMouseEvent()")}}</dt> + <dd>Sends a {{domxref("MouseEvent")}} to the {{HTMLElement("iframe")}}'s content.</dd> + <dt>{{domxref("HTMLIFrameElement.sendTouchEvent()")}}</dt> + <dd>Sends a {{domxref("TouchEvent")}} to the {{HTMLElement("iframe")}}'s content. Note that this method is available for touch enabled devices only.</dd> + <dt>{{domxref("HTMLIFrameElement.addNextPaintListener()")}}</dt> + <dd>Defines a handler to listen for the next {{event("MozAfterPaint")}} event in the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()")}}</dt> + <dd>Removes a handler previously set with {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.</dd> +</dl> + +<h4 id="Utility_methods">Utility methods</h4> + +<p>Last, there are some utility methods, useful for apps that host a browser {{HTMLElement("iframe")}}.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.download()")}}</dt> + <dd>Downloads a specified URL, storing it at the specified filename/path.</dd> + <dt>{{domxref("HTMLIFrameElement.getContentDimensions()")}}</dt> + <dd>Retrieves the X and Y dimensions of the content window.</dd> + <dt>{{domxref("HTMLIFrameElement.getManifest()")}}</dt> + <dd>Retrieves the manifest of an app loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.</dd> + <dt>{{domxref("HTMLIFrameElement.getScreenshot()")}}</dt> + <dd>Takes a screenshot of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.</dd> + <dt>{{domxref("HTMLIFrameElement.getStructuredData()")}}</dt> + <dd>Retrieves any structured microdata (and hCard and hCalendar microformat data) contained in the HTML loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.</dd> + <dt>{{domxref("HTMLIFrameElement.zoom()")}}</dt> + <dd>Changes the zoom factor of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful for zooming in/out on non-touch-enabled devices.</dd> +</dl> + +<dl> +</dl> + +<ul> +</ul> + +<ul> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Payment','#paymentrequest-and-iframe-elements','allowPaymentRequest')}}</td> + <td>{{Spec2('Payment')}}</td> + <td>Adds <code>allowPaymentRequest</code> property.</td> + </tr> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerPolicy</code> property.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The following property has been added: <code>allowFullscreen</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The following properties are now obsolete: <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code>, and <code>align</code>.<br> + The following properties have been added: <code>srcdoc</code>, <code>sandbox</code>, and <code>contentWindow</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>The <code>contentDocument</code> property has been added.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(17)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contentDocument</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>8.0<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop(18.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>referrerPolicy</code> {{experimental_inline}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{compatGeckoDesktop(50)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Browser API methods</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>allowPaymentRequest</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(17)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>seamless</code> {{experimental_inline}}</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contentDocument</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile(18.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>referrerPolicy</code> {{experimental_inline}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{compatGeckoMobile(50)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Browser API methods</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>allowPaymentRequest</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>[1] Previously, the type of <code>sandbox</code> was a {{domxref("DOMString")}} instead of a {{domxref("DOMSettableTokenList")}}. This has been fixed with <a href="/en-US/Firefox/Releases/29/Site_Compatibility">Gecko 29.0</a> {{geckoRelease(29)}}) ({{bug(845067)}}). Other browsers may still implement the property as <code>DOMString</code> since it was a late change in the specification.</li> + <li>[3] For older version use <code>HTMLIFrameElement.contentWindow.document</code> instead.</li> + <li>[4] Daily test builds only.</li> + <li>[5] Supported in chrome code only.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML element implementing this interface: {{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/it/web/api/htmliframeelement/mute/index.html b/files/it/web/api/htmliframeelement/mute/index.html new file mode 100644 index 0000000000..ca7e44107e --- /dev/null +++ b/files/it/web/api/htmliframeelement/mute/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLIFrameElement.mute() +slug: Web/API/HTMLIFrameElement/mute +translation_of: Mozilla/Gecko/Chrome/API/Browser_API/mute +--- +<p>{{APIRef("HTML DOM")}}{{non-standard_header}}</p> + +<p>Il metodo <code>mute()</code> del {{domxref("HTMLIFrameElement")}} muta qualsiasi audio in riproduzione nel browser {{HTMLElement("iframe")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>instanceOfHTMLIframeElement</em>.mute();</pre> + +<h3 id="Ritorna">Ritorna</h3> + +<p>Nulla.</p> + +<h3 id="Parametri">Parametri</h3> + +<p>Nessuno.</p> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush:js">var browser = document.querySelector('iframe'); + +browser.mute(); +</pre> + +<h2 id="Specification" name="Specification">Specifica</h2> + +<p>Non è parte di nessuna specifica.</p> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(47)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Supportato solo in codice chrome.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Browser">Usando le Browser API</a></li> +</ul> diff --git a/files/it/web/api/htmlunknownelement/index.html b/files/it/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..079de3d82d --- /dev/null +++ b/files/it/web/api/htmlunknownelement/index.html @@ -0,0 +1,58 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +tags: + - API + - HTML DOM + - Interfaccia + - Referenza +translation_of: Web/API/HTMLUnknownElement +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>L'interfaccia <strong><code>HTMLUnknownElement</code></strong> rappresenta un elemento HTML non valido e deriva dall'interfaccia {{DOMxRef("HTMLElement")}}, ma senza implementare ulteriori proprietà o metodi.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Proprietà">Proprietà</h2> + +<p><em>Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.</em></p> + +<h2 id="Metodi">Metodi</h2> + +<p><em>Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.</em></p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Nessun cambiamento da {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.HTMLUnknownElement")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Elementi HTML obsoleti o non standard che implementano questa interfaccia: {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li> + <li>{{DOMxRef("SVGUnknownElement")}}</li> +</ul> diff --git a/files/it/web/api/index.html b/files/it/web/api/index.html new file mode 100644 index 0000000000..e5b4b1b744 --- /dev/null +++ b/files/it/web/api/index.html @@ -0,0 +1,17 @@ +--- +title: Riferimento Web API +slug: Web/API +tags: + - API + - Landing + - Riferimento + - Web +translation_of: Web/API +--- +<p>Le APIs sono dispositivi pronti per coloro che scrivono codice per il Web in JavaScript. Di seguito è riportato un elenco di tutte le interfacce (ovvero tipi di oggetti) che potresti essere in grado di utilizzare durante lo sviluppo della tua app o sito Web. <strong>API</strong> è l'acronimo di Application Programming Interface, nonché di Application Program Interface. Come parzialmente intuibile dai termini che compongono l'acronimo, le <strong>API</strong> rappresentano un'interfaccia di programmazione.</p> + +<div> +<div>{{APIListAlpha}}</div> +</div> + +<p> </p> diff --git a/files/it/web/api/indexeddb_api/index.html b/files/it/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..8512b030bd --- /dev/null +++ b/files/it/web/api/indexeddb_api/index.html @@ -0,0 +1,243 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +<div class="summary"> +<p>IndexedDB è una API per la memorizzazione client-side di una considerevole quantità di dati strutturati (inclusi file e blob) e per una ricerca performante su questi dati mediante gli indici. Se <a href="/it/docs/Web/API/Web_Storage_API" title="en-US/docs/DOM/Storage">Web Storage</a> è utile per memorizzare piccole quantità di dati, non lo è invece per memorizzare grandi quantità di dati strutturati. IndexedDB fornisce la soluzione. Questa è la pagina principale su IndexedDB di MDN — qui vengono forniti link a tutti i riferimenti API e guide all'uso, dettagli di supporto al browser ed alcune spiegazioni dei concetti chiave.</p> +</div> + +<h2 id="Concetti_chiave_ed_uso">Concetti chiave ed uso</h2> + +<p>IndexedDB è un sistema di database transazionale, che inizialmente potrebbe creare confusione se si è abituati a lavorare solo con i database relazionali, ma presto diverrà abbastanza chiaro. IndexedDB permette di memorizzare e recuperare oggetti indicizzati con una <strong>chiave</strong>. E' necessario specificare lo schema del database, aprire una connessione al proprio database e poi recuperare ed aggiornare i dati attraverso una serie di <strong>transazioni</strong>.</p> + +<ul> + <li>Apprendere maggiori info sui <a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">concetti dietro a IndexedDB</a>.</li> + <li>Imparare ad usare IndexedDB in modo asincrono dai primi principi con la nostra guida <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Usare IndexedDB</a>.</li> + <li>Trova le raccomandazioni degli sviluppatori per far lavorare le apps web offline alla pagina <a href="/en-US/Apps/Build/Offline">Offline Apps</a>.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Come molte soluzioni web storage, IndexedDB segue una <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Quindi mentre si può accedere ai dati memorizzati sotto un dominio, non è possibile accedere ai dati attraverso domini differenti.</p> +</div> + +<h3 id="Sincrono_e_asincrono">Sincrono e asincrono</h3> + +<p>IndexedDB include sia una API asincrona che una API sincrona. La API asincrona può essere usata in molti casi, incluso <a href="https://developer.mozilla.org/En/DOM/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>, mentre la API sincrona è designata ad essere utilizzata solo con <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> e sarà usata molto raramente.</p> + +<div class="note"> +<p><strong>Nota</strong>: Attualmente, nessuno dei principali browser supporta la API sincrona.</p> +</div> + +<h3 id="Limiti_di_memorizzazione">Limiti di memorizzazione</h3> + +<p>Non c'è alcun limite alla dimensione di un singolo elemento del database, tuttavia ci potrebbe essere un limite ad ogni dimensione complessiva del database IndexedDB. Questo limite (ed il modo con cui l'interfaccia utente lo supporterà) potrebbe variare da un browser ad un altro:</p> + +<ul> + <li>Firefox non ha limite sulla dimensione del database IndexedDB. The user interface will just ask permission for storing blobs bigger than 50 MB. This size quota can be customized through the <code>dom.indexedDB.warningQuota</code> preference (which is defined in <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</li> + <li>Google Chrome: see <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a>.</li> +</ul> + +<h2 id="Asynchronous_API">Asynchronous API</h2> + +<p>The asynchronous API methods return without blocking the calling thread. To get asynchronous access to a database, call <a href="/en-US/docs/Web/API/IDBFactory.open"><code>open()</code></a> on the <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> attribute of a <a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a> object. This method returns an {{domxref("IDBRequest")}} object; asynchronous operations communicate to the calling application by firing events on {{domxref("IDBRequest")}} objects.</p> + +<h3 id="Connecting_to_a_database">Connecting to a database</h3> + +<dl> + <dt>{{domxref("IDBEnvironment")}}</dt> + <dd>Provides access to a client-side database. It is implemented by the {{ domxref("window") }} and {{ domxref("worker") }} objects.</dd> + <dt>{{domxref("IDBFactory")}}</dt> + <dd>Provides access to a database. This is the interface implemented by the global object <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> and is therefore the entry point for the API.</dd> + <dt>{{domxref("IDBOpenDBRequest")}}</dt> + <dd>Represents a request to open a database.</dd> + <dt>{{domxref("IDBDatabase")}}</dt> + <dd>Represents a connection to a database. It's the only way to get a transaction on the database.</dd> +</dl> + +<h3 id="Accessing_results_of_database_requests">Accessing results of database requests</h3> + +<dl> + <dt>{{domxref("IDBRequest")}}</dt> + <dd>Provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.</dd> +</dl> + +<h3 id="Retrieving_and_modifying_data">Retrieving and modifying data</h3> + +<dl> + <dt>{{domxref("IDBTransaction")}}</dt> + <dd>Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.</dd> + <dt>{{domxref("IDBObjectStore")}}</dt> + <dd>Represents an object store.</dd> + <dt>{{domxref("IDBIndex")}}</dt> + <dd>Provides access to the metadata of an index.</dd> + <dt>{{domxref("IDBCursor")}}</dt> + <dd>Iterates over object stores and indexes.</dd> + <dt>{{domxref("IDBCursorWithValue")}}</dt> + <dd>Iterates over object stores and indexes and returns the cursor's current value.</dd> + <dt>{{domxref("IDBKeyRange")}}</dt> + <dd>Defines a range of keys.</dd> +</dl> + +<h3 id="Deprecated_interfaces">Deprecated interfaces</h3> + +<p>An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:</p> + +<dl> + <dt>{{domxref("IDBVersionChangeRequest")}}</dt> + <dd>Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.</dd> + <dt>{{domxref("IDBDatabaseException")}} {{ obsolete_inline() }}</dt> + <dd>Represents exception conditions that can be encountered while performing database operations.</dd> +</dl> + +<h2 id="Synchronous_API">Synchronous API</h2> + +<div class="warning"> +<p><strong>Important</strong>: This is a reminder that the synchronous version of IndexedDB is not yet implemented in any browser.</p> +</div> + +<p>To get synchronous access to a database, call <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBFactorySync#open" title="en-US/docs/IndexedDB/IDBFactorySync#open"><code>open()</code></a> on the <span class="inlineIndicator unimplemented unimplementedInline">Unimplemented</span> <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBEnvironmentSync#indexedDBSync" title="en-US/docs/IndexedDB/EnvironmentSync#indexedDBSync"><code>indexedDBSync</code></a> attribute of a <a href="https://developer.mozilla.org/en-US/docs/DOM/Worker" title="en-US/docs/DOM/Worker">worker</a> object. This returns an <code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBDatabaseSync" title="en-US/docs/IndexedDB/DatabaseSync">IDBDatabaseSync</a></code> object, which enables you to create, open, and remove object stores and indexes, set the version of the database, and create transactions.</p> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBCursorSync" title="en-US/docs/IndexedDB/IDBCursorSync">IDBCursorSync</a></code> iterates over object stores and indexes.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBDatabaseSync" title="en-US/docs/IndexedDB/DatabaseSync">IDBDatabaseSync</a></code> represents a connection to a database. It's the only way to get a transaction on the database.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBEnvironmentSync" title="IDBEnvironmentSync"><code>IDBEnvironmentSync</code></a> provides access to a client-side database. It is implemented by <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/en-US/docs/DOM/Worker" title="en-US/docs/DOM/Worker">worker</a> objects.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBFactorySync" title="en-US/docs/IndexedDB/IndexedDatabase">IDBFactorySync </a></code>provides access to a database.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBIndexSync" title="en-US/docs/IndexedDB/IndexSync">IDBIndexSync</a></code> provides access to the metadata of an index.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBObjectStoreSync" title="en-US/docs/IndexedDB/ObjectStoreSync">IDBObjectStoreSync</a></code> represents an object store.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBTransactionSync" title="en-US/docs/IndexedDB/TransactionSync">IDBTransactionSync</a></code> creates a transaction in the database.</li> +</ul> + +<h2 id="Example" name="Example">Examples</h2> + +<ul> + <li><a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri:</a> A powerful library and eBook reader application, written by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby.</li> + <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://chrisdavidmills.github.io/to-do-notifications/">view example live</a>): The reference application for the examples in the reference docs: Not every snippet appears in this example, but every example uses the same data structure and syntax, and will make sense in the context of this application.</li> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> + <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB Examples</a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Asynchronous API</td> + <td> + <p>11.0 {{ property_prefix("webkit") }}<br> + 24</p> + </td> + <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>17</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Synchronous API<br> + (used with <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}<br> + See {{ bug(701634) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Asynchronous API</td> + <td>4.4</td> + <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>17</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div class="note"> +<p><strong>Note</strong>: Some browsers don't yet support IndexedDB but <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage">do support WebSQL</a>, most notably Safari/Webkit on desktop and iOS. One way around this problem is to use an IndexedDB Polyfill or Shim that falls back to <a href="http://www.w3.org/TR/webdatabase/">WebSQL</a> or even <a href="/en-US/docs/Web/Guide/API/DOM/Storage#localStorage">localStorage</a> for non-supporting browsers. The best available polyfill at present is <a href="https://github.com/mozilla/localForage">localForage</a>.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<section id="Quick_Links"> +<ol> + <li data-default-state="open"><strong><a href="#">Guides and recommendations</a></strong> + + <ol> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Basic concepts behind IndexedDB</a></li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/en-US/Apps/Build/Offline">Offline guide on App Center</a></li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Asynchronous interfaces</a></strong> + <ol> + <li>{{ domxref("IDBCursor") }}</li> + <li>{{ domxref("IDBCursorWithValue") }}</li> + <li>{{ domxref("IDBDatabase") }}</li> + <li>{{ domxref("IDBEnvironment") }}</li> + <li>{{ domxref("IDBFactory") }}</li> + <li>{{ domxref("IDBIndex") }}</li> + <li>{{ domxref("IDBKeyRange") }}</li> + <li>{{ domxref("IDBObjectStore") }}</li> + <li>{{ domxref("IDBOpenDBRequest") }}</li> + <li>{{ domxref("IDBRequest") }}</li> + <li>{{ domxref("IDBTransaction") }}</li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Synchronous interfaces</a></strong> + <ol> + <li>{{ domxref("IDBCursorSync") }}</li> + <li>{{ domxref("IDBDatabaseSync") }}</li> + <li>{{ domxref("IDBEnvironmentSync") }}</li> + <li>{{ domxref("IDBFactorySync") }}</li> + <li>{{ domxref("IDBIndexSync") }}</li> + <li>{{ domxref("IDBObjectStoreSync") }}</li> + <li>{{ domxref("IDBTransactionSync") }}</li> + </ol> + </li> +</ol> +</section> diff --git a/files/it/web/api/mutationobserver/index.html b/files/it/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..6c15916a56 --- /dev/null +++ b/files/it/web/api/mutationobserver/index.html @@ -0,0 +1,102 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Cambiamenti del DOM + - DOM + - DOM Reference + - Mutation Observer + - Mutation Observer e resize + - resize + - resize listener +translation_of: Web/API/MutationObserver +--- +<div>{{APIRef("DOM WHATWG")}}</div> + +<p>L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del <a href="/en-US/docs/DOM">DOM</a>. È stata progettata per sostituire i <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> che fanno parte del DOM3 Events specification.</p> + +<h2 id="Costruttore">Costruttore</h2> + +<dl> + <dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt> + <dd>Crea e restituisce un nuovo <code>MutationObserver</code> che invocherà una funzione di callback specificata alla mutazione del DOM.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{domxref("MutationObserver.disconnect", "disconnect()")}}</dt> + <dd>Interrompe la ricezione da parte dell'istanza <code>MutationObserver</code> di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}</dd> + <dt>{{domxref("MutationObserver.observe", "observe()")}}</dt> + <dd>Configura il <code>MutationObserver</code> affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.</dd> + <dt>{{domxref("MutationObserver.takeRecords", "takeRecords()")}}</dt> + <dd>Rimuove tutte le notifiche in coda sul <code>MutationObserver</code> e le restituisce come nuovo {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}</dd> +</dl> + +<h2 id="Mutation_Observer_customizzazione_del_resize_event_demo">Mutation Observer & customizzazione del resize event & demo</h2> + +<p><a class="external" href="https://codepen.io/webgeeker/full/YjrZgg/">https://codepen.io/webgeeker/full/YjrZgg/</a></p> + +<h2 id="Esempio">Esempio</h2> + +<p>L'esempio seguente è un adattamento di questo <a href="https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">post</a></p> + +<pre class="brush: js">// Seleziona il nodo di cui monitare la mutazione +var targetNode = document.getElementById('some-id'); + +// Opzioni per il monitoraggio (quali mutazioni monitorare) +var config = { attributes: true, childList: true, subtree: true }; + +// Funzione di callback da eseguire quando avvengono le mutazioni +var callback = function(mutationsList, observer) { + for(var mutation of mutationsList) { + if (mutation.type == 'childList') { + console.log('A child node has been added or removed.'); + } + else if (mutation.type == 'attributes') { + console.log('The ' + mutation.attributeName + ' attribute was modified.'); + } + } +}; + +// Creazione di un'istanza di monitoraggio collegata alla funzione di callback +var observer = new MutationObserver(callback); + +// Inizio del monitoraggio del nodo target riguardo le mutazioni configurate +observer.observe(targetNode, config); + +// Successivamente si può interrompere il monitoraggio +observer.disconnect();</pre> + +<h2 id="Leggi_pure">Leggi pure</h2> + +<ul> + <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li> + <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + + + +<p>{{Compat("api.MutationObserver")}}</p> diff --git a/files/it/web/api/navigator/cookieenabled/index.html b/files/it/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..4905b8deb8 --- /dev/null +++ b/files/it/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,83 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +translation_of: Web/API/Navigator/cookieEnabled +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<h2 id="Summary" name="Summary">Riassunto</h2> + +<p>Restituisce un valore booleano che indica se i cookie abilitati o meno (sola lettura).</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="eval">var cookieEnabled = navigator.cookieEnabled; +</pre> + +<ul> + <li><code>cookieEnabled</code> è un risultato Booleano <code>true</code> o <code>false</code>.</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js">if (!navigator.cookieEnabled) { + // dire all'utente che l'attivazione dei cookie rende le pagine web più utile} +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>Yes</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Note_di_Gecko">Note di Gecko</h3> + +<p>Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, <code>window.navigator.cookieEnabled</code> potrebbe segnalare il risultato errato se un'eccezione del sito è stata in vigore per la pagina in cui è stato eseguito il controllo. Questo è stato risolto.</p> + +<h2 id="Specification" name="Specification">Specifications</h2> + +<p>HTML WHATWG</p> diff --git a/files/it/web/api/navigator/credentials/index.html b/files/it/web/api/navigator/credentials/index.html new file mode 100644 index 0000000000..107fe4a123 --- /dev/null +++ b/files/it/web/api/navigator/credentials/index.html @@ -0,0 +1,57 @@ +--- +title: credentials +slug: Web/API/Navigator/credentials +tags: + - API + - CredentialContainer + - Proprietà + - Riferimento + - credentials +translation_of: Web/API/Navigator/credentials +--- +<p>{{SeeCompatTable}}{{APIRef("")}}</p> + +<p>La proprietà <strong><code>credentials</code></strong> dell'interfaccia {{domxref("Navigator")}} restituisce un interfaccia {{domxref("CredentialsContainer")}}, la quale espone metodi utili per fare <em>request-credentials</em>. L'interfaccia {{domxref("CredentialsContainer")}} inoltre notifica lo<em>user agent</em> quando un avviene un evento di interesse, come, ad esempio, un <em>sign-in</em> o un <em>sign-out</em> avvenuto con successo. Questa interfaccia può essere utilizzata per scoprire la presenza della funzionalità.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var credentialsContainer = navigator.credentials</pre> + +<h3 id="Value">Value</h3> + +<p>Un'interfaccia {{domxref("CredentialsContainer")}}.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">if ('credentials' in navigator) { + navigator.credentials.get({password: true}) + .then(function(creds) { + // Usa le credenziali. + }); +} else { + // Gestisci il <em>sign-in</em> alternativo, senza <em>credentials</em>. +}; +</pre> + +<h2 id="Specifica">Specifica</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('Credential Management')}}</td> + <td>{{Spec2('Credential Management')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibili">Browser compatibili</h2> + +<div class="hidden">La tabella di compatiilità di questa pagina è generata tramite dati strutturati. Se vuoi contribuire per favore consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e crea una pull request.</div> + +<p>{{Compat("api.Navigator.credentials")}}</p> diff --git a/files/it/web/api/navigator/index.html b/files/it/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/it/web/api/navigator/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator +slug: Web/API/Navigator +translation_of: Web/API/Navigator +--- +<p>{{ apiref() }}</p> + +<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.</p> + +<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("Window.navigator")}} property.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.</em></p> + +<h3 id="Standard">Standard</h3> + +<dl> + <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd> + <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Provides a {{domxref("Connection")}} with information about the network connection of a device.</dd> + <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> + <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> + <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd> + <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> + <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd> + <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> + <dt>{{domxref("Navigator.oscpu")}}</dt> + <dd>Returns a string that represents the current operating system.</dd> + <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd> + <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> + <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> + <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> + <dd>Returns the user agent string for the current browser.</dd> + <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> +</dl> + +<h3 id="Methods" name="Methods">Non-standard</h3> + +<dl> + <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt> + <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd> + <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd> + <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt> + <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd> + <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt> + <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd> + <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt> + <dd>Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd> + <dt>{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}</dt> + <dd>The <code>navigator.mozAudioChannelManager</code> object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.</dd> + <dt>{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br> + {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}</dt> + <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd> + <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt> + <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd> + <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt> + <dd>Returns the build number of the current browser (e.g., "20060909").</dd> + <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt> + <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> + <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd> + <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd> + <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor version number (e.g. "6.1").</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt> + <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p> + +<h3 id="Standard_2">Standard</h3> + +<dl> + <dt>{{domxref("NavigatorUserMedia.getUserMedia()")}}</dt> + <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd> + <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd> + <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd> + <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt> + <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd> + <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> + <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd> +</dl> + +<h3 id="Specification" name="Specification">Non standard</h3> + +<dl> + <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt> + <dd>Lets code check to see if the document at a given URI is available without using the network.</dd> + <dt>{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}</dt> + <dd>Allows in-app payment.</dd> + <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt> + <dd>Sets a user preference. This method is <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">only available to privileged code</a> and is obsolete; you should use the XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a> instead.</dd> + <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt> + <dd>Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.</dd> +</dl> diff --git a/files/it/web/api/navigatorconcurrenthardware/index.html b/files/it/web/api/navigatorconcurrenthardware/index.html new file mode 100644 index 0000000000..10fb1576ca --- /dev/null +++ b/files/it/web/api/navigatorconcurrenthardware/index.html @@ -0,0 +1,56 @@ +--- +title: NavigatorConcurrentHardware +slug: Web/API/NavigatorConcurrentHardware +translation_of: Web/API/NavigatorConcurrentHardware +--- +<p> </p> + +<p>Il <strong><code>NavigatorConcurrentHardware</code></strong> aggiunge all'interfaccia delle caratteristiche che permettono ai contenuti Web di determinare quanti processori logici sono a disposizione dell'utente, in modo tale da ottimizzare le operazioni di contenuti e Web apps che possano usufruire al meglio la CPU dell'utente.</p> + +<p>Il numero dei processori logici del <strong>core </strong>serve a misurare il numero di <em>threads </em>che possono essere di fatto eseguiti per volta, senza che questi condividano la stesse CPU. Oggigiorno i computer hanno diversi core nella loro CPU(2 o 4 cores). Ogni core è in grado di eseguire più di un <strong>thread</strong> per volta, avvalendosi di tecniche avanzate di <strong>scheduling</strong>. Una CPU a 4 cores può restituire dunque 8 threads. Tuttavia, il browser può scegliere di ridurre questo numero in modo tale da rappresentare in maniera più accurata il numero di <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread.">Worker</a></code> eseguiti per volta.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency" title="The navigator.hardwareConcurrency read-only property returns the number of logical processors available to run threads on the user's computer."><code>NavigatorConcurrentHardware.hardwareConcurrency</code></a> </dt> + <dd>Restituisce il numero di processori logici disponibili allo user agent. Il valore sarà sempre almeno pari a 1 e restituirà 1 se non è possibile determinare il numero di processori logici. </dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<p>Il mixin di<code style=""> <em>NavigatorConcurrentHardware</em></code><em> </em>non ha metodi.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://html.spec.whatwg.org/multipage/#navigatorconcurrenthardware" hreflang="en" lang="en" rel="noopener">HTML Living Standard<br> + <small lang="en-US">The definition of 'NavigatorConcurrentHardware' in that specification.</small></a></td> + <td>Living Standard</td> + <td> + <p>Definizione Iniziale</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vuoi contribuire, visita la pagina <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div> + +<p>{{Compat("api.NavigatorConcurrentHardware")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator" title="The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities."><code>Navigator</code></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WorkerNavigator" title="The WorkerNavigator interface represents a subset of the Navigator interface allowed to be accessed from a Worker. Such an object is initialized for each worker and is available via the WorkerGlobalScope.navigator property obtained by calling window.self.navigator."><code>WorkerNavigator</code></a></li> +</ul> diff --git a/files/it/web/api/node/appendchild/index.html b/files/it/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..acef4909a3 --- /dev/null +++ b/files/it/web/api/node/appendchild/index.html @@ -0,0 +1,99 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - Referenza + - metodo +translation_of: Web/API/Node/appendChild +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo <code><strong>Node.appendChild()</strong></code> aggiunge un nodo alla fine dell'elenco di figli di un nodo genitore specificato. Se il figlio dato è un riferimento a un nodo esistente nel documento, <code>appendChild()</code> lo sposta dalla sua posizione corrente alla nuova posizione (non è necessario rimuovere il nodo dal suo nodo padre prima di aggiungerlo ad un altro nodo).</p> + +<p>Ciò significa che un nodo non può essere in due punti del documento contemporaneamente. Quindi se il nodo ha già un genitore, il nodo viene prima rimosso, quindi aggiunto alla nuova posizione. Il metodo {{domxref("Node.cloneNode()")}} può essere usato per fare una copia del nodo prima di aggiungerlo sotto il nuovo genitore. Si noti che le copie eseguite con <code>cloneNode</code> non verranno automaticamente mantenute sincronizzate.</p> + +<p>Se il figlio dato è un {{domxref("DocumentFragment")}}, l'intero contenuto di {{domxref("DocumentFragment")}} viene spostato nell'elenco secondario del nodo genitore specificato.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><em>element</em>.appendChild(<em>aChild</em>);</pre> + +<h3 id="Returns" name="Returns">Parametri</h3> + +<dl> + <dt><strong>aChild</strong></dt> + <dd>Il nodo da aggiungere al nodo genitore dato (comunemente un elemento).</dd> +</dl> + +<h3 id="Returns" name="Returns">Valore di ritorno</h3> + +<p>Il valore restituito è il figlio aggiunto tranne quando il figlio dato è un {{domxref("DocumentFragment")}}, nel qual caso viene restituito il {{domxref("DocumentFragment")}}.</p> + +<h2 id="Notes" name="Notes">Appunti</h2> + +<p>Il concatenamento potrebbe non funzionare come previsto a causa di <code>appendChild()</code> che restituisce l'elemento figlio:</p> + +<pre class="brush: js">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</pre> + +<p>Sets <code>aBlock</code> to <code><b></b></code> only, which is probably not what you want.</p> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush:js">// Crea un nuovo elemento di paragrafo e aggiungilo alla fine del corpo del documento +var p = document.createElement("p"); +document.body.appendChild(p);</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Nessun cambiamento da {{SpecName("DOM3 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento da {{SpecName("DOM2 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento da {{SpecName("DOM1")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione inziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("api.Node.appendChild")}}</p> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> +</ul> diff --git a/files/it/web/api/node/index.html b/files/it/web/api/node/index.html new file mode 100644 index 0000000000..97fdc9ed89 --- /dev/null +++ b/files/it/web/api/node/index.html @@ -0,0 +1,368 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Node</code></strong> is an interface from which a number of DOM API object types inherit. It allows those types to be treated similarly; for example, inheriting the same set of methods, or being tested in the same way.</span></p> + +<p>The following interfaces all inherit from <code>Node</code>’s methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>These interfaces may return <code>null</code> in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.isConnected")}} {{readonlyInline}}</dt> + <dd>Returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the node type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>Returns / Sets the value of the current node</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("Document")}} that this node belongs to. If the node is itself a document, returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Returns / Sets the textual content of an element and all its descendants.</dd> +</dl> + +<h3 id="Deprecated_properties">Deprecated properties</h3> + +<dl> + <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}</dt> + <dd>Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{domxref("Node.getRootNode()")}}.</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>Adds the specified childNode argument as the last child to the current node.<br> + If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd>Compares the position of the current node against another node in any other document.</dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} value indicating whether a node is a descendant of a given node or not.</dd> + <dt>{{domxref("Node.getRootNode()")}}</dt> + <dd>Returns the context object's root which optionally includes the shadow root if it is available. </dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>Inserts a {{domxref("Node")}} before the reference node as a child of a specified parent node.</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd> + <dt>{{domxref("Node.isSameNode()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd> </dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage">Sample usage</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> + +<h3 id="Recurse_through_child_nodes">Recurse through child nodes</h3> + +<p>The following function calls a function recursively for each node contained by a root node (including the root itself):</p> + +<pre class="brush: js">function eachNode(rootNode, callback){ + if(!callback){ + var nodes = []; + eachNode(rootNode, function(node){ + nodes.push(node); + }); + return nodes; + } + + if(false === callback(rootNode)) + return false; + + if(rootNode.hasChildNodes()){ + var nodes = rootNode.childNodes; + for(var i = 0, l = nodes.length; i < l; ++i) + if(false === eachNode(nodes[i], callback)) + return; + } +}</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre class="syntaxbox">eachNode(rootNode, callback);</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively calls a function for each descendant node of <code>rootNode</code> (including the root itself).</p> + +<p>If <code>callback</code> is omitted, the function returns an {{jsxref("Array")}} instead, which contains <code>rootNode</code> and all nodes contained therein.</p> + +<p>If <code>callback</code> is provided, and it returns {{jsxref("Boolean")}} <code>false</code> when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node that contains a certain string).</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code>rootNode</code></dt> + <dd>The <code>Node</code> object whose descendants will be recursed through.</dd> + <dt><code>callback</code></dt> + <dd>An optional callback <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">function</a> that receives a <code>Node</code> as its only argument. If omitted, <code>eachNode</code> returns an {{jsxref("Array")}} of every node contained within <code>rootNode</code> (including the root itself).</dd> +</dl> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<p>The following example prints the <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> properties of each <code><span></code> tag in a <code><div></code> element named <code>"box"</code>:</p> + +<pre class="brush: html"><div id="box"> + <span>Foo</span> + <span>Bar</span> + <span>Baz</span> +</div></pre> + +<pre class="brush: js">var box = document.getElementById("box"); +eachNode(box, function(node){ + if(null != node.textContent){ + console.log(node.textContent); + } +});</pre> + +<p>The following strings will be displayed in the user's console:</p> + +<pre class="brush: js">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre> + +<div class="note"> +<p><strong>Note:</strong> Whitespace forms part of a {{domxref("Text")}} node, meaning indentation and newlines form separate <code>Text</code> between the <code>Element</code> nodes.</p> +</div> + +<h4 id="Realistic_usage">Realistic usage</h4> + +<p>The following demonstrates a real-world use of the <code>eachNode</code> function: searching for text on a web-page. We use a wrapper function named <code>grep</code> to do the searching:</p> + +<pre class="brush: js">function grep(parentNode, pattern){ + var matches = []; + var endScan = false; + + eachNode(parentNode, function(node){ + if(endScan) + return false; + + // Ignore anything which isn't a text node + if(node.nodeType !== Node.TEXT_NODE) + return; + + if("string" === typeof pattern){ + if(-1 !== node.textContent.indexOf(pattern)) + matches.push(node); + } + else if(pattern.test(node.textContent)){ + if(!pattern.global){ + endScan = true; + matches = node; + } + else matches.push(node); + } + }); + + return matches; +}</pre> + +<p>For example, to find {{domxref("Text")}} nodes that contain typos:</p> + +<pre class="brush: js">var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]; +var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi"); +var mistakes = grep(document.body, pattern); +console.log(mistakes); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node")}}</p> diff --git a/files/it/web/api/node/lastchild/index.html b/files/it/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..34804c5644 --- /dev/null +++ b/files/it/web/api/node/lastchild/index.html @@ -0,0 +1,59 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +<div>{{APIRef("DOM")}}</div> + +<p>La proprietà di sola lettura <code><strong>Node.lastChild</strong></code> restituisce l'ultimo figlio del nodo. Se il suo genitore è un elemento, allora il bambino è generalmente un nodo di elemento, un nodo di testo o un nodo di commento. Restituisce <code>null</code> se non ci sono elementi figli.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.lastChild; +</pre> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">var tr = document.getElementById("row1"); +var corner_td = tr.lastChild; +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.lastChild")}}</p> diff --git a/files/it/web/api/node/nextsibling/index.html b/files/it/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..f2355a6402 --- /dev/null +++ b/files/it/web/api/node/nextsibling/index.html @@ -0,0 +1,101 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.nextSibling</strong></code> restituisce il nodo immediatamente successivo a quello specificato nei {{domxref("Node.childNodes","childNodes")}}, del loro genitore o restituisce <code>null</code> se il nodo specificato è l'ultimo figlio nell'elemento genitore.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling +</pre> + +<h2 id="Appunti">Appunti</h2> + +<div> +<p>I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando <a href="/it/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> o <a href="/it/docs/Web/API/Node/previousSibling" title="The Node.previousSibling read-only property returns the node immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the first in that list."><code>Node.previousSibling</code></a> può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.</p> + +<p>Vedi <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> e <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a> per maggiori informazioni.</p> +</div> + +<p>{{domxref("Element.nextElementSibling")}} può essere usato per ottenere l'elemento successivo saltando eventuali nodi di spazi vuoti, altro testo tra elementi o commenti.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:html"><div id="div-1">Here is div-1</div> +<div id="div-2">Here is div-2</div> + +<script> +var el = document.getElementById('div-1').nextSibling, + i = 1; + +console.group('Siblings of div-1:'); + +while (el) { + console.log(i, '. ', el.nodeName); + el = el.nextSibling; + i++; +} + +console.groupEnd(); +</script> + +/************************************************** + The console displays the following: + + Siblings of div-1 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + +**************************************************/ +</pre> + +<p>Nell'esempio precedente, i nodi, <code>#text</code> sono inseriti nel DOM in cui si verifica lo spazio bianco tra i tag (ad esempio dopo il tag di chiusura di un elemento e prima del tag di apertura del successivo).</p> + +<p>La possibile inclusione di nodi di testo deve essere consentita quando si attraversa il DOM utilizzando <code>nextSibling</code>. Vedi le risorse <a href="#Appunti">nella sezione Appunti</a>.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-nextsibling', 'Node.nextSibling')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-6AC54C2F', 'Node.nextSibling')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#attribute-nextSibling', 'Node.nextSibling')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.nextSibling")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Element.nextElementSibling")}}</li> +</ul> diff --git a/files/it/web/api/node/previoussibling/index.html b/files/it/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..735433da9e --- /dev/null +++ b/files/it/web/api/node/previoussibling/index.html @@ -0,0 +1,81 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La proprietà di sola lettura <code><strong>Node.previousSibling</strong></code> restituisce il nodo immediatamente precedente a quello specificato nell'elenco {{domxref("Node.childNodes", "childNodes")}} del genitore, o <code>null</code> se il nodo specificato è il primo in tale elenco.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling; +</pre> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush: html"><img id="b0"> +<img id="b1"> +<img id="b2"></pre> + +<pre class="brush:js">console.log(document.getElementById("b1").previousSibling); // <img id="b0"> +console.log(document.getElementById("b2").previousSibling.id); // "b1" +</pre> + +<h2 id="Notes" name="Notes">Appunti</h2> + +<div> +<p>I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando <a href="/it/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> o <a href="/it/docs/Web/API/Node/previousSibling" title="The Node.previousSibling read-only property returns the node immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the first in that list."><code>Node.previousSibling</code></a> può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.</p> + +<p>Vedi <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> e <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a> per maggiori informazioni.</p> +</div> + +<p>Per navigare nella direzione opposta attraverso l'elenco dei nodi secondari usa <a href="/it/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-previousSibling', 'Node.previousSibling')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#attribute-previousSibling', 'Node.previousSibling')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Node.previousSibling")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Node.nextSibling")}}</li> +</ul> diff --git a/files/it/web/api/nodelist/foreach/index.html b/files/it/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..5d8f5d0088 --- /dev/null +++ b/files/it/web/api/nodelist/foreach/index.html @@ -0,0 +1,125 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - DOM + - Iterabile + - NodeList + - Referenza + - Web + - metodo +translation_of: Web/API/NodeList/forEach +--- +<p>{{APIRef("DOM")}}</p> + +<p>Il metodo <strong><code>forEach()</code></strong> dell'interfaccia {{domxref("NodeList")}} chiama il callback fornito nel parametro una volta per ogni coppia di valori nell'elenco, in ordine di inserimento.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>NodeList.</em>forEach<em>(callback[, thisArg]);</em> +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione da eseguire per ciascun elemento, eventualmente con 3 argomenti: + <dl> + <dt><em><code>currentValue</code></em></dt> + <dd>L'elemento corrente in elaborazione nella NodeList.</dd> + <dt><code><em>currentIndex</em></code></dt> + <dd>L'indice dell'elemento corrente in fase di elaborazione nella NodeList.</dd> + <dt><em><code>listObj</code></em></dt> + <dd>La NodeList a cui viene applicato <code>forEach()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt> + <dd>Valore da utilizzare come {{jsxref("this")}} quando viene eseguito <code>callback</code>.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>{{jsxref('undefined')}}.</p> + +<h2 id="Eccezioni">Eccezioni</h2> + +<p><em>Nessuna</em>.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js;highlight:[6]">var node = document.createElement("div"); +var kid1 = document.createElement("p"); +var kid2 = document.createTextNode("hey"); +var kid3 = document.createElement("span"); + +node.appendChild(kid1); +node.appendChild(kid2); +node.appendChild(kid3); + +var list = node.childNodes; + +list.forEach( + function(currentValue, currentIndex, listObj) { + console.log(currentValue + ', ' + currentIndex + ', ' + this); + }, + 'myThisArg' +);</pre> + +<p>ritorna:</p> + +<pre>[object HTMLParagraphElement], 0, myThisArg +[object Text], 1, myThisArg +[object HTMLSpanElement], 2, myThisArg</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Questo {{Glossary("Polyfill","polyfill")}} aggiunge compatibilità a tutti i browser che supportano <a href="https://caniuse.com/#search=es5">ES5</a>:</p> + +<pre class="brush: js">if (window.NodeList && !NodeList.prototype.forEach) { + NodeList.prototype.forEach = function (callback, thisArg) { + thisArg = thisArg || window; + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } + }; +}</pre> + +<p>OPPURE</p> + +<pre class="brush: js">if (window.NodeList && !NodeList.prototype.forEach) { + NodeList.prototype.forEach = Array.prototype.forEach; +}</pre> + +<p>Il comportamento sopra riportato indica il numero di browser che implementa effettivamente NodeList.prototype.forEach (Chrome, ad esempio).</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td> + <td>{{Spec2("WebIDL")}}</td> + <td>Definisce <code>forEach</code> sulle dichiarazioni <code>iterable</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.NodeList.forEach")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/it/web/api/nodelist/index.html b/files/it/web/api/nodelist/index.html new file mode 100644 index 0000000000..4b18f62d63 --- /dev/null +++ b/files/it/web/api/nodelist/index.html @@ -0,0 +1,124 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interfaccia + - NodeList +translation_of: Web/API/NodeList +--- +<div>{{APIRef("DOM")}}</div> + +<p>Gli oggetti <strong><code>NodeList</code></strong> sono un insieme di <a href="https://developer.mozilla.org/it/docs/Glossary/Node/DOM">nodi</a>, di solito restituiti da proprietà come {{domxref("Node.childNodes")}} ed il metodo {{domxref("document.querySelectorAll()")}}.</p> + +<div class="note"> +<p>Nonostante <code>NodeList</code> non sia un <code>Array</code>, è possibile iterare su esso usando <code>forEach()</code>. Può anche essere convertito in un vero <code>Array</code> usando <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/from" title="Il metodo Array.from() crea una nuova istanza Array copiata superficialmente da un oggetto simile a un array o iterabile."><code>Array.from()</code></a>.</p> + +<p>Tuttavia, alcuni browser meno recenti non hanno implementato <code>NodeList.forEach()</code> né <code>Array.from()</code>. Questo può essere aggirato usando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} — vedi <a href="https://developer.mozilla.org/it/docs/Web/API/NodeList#Esempio">l'esempio</a> di questo documento.</p> +</div> + +<p>In alcuni casi, la <code>NodeList</code> è <em>dinamica</em>, ciò significa che i cambiamenti nel DOM si riflettono sulla collezione. Per esempio, {{domxref("Node.childNodes")}} è dinamico:</p> + +<pre class="brush: js">var parent = document.getElementById('parent'); +var child_nodes = parent.childNodes; +console.log(child_nodes.length); // assume "2" +parent.appendChild(document.createElement('div')); +console.log(child_nodes.length); // dovrebbe produrre "3" +</pre> + +<p>In altri casi, la <code>NodeList</code> è <em>statica, </em>ciò vuol dire che il contenuto della collezione non è influenzato da quelli nel DOM.<em> </em>{{domxref("document.querySelectorAll()")}} restituisce una <code>NodeList</code> statica.</p> + +<p>È bene tenere in mente questa distinzione quando si sceglie di iterare sugli elementi nella <code>NodeList</code>, ed in particolare al modo in cui si salva la lunghezza della lista.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt>{{domxref("NodeList.length")}}</dt> + <dd>Il numero dei nodi nella <code>NodeList</code>.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{domxref("NodeList.item()")}}</dt> + <dd>Restituisce un elemento nell'elenco per il suo indice, o <code>null</code> se l'indice è fuori misura.</dd> + <dd>Un'alternativa all'accesso a <code>nodeList[i]</code> (che invece restituisce <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font> quando <code>i</code> è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript.</dd> + <dt>{{domxref("NodeList.entries()")}}</dt> + <dd>Ritorna un {{jsxref("Iteration_protocols","iterator")}} che permette al codice di passare attraverso tutte le coppie chiave/valore contenute nella collezione. (In questo caso, le chiavi sono numeri che iniziano da 0 e i valori sono nodi.)</dd> + <dt>{{domxref("NodeList.forEach()")}}</dt> + <dd>Esegue una funzione fornita una volta per elemento <code>NodeList</code> passando l'elemento come argomento alla funzione.</dd> + <dt>{{domxref("NodeList.keys()")}}</dt> + <dd>Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutte le chiavi delle coppie chiave/valore contenute nella collezione. (In questo caso, i tasti sono numeri che iniziano da 0).</dd> + <dt>{{domxref("NodeList.values()")}}</dt> + <dd>Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutti i valori (nodi) delle coppie chiave/valore contenute nella collezione.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<p>È possibile iterare sugli elementi in una <code>NodeList</code> usando un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop:</p> + +<pre class="brush: js">for (var i = 0; i < myNodeList.length; i++) { + var item = myNodeList[i]; // La chiamata myNodeList.item(i) non è necessaria in JavaScript +} +</pre> + +<p><strong>Non utilizzare <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> o <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> per enumerare gli elementi nelle <code>NodeList</code></strong>, poiché enumereranno anche le proprietà <code>length</code> e <code>item</code> e causeranno errori se il tuo script presume che debba occuparsi solo di oggetti {{domxref("element")}}. Inoltre, <code>for..in</code> non garantisce la visita delle proprietà in un particolare ordine.</p> + +<p><code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> <strong>itererà</strong> sugli oggetti <code>NodeList</code> correttamente:</p> + +<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' ); +for (var item of list) { + item.checked = true; +}</pre> + +<p>I browser recenti supportano anche metodi iteratori, {{domxref("NodeList.forEach()", "forEach()")}}, come {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, e {{domxref("NodeList.keys()", "keys()")}}.</p> + +<p>Esiste anche un modo compatibile con Internet Explorer {{jsxref("Array.forEach()", "Array.prototype.forEach")}} per l'iterazione.</p> + +<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' ); +Array.prototype.forEach.call(list, function (item) { + item.checked = true; +});</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td> + <td>{{ Spec2('DOM3 Core') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td> + <td>{{ Spec2('DOM2 Core') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td> + <td>{{ Spec2('DOM1') }}</td> + <td> + <p>Definizione iniziale.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.NodeList")}}</p> diff --git a/files/it/web/api/notifiche/dir/index.html b/files/it/web/api/notifiche/dir/index.html new file mode 100644 index 0000000000..c1e16410d6 --- /dev/null +++ b/files/it/web/api/notifiche/dir/index.html @@ -0,0 +1,72 @@ +--- +title: Notification.dir +slug: Web/API/notifiche/dir +translation_of: Web/API/Notification/dir +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>La proprieta' in sola lettura <code>dir</code> dell'interfaccia {{domxref("Notification")}} indica la direzione del testo della notifica, puo' essere specificata nell'opzione <code>dir</code> del costruttore di {{domxref("Notification.Notification","Notification()")}} .</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="eval">var <em>direzione</em> = Notification.dir; +</pre> + +<h3 id="Return_Value" name="Return_Value">Valori</h3> + +<p>La {{domxref("DOMString")}} specifica la direzione el testo. I possibili valori sono:</p> + +<ul> + <li><code>auto</code>: adotta il comportamento delle impostazioni del browser (valore di default.)</li> + <li><code>ltr</code>: da sinistra a destra. ( es. |testo notifica | )</li> + <li><code>rtl</code> : da destra a sinistra.( es. | testo notifica|) </li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: La maggior parte dei browser ignora le opzioni esplicite settate e funzionano con le proprie impostazioni.</p> +</div> + +<h2 id="Esempi">Esempi</h2> + +<p>Il seguente frammento di codice crea un oggetto <code>opzioni</code>, da passare al costruttore <code>Notification()</code>.</p> + +<pre class="brush: js">var opzioni = { + body: 'Amo JavaScript!', + dir: 'rtl' +} + +var n = new Notification('Mio titolo',opzioni); + +n.dir // dovrebbe ritornare 'rtl' +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Notification.dir")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/it/web/api/notifiche/index.html b/files/it/web/api/notifiche/index.html new file mode 100644 index 0000000000..ae8300aa01 --- /dev/null +++ b/files/it/web/api/notifiche/index.html @@ -0,0 +1,495 @@ +--- +title: Notifiche +slug: Web/API/notifiche +translation_of: Web/API/Notification +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>L'interfaccia <code>Notification</code> di <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> viene usata per configurare e mostrare le notifiche desktop all'utente.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Costruttore">Costruttore</h2> + +<dl> + <dt>{{domxref("Notification.Notification", "Notification()")}}</dt> + <dd>Crea una nuova istanza dell'oggetto <code>Notification</code>.</dd> +</dl> + +<h2 id="Proprietà">Proprietà</h2> + +<h3 id="Proprietà_Static">Proprietà Static</h3> + +<p>Queste proprietà sono disponibili solo sull'oggetto <code>Notification</code> stesso.</p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>Una stringa che rappresenta l'attuale permesso per mostrare le notifiche. I possibili valori sono: <code>denied</code> (l'utente rifiuta la ricezione delle notifiche), <code>granted</code> (l'utente accetta la ricezione delle notifiche), o <code>default</code> (la scelta dell'utente è sconosciuta, quindi il browser agirà come se il valore fosse negato).</dd> +</dl> + +<h3 id="Proprietà_Instance">Proprietà Instance</h3> + +<p>Queste proprietà sono disponibili solo su istanze dell'oggetto <code>Notification</code>.</p> + +<dl> + <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt> + <dd>L'array di azioni della notifica come specificato nel parametro options del costruttore.</dd> + <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt> + <dd>L'URL dell'immagine utilizzata per rappresentare la notifica quando non c'è abbastanza spazio per visualizzare la notifica stessa.</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>La stringa del corpo della notifica come specificato nel parametro options del costruttore.</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>Restituisce un clone strutturato dei dati della notifica.</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>La direzione del testo della notifica come specificato nel parametro options del costruttore.</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>Il codice della lingua della notifica come specificato nel parametro options del costruttore.</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>L'ID della notifica (se presente) come specificato nel parametro options del costruttore.</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>L'URL dell'immagine utilizzata come icona della notifica come specificato nel parametro options del costruttore.</dd> + <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt> + <dd>L'URL di un'immagine da visualizzare come parte della notifica, come specificato nel parametro options del costruttore.</dd> + <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt> + <dd>Un {{jsxref("Boolean")}} che indica che una notifica deve rimanere attiva finché l'utente non fa click o non la chiude, anziché chiudersi automaticamente.</dd> + <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> + <dd>Specifica se la notifica deve essere silenziosa, ovvero che non emetta suoni o vibrazioni, indipendentemente dalle impostazioni del dispositivo.</dd> + <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt> + <dd>Specifica l'ora in cui viene creata o applicata una notifica (passato, presente o fututo).</dd> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>Il titolo della notifica come specificato nel primo parametro del costruttore.</dd> + <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> + <dd>Specifica un modello di vibrazione da emettere per i dispositivi con hardware di vibrazione.</dd> +</dl> + +<h4 id="Proprietà_non_supportate">Proprietà non supportate</h4> + +<p>Le seguenti proprietà sono elencate nelle specifiche più aggiornate, ma non sono ancora supportate da alcuni browser. È consigliabile controllare regolarmente per vedere se lo stato di queste proprietà viene aggiornato, e facci sapere se trovi informazioni non aggiornate.</p> + +<dl> + <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt> + <dd>Specifica se l'attivazione della notifica deve abilitare o meno lo schermo del dispositivo.</dd> + <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> + <dd>Specifica se l'utente deve essere avvisato dopo che una nuova notifica sostituisce una vecchia.</dd> + <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt> + <dd>Specifica una risorsa sonora da riprodurre quando scatta la notifica, al prosto del suono di notifica predefinito del sistema.</dd> + <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt> + <dd>Specifica se la notifica deve essere "sticky", cioè non facilmente modificabile dall'utente.</dd> +</dl> + +<h4 id="Gestori_di_eventi">Gestori di eventi</h4> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>Un gestore per l'evento {{event("click")}}. Viene attivato ogni volta che l'utente fa click sulla notifica.</dd> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>Un gestore per l'evento {{event("error")}}. Viene attivato ogni volta che la notifica incontra un errore.</dd> +</dl> + +<h4 id="Obsolete_handlers">Obsolete handlers</h4> + +<p>The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.</p> + +<dl> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<h3 id="Static_methods">Static methods</h3> + +<p>These methods are available only on the <code>Notification</code> object itself.</p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>Requests permission from the user to display notifications.</dd> +</dl> + +<h3 id="Instance_methods">Instance methods</h3> + +<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>Programmatically closes a notification.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Assume this basic HTML:</p> + +<pre class="brush: html"><button onclick="notifyMe()">Notify me!</button></pre> + +<p>It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.</p> + +<pre class="brush: js">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + alert("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have already been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== 'denied') { + Notification.requestPermission(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<p>{{EmbedLiveSample('Example', '100%', 30)}}</p> + +<p>In many cases, you don't need to be this verbose. For example, in our <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):</p> + +<pre class="brush: js">Notification.requestPermission().then(function(result) { + console.log(result); +});</pre> + +<p>Then we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p> + +<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle,options); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> + 22</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>6<sup>[3]</sup></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> + 22</td> + <td>{{CompatUnknown}}</td> + <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>silent</code></td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>noscreen</code>, <code>sticky</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sound</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>renotify</code></td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Promise-based <code>Notification.requestPermission()</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(40)}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>vibrate</code>, <code>actions</code></td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td>{{CompatOpera(39)}}</td> + <td> </td> + </tr> + <tr> + <td><code>badge</code></td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td>{{CompatOpera(39)}}</td> + <td> </td> + </tr> + <tr> + <td><code>image</code></td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td>{{CompatUnknown}}</td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>silent</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>noscreen</code>, <code>sticky</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sound</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>renotify</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Promise-based <code>Notification.requestPermission()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>vibrate</code>, <code>actions</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatOperaMobile(39)}}</td> + <td> </td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + <tr> + <td><code>badge</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatOperaMobile(39)}}</td> + <td> </td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + <tr> + <td><code>image</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td>{{CompatChrome(55.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p> + +<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p> + +<p>Before Chrome 42, service worker additions were not supported.</p> + +<p>Starting in Chrome 49, notifications do not work in incognito mode.</p> + +<p>[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p> + +<p>Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p> + +<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p> + +<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p> + +<p>When using notifications in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p> + +<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/it/web/api/parentnode/children/index.html b/files/it/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..7bedb73eed --- /dev/null +++ b/files/it/web/api/parentnode/children/index.html @@ -0,0 +1,95 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Child + - Child Nodes + - DOM + - HTMLCollection + - Node + - ParentNode + - Proprietà + - children +translation_of: Web/API/ParentNode/children +--- +<div>{{ APIRef("DOM") }}</div> + +<p><span class="seoSummary">La proprietà {{domxref("ParentNode")}} <code><strong>children</strong></code><strong> </strong>è una proprietà di sola lettura che restituisce una {{domxref("HTMLCollection")}} dinamica che contiene tutti gli {{domxref("Element","elements")}} figli del nodo su cui è stato chiamato.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre> + +<h3 id="Valore">Valore</h3> + +<p>Una {{ domxref("HTMLCollection") }} che è dimanica, raccolta ordinata degli elementi DOM che sono figli di <code>node</code>. È possibile accedere ai singoli nodi figlio nella raccolta utilizzando il metodo {{domxref("HTMLCollection.item", "item()")}} nella collezione o utilizzando la notazione in stile array JavaScript.</p> + +<p>Se il nodo non ha elementi figli, <code>children</code> è una lista vuota con una <code>length</code> di <code>0</code>.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">var foo = document.getElementById('foo'); +for (var i = 0; i < foo.children.length; i++) { + console.log(foo.children[i].tagName); +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// Sovrascrive il prototipo nativo di "children". +// Aggiunge il supporto Document e DocumentFragment per IE9 & Safari. +// Restituisce un array invece di una HTMLCollection. +;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.children == null) { + Object.defineProperty(constructor.prototype, 'children', { + get: function() { + var i = 0, node, nodes = this.childNodes, children = []; + while (node = nodes[i++]) { + if (node.nodeType === 1) { + children.push(node); + } + } + return children; + } + }); + } +})(window.Node || window.Element); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.ParentNode.children")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Le interfacce {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li> + <li> + <div class="syntaxbox">Tipi di oggetti che implementano questa interfaccia: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div> + </li> + <li> + <div class="syntaxbox">{{domxref("Node.childNodes")}}</div> + </li> +</ul> diff --git a/files/it/web/api/parentnode/firstelementchild/index.html b/files/it/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..472b7737a3 --- /dev/null +++ b/files/it/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,99 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/firstElementChild +--- +<p>{{ APIRef("DOM") }}</p> + +<p><span style="font-family: verdana,tahoma,sans-serif;">La proprietà </span><strong><code>ParentNode.firstElementChild</code></strong> <span style="font-family: verdana,tahoma,sans-serif;">di sola lettura </span>restituisce il primo figlio {{domxref("Element")}} dell'oggetto, oppure <code>null</code> se non ha elementi figli.</p> + +<div class="note"> +<p>Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, <code>firstElementChild</code> è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2> + +<pre class="syntaxbox">var <em>element</em> = node.firstElementChild; +</pre> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush: html"><ul id="foo"> + <li>First (1)</li> + <li>Second (2)</li> + <li>Third (3)</li> +</ul> + +<script> +var foo = document.getElementById('foo'); +// yields: First (1) +console.log(foo.firstElementChild.textContent); +</script> +</pre> + +<h2 id="Polyfill_per_IE8_IE9_e_Safari">Polyfill per IE8, IE9 e Safari</h2> + +<pre class="brush: js">// Overwrites native 'firstElementChild' prototype. +// Adds Document & DocumentFragment support for IE9 & Safari. +// Returns array instead of HTMLCollection. +;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.firstElementChild == null) { + Object.defineProperty(constructor.prototype, 'firstElementChild', { + get: function() { + var node, nodes = this.childNodes, i = 0; + while (node = nodes[i++]) { + if (node.nodeType === 1) { + return node; + } + } + return null; + } + }); + } +})(window.Node || window.Element); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Diviso l'interfaccia <code>ElementTraversal</code> in {{domxref("ChildNode")}} e <code>ParentNode</code>. Questo metodo è ora definito su quest'ultimo.<br> + Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Aggiunta la sua definizione iniziale all'interfaccia pura <code>ElementTraversal</code> e usarla su {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.ParentNode.firstElementChild")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Le interfacce pure {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li> + <li> + <div class="syntaxbox">Tipi di oggetti che implementano questa pura interfaccia: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/it/web/api/parentnode/index.html b/files/it/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/it/web/api/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Finding Elements + - Finding Nodes + - Interface + - Locating Elements + - Locating Nodes + - Managing Elements + - Managing Nodes + - Mixin + - NeedsTranslation + - Node + - ParentNode + - Reference + - Selectors + - TopicStub +translation_of: Web/API/ParentNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <code><strong>ParentNode</strong></code> mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children.</span> It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p> + +<p>See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> to learn how to use <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a> to find nodes or elements of interest.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> + <dd>Returns the number of children of this <code>ParentNode</code> which are elements.</dd> + <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this <code>ParentNode</code>, omitting all of its non-element nodes.</dd> + <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> + <dd>Returns the first node which is both a child of this <code>ParentNode</code> <em>and</em> is also an <code>Element</code>, or <code>null</code> if there is none.</dd> + <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> + <dd>Returns the last node which is both a child of this <code>ParentNode</code> <em>and</em> is an <code>Element</code>, or <code>null</code> if there is none.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ParentNode.querySelector()")}}</dt> + <dd>Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.</dd> + <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> + <dd>Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.</dd> +</dl> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.ParentNode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("ChildNode")}} pure interface.</li> + <li> + <div class="syntaxbox">Object types implementing this mixin: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/it/web/api/parentnode/lastelementchild/index.html b/files/it/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..006a3a316d --- /dev/null +++ b/files/it/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,98 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/lastElementChild +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La proprietà <strong><code>ParentNode.LastElementChild</code></strong> di sola lettura restituisce l'ultimo figlio <a href="https://developer.mozilla.org/it/docs/Web/API/Element" title="Element è la classe base più generale da cui ereditano tutti gli oggetti in un Document. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da Element."><code>Element</code></a> dell'oggetto, oppure <code>null</code> se non ha elementi figli.</p> + +<div class="note"> +<p>Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, <code>lastElementChild</code> è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2> + +<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush: html"><ul id="foo"> + <li>First (1)</li> + <li>Second (2)</li> + <li>Third (3)</li> +</ul> + +<script> +var foo = document.getElementById('foo'); +// yields: Third (3) +console.log(foo.lastElementChild.textContent); +</script> +</pre> + +<h2 id="Polyfill_per_IE8_IE9_e_Safari">Polyfill per IE8, IE9 e Safari</h2> + +<pre class="brush: js">// Overwrites native 'lastElementChild' prototype. +// Adds Document & DocumentFragment support for IE9 & Safari. +// Returns array instead of HTMLCollection. +;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.lastElementChild == null) { + Object.defineProperty(constructor.prototype, 'lastElementChild', { + get: function() { + var node, nodes = this.childNodes, i = nodes.length - 1; + while (node = nodes[i--]) { + if (node.nodeType === 1) { + return node; + } + } + return null; + } + }); + } +})(window.Node || window.Element); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Diviso l'interfaccia <code>ElementTraversal</code> in {{domxref("ChildNode")}} e <code>ParentNode</code>. Questo metodo è ora definito su quest'ultimo.<br> + Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Aggiunta la sua definizione iniziale all'interfaccia pura <code>ElementTraversal</code> e usarla su {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.ParentNode.firstElementChild")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Le interfacce pure {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li> + <li> + <div class="syntaxbox">Tipi di oggetti che implementano questa pura interfaccia: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/it/web/api/performance/index.html b/files/it/web/api/performance/index.html new file mode 100644 index 0000000000..fde24fddb4 --- /dev/null +++ b/files/it/web/api/performance/index.html @@ -0,0 +1,135 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interface + - Misurazione delle performance + - Performance + - Reference + - Web Performance +translation_of: Web/API/Performance +--- +<div>{{APIRef("High Resolution Time")}}</div> + +<p> <br> + L'interaccia <strong><code>Performance</code> </strong>fornisce l'accesso alle informazioni relative alle performance della pagina corrente. Fa parte delle High Resolution Time API, ma viene migliorata tramite le <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline API</a>, le <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, le <a href="/en-US/docs/Web/API/User_Timing_API">User Timing API</a> e le <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>.</p> + +<p>Un oggetto di questo tipo può essere ottenuto chiamando {{domxref("Window.performance")}} in sola lettura.</p> + +<div class="note"> +<p><strong><em>Nota</em>: </strong>Questa interfaccia ed i suoi metodi sono disponibili nei <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, ad eccezione di dove diversamente indicato nella guida sottostante.<br> + Da notare inoltre che i markers delle peformance e le misurazioni sono relative al contesto. Se crei un marker sul thread principale (o su un altro worker), non potrai vederlo in un thread del worker e viceversa.</p> +</div> + +<h2 id="Proprietà">Proprietà</h2> + +<p><em>L'interfaccia <code>Performance</code> non eredita nessuna proprietà.</em></p> + +<dl> + <dt>{{deprecated_inline}} {{domxref("Performance.navigation")}} {{readonlyInline}}</dt> + <dd>{{domxref("PerformanceNavigation")}} è un oggetto che fornisce un utile contesto sulle operazioni incluse nella lista <code>timing</code>, sia che la pagina venga caricata o ricaricata, quante occorrenze di redirect sono presenti e così via. Not available in workers.</dd> + <dt>{{deprecated_inline}} {{domxref("Performance.timing")}} {{readonlyInline}}</dt> + <dd>L'oggetto {{domxref("PerformanceTiming")}} contiene le informazioni relative alla latenza delle performance. Not available in workers.</dd> + <dt>{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}</dt> + <dd>Estensione <em>non-standard</em> aggiunta in Chrome, questa proprietà fornisce un oggetto con l'utilizzo della memoria di base. <strong>Non dovresti</strong> usare questa API <em>non-stanrdard</em>.</dd> + <dt>{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}</dt> + <dd>Restituisce il timestamp preciso del momento in cui si è iniziato a misurare le performance.</dd> +</dl> + +<dl> + <dt> + <h3 id="Event_handlers">Event handlers</h3> + </dt> + <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt> + <dd>Un {{domxref("EventTarget")}} che funge da callback e che viene eseguito quando viene scatenato l'evento {{event("resourcetimingbufferfull")}}</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<p><em><em>L'interfaccia <code>Performance</code> non eredita nessun metodo.</em></em></p> + +<dl> + <dt>{{domxref("Performance.clearMarks()")}}</dt> + <dd>Rimuove il <em>segnaposto</em> specificato dal buffer delle performance del browser.</dd> + <dt>{{domxref("Performance.clearMeasures()")}}</dt> + <dd>Rimuove la <em>misurazione</em> specificata dal buffer delle performance del browser.</dd> + <dt>{{domxref("Performance.clearResourceTimings()")}}</dt> + <dd>Rimuove tutte le {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entryType")}} di <code>resource</code> dal data buffer delle performance del browser.</dd> + <dt>{{domxref("Performance.getEntries()")}}</dt> + <dd>Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}} basati sul filtro specificato.</dd> + <dt>{{domxref("Performance.getEntriesByName()")}}</dt> + <dd>Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}} secondo il <em>nome</em> specificato ed il tipo di<em>voce specificata.</em></dd> + <dt>{{domxref("Performance.getEntriesByType()")}}</dt> + <dd>Restituisce una list di oggetti {{domxref("PerformanceEntry")}} relativi alla <em>voce</em> specificata</dd> + <dt>{{domxref("Performance.mark()")}}</dt> + <dd>Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance usando il nome specificato.</dd> + <dt>{{domxref("Performance.measure()")}}</dt> + <dd>Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance del browser tra due <em>segnaposti (indicati rispettivamente come start mark ed end mark)</em></dd> + <dt>{{domxref("Performance.now()")}}</dt> + <dd>Restituisce un {{domxref("DOMHighResTimeStamp")}} ceh rappresenta il numero in millisecondi trascorso dall'istante preso come riferimento.</dd> + <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt> + <dd>Imposta la dimensione del buffer del browser relativo alla temporizzazione in un numero specificato di oggetti {{domxref("PerformanceEntry","performance entry")}} "<code>resource</code>" {{domxref("PerformanceEntry.entryType","type")}}</dd> + <dt>{{domxref("Performance.toJSON()")}}</dt> + <dd>Restituisce un oggetto json che rappresenta l'oggetto <code>Performance</code></dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('Highres Time Level 3', '#dom-performance-timeorigin','timeOrigin')}}</td> + <td>{{Spec2('Highres Time Level 3')}}</td> + <td>Definisce la proprietà <code>timeOrigin</code> </td> + </tr> + <tr> + <td>{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + <td>Definisce il metodo <code>toJson()</code> .</td> + </tr> + <tr> + <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Definisce il metodo <code>now()</code> .</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Cambia l'interfaccia <code>getEntries()</code> .</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Definisce i metodi <code>getEntries()</code>, <code>getEntriesByType()</code> e <code>getEntriesByName()</code> .</td> + </tr> + <tr> + <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Definisce i metodi <code>clearResourceTimings()</code> e <code>setResourceTimingBufferSize()</code> e la proprietà <code>onresourcetimingbufferfull</code> .</td> + </tr> + <tr> + <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td>Spiega i metodi <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> e <code>clearMeasure()</code> .</td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Definisce i metodi <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> e <code>clearMeasure()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.Performance")}}</p> +</div> diff --git a/files/it/web/api/performance/now/index.html b/files/it/web/api/performance/now/index.html new file mode 100644 index 0000000000..2331157f18 --- /dev/null +++ b/files/it/web/api/performance/now/index.html @@ -0,0 +1,104 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Performance + - Prestazioni + - Reference + - Riferimento + - Web Performance API + - metodo +translation_of: Web/API/Performance/now +--- +<div>{{APIRef("High Resolution Timing")}}</div> + +<p>Il metodo <code><strong>performance.now()</strong></code> restituisce un {{domxref("DOMHighResTimeStamp")}}, misurato in millisecondi.</p> + +<div class="warning"> +<p>The timestamp is not actually high-resolution. To mitigate security threats such as <a href="https://spectreattack.com/">Spectre</a>, browsers currently round the results to varying degrees. (Firefox started rounding to 1 millisecond in Firefox 60.) Some browsers may also slightly randomize the timestamp. The precision may improve again in future releases; browser developers are still investigating these timing attacks and how best to mitigate them.</p> +</div> + +<p>{{AvailableInWorkers}}</p> + +<p>Il valore restituito rappresenta il tempo trascorso dal <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a>.</p> + +<p>Tieni a mente i seguenti punti:</p> + +<ul> + <li>Negli workers dedicati creati da un contesto {{domxref("Window")}}, il valore nel worker sarà minore di <code>performance.now()</code> nella finestra che ha creato quel worker. Prima era lo stesso di <code>t0</code> nel contesto principale, ma è stato cambiato</li> + <li>Negli workers condivisi o di servizio, til valore nel worker potrebbe essere più alto di quello del contesto principale, perché quella finestra può essere creata dopo quegli workers.</li> +</ul> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>t</em> = performance.now();</pre> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">var t0 = performance.now(); +doSomething(); +var t1 = performance.now(); +console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); +</pre> + +<p>A differenza di altri timing data disponibili con JavaScript (per esempio <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), i timestamps restituiti da <code>Performance.now()</code> non sono limitati a una risoluzione di un millisecondo. Invece, rappresentano il tempo come numeri a virgola mobile con una precisione che può arrivare a un microsecondo.</p> + +<p>Inolre, a differenza di <code>Date.now()</code>, il valore restituito da <code>Performance.now()</code> aumenta sempre con costanza, indipendentemente dal clock di sistema (che può essere regolato manualmente o distorto da software come NTP). Altrimenti, <code>performance.timing.navigationStart + performance.now()</code> sarà approssimativamente uguale a <code>Date.now()</code>.</p> + +<h2 id="Reduced_time_precision">Reduced time precision</h2> + +<p>To offer protection against timing attacks and fingerprinting, the precision of <code>performance.now()</code> might get rounded depending on browser settings.<br> + In Firefox, the <code>privacy.reduceTimerPrecision</code> preference is enabled by default and defaults to 1ms.</p> + +<pre class="brush: js">// reduced time precision (1ms) in Firefox 60 +performance.now(); +// 8781416 +// 8781815 +// 8782206 +// ... + + +// reduced time precision with `privacy.resistFingerprinting` enabled +performance.now(); +// 8865400 +// 8866200 +// 8866700 +// ... +</pre> + +<p>In Firefox, you can also enable <code>privacy.resistFingerprinting</code> — this changes the precision to 100ms or the value of <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, whichever is larger.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + <td>Stricter definitions of interfaces and types.</td> + </tr> + <tr> + <td>{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Performance.now")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>from HTML5 Rocks.</li> +</ul> diff --git a/files/it/web/api/range/clonecontents/index.html b/files/it/web/api/range/clonecontents/index.html new file mode 100644 index 0000000000..48d1bc09b9 --- /dev/null +++ b/files/it/web/api/range/clonecontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.cloneContents +slug: Web/API/Range/cloneContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/cloneContents +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce un frammento del documento copiando i nodi di un Range.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval">frammento = range.cloneContents(); +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +frammento = range.cloneContents(); +document.body.appendChild(frammento); +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Gli Event Listener aggiunti utilizzando gli Event del DOM non vengono copiati durante la clonazione. Gli attributi-evento di HTML vengono duplicati allo stesso modo in cui li copia il metodo clonNode. Anche gli attributi HTML "id" vengono clonati, il che può portare a rendere il documento non valido.</p> +<p>I nodi parzialmente selezionati includono i tag padri necessari perché il frammento di documento sia valido.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-cloneContents">cloneContents</a></p> diff --git a/files/it/web/api/range/clonerange/index.html b/files/it/web/api/range/clonerange/index.html new file mode 100644 index 0000000000..ba8c0076b3 --- /dev/null +++ b/files/it/web/api/range/clonerange/index.html @@ -0,0 +1,28 @@ +--- +title: range.cloneRange +slug: Web/API/Range/cloneRange +translation_of: Web/API/Range/cloneRange +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce un oggetto Range con i punti d'inizio e di fine identici a quelli del Range attuale.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">clone = range.cloneRange(); +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +clone = range.cloneRange(); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il Range viene copiato per valore, non per referenza, quindi una modifica su uno dei due oggetti non avrà effetti sull'altro.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-clone">cloneRange</a></p> diff --git a/files/it/web/api/range/collapse/index.html b/files/it/web/api/range/collapse/index.html new file mode 100644 index 0000000000..f976cfeca6 --- /dev/null +++ b/files/it/web/api/range/collapse/index.html @@ -0,0 +1,36 @@ +--- +title: range.collapse +slug: Web/API/Range/collapse +translation_of: Web/API/Range/collapse +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Collassa il range tra i suoi due estremi.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.collapse(toStart); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>toStart </dt> + <dd>Un booleano, true collassa il Range al suo punto iniziale, False lo collassa alla fine.</dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +referenceNode = document.getElementsByTagName("div").item(0); +range.selectNode(referenceNode); +range.collapse(true); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Un Range collassato è vuoto, non ha alcun contenuto, specifica un singolo punto nell'albero del DOM. Per determinare se un Range è già collassato, si veda la proprietà <a href="it/DOM/range.collapsed">collapsed</a>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-collapse">collapse</a></p> diff --git a/files/it/web/api/range/collapsed/index.html b/files/it/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..3d06ee5385 --- /dev/null +++ b/files/it/web/api/range/collapsed/index.html @@ -0,0 +1,33 @@ +--- +title: range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce un booleano che indica se i punti d'inizio e di fine sono nella stessa posizione.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">isCollapsed = range.collapsed; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +isCollapsed = range.collapsed; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Restituisce il valore booleano true se l'inizio e la fine del Range sono lo stesso punto nel DOM, altrimenti restituisce false.</p> + +<p>Un Range collapsed è vuoto, non ha alcun contenuto, rappresenta un singolo punto nell'albero del DOM. Per collassare un Range, si veda il metodo <a href="it/DOM/range.collapse"> collapse</a>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-collapsed">collapsed</a></p> + +<p>{{ languages( { "ja": "ja/DOM/range.collapsed" } ) }}</p> diff --git a/files/it/web/api/range/commonancestorcontainer/index.html b/files/it/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..9f4cbec910 --- /dev/null +++ b/files/it/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,31 @@ +--- +title: range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce il nodo più interno che contiene i nodi <a href="it/DOM/range.startContainer"> startContainer</a> e <a href="it/DOM/range.endContainer"> endContainer</a>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">rangeAncestor = range.commonAncestorContainer; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +rangeAncestor = range.commonAncestorContainer; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Restituisce il nodo che si trova più in profondità, o più in basso nell'albero del DOM, che contiene entrambi i nodi <a href="it/DOM/range.startContainer"> startContainer</a> e <a href="it/DOM/range.endContainer"> endContainer</a>. Siccome Range non deve necessariamente essere contiguo e potrebbe anche selezionare solo in parte alcuni nodi, questo è un modo conveniente per trovare un nodo che racchiuda completamente il Range.</p> + +<p>Questa proprietà è di sola lettura. Per cambiare il più profondo contenitore di un nodo, si consideri la possibilità di utilizzare i vari metodi per impostare le posizioni iniziali e finali di un Range.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-commonParent">commonAncestorContainer</a></p> diff --git a/files/it/web/api/range/compareboundarypoints/index.html b/files/it/web/api/range/compareboundarypoints/index.html new file mode 100644 index 0000000000..f815fd019b --- /dev/null +++ b/files/it/web/api/range/compareboundarypoints/index.html @@ -0,0 +1,54 @@ +--- +title: range.compareBoundaryPoints +slug: Web/API/Range/compareBoundaryPoints +translation_of: Web/API/Range/compareBoundaryPoints +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Compara i punti estremi di due <code>Range</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>compara</i> = +<i>range</i>.compareBoundaryPoints( +<i>come</i>, +<i>rangeSorgente</i>); +</pre> + +<dl> + <dt>compara </dt> + <dd>Un numero che vale 1, 0, o -1, che indica se un punto estremo di + <i>range</i> + è rispettivamente prima, nella stessa posizione o dopo il corrispondente punto estremo di <code>rangeSorgente</code>.</dd> + <dt>come </dt> + <dd>Una costante che indica la modalità di comparazione, i possibili valori sono descritti sotto.</dd> + <dt>rangeSorgente </dt> + <dd>Un range con cui effettuare la comparazione</dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">var range, rangeSorgente, compara; +range = document.createRange(); +range.selectNode(document.getElementsByTagName("div")[0]); +rangeSorgente = document.createRange(); +rangeSorgente.selectNode(document.getElementsByTagName("div")[1]); +compara = range.compareBoundaryPoints(START_TO_END, rangeSorgente); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il parametro + <i>come</i> + può assumere i seguenti valori:</p> + +<ul> + <li><code>Range.END_TO_END</code> compara l'estremo finale di <code>rangeSorgente</code> con il punto finale di <code>range</code>.</li> + <li><code>Range.END_TO_START</code> compara il punto finale di <code>rangeSorgente</code> con il punto iniziale di <code>range</code>.</li> + <li><code>Range.START_TO_END</code> compara il punto iniziale di <code>rangeSorgente</code> con il punto finale di <code>range</code>.</li> + <li><code>Range.START_TO_START</code> compara il punto iniziale di <code>rangeSorgente</code> con il punto iniziale di <code>range</code>.</li> +</ul> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-compareBoundaryPoints">DOM Level 2 Traversal: compareBoundaryPoints</a></p> diff --git a/files/it/web/api/range/comparepoint/index.html b/files/it/web/api/range/comparepoint/index.html new file mode 100644 index 0000000000..2d3356b532 --- /dev/null +++ b/files/it/web/api/range/comparepoint/index.html @@ -0,0 +1,37 @@ +--- +title: range.comparePoint +slug: Web/API/Range/comparePoint +translation_of: Web/API/Range/comparePoint +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce -1 se <code>nodo</code> si trova prima del <code>range</code>, 0 se si trova nello stesso punto, 1 se si trova dopo.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">int = range.comparePoint( nodo, offset ) +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>nodo </dt> + <dd>Il <code>node</code> da comparare con <code>range</code></dd> + <dt>offset </dt> + <dd>Un intero maggiore o uguale a zero che rappresenta la distanza dall'inizio del <code>nodo</code></dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +valore = range.comparePoint(document.getElementsByTagName("p").item(0),1); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Se il <code>nodo</code> è di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora l'<code>offset</code> è il numero di caratteri dall'inizio del <code>nodo</code>. Per tutti gli altri tipi di nodo, <code>offset</offset> rappresenta il numero dei nodi figlio dall'inizio di <code>nodo</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/range/createcontextualfragment/index.html b/files/it/web/api/range/createcontextualfragment/index.html new file mode 100644 index 0000000000..f56354ddc4 --- /dev/null +++ b/files/it/web/api/range/createcontextualfragment/index.html @@ -0,0 +1,37 @@ +--- +title: range.createContextualFragment +slug: Web/API/Range/createContextualFragment +translation_of: Web/API/Range/createContextualFragment +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce un frammento di documento.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">frammento = range.createContextualFragment( tag ) +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>tag </dt> + <dd>stringa che contiene del testo da convertire in un frammento di documento</dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">var tag = "<div>Ciao, sono un nodo!</div>"; +var range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +var frammento = range.createContextualFragment(tag); +document.body.appendChild(frammento); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Questo metodo accetta una stringa e utilizza l'interprete di Mozilla per convertirla in un ramo (o un singolo nodo) del DOM.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/range/deletecontents/index.html b/files/it/web/api/range/deletecontents/index.html new file mode 100644 index 0000000000..25ade9f3ca --- /dev/null +++ b/files/it/web/api/range/deletecontents/index.html @@ -0,0 +1,25 @@ +--- +title: range.deleteContents +slug: Web/API/Range/deleteContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/deleteContents +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Rimuove i contenuti di un Range dal documento.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval">range.deleteContents() +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +range.deleteContents(); +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Diversamente dal metodo extractContents, deleteContents non restituisce un frammento di documento contenente il contenuto cancellato.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-deleteContents">deleteContents</a></p> diff --git a/files/it/web/api/range/detach/index.html b/files/it/web/api/range/detach/index.html new file mode 100644 index 0000000000..be4f1de75d --- /dev/null +++ b/files/it/web/api/range/detach/index.html @@ -0,0 +1,28 @@ +--- +title: range.detach +slug: Web/API/Range/detach +translation_of: Web/API/Range/detach +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Rilascia un Range in uso, per liberare memoria.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.detach(); +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +range.detach(); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Permette a Mozilla di rilasciare le risorse associate a questo Range. Successivi tentativi di usare il range rilasciato causeranno una DOMException lanciata con un codice di errore INVALID_STATE_ERR.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-detach">detach</a></p> diff --git a/files/it/web/api/range/endcontainer/index.html b/files/it/web/api/range/endcontainer/index.html new file mode 100644 index 0000000000..b727827a32 --- /dev/null +++ b/files/it/web/api/range/endcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.endContainer +slug: Web/API/Range/endContainer +translation_of: Web/API/Range/endContainer +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce il nodo dentro il quale termina il Range.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">endRangeNode = range.endContainer; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +endRangeNode = range.endContainer; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Restituisce una referenza al Nodo del documento dentro il quale termina il Range. Questa proprietà è di sola lettura. Per modificare la posizione finale di un nodo, si può utilizzare il metodo <a href="it/DOM/range.setEnd"> setEnd</a> o un altro metodo simile.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-endParent">endContainer</a></p> diff --git a/files/it/web/api/range/endoffset/index.html b/files/it/web/api/range/endoffset/index.html new file mode 100644 index 0000000000..0d4556ef6f --- /dev/null +++ b/files/it/web/api/range/endoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.endOffset +slug: Web/API/Range/endOffset +translation_of: Web/API/Range/endOffset +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce un numero che rappresenta dove termina il Range, all'interno di <a href="it/DOM/range.endContainer"> endContainer</a>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">endRangeOffset = range.endOffset; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +endRangeOffset = range.endOffset; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p><code>endOffset</code> ha due significati. Se <code>endContainer</code> è un <code>Node</code> di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora l'offset è il numero di caratteri dall'inizio di <code>endContainer</code> alla fine del Range. Per altri tipi di <code>Node</code>, <code>endOffset</code> è il numero dei nodi figli tra l'inizio di endContainer e la fine del Range. Questa proprietà è di sola lettura. Per cambiare l'<code>endOffset</code> del Range, è possibile utilizzare uno dei metodi setEnd.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-endOffset">endOffset</a></p> diff --git a/files/it/web/api/range/extractcontents/index.html b/files/it/web/api/range/extractcontents/index.html new file mode 100644 index 0000000000..9c2cc50586 --- /dev/null +++ b/files/it/web/api/range/extractcontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.extractContents +slug: Web/API/Range/extractContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/extractContents +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Sposta i contenuti di un Range da un ramo del documento ad un altro ramo del documento.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval">frammento = range.extractContents(); +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +frammento = range.extractContents(); +document.body.appendChild(frammento); +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Gli Event Listener creati utilizzando gli eventi DOM non vengono conservati durante l'estrazione. Gli attributi-evento di HTML non vengono conservati nè duplicati. Gli attributi HTML "id" vengono clonati, il che può portare a rendere invalido un documento se il nodo parzialmente selezionato è estratto ed aggiunto in un altro punto del documento.</p> +<p>I nodi parzialmente selezionati vengono clonati per includere i tag padri necessari perché il frammento del documento sia valido.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-extractContents">extractContents</a></p> diff --git a/files/it/web/api/range/index.html b/files/it/web/api/range/index.html new file mode 100644 index 0000000000..9ff0663ee0 --- /dev/null +++ b/files/it/web/api/range/index.html @@ -0,0 +1,150 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Range +--- +<p>{{ ApiRef() }}</p> +<h3 id="Introduzione" name="Introduzione">Introduzione</h3> +<p>L'oggetto <code>Range</code> rappresenta una parte di un documento, che può contenere nodi e parti di nodi testuali del documento dato.</p> +<p>Un range può essere creato usando il metodo <code><a href="it/DOM/document.createRange">createRange</a></code> dell'oggetto <code><a href="it/DOM/document">document</a></code>. Gli oggetti Range possono essere ottenuti anche usando il metodo <code><a href="it/DOM/Selection/getRangeAt">getRangeAt</a></code> dell'oggetto <code><a href="it/DOM/Selection">selection</a></code>.</p> +<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3> +<dl> + <dt> + <a href="it/DOM/range.collapsed">collapsed</a></dt> + <dd> + Restituisce un booleano che indica se i punti d'inizio e di fine del range sono nella stessa posizione.</dd> + <dt> + <a href="it/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt> + <dd> + Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.</dd> + <dt> + <a href="it/DOM/range.endContainer">endContainer</a></dt> + <dd> + Restituisce il nodo nel quale il Range finisce.</dd> + <dt> + <a href="it/DOM/range.endOffset">endOffset</a></dt> + <dd> + Restituisce un numero che rappresenta il punto preciso in cui il Range finisce, all'interno di endContainer.</dd> + <dt> + <a href="it/DOM/range.startContainer">startContainer</a></dt> + <dd> + Restituisce il nodo nel quale il Range inizia.</dd> + <dt> + <a href="it/DOM/range.startOffset">startOffset</a></dt> + <dd> + Restituisce un numero che rappresenta il punto preciso in cui il Range inizia, all'interno di startContainer.</dd> +</dl> +<h3 id="Metodi" name="Metodi">Metodi</h3> +<h4 id="Metodi_di_posizionamento" name="Metodi_di_posizionamento">Metodi di posizionamento</h4> +<p>Questi metodi impostano i punti di inizio e di fine di un range.</p> +<dl> + <dt> + <a href="it/DOM/range.setStart">setStart</a></dt> + <dd> + Imposta la posizione iniziale di un Range.</dd> + <dt> + <a href="it/DOM/range.setEnd">setEnd</a></dt> + <dd> + Setta la posizione finale di un Range.</dd> + <dt> + <a href="it/DOM/range.setStartBefore">setStartBefore</a></dt> + <dd> + Setta la posizione iniziale di un Range nel nodo precedente a quello indicato.</dd> + <dt> + <a href="it/DOM/range.setStartAfter">setStartAfter</a></dt> + <dd> + Setta la posizione iniziale di un Range nel nodo successivo a quello indicato.</dd> + <dt> + <a href="it/DOM/range.setEndBefore">setEndBefore</a></dt> + <dd> + Setta la posizione finale di un Range nel nodo precedente a quello indicato.</dd> + <dt> + <a href="it/DOM/range.setEndAfter">setEndAfter</a></dt> + <dd> + Setta la posizione finale di un Range nel nodo successivo a quello indicato.</dd> + <dt> + <a href="it/DOM/range.selectNode">selectNode</a></dt> + <dd> + Inserisce all'interno di un Range uno specifico nodo e il suo contenuto.</dd> + <dt> + <a href="it/DOM/range.selectNodeContents">selectNodeContents</a></dt> + <dd> + Inserisce all'interno di un Range esclusivamente il contenuto di uno specifico nodo.</dd> + <dt> + <a href="it/DOM/range.collapse">collapse</a></dt> + <dd> + Collassa un Range in uno dei punti estremi.</dd> +</dl> +<h4 id="Metodi_per_modificare_un_Range" name="Metodi_per_modificare_un_Range">Metodi per modificare un Range</h4> +<p>Questi metodi prendono i nodi da un range e ne modificano i contenuti.</p> +<dl> + <dt> + <a href="it/DOM/range.cloneContents">cloneContents</a></dt> + <dd> + Restituisce un frammento di documento copiando i nodi da un Range.</dd> + <dt> + <a href="it/DOM/range.deleteContents">deleteContents</a></dt> + <dd> + Rimuove dal documento i contenuti di un Range.</dd> + <dt> + <a href="it/DOM/range.extractContents">extractContents</a></dt> + <dd> + Muove i contenuti di un Range dall'albero del documento in un frammento del documento.</dd> + <dt> + <a href="it/DOM/range.insertNode">insertNode</a></dt> + <dd> + Inserisce un nodo all'inizio di un Range.</dd> + <dt> + <a href="it/DOM/range.surroundContents">surroundContents</a></dt> + <dd> + Muove il contenuto di un Range in un nuovo nodo.</dd> +</dl> +<h4 id="Altri_metodi" name="Altri_metodi">Altri metodi</h4> +<dl> + <dt> + <a href="it/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a></dt> + <dd> + Compara i punti estremi di due Range.</dd> + <dt> + <a href="it/DOM/range.cloneRange">cloneRange</a></dt> + <dd> + Restituisce un oggetto Range con i punti estremi identici al Range clonato.</dd> + <dt> + <a href="it/DOM/range.detach">detach</a></dt> + <dd> + Rilascia un Range dall'uso, per migliorare le performance.</dd> + <dt> + <a href="it/DOM/range.toString">toString</a></dt> + <dd> + Restituisce il testo di un Range.</dd> +</dl> +<h4 id="Metodi_proprietari_di_Gecko" name="Metodi_proprietari_di_Gecko">Metodi proprietari di Gecko</h4> +<p>Questa sezione descrive metodi di Range implementati in Gecko ma che non fanno parte delle specifiche DOM del W3C.</p> +<dl> + <dt> + <a href="it/DOM/range.compareNode">compareNode</a> (obsoleto)</dt> + <dd> + Restituisce una costante che rappresenta se il nodo viene prima, dopo o dentro il Range.</dd> + <dt> + <a href="it/DOM/range.comparePoint">comparePoint</a></dt> + <dd> + Restituisce -1, 0, o 1 per indicare se il punto viene prima, dentro o dopo il range.</dd> + <dt> + <a href="it/DOM/range.createContextualFragment">createContextualFragment</a></dt> + <dd> + Restituisce un frammento di documento creato a partire da una data stringa di codice.</dd> + <dt> + <a href="it/DOM/range.intersectsNode">intersectsNode</a> (obsoleto)</dt> + <dd> + Restituisce un booleano che indica se il nodo dato interseca il range.</dd> + <dt> + <a href="it/DOM/range.isPointInRange">isPointInRange</a></dt> + <dd> + Restituisce un booleano che indica se il punto dato è interno al range.</dd> +</dl> diff --git a/files/it/web/api/range/insertnode/index.html b/files/it/web/api/range/insertnode/index.html new file mode 100644 index 0000000000..6abfe0f295 --- /dev/null +++ b/files/it/web/api/range/insertnode/index.html @@ -0,0 +1,38 @@ +--- +title: range.insertNode +slug: Web/API/Range/insertNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/insertNode +--- +<div> + {{APIRef}}</div> +<div> + </div> +<p><span style="font-size: 1.71428571428571rem; letter-spacing: -0.5px; line-height: 24px;">Sommario</span></p> +<p>Inserisce un nodo all'inizio di un range.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval">range.insertNode(nuovoNodo); +</pre> +<h3 id="Parameters" name="Parameters">Parameters</h3> +<dl> + <dt> + nuovoNodo </dt> + <dd> + è un oggetto <code>node</code>.</dd> +</dl> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">range = document.createRange(); +nuovoNodo = document.createElement("p"); +nuovoNodo.appendChild(document.createTextNode("Un nuovo nodo viene inserito qui")); +range.selectNode(document.getElementsByTagName("div").item(0)); +range.insertNode(nuovoNodo); +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>nuovoNodo viene inserito al punto iniziale del Range. Se nuovoNodo deve essere aggiunto a un nodo testo, quel nodo viene diviso al punto dell'inserimento e l'aggiunta avviene tra il due nodi testo risultanti (si veda però il bug <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=135922" rel="freelink">http://bugzilla.mozilla.org/show_bug.cgi?id=135922</a> ).</p> +<p>Se nuovoNodo è un frammento di documento, i figli del frammento vengono inseriti al suo posto.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-insertNode">insertNode</a></p> diff --git a/files/it/web/api/range/ispointinrange/index.html b/files/it/web/api/range/ispointinrange/index.html new file mode 100644 index 0000000000..86c7e3ec43 --- /dev/null +++ b/files/it/web/api/range/ispointinrange/index.html @@ -0,0 +1,31 @@ +--- +title: range.isPointInRange +slug: Web/API/Range/isPointInRange +translation_of: Web/API/Range/isPointInRange +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce un valore booleano che indica se il punto passato si trova all'interno del <code>range</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">bool = range.isPointInRange( nodo ) +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>nodo </dt> + <dd>Il <code>Node</code> da comparare con il <code>Range</code>.</dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +bool = range.isPointInRange(document.getElementsByTagName("p").item(0),1); +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di alcun standard.</p> diff --git a/files/it/web/api/range/selectnode/index.html b/files/it/web/api/range/selectnode/index.html new file mode 100644 index 0000000000..2b08e16731 --- /dev/null +++ b/files/it/web/api/range/selectnode/index.html @@ -0,0 +1,35 @@ +--- +title: range.selectNode +slug: Web/API/Range/selectNode +translation_of: Web/API/Range/selectNode +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta il <code>Range</code> in modo tale che contenga un nodo e tutti i suoi elementi.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.selectNode(referenceNode); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>referenceNode </dt> + <dd>Il <code>Node</code> da selezionare dentro un <code>Range</code></dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +referenceNode = document.getElementsByTagName("div").item(0); +range.selectNode(referenceNode); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il <code>Node</code> padre dell'inizio e della fine del <code>Range</code> sarà lo stesso del padre del <code>referenceNode</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-selectNode">selectNode</a></p> diff --git a/files/it/web/api/range/selectnodecontents/index.html b/files/it/web/api/range/selectnodecontents/index.html new file mode 100644 index 0000000000..e558cf5982 --- /dev/null +++ b/files/it/web/api/range/selectnodecontents/index.html @@ -0,0 +1,37 @@ +--- +title: range.selectNodeContents +slug: Web/API/Range/selectNodeContents +translation_of: Web/API/Range/selectNodeContents +--- +<h3 id="Sommario" name="Sommario"> </h3> + +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta il <code>Range</code> perchè contenga il contenuti di un dato <code>Node</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.selectNodeContents(referenceNode); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>referenceNode </dt> + <dd>Il <code>Node</code> i cui contenuti devono essere selezionati dentro il <code>Range</code></dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +referenceNode = document.getElementsByTagName("div").item(0); +range.selectNodeContents(referenceNode); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il <code>Node</code> padre dell'inizio e della fine del <code>Range</code> sarà <code>referenceNode</code>. <code>startOffset</code> è 0 e <code>endOffset</code> è il numero dei <code>Node</code> figli o il numero dei caratteri contenuti nel <code>referenceNode</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-selectNodeContents">selectNodeContents</a></p> diff --git a/files/it/web/api/range/setend/index.html b/files/it/web/api/range/setend/index.html new file mode 100644 index 0000000000..02754fbedb --- /dev/null +++ b/files/it/web/api/range/setend/index.html @@ -0,0 +1,38 @@ +--- +title: range.setEnd +slug: Web/API/Range/setEnd +translation_of: Web/API/Range/setEnd +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta la posizione finale di un <code>Range</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.setEnd(endNode,endOffset); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>endNode </dt> + <dd>Il <code>Node</code> che termina il <code>Range</code></dd> + <dt>endOffset </dt> + <dd>Un intero maggiore o uguale a zero che rappresenta la distanza della fine del <code>Range</code> dall'inizio di <code>endNode</code>.</dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +endNode = document.getElementsByTagName("p").item(3); +endOffset = document.getElementsByTagName("p").item(3).childNodes.length; +range.setEnd(endNode,endOffset); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Se l'<code>endNode</code> è un <code>Node</code> di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora <code>endOffset</code> è il numero di caratteri dall'inizio di <code>endNode</code>. Per altri tipi di <code>Node</code>, <code>endOffset</code> è il numero dei nodi figlio dall'inizio di <code>endNode</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-setEnd">setEnd</a></p> diff --git a/files/it/web/api/range/setendafter/index.html b/files/it/web/api/range/setendafter/index.html new file mode 100644 index 0000000000..7d23e74e02 --- /dev/null +++ b/files/it/web/api/range/setendafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndAfter +slug: Web/API/Range/setEndAfter +translation_of: Web/API/Range/setEndAfter +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta la posizione finale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval">range.setEndAfter(referenceNode); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>referenceNode </dt> + <dd>Il <code>Node</code> dopo il quale deve terminare il <code>Range</code></dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +referenceNode = document.getElementsByTagName("div").item(0); +range.setEndAfter(referenceNode); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il <code>Node</code> della fine del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setEndAfter">setEndAfter</a></p> diff --git a/files/it/web/api/range/setendbefore/index.html b/files/it/web/api/range/setendbefore/index.html new file mode 100644 index 0000000000..69b3f0e961 --- /dev/null +++ b/files/it/web/api/range/setendbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndBefore +slug: Web/API/Range/setEndBefore +translation_of: Web/API/Range/setEndBefore +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta la posizione finale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.setEndBefore(referenceNode); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>referenceNode </dt> + <dd>Il <code>Node</code> prima del quale deve terminare il <code>Range</code></dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +referenceNode = document.getElementsByTagName("div").item(0); +range.setEndBefore(referenceNode); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il <code>Node</code> padre della fine del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setEndBefore">setEndBefore</a></p> diff --git a/files/it/web/api/range/setstart/index.html b/files/it/web/api/range/setstart/index.html new file mode 100644 index 0000000000..27623b9ea8 --- /dev/null +++ b/files/it/web/api/range/setstart/index.html @@ -0,0 +1,38 @@ +--- +title: range.setStart +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta la posizione iniziale di un <code>Range</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.setStart(startNode,startOffset); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>startNode </dt> + <dd>Il <code>Node</code> all'inizio del <code>Range</code></dd> + <dt>startOffset </dt> + <dd>Un numero intero molto grande rappresentante l'offset per l'inizio del <code>Range</code> dall'iniszio dello <code>startNode</code>.</dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +startNode = document.getElementsByTagName("p").item(2); +startOffset = 0; +range.setStart(startNode,startOffset); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Se lo <code>startNode</code> è un <code>Node</code> di tipo <code>Text</code>, <code>Comment</code>, oppure <code>CDATASection</code>, allora lo <code>startOffset</code> è il numero di caratteri dall'inizio dello <code>startNode</code>. Per gli altri tipi di <code>Node</code>, lo <code>startOffset</code> è il numero di nodi figli tra l'inizio dello <code>startNode</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-setStart">setStart</a></p> diff --git a/files/it/web/api/range/setstartafter/index.html b/files/it/web/api/range/setstartafter/index.html new file mode 100644 index 0000000000..4a5676a9d6 --- /dev/null +++ b/files/it/web/api/range/setstartafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartAfter +slug: Web/API/Range/setStartAfter +translation_of: Web/API/Range/setStartAfter +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta la posizione iniziale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.setStartAfter(referenceNode); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>referenceNode </dt> + <dd>Il <code>Node</code> dopo il quale deve iniziare il <code>Range</code></dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +referenceNode = document.getElementsByTagName("div").item(0); +range.setStartAfter(referenceNode); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il <code>Node</code> padre dell'inizio del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setStartAfter">setStartAfter</a></p> diff --git a/files/it/web/api/range/setstartbefore/index.html b/files/it/web/api/range/setstartbefore/index.html new file mode 100644 index 0000000000..d98800f57b --- /dev/null +++ b/files/it/web/api/range/setstartbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartBefore +slug: Web/API/Range/setStartBefore +translation_of: Web/API/Range/setStartBefore +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Imposta la posizione iniziale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">range.setStartBefore(referenceNode); +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<dl> + <dt>referenceNode </dt> + <dd>Il <code>Node</code> prima del quale deve iniziare il <code>Range</code></dd> +</dl> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +referenceNode = document.getElementsByTagName("div").item(0); +range.setStartBefore(referenceNode); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Il <code>Node</code> padre dell'inizio del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setStartBefore">setStartBefore</a></p> diff --git a/files/it/web/api/range/startcontainer/index.html b/files/it/web/api/range/startcontainer/index.html new file mode 100644 index 0000000000..e1eb8d3c7f --- /dev/null +++ b/files/it/web/api/range/startcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.startContainer +slug: Web/API/Range/startContainer +translation_of: Web/API/Range/startContainer +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce il <code>Node</code> dentro il quale comincia il <code>Range</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">startRangeNode = range.startContainer; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +startRangeNode = range.startContainer; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Restituisce un riferimento al <code>Node</code> del documento, dentro il quale comincia il <code>Range</code>. Questa proprietà è di sola lettura. Per modificare la posizione dell'inizio di un nodo, si utilizzi i metodi <code>setStart</code>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-startParent">startParent</a></p> diff --git a/files/it/web/api/range/startoffset/index.html b/files/it/web/api/range/startoffset/index.html new file mode 100644 index 0000000000..e0408fa445 --- /dev/null +++ b/files/it/web/api/range/startoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.startOffset +slug: Web/API/Range/startOffset +translation_of: Web/API/Range/startOffset +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce un numero che rappresenta il punto iniziale del <code>Range</code> all'interno di <code>startContainer</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">startRangeOffset = range.startOffset; +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +startRangeOffset = range.startOffset; +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p><code>startRangeOffset</code> ha due significati. Se <code>startContainer</code> è un code>Node</code> di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora <code>startRangeOffset</code> rappresenta il numero di caratteri dall'inizio di <code>startContainer</code> alla fine di <code>Range</code>, Per tutti gli altri tipi di <code>Node</code>, <code>startRangeOffset</code> rappresenta il numero di nodi figlio tra l'inizio di <code>startContainer</code> e la fine di <code>Range</code>. Questa proprietà è di sola lettura. Per modificare il valore <code>startOffset</code> di un nodo, si utilizzino i metodi <code>setStart</code>.</p> + +<h3 id="Speicifiche" name="Speicifiche">Speicifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-startOffset">startOffset</a></p> diff --git a/files/it/web/api/range/surroundcontents/index.html b/files/it/web/api/range/surroundcontents/index.html new file mode 100644 index 0000000000..32b94161ef --- /dev/null +++ b/files/it/web/api/range/surroundcontents/index.html @@ -0,0 +1,36 @@ +--- +title: range.surroundContents +slug: Web/API/Range/surroundContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/surroundContents +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Sposta il contenuto di un <a href="it/DOM/range">Range</a> in un nuovo nodo, piazzando il nuovo nodo all'inizio del range specificato.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>range</i>.surroundContents(<i>nuovoNodo</i>); +</pre> +<dl> + <dt> + nuovoNodo </dt> + <dd> + è un nodo</dd> +</dl> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">var range = document.createRange(); +var nuovoNodo = document.createElement("p"); +range.selectNode(document.getElementsByTagName("div").item(0)); +range.surroundContents(nuovoNodo); +</pre> +<h3 id="Note" name="Note">Note</h3> +<p><code>surroundContents</code> equivale a:</p> +<pre class="eval"><code>nuovoNodo.appendChild(<a href="it/DOM/range.extractContents">range.extractContents()</a>); +range.insertNode(nuovoNodo)</code> +</pre> +<p>Per effetto di questo metodo, i punti estremi del <code>range</code> includono <code>nuovoNodo</code>.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-surroundContents">DOM Level 2 Range: Range.surroundContents</a></p> diff --git a/files/it/web/api/range/tostring/index.html b/files/it/web/api/range/tostring/index.html new file mode 100644 index 0000000000..fd3c9d3999 --- /dev/null +++ b/files/it/web/api/range/tostring/index.html @@ -0,0 +1,28 @@ +--- +title: range.toString +slug: Web/API/Range/toString +translation_of: Web/API/Range/toString +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Restituisce il testo del Range.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">text = range.toString(); +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +text = range.toString(); +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Alterare i contenuti di un Range causa una chiamata implicita di toString(), quindi comparare il Range e il testo attraverso un alert dialog è inutile.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-toString">toString</a></p> diff --git a/files/it/web/api/selection/addrange/index.html b/files/it/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..cff46a4d65 --- /dev/null +++ b/files/it/web/api/selection/addrange/index.html @@ -0,0 +1,39 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/addRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Aggiunge un range alla selezione.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.addRange(<i>range</i>) +</pre> +<h3 id="Parametri" name="Parametri">Parametri</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Un oggetto <a href="it/DOM/range">range</a> che verrà aggiunto alla selezione.</dd> +</dl> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval"> /* seleziono tutti gli oggetti STRONG all'interno del documento HTML */ + var strongs = document.getElementsByTagName("strong"); + var s = window.getSelection(); + if(s.rangeCount > 0) s.removeAllRanges(); + for(var i = 0; i < strongs.length; i++) { + var range = document.createRange(); + range.selectNode(strongs[i]); + s.addRange(range); + } +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}</p> diff --git a/files/it/web/api/selection/anchornode/index.html b/files/it/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..2dcd33e119 --- /dev/null +++ b/files/it/web/api/selection/anchornode/index.html @@ -0,0 +1,21 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il nodo nel quale inizia la selezione.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selection</i>.anchorNode +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}</p> diff --git a/files/it/web/api/selection/anchoroffset/index.html b/files/it/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..0c6de4e0ed --- /dev/null +++ b/files/it/web/api/selection/anchoroffset/index.html @@ -0,0 +1,21 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorOffset +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il numero di caratteri che separano il primo carattere della selezione (anchor), dal primo carattere del primo nodo selezionato (<a href="it/DOM/Selection/anchorNode">anchorNode</a>).</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.anchorOffset +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Il valore restituito inizia da 0. Se la selezione comincia con il primo carattere dell'<a href="it/DOM/Selection/anchorNode">anchorNode</a>, <code>anchorOffset</code> restituisce 0.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}</p> diff --git a/files/it/web/api/selection/collapse/index.html b/files/it/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..63f2407ac1 --- /dev/null +++ b/files/it/web/api/selection/collapse/index.html @@ -0,0 +1,44 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapse +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Fa collassare la selezione corrente in un singolo punto. Il documento non viene modificato. Se il contenuto è modificabile, il cursore lampeggerà.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.collapse(<i>nodoPadre</i>,<i>offset</i>); +</pre> +<h3 id="Parametri" name="Parametri">Parametri</h3> +<dl> + <dt> + <i> + <code>nodoPadre</code></i> + </dt> + <dd> + Il cursore si troverà all'interno di questo nodo.</dd> +</dl> +<dl> + <dt> + <i> + <code>offset</code></i> + </dt> + <dd> + La distanza in caratteri tra il cursore e l'inizio del testo di + <i> + <code>parentNode</code></i> + .</dd> +</dl> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">/* Porta il cursore all'inizio del BODY */ +var body = document.getElementsByTagName("body")[0]; +window.getSelection().collapse(body,0); +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}</p> diff --git a/files/it/web/api/selection/collapsetoend/index.html b/files/it/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..b7193eb8e6 --- /dev/null +++ b/files/it/web/api/selection/collapsetoend/index.html @@ -0,0 +1,19 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapseToEnd +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Sposta l'anchor della selezione allo stesso punto in cui si trova il focus. Il focus non si muove. Se il contenuto è modificabile, il cursore lampeggerà.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval"><i>selezione</i>.collapseToEnd() +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}</p> diff --git a/files/it/web/api/selection/collapsetostart/index.html b/files/it/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..ccf6084f65 --- /dev/null +++ b/files/it/web/api/selection/collapsetostart/index.html @@ -0,0 +1,14 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +translation_of: Web/API/Selection/collapseToStart +--- +<h3 id="Sommario" name="Sommario"> Sommario </h3> +<p>Sposta il focus della selezione allo stesso punto in cui si trova l'anchor. L'anchor non si muove. Se il contenuto è modificabile, il cursore lampeggerà. +</p> +<h3 id="Sintassi" name="Sintassi"> Sintassi </h3> +<pre class="eval"><i>selezione</i>.collapseToStart() +</pre> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }} diff --git a/files/it/web/api/selection/containsnode/index.html b/files/it/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..b7729228b6 --- /dev/null +++ b/files/it/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/containsNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Indica se il nodo specificato fa parte della selezione.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.containsNode(<i>nodo</i>,<i>nodoParziale</i>) +</pre> +<h3 id="Parametri" name="Parametri">Parametri</h3> +<dl> + <dt> + <i> + <code>nodo</code></i> + </dt> +</dl> +<p>Il nodo da cercare all'interno della selezione</p> +<dl> + <dt> + <i> + <code>nodoParziale</code></i> + </dt> + <dd> + Se è + <i> + true</i> + , <code>containsNode</code> restituisce true nel caso in cui solo una parte di <code>nodo</code> sia contenuta dalla selezione.</dd> + <dd> + Se è + <i> + false</i> + , <code>containsNode</code> restituisce false nel caso in cui solo una parte di <code>nodo</code> sia contenuta dalla selezione.</dd> +</dl> +<h3 id="Esempi" name="Esempi">Esempi</h3> +<pre class="eval"> /* controlliamo se qualcosa all'interno dell'elemento BODY è stato selezionato */ + alert(window.getSelection().containsNode(document.body, true)); +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "es": "es/DOM/Selection/containsNode", "en": "en/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}</p> diff --git a/files/it/web/api/selection/deletefromdocument/index.html b/files/it/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..5a065e7b37 --- /dev/null +++ b/files/it/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,28 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/deleteFromDocument +--- +<p>{{ ApiRef }}</p> + +<h3 id="Sommario" name="Sommario">Sommario</h3> + +<p>Elimina dal documento il testo attualmente rappresentato dall'oggetto <code>selection</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><em>selezione</em>.deleteFromDocument() +</pre> + +<h3 id="Esempi" name="Esempi">Esempi</h3> + +<p>Un utente seleziona il testo (immaginario) "la capra " all'interno della stringa "sotto la panca la capra crepa". L'utente poi clicca un bottone che esegue la riga JavaScript <code>window.getSelection().deleteFromDocument()</code>. Il testo del documento diventa "sotto la panca crepa".</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}</p> diff --git a/files/it/web/api/selection/extend/index.html b/files/it/web/api/selection/extend/index.html new file mode 100644 index 0000000000..58e022a2a9 --- /dev/null +++ b/files/it/web/api/selection/extend/index.html @@ -0,0 +1,39 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/extend +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Sposta il focus della selezione ad un punto specificato. L'anchor invece resta immobile. La selezione si estenderà dall'anchor fino al nuovo focus, indipendentemente da quale sia la direzione (cioè potrebbe essere inversa rispetto al testo).</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.extend(<i>nodoPadre</i>,<i>offset</i>) +</pre> +<h3 id="Parametri" name="Parametri">Parametri</h3> +<dl> + <dt> + <i> + <code>nodoPadre</code></i> + </dt> + <dd> + Il nuovo focus, cioè il nodo fino al quale si estenderà la selezione.</dd> +</dl> +<dl> + <dt> + <i> + <code>offset</code></i> + </dt> + <dd> + Il numero di caratteri che separeranno l'inizio del testo del + <i> + <code>nodoPadre</code>'</i> + dal nuovo focus.</dd> +</dl> +<div class="noinclude"> + </div> +<p>{{ languages( { "es": "es/DOM/Selection/extend", "en": "en/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}</p> diff --git a/files/it/web/api/selection/focusnode/index.html b/files/it/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..8c8653b829 --- /dev/null +++ b/files/it/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il nodo nel quale la selezione termina</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selection</i>.focusNode +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare, il focus è il punto in cui la selezione è terminata. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}</p> diff --git a/files/it/web/api/selection/focusoffset/index.html b/files/it/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..92978a8dba --- /dev/null +++ b/files/it/web/api/selection/focusoffset/index.html @@ -0,0 +1,21 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusOffset +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il numero di caratteri che separano il primo carattere della selezione (focus) dal primo carattere dell'ultimo nodo della selezione (<a href="it/DOM/Selection/focusNode">focusNode</a>).</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.focusOffset +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Questo valore inizia da 0. Se la selezione termina con il primo carattere di <a href="it/DOM/Selection/focusNode">focusNode</a>, <code>focusOffset</code> restituisce 0.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}</p> diff --git a/files/it/web/api/selection/getrangeat/index.html b/files/it/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..f5307b03d9 --- /dev/null +++ b/files/it/web/api/selection/getrangeat/index.html @@ -0,0 +1,37 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +translation_of: Web/API/Selection/getRangeAt +--- +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce un oggetto <code>range</code> che rappresenta i nodi attualmente selezionati.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>range</i> =<i>sel</i>.getRangeAt(<i>index</i>) +</pre> +<h3 id="Parametri" name="Parametri">Parametri</h3> +<dl> + <dt> + <code>range</code></dt> + <dd> + L'oggetto <a href="it/DOM/range">range</a> che verrà restituito.</dd> +</dl> +<dl> + <dt> + <i> + <code>index</code></i> + </dt> + <dd> + L'indice del range da restituire; parte da zero. Un valore negativo o un numero uguale o maggiore a <a href="it/DOM/Selection/rangeCount">rangeCount</a> causa un errore.</dd> +</dl> +<h3 id="Esempi" name="Esempi">Esempi</h3> +<pre class="eval">var ranges = []; + +sel = window.getSelection(); + +for(var i = 0; i < sel.rangeCount; i++) { + ranges[i] = sel.getRangeAt(i); +} +/* Ogni oggetto nei ranghi ora è un + * oggetto range che rappresenta uno dei ranghi + * presenti nella selezione attuale. */ +</pre> diff --git a/files/it/web/api/selection/index.html b/files/it/web/api/selection/index.html new file mode 100644 index 0000000000..aca2185be0 --- /dev/null +++ b/files/it/web/api/selection/index.html @@ -0,0 +1,102 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Sommario" name="Sommario">Sommario</h3> + +<p>E' la classe dell'oggetto restituito da <code><a href="it/DOM/window.getSelection"> window.getSelection</a></code> ed altri metodi.</p> + +<h3 id="Descrizione" name="Descrizione">Descrizione</h3> + +<p>L'oggetto selection rappresenta i <a href="it/DOM/range">range</a> che l'utente ha selezionato. In una selezione fatte dall'utente col mouse possono esserci più range, ad esempio perchè tramite posizionamento assoluto nei <a href="it/CSS">CSS</a> due contenitori(DIV) distanti fra di loro nel flusso del documento appaiono vicini sul display e vengono selezionati insieme. Per accedere ai diversi Range che formano una selezione, si usa il metodo <code><a href="it/DOM/Selection/getRangeAt">getRangeAt()</a></code>.</p> + +<p>In <a href="it/JavaScript">JavaScript</a>, l'oggetto selection può venire modificato come se fosse una stringa, ad esempio vi si può concatenare una stringa, perchè in questi casi viene automaticamente applicato il metodo <code><a href="it/DOM/Selection/toString">toString</a></code>. Ad esempio, con il codice seguente, nell'alert apparirà una stringa:</p> + +<pre class="eval">selObj = window.getSelection(); +window.alert(selObj); +</pre> + +<p>ma la variabile selObj rimane un oggetto di tipo selection e non di tipo String, solo che all'occorrenza gli viene applicato il metodo toString().</p> + +<h3 id="Glossario" name="Glossario">Glossario</h3> + +<p>Altre parole chiave usate in questa sezione.</p> + +<dl> + <dt>anchor</dt> + <dd>Rappresenta il punto in cui inizia una selezione. Quando si fa una selezione con il mouse, l'anchor è il punto in cui il mouse è stato premuto e non cambia mentre si muove il mouse.</dd> + <dt>focus</dt> + <dd>Rappresenta il punto in cui finisce una selezione. Quando si fa una selezione con il mouse, il focus si muove in corrispondenza del mouse(mentre il tasto è premuto), e quando il tasto viene rilasciato, rappresenta il punto in cui finisce la selezione.</dd> + <dt>range</dt> + <dd>Rappresenta un insieme di nodi contigui del documento. Un range può contenere interi nodi come anche porzioni di nodi(nel caso di nodi testuali). Un range può essere recuperato da una selezione attraverso l'oggetto <a href="it/DOM/range">range</a>, oppure può essere creato via script e aggiunto o rimosso da una selezione.</dd> +</dl> + +<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3> + +<dl> + <dt><a href="it/DOM/Selection/anchorNode">anchorNode</a></dt> + <dd>Restituisce il nodo in cui inizia la selezione.</dd> + <dt><a href="it/DOM/Selection/anchorOffset">anchorOffset</a></dt> + <dd>Restituisce il numero di caratteri fra l'inizio del nodo testuale e l'anchor, all'interno dell'anchorNode.</dd> + <dt><a href="it/DOM/Selection/focusNode">focusNode</a></dt> + <dd>Restituisce il nodo in cui finisce la selezione.</dd> + <dt><a href="it/DOM/Selection/focusOffset">focusOffset</a></dt> + <dd>Restituisce il numero di caratteri fra l'inizio del nodo testuale e il focus, all'interno del focusNode.</dd> + <dt><a href="it/DOM/Selection/isCollapsed">isCollapsed</a></dt> + <dd>Restituisce un valore booleano che indica se l'anchor e il focus di una selezione si trovano nella stessa posizione.</dd> + <dt><a href="it/DOM/Selection/rangeCount">rangeCount</a></dt> + <dd>Restituisce il numero di range di cui è composta una selezione.</dd> +</dl> + +<h3 id="Metodi" name="Metodi">Metodi</h3> + +<dl> + <dt><a href="it/DOM/Selection/getRangeAt">getRangeAt</a></dt> + <dd>Restituisce un oggetto range che rappresenta uno dei range attualmente selezionati.</dd> + <dt><a href="it/DOM/Selection/collapse">collapse</a></dt> + <dd>Collassa la selezione corrente in un singolo punto.</dd> + <dt><a href="it/DOM/Selection/extend">extend</a></dt> + <dd>Muove il focus della selezione in uno specifico punto.</dd> + <dt><a href="it/DOM/Selection/collapseToStart">collapseToStart</a></dt> + <dd>Muove il focus della selezione nel punto in cui c'è l'anchor (che non viene spostata).</dd> + <dt><a href="it/DOM/Selection/collapseToEnd">collapseToEnd</a></dt> + <dd>Muove il focus della selezione nel punto in cui c'è il focus (che non viene spostato).</dd> + <dt><a href="it/DOM/Selection/selectAllChildren">selectAllChildren</a></dt> + <dd>Aggiunge tutti i figli del nodo specificato alla selezione.</dd> + <dt><a href="it/DOM/Selection/addRange">addRange</a></dt> + <dd>Aggiunge un oggetto range alla selezione..</dd> + <dt><a href="it/DOM/Selection/removeRange">removeRange</a></dt> + <dd>Rimuove un range dalla selezione.</dd> + <dt><a href="it/DOM/Selection/removeAllRanges">removeAllRanges</a></dt> + <dd>Rimuove tutti i range dalla selezione.</dd> + <dt><a href="it/DOM/Selection/deleteFromDocument">deleteFromDocument</a></dt> + <dd>Elimina dal documento il contenuto della selezione.</dd> + <dt><a href="it/DOM/Selection/selectionLanguageChange">selectionLanguageChange</a></dt> + <dd> </dd> + <dt><a href="it/DOM/Selection/toString">toString</a></dt> + <dd>Restituisce una stringa che rappresenta l'oggetto selection (cioè il testo attualmente selezionato).</dd> + <dt><a href="it/DOM/Selection/containsNode">containsNode</a></dt> + <dd>Indica se un certo nodo fa parte dell'oggetto selection.</dd> +</dl> + +<h3 id="Guarda_anche" name="Guarda_anche">Guarda anche</h3> + +<p><a href="it/DOM/window.getSelection">window.getSelection</a>, <a href="/it/docs/Web/API/Range">Range</a></p> + +<h3 id="Link_Esterni" name="Link_Esterni">Link Esterni</h3> + +<ul> + <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">IDL definition in Mozilla cross-reference</a></li> +</ul> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "pl": "pl/DOM/Selection" } ) }}</p> diff --git a/files/it/web/api/selection/iscollapsed/index.html b/files/it/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..f91cfc5d1d --- /dev/null +++ b/files/it/web/api/selection/iscollapsed/index.html @@ -0,0 +1,24 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/isCollapsed +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce un booleano che indica se l'inizio e la fine della selezione corrente corrispondono (cioè restituisce <code>true</code> se la selezione è + <i> + collassata</i> + ).</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selection</i>.isCollapsed +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Anche una selezione collassata può avere un <code>rangeCount</code> più grande di 0. Anche <code>selezione.getRangeAt(0)</code> potrebbe restituire un range collassato.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}</p> diff --git a/files/it/web/api/selection/rangecount/index.html b/files/it/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..db26f87b6f --- /dev/null +++ b/files/it/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/rangeCount +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce il numero di range presenti nella selezione.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selection</i>.rangeCount +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Prima che l'utente clicchi su una pagina appena caricata, <code>rangeCount</code> vale 0. Un utente normalmente può selezionare un solo range alla volta, quindi <code>rangeCount</code> solitamente vale 1. Tramite lo script è possibile far si che la selezione contenga più di un range.</p> +<p>{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}</p> diff --git a/files/it/web/api/selection/removeallranges/index.html b/files/it/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..b9aa7bba25 --- /dev/null +++ b/files/it/web/api/selection/removeallranges/index.html @@ -0,0 +1,19 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeAllRanges +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Rimuove tutti i range dalla selezione, impostando le proprietà <code><a href="it/DOM/Selection/anchorNode">anchorNode</a></code> e <code><a href="it/DOM/Selection/focusNode">focusNode</a></code> a <code>null</code>. Dopo la chiamata a questo metodo, non vi saranno elementi selezionati nella pagina.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.removeAllRanges(); +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "es": "es/DOM/Selection/removeAllRanges", "en": "en/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}</p> diff --git a/files/it/web/api/selection/removerange/index.html b/files/it/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..cb4186afe9 --- /dev/null +++ b/files/it/web/api/selection/removerange/index.html @@ -0,0 +1,38 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Rimuove un range dalla selezione.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.removeRange(<i>range</i>) +</pre> +<h3 id="Parametri" name="Parametri">Parametri</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Un oggetto range che verrà rimosso dalla selezione.</dd> +</dl> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">/* Da programma, è possibile selezionare più di un range. + Questo script li deseleziona tutti tranne il primo. */ +s = window.getSelection(); +if(s.rangeCount > 1) { + for(var i = 1; i < s.rangeCount; i++) { + s.removeRange(s.getRangeAt(i)); + } +} +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "es": "es/DOM/Selection/removeRange", "en": "en/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}</p> diff --git a/files/it/web/api/selection/selectallchildren/index.html b/files/it/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..2df5613a3d --- /dev/null +++ b/files/it/web/api/selection/selectallchildren/index.html @@ -0,0 +1,39 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/selectAllChildren +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Aggiunge alla selezione tutti i figli del nodo specificato. La selezione precedente viene perduta.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>selezione</i>.selectAllChildren(<i>nodoPadre</i>) +</pre> +<h3 id="Parametri" name="Parametri">Parametri</h3> +<dl> + <dt> + <i> + <code>nodoPadre</code></i> + </dt> + <dd> + Tutti i figli di + <i> + <code>nodoPadre</code></i> + verranno aggiunti alla selezione. + <i> + <code>nodoPadre</code></i> + invece non verrà selezionato.</dd> +</dl> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">pieDiPagina = document.getElementById("pieDiPagina"); +window.getSelection().selectAllChildren(pieDiPagina); +/* ora tutto ciò che si trova a piè di pagina è selezionato */ +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}</p> diff --git a/files/it/web/api/selection/tostring/index.html b/files/it/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..17a6be112b --- /dev/null +++ b/files/it/web/api/selection/tostring/index.html @@ -0,0 +1,27 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/toString +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce una stringa che rappresenta l'oggetto <code>selection</code>. Generalmente è il testo selezionato.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>stringa</i> =<i>selezione</i>.toString() +</pre> +<ul> + <li><code>string</code> è una stringa che rappresenta l'oggetto <code>selection</code>.</li> +</ul> +<h3 id="Note" name="Note">Note</h3> +<p>In <a href="it/JavaScript">JavaScript</a>, questo metodo viene chiamato implicitamente quando un oggetto <code>selection</code> viene passato a un metodo o a una funzione che richiede una stringa:</p> +<pre class="eval">alert(window.getSelection()) // la chiamata scritta da noi +alert(window.getSelection().toString()) // la chiamata effettiva +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}</p> diff --git a/files/it/web/api/storage/clear/index.html b/files/it/web/api/storage/clear/index.html new file mode 100644 index 0000000000..e99735a34f --- /dev/null +++ b/files/it/web/api/storage/clear/index.html @@ -0,0 +1,126 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API + - Persistenza + - Persistenza Browser + - Riferimento + - metodo +translation_of: Web/API/Storage/clear +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p><font><font>Il metodo </font></font><code>clear()</code> dell'interfaccia {{domxref("Storage")}} , quando invocato, pulisce tutte le chiavi salvate.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="brush: js"><em>storage</em>.clear();</pre> + +<h3 id="Return_value">Return value</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<p><font><font>La seguente funzione crea tre coppie chiave/valore in local storage, infine le elimina invocando il metodo </font></font><code>clear()</code>.</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'miGato.png'); + + localStorage.clear(); +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Per un esempio reale guarda <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser_CompatibilityTable()">Compatibilità browser {{ CompatibilityTable() }}</h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Ogni browser riserva una quantità di memoria differente per localStorage e sessionStorage. Qui si trova <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">il dettaglio di tutte le quantità di memoria per i vari browser</a>.</p> + +<div class="note"> +<p><strong>Note: </strong>da iOS 5.1, Safari Mobile persiste i dati di localStorage nella cartella cache, che è soggetta a pulizie occasionali, su ordine del sistema operativo, tipicamente in condizioni di poco spazio libero sul dispositivo.</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilizzo di Web Storage API</a></p> diff --git a/files/it/web/api/storage/getitem/index.html b/files/it/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..701fff9910 --- /dev/null +++ b/files/it/web/api/storage/getitem/index.html @@ -0,0 +1,144 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API + - Memoria locale + - memoria + - metodo +translation_of: Web/API/Storage/getItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Il metodo <code>getItem()</code> dell'interfaccia {{domxref("Storage")}} restituisce il valore contenuto nella chiave passata a parametro.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><em><code>keyName</code></em></dt> + <dd>Una {{domxref("DOMString")}} che contiene il nome della chiave da cui si vuole ottenerne il valore associato.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Una {{domxref("DOMString")}} contenente il valore associato alla chiave. Se la chiave non esiste, <code>null</code> viene restituito.</p> + +<h2 id="Esempio">Esempio</h2> + +<p>La funzione seguente ottiene tre elementi dalla memoria locale, per poi utilizzarli per impostare alcuni stili personalizzati nella pagina.</p> + +<pre class="brush: js">function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Per vedere questo esempio usato nel mondo reale, guarda il nostro <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browsers">Compatibilità browsers</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Tutti i browser hanno differenti livelli capacitativi per entrambi localStorage e sessionStorage. Qui puoi trovare una <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">lista dettagliata delle capacità di memoria per browser differenti</a>.</p> + +<div class="note"> +<p><strong>Nota: </strong>da iOS 5.1, Safari Mobile immagazzina i dati di localStorage nella cartella cache, che viene svuotata occasionalmente a discrezione dell'OS, solitamente quando lo spazio disponibile scarseggia.</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Storage/setItem">Storage.setItem()</a></li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> +</ul> diff --git a/files/it/web/api/storage/index.html b/files/it/web/api/storage/index.html new file mode 100644 index 0000000000..ab30b1de21 --- /dev/null +++ b/files/it/web/api/storage/index.html @@ -0,0 +1,161 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Dati + - Interfaccia + - Riferimento + - Storage + - Web Storage +translation_of: Web/API/Storage +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>L'interfaccia <code>Storage</code> dell'API Web Storage fornisce accesso allo storage di sessione o allo storage locale per un dato dominio, permettendo, ad esempio, l'aggiunta, modifica o rimozione di dati salvati.</p> + +<p>Se si vuole manipolare lo storage di sessione per un dominio, va invocato il metodo {{domxref("Window.sessionStorage")}}; se si vuole manipolare lo storage locale per un dominio, va invocato {{domxref("Window.localStorage")}}.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> + <dd>Ritorna un intero che rappresenta il numero di oggetti presenti in un oggetto <code>Storage</code>.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{domxref("Storage.key()")}}</dt> + <dd>Dato un numero n, ritorna il nome dell'n-esima chiave nello storage.</dd> +</dl> + +<dl> + <dt>{{domxref("Storage.getItem()")}}</dt> + <dd>Dato un nome di chiave, ritorna il corrispondente valore.</dd> + <dt>{{domxref("Storage.setItem()")}}</dt> + <dd>Dati un nome di chiave e un valore, aggiunge questa chiave allo storage, o aggiorna il valore della chiave se essa esiste già.</dd> + <dt>{{domxref("Storage.removeItem()")}}</dt> + <dd>Dato un nome di chiave, rimuove quella chiave dallo storage.</dd> + <dt>{{domxref("Storage.clear()")}}</dt> + <dd>Rimuove tutte le chiavi dallo storage.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<p>Questo è un esempio di accesso all'oggetto <code>Storage</code> tramite chiamata a <code>localStorage</code>. In primo luogo, si verifica se lo storage locale contenga oggetti usando <code>!localStorage.getItem('bgcolor')</code>. Se il test passa, si invoca una funzione <code>setStyles()</code> che recupera gli oggetti tramite {{domxref("localStorage.getItem()")}} e ne usa i valori per aggiornare gli stili della pagina. Se il test fallisce, viene invocata un'altra funzione, <code>populateStorage()</code>, che usa {{domxref("localStorage.setItem()")}} per settare i valori, per poi ritornare <code>setStyles()</code>.</p> + +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { + populateStorage(); +} else { + setStyles(); +} + +function populateStorage() { + localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); + localStorage.setItem('font', document.getElementById('font').value); + localStorage.setItem('image', document.getElementById('image').value); + + setStyles(); +} + +function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Per vedere quest'esempio girare, si veda la <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto minimo</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>3.2[1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A partite da iOS 5.1, Safari Mobile salva i dati del <code>localStorage</code> in una cartella di cache, soggetta occasionalmente a pulizia su richiesta del sistema operativo, tipicamente in mancanza di spazio.</p> + +<p>I vari browser hanno diversi livelli di capacità sia per localStorage che per sessionStorage. Qui si trova un <a href="http://dev-test.nemikor.com/web-storage/support-test/">resoconto dettagliato delle capacità di immagazzinamento dei vari browser</a>.</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usare la API Web Storage</a></p> diff --git a/files/it/web/api/storage/setitem/index.html b/files/it/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..c96e805956 --- /dev/null +++ b/files/it/web/api/storage/setitem/index.html @@ -0,0 +1,133 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +translation_of: Web/API/Storage/setItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Il metodo <code>setItem()</code>, che fa parte della funzionalità {{domxref("Storage")}} , quando passa il nome di una chiave e un valore, aggiunge questa chiave allo storage, oppure se la chiave esiste già aggiorna il valore della chiave stessa.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>storage</em>.setItem(<em>keyName</em>, <em>keyValue</em>);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><em>keyName</em></dt> + <dd>Il {{domxref("DOMString")}} contiene il nome della chiave che si vuole creare o aggiornare.</dd> + <dt><em>keyValue</em></dt> + <dd>Il {{domxref("DOMString")}} contiene il valore che si vuole dare alla chiave che si sta creando o aggiornando.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<p><code>setItem()</code> potrebbe dar luogo a eccezioni se lo storage è pieno. Ad esempio, in Safari Mobile (da iOS 5) non è possibile salvare dati quando l'utente è in modalità in incognito (questo perché Safari non alloca spazio per l'utente nella modalità in incognito, al contrario degli altri browsers, i quali permettono di usare lo storage nella modalità in incognito, salvando i dati in uno spazio apposito e separato). Quindi <strong>è sempre meglio implementare delle funzioni che gestiscano le eccezioni quando si usa setItem()</strong>.</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Le seguenti funzioni creano tre oggetti all'interno del local storage:</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Se vuoi un esempio veritiero, dai un'occhiata alla pagina <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Tutti i browser hanno diversi livelli di gestione sia del localStorage che del sessionStorage. <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">Qui trovi ulteriori dettagli.</a></p> + +<div class="note"> +<p><strong>Nota: </strong>da iOS 5.1, Safari Mobile memorizza i dati del localStorage nella cartella delle cache, la quale, ogni tanto, viene cancellata (ricorda che questo spazio è solitamente piccolo).</p> +</div> + +<h2 id="Altre_informazioni">Altre informazioni</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Come usare le Web Storage API</a></p> diff --git a/files/it/web/api/urlutils/index.html b/files/it/web/api/urlutils/index.html new file mode 100644 index 0000000000..05cc01aa9b --- /dev/null +++ b/files/it/web/api/urlutils/index.html @@ -0,0 +1,205 @@ +--- +title: URLUtils +slug: Web/API/URLUtils +translation_of: Web/API/HTMLHyperlinkElementUtils +--- +<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> + +<p>The <strong><code>URLUtils</code></strong> interface defines utility methods to work with URLs.</p> + +<p>There are no objects of this type, but several objects implement it, such as {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, and {{domxref("HTMLAreaElement")}}.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface doesn't inherit any property.</em></p> + +<dl> + <dt>{{domxref("URLUtils.href")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd> + <dt>{{domxref("URLUtils.protocol")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> + <dt>{{domxref("URLUtils.host")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd> + <dt>{{domxref("URLUtils.hostname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd> + <dt>{{domxref("URLUtils.port")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd> + <dt>{{domxref("URLUtils.pathname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> + <dt>{{domxref("URLUtils.search")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd> + <dt>{{domxref("URLUtils.hash")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> + <dt>{{domxref("URLUtils.username")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd> + <dt>{{domxref("URLUtils.password")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd> + <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd> + <dt>{{domxref("URLUtils.searchParams")}}</dt> + <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface doesn't inherit any method.</em></p> + +<dl> + <dt>{{domxref("URLUtils.toString()")}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('URL', '#urlutils', 'URLUtils')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatGeckoDesktop("22")}} [1]</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [1]</td> + </tr> + <tr> + <td>searchParams</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>username</code> and <code>password</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("26")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>origin </code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("26")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>origin</code> on <code>Windows.location</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("21")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatGeckoMobile("22")}} [1]</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [1]</td> + </tr> + <tr> + <td>searchParams</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>username</code> and <code>password</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("26")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>origin </code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("26")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>origin</code> on <code>Windows.location</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("21")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}, and {{domxref("URLSearchParams")}}.</li> + <li>Interfaces implementing this one: {{domxref("Location")}}, {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}.</li> +</ul> + +<dl><br> + <br> + <br> + + <dd> </dd> +</dl> diff --git a/files/it/web/api/webgl_api/index.html b/files/it/web/api/webgl_api/index.html new file mode 100644 index 0000000000..c085be1e41 --- /dev/null +++ b/files/it/web/api/webgl_api/index.html @@ -0,0 +1,254 @@ +--- +title: 'WebGL: Grafica 2D e 3D per il web' +slug: Web/API/WebGL_API +translation_of: Web/API/WebGL_API +--- +<div>{{WebGLSidebar}}</div> + +<div class="summary"> +<p><span class="seoSummary">WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</span> This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.</p> +</div> + +<p>Support for WebGL is present in <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="https://www.google.com/chrome/">Google Chrome</a> 9+, <a href="https://www.opera.com/">Opera</a> 12+, <a href="https://www.apple.com/safari/">Safari </a>5.1+, <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie">Internet Explorer</a> 11+, and <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a> build 10240+; however, the user's device must also have hardware that supports these features.</p> + +<p>The {{anch("WebGL 2")}} API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the {{domxref("WebGL2RenderingContext")}} interface.</p> + +<p>The {{HTMLElement("canvas")}} element is also used by the <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a> to do 2D graphics on web pages.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Standard_interfaces">Standard interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("WebGLRenderingContext")}}</li> + <li>{{domxref("WebGL2RenderingContext")}}</li> + <li>{{domxref("WebGLActiveInfo")}}</li> + <li>{{domxref("WebGLBuffer")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WebGLFramebuffer")}}</li> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLQuery")}}</li> + <li>{{domxref("WebGLRenderbuffer")}}</li> + <li>{{domxref("WebGLSampler")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLShaderPrecisionFormat")}}</li> + <li>{{domxref("WebGLSync")}}</li> + <li>{{domxref("WebGLTexture")}}</li> + <li>{{domxref("WebGLTransformFeedback")}}</li> + <li>{{domxref("WebGLUniformLocation")}}</li> + <li>{{domxref("WebGLVertexArrayObject")}}</li> +</ul> +</div> + +<h3 id="Extensions">Extensions</h3> + +<div class="index"> +<ul> + <li>{{domxref("ANGLE_instanced_arrays")}}</li> + <li>{{domxref("EXT_blend_minmax")}}</li> + <li>{{domxref("EXT_color_buffer_float")}}</li> + <li>{{domxref("EXT_color_buffer_half_float")}}</li> + <li>{{domxref("EXT_disjoint_timer_query")}}</li> + <li>{{domxref("EXT_float_blend")}} {{experimental_inline}}</li> + <li>{{domxref("EXT_frag_depth")}}</li> + <li>{{domxref("EXT_sRGB")}}</li> + <li>{{domxref("EXT_shader_texture_lod")}}</li> + <li>{{domxref("EXT_texture_compression_bptc")}}</li> + <li>{{domxref("EXT_texture_compression_rgtc")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> + <li>{{domxref("KHR_parallel_shader_compile")}}</li> + <li>{{domxref("OES_element_index_uint")}}</li> + <li>{{domxref("OES_fbo_render_mipmap")}}</li> + <li>{{domxref("OES_standard_derivatives")}}</li> + <li>{{domxref("OES_texture_float")}}</li> + <li>{{domxref("OES_texture_float_linear")}}</li> + <li>{{domxref("OES_texture_half_float")}}</li> + <li>{{domxref("OES_texture_half_float_linear")}}</li> + <li>{{domxref("OES_vertex_array_object")}}</li> + <li>{{domxref("OVR_multiview2")}}</li> + <li>{{domxref("WEBGL_color_buffer_float")}}</li> + <li>{{domxref("WEBGL_compressed_texture_astc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> + <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li> + <li>{{domxref("WEBGL_debug_renderer_info")}}</li> + <li>{{domxref("WEBGL_debug_shaders")}}</li> + <li>{{domxref("WEBGL_depth_texture")}}</li> + <li>{{domxref("WEBGL_draw_buffers")}}</li> + <li>{{domxref("WEBGL_lose_context")}}</li> +</ul> +</div> + +<h3 id="Events">Events</h3> + +<ul> + <li>{{domxref("HTMLCanvasElement/webglcontextlost_event", "webglcontextlost")}}</li> + <li>{{domxref("HTMLCanvasElement/webglcontextrestored_event", "webglcontextrestored")}}</li> + <li>{{domxref("HTMLCanvasElement/webglcontextcreationerror_event", "webglcontextcreationerror")}}</li> +</ul> + +<h3 id="Constants_and_types">Constants and types</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Types">WebGL types</a></li> +</ul> + +<h3 id="WebGL_2">WebGL 2</h3> + +<p>WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLSampler">Sampler objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLSync">Sync objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLQuery">Query objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li> + <li>Promoted extensions that are now core to WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li> +</ul> + +<p>See also the blog post <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> for a few demos.</p> + +<h2 id="Guides_and_tutorials">Guides and tutorials</h2> + +<p>Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.</p> + +<h3 id="Guides">Guides</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Data">Data in WebGL</a></dt> + <dd>A guide to variables, buffers, and other types of data used when writing WebGL code.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a></dt> + <dd>Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a></dt> + <dd>A guide to using WebGL extensions.</dd> +</dl> + +<h3 id="Tutorials">Tutorials</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></dt> + <dd>A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.</dd> +</dl> + +<h3 id="Examples">Examples</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a></dt> + <dd>This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/By_example">WebGL by example</a></dt> + <dd>A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.</dd> +</dl> + +<h3 id="Advanced_tutorials">Advanced tutorials</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a></dt> + <dd>A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt> + <dd>A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</dd> +</dl> + +<h2 id="Resources">Resources</h2> + +<ul> + <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li> + <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li> + <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li> + <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li> + <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li> + <li><a href="http://webglstats.com/">WebGL Stats</a> A site with statistics about WebGL capabilities in browsers on different platforms.</li> +</ul> + +<h3 id="Libraries">Libraries</h3> + +<ul> + <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> is a JavaScript matrix and vector library for high-performance WebGL apps.</li> + <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding, and game development.</li> + <li><a href="http://www.pixijs.com/">Pixi.js</a> is a fast, open-source 2D WebGL renderer.</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open-source game engine.</li> + <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> is an open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</li> + <li><a href="https://threejs.org/">three.js</a> is an open-source, fully featured 3D WebGL library.</li> + <li><a href="https://phaser.io/">Phaser</a> is a fast, free and fun open source framework for Canvas and WebGL powered browser games.</li> + <li><a href="https://github.com/redcamel/RedGL2">RedGL</a> is an open-source 3D WebGL library.</li> + <li><a href="https://kitware.github.io/vtk-js/">vtk.js</a> is a JavaScript library for scientific visualization in your browser.</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('OpenGL ES 3.0')}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0')}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('WebGL2')}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Builds on top of WebGL 1. Based on OpenGL ES 3.0.</td> + </tr> + <tr> + <td>{{SpecName('WebGL')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition. Based on OpenGL ES 2.0</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="WebGL_1">WebGL 1</h3> + +<div> + + +<p>{{Compat("api.WebGLRenderingContext", 0)}}</p> + +<h3 id="WebGL_2_2">WebGL 2</h3> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p> +</div> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> is fully backwards-compatible and will have the context name <code>webgl2</code>.</p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4> + +<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p> + +<dl> + <dt><code>webgl.min_capability_mode</code></dt> + <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd> + <dt><code>webgl.disable_extensions</code></dt> + <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> + <li><a href="/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Compatibility info about WebGL extensions</a></li> +</ul> diff --git a/files/it/web/api/websocket/index.html b/files/it/web/api/websocket/index.html new file mode 100644 index 0000000000..af8738a82a --- /dev/null +++ b/files/it/web/api/websocket/index.html @@ -0,0 +1,148 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - NeedsContent + - NeedsTranslation + - TopicStub + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +<div>{{APIRef("Web Sockets API")}}</div> + +<p>The <code>WebSocket</code> object provides the API for creating and managing a <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to a server, as well as for sending and receiving data on the connection.</p> + +<p>To construct a <code>WebSocket</code>, use the <code><a href="/en-US/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code> constructor.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt> + <dd>Returns a newly created <code>WebSocket</code> object.</dd> +</dl> + +<h2 id="Constants">Constants</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + </tr> + <tr> + <td><code>WebSocket.CONNECTING</code></td> + <td><code>0</code></td> + </tr> + <tr> + <td><code>WebSocket.OPEN</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>WebSocket.CLOSING</code></td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>WebSocket.CLOSED</code></td> + <td><code>3</code></td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("WebSocket.binaryType")}}</dt> + <dd>The binary data type used by the connection.</dd> + <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt> + <dd>The number of bytes of queued data.</dd> + <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt> + <dd>The extensions selected by the server.</dd> + <dt>{{domxref("WebSocket.onclose")}}</dt> + <dd>An event listener to be called when the connection is closed.</dd> + <dt>{{domxref("WebSocket.onerror")}}</dt> + <dd>An event listener to be called when an error occurs.</dd> + <dt>{{domxref("WebSocket.onmessage")}}</dt> + <dd>An event listener to be called when a message is received from the server.</dd> + <dt>{{domxref("WebSocket.onopen")}}</dt> + <dd>An event listener to be called when the connection is opened.</dd> + <dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt> + <dd>The sub-protocol selected by the server.</dd> + <dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt> + <dd>The current state of the connection.</dd> + <dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt> + <dd>The absolute URL of the WebSocket.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt> + <dd>Closes the connection.</dd> + <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt> + <dd>Enqueues data to be transmitted.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/WebSocket/close_event">close</a></code></dt> + <dd>Fired when a connection with a <code>WebSocket</code> is closed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onclose">onclose</a></code> property</dd> + <dt><code><a href="/en-US/docs/Web/API/WebSocket/error_event">error</a></code></dt> + <dd>Fired when a connection with a <code>WebSocket</code>has been closed because of an error, such as when some data couldn't be sent.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onerror">onerror</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/WebSocket/message_event">message</a></code></dt> + <dd>Fired when data is received through a <code>WebSocket</code>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onmessage">onmessage</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/WebSocket/open_event">open</a></code></dt> + <dd>Fired when a connection with a <code>WebSocket</code>is opened.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onopen">onopen</a></code> property.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">// Create WebSocket connection. +const socket = new WebSocket('ws://localhost:8080'); + +// Connection opened +socket.addEventListener('open', function (event) { + socket.send('Hello Server!'); +}); + +// Listen for messages +socket.addEventListener('message', function (event) { + console.log('Message from server ', event.data); +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#the-websocket-interface", "WebSocket")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.WebSocket")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> +</ul> diff --git a/files/it/web/api/websocket/websocket/index.html b/files/it/web/api/websocket/websocket/index.html new file mode 100644 index 0000000000..8170b8aead --- /dev/null +++ b/files/it/web/api/websocket/websocket/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket() +slug: Web/API/WebSocket/WebSocket +translation_of: Web/API/WebSocket/WebSocket +--- +<p>{{APIRef("Web Sockets API")}}</p> +<p>Il costruttore <code><strong>WebSocket()</strong></code> restituisce un nuovo oggetto WebSocket {{domxref("WebSocket")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>aWebSocket</em> = new WebSocket(<em>url</em> [, protocols]);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>url</code></dt> + <dd>Corrisponde al URL al quale ci si vuole connetterse, questo dovrebbe essere l'URL a cui risponderà il server WebSocket.</dd> + <dt><code>protocols</code> {{optional_inline}}</dt> + <dd>una singola stringa di protocollo o un array di stringhe di protocollo. Queste stringhe vengono utilizzate per indicare i sub-protocolli, in modo che un server possa implementare più sub-protocolli WebSocket (ad esempio, è possibile che un server sia in grado di gestire diversi tipi di interazioni a seconda del protocollo specificato). Se non si specifica una stringa di protocollo, si presume una stringa vuota.</dd> +</dl> + +<h3 id="Exceptions_thrown">Exceptions thrown</h3> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>La porta a cui si sta tentando la connessione risulta bloccata.</dd> +</dl> + +<h2 id="Specifice">Specifice</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibili">Browser compatibili</h2> + +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta.</div> diff --git a/files/it/web/api/window/alert/index.html b/files/it/web/api/window/alert/index.html new file mode 100644 index 0000000000..bfbb04052c --- /dev/null +++ b/files/it/web/api/window/alert/index.html @@ -0,0 +1,36 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +<p id="Sommario">{{ APIRef }}</p> + +<p>Mostra una finestra di avviso contenente il testo specificato.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.alert(<i>messaggio</i>); +</pre> + +<ul> + <li><code>messaggio</code> è la stringa di testo che si vuol fare apparire nella finestra</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval">window.alert("Ciao, mondo!"); +// il prefisso "window." <a href="it/DOM/window.window">è opzionale</a>, quindi +// alert("Ciao, mondo!"); ha lo stesso effetto +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>La finestra di avviso dovrebbe essere utilizzata per i messaggi che non richiedono alcuna risposta da parte dell'utente, se non la conferma che tale messaggio è stato letto.</p> + +<p>Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.</p> + +<p>I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di <a href="it/NsIPromptService">nsIPromptService</a>, invece di alert.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>HTML5</p> diff --git a/files/it/web/api/window/back/index.html b/files/it/web/api/window/back/index.html new file mode 100644 index 0000000000..7b24f97b28 --- /dev/null +++ b/files/it/web/api/window/back/index.html @@ -0,0 +1,27 @@ +--- +title: Window.back() +slug: Web/API/Window/back +translation_of: Web/API/Window/back +--- +<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div> + +<h2 id="Sommario" name="Sommario">Sommario</h2> + +<p>Riporta la finestra corrente all'ultima pagina visitata, o alla pagina più indietro nella Cronologia del browser.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.back() +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre>function vaiIndietro() { + if ( possoAndareIndietro ) + window.back(); +} +</pre> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/blur/index.html b/files/it/web/api/window/blur/index.html new file mode 100644 index 0000000000..de26372766 --- /dev/null +++ b/files/it/web/api/window/blur/index.html @@ -0,0 +1,26 @@ +--- +title: Window.blur() +slug: Web/API/Window/blur +translation_of: Web/API/Window/blur +--- +<p id="Sommario">{{APIRef}}</p> + +<p>Deseleziona la finestra, come se l'utente avesse cliccato altrove.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.blur() +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval">window.blur(); +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Non ha effetto se la finestra non è selezionata. Si veda anche <a href="it/DOM/window.focus">window.focus</a>.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/close/index.html b/files/it/web/api/window/close/index.html new file mode 100644 index 0000000000..de07d87f7b --- /dev/null +++ b/files/it/web/api/window/close/index.html @@ -0,0 +1,72 @@ +--- +title: Window.close() +slug: Web/API/Window/close +translation_of: Web/API/Window/close +--- +<p>{{APIRef}}</p> + +<p>Il metodo <code><strong>Window.close()</strong></code> chiude la finestra corrente, oppure quella sulla quale è invocato.</p> + +<p>Questo metodo può essere invocato solo su finestre che sono state aperte da uno script utilizzando il metodo {{domxref("window.open()")}}. Se la finestra non è stata aperta mediante script, nella Console JavaScript apparirà il seguente errore: <code>Scripts may not close windows that were not opened by script.</code></p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox">window.close();</pre> + +<h2 id="Examples" name="Examples">Esempi</h2> + +<h3 id="Closing_a_window_opened_with_window.open.28.29" name="Closing_a_window_opened_with_window.open.28.29">Chiudere una finestra aperta mediante <code>window.open()</code></h3> + +<p>Questo esempio mostra come chiudere una finestra aperta da uno script mediante l'invocazione di {{domxref("window.open()")}}.</p> + +<pre><script> +//Variabile globale in cui si memorizza un riferimento alla finestra aperta +var openedWindow; + +function openWindow() +{ + openedWindow = window.open('moreinfo.htm'); +} + +function closeOpenedWindow() +{ + openedWindow.close(); +} +</script> +</pre> + +<h3 id="Closing_the_current_window" name="Closing_the_current_window">Chiudere la finestra corrente</h3> + +<p>Quando si invoca direttamente il metodo <code>close() sull'oggetto<font face="Open Sans, Arial, sans-serif"> </font></code><code>window</code>, piuttosto che invocare <code>close()</code> su una <strong>istanza</strong> di <code>window</code>, il browser chiuderà la finestra in primo piano, indipendentemente dal fatto che uno script abbia creato quella finestra oppure no. (Firefox 35.0.1: gli script non possono chiudere una finestra che non hanno aperto)</p> + +<pre><script> +function closeCurrentWindow() +{ + window.close(); +} +</script> +</pre> + +<h2 id="Specification" name="Specification">Specifica</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.close")}}</p> diff --git a/files/it/web/api/window/closed/index.html b/files/it/web/api/window/closed/index.html new file mode 100644 index 0000000000..66152b63e7 --- /dev/null +++ b/files/it/web/api/window/closed/index.html @@ -0,0 +1,66 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +translation_of: Web/API/Window/closed +--- +<div>{{APIRef}}</div> + +<p>Questa proprietà indica se la finestra è chiusa.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">var <var>isClosed</var> = window.closed; +</pre> + +<p>Questa proprietà è di sola lettura.</p> + +<h3 id="Valori_restituiti" name="Valori_restituiti">Valori restituiti</h3> + +<dl> + <dt><code>isClosed</code></dt> + <dd>un booleano; valori possibili:</dd> +</dl> + +<ul> + <li><code>true</code>: la finestra è stata chiusa</li> + <li><code>false</code>: la finestra è aperta</li> +</ul> + +<h2 id="Esempi" name="Esempi">Esempi</h2> + +<h4 id="Cambiare_l.27URL_di_una_finestra_da_una_popup" name="Cambiare_l.27URL_di_una_finestra_da_una_popup">Cambiare l'URL di una finestra da una popup</h4> + +<p>L'esempio seguente mostra come una finestra popup possa contenere codice JavaScript che modifichi l'URL della finestra che l'ha generata. Prima di tentare di modificare l'URL, controlleremo che la finestra corrente (la popup, appunto) abbia una "opener" utilizzando la proprietà <a href="it/DOM/window.opener">window.opener</a> e che l'opener non sia chiusa:</p> + +<pre>// controllo che l'opener esista e non sia chiusa +if (window.opener && !window.opener.closed) { + window.opener.location.href = "http://www.mozilla.org"; +} +</pre> + +<p>Si noti che le popup possono accedere solo a se stesse e alle finestre che le hanno generate.</p> + +<h4 id="Ricaricare_una_popup" name="Ricaricare_una_popup">Ricaricare una popup</h4> + +<p>In questo esempio la funzione <code>aggiornaPopup()</code> chiama il metodo <code>reload()</code> dell'oggetto <code>location</code> della popup per aggiornare il suo contenuto. Se la popup non è stata ancora aperta o l'utente l'ha chiusa, viene aperta una nuova finestra.</p> + +<pre>var finestraPopup = null; + +function aggiornaPopup() { + if (popupWindow && !popupWindow.closed) { + // finestraPopup è aperta, la aggiorno + finestraPopup.location.reload(true); + } else { + // apro una nuova popup + finestraPopup = window.open("popup.html","miaPopup"); + } +} +</pre> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> + +<h2 id="Altre_risorse" name="Altre_risorse">Altre risorse</h2> + +<p><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">MSDN window.closed</a></p> diff --git a/files/it/web/api/window/confirm/index.html b/files/it/web/api/window/confirm/index.html new file mode 100644 index 0000000000..215e3091e5 --- /dev/null +++ b/files/it/web/api/window/confirm/index.html @@ -0,0 +1,47 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - Window + - confirm +translation_of: Web/API/Window/confirm +--- +<div>{{ApiRef("Window")}}</div> + +<p>Mostra una finestra di dialogo con un messaggio (opzionale) e due bottoni: OK e Annulla.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval notranslate"><em>input</em> = window.confirm(<em>messaggio</em>); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<p><strong><code>messaggio</code></strong><br> + Una stringa che viene mostrata nella finestra di dialogo.</p> + +<h3 id="Valore_ritornato"><span>Valore ritornato</span></h3> + +<p><strong><code>input</code></strong><br> + Un valore booleano che indica se è stato selezionato OK (<code>true</code>) o Annulla (<code>false</code>).</p> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval notranslate">if (window.confirm("vuoi vedere il mio vestito nuovo?")) { + window.open("vestito.html", "Il mio vestito nuovo", ""); +} +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di accedere al resto dell'interfaccia del programma finchè la finestra non viene chiusa. Per questo motivo, è meglio non abusare delle funzioni che creano questo tipo di finestre.</p> + +<p>I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare i metodi di <a href="it/NsIPromptService">nsIPromptService</a>, invece di alert.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> + +<h2 id="Altri_metodi" name="Altri_metodi">Altri metodi</h2> + +<p><a href="it/DOM/window.alert">alert</a>, <a href="it/DOM/window.prompt">prompt</a></p> diff --git a/files/it/web/api/window/crypto/index.html b/files/it/web/api/window/crypto/index.html new file mode 100644 index 0000000000..65107e937c --- /dev/null +++ b/files/it/web/api/window/crypto/index.html @@ -0,0 +1,90 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +translation_of: Web/API/Window/crypto +--- +<div>{{APIRef}}</div> + +<p>La proprietà di sola lettura {{domxref("Window.crypto")}} ritorna l'oggetto {{domxref("Crypto")}} associato all'oggetto globale. Questo oggetto permette alle pagine web di accedere al alcuni servizi si crittografia.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // per IE 11 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td> + <td>{{Spec2("Web Crypto API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>44 {{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6 {{property_prefix("ms")}}</td> + <td>20</td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Firefox Mobile</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>L'oggetto globale {{domxref("Window")}}</li> +</ul> diff --git a/files/it/web/api/window/defaultstatus/index.html b/files/it/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..5212fabcd7 --- /dev/null +++ b/files/it/web/api/window/defaultstatus/index.html @@ -0,0 +1,38 @@ +--- +title: Window.defaultStatus +slug: Web/API/Window/defaultstatus +translation_of: Web/API/Window/defaultStatus +--- +<div>{{ApiRef()}}</div> + +<p>Legge o imposta il testo predefinito della barra di stato della finestra a cui si riferisce l'oggetto <code>window</code>.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><i>messaggio</i> = window.defaultStatus +window.defaultStatus = +<i>messaggio</i> +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>messaggio</code> è una stringa che contiene il testo che deve apparire nella barra di stato.</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre><html> + <body onload="window.defaultStatus='ciao!';"/> + <button onclick="window.confirm('Sei sicuro di volertene andare?');">chiudi</button> + </body> +</htm> +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Per impostare lo stato della finestra dopo che questa si è aperta, si può utilizzare <a href="it/DOM/window.status">window.status</a>.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/devicemotion_event/index.html b/files/it/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..bbc0b22717 --- /dev/null +++ b/files/it/web/api/window/devicemotion_event/index.html @@ -0,0 +1,97 @@ +--- +title: devicemotion +slug: Web/API/Window/devicemotion_event +translation_of: Web/API/Window/devicemotion_event +--- +<p>L'evento devicemotion viene attivato a intervalli regolari e indica la quantità di forza fisica dell'accellezazione che il dispositivo riceve in quel dato momento. Fornisce inoltre informazioni circa la velocità di rotazione, se disponibili.</p> + +<h2 id="Informazioni_Generali">Informazioni Generali</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specifica</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interfaccia</dt> + <dd style="margin: 0 0 0 120px;">DeviceMotionEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancellabile</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Bersaglio</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">Azione predefinita</dt> + <dd style="margin: 0 0 0 120px;">nessuna</dd> +</dl> + +<h2 id="Propietà">Propietà</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>acceleration</code> {{readonlyInline}}</td> + <td>{{domxref("DeviceAcceleration")}}</td> + <td>The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.</td> + </tr> + <tr> + <td><code>accelerationIncludingGravity </code>{{readonlyInline}}</td> + <td>{{domxref("DeviceAcceleration")}}</td> + <td>The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.</td> + </tr> + <tr> + <td><code>interval</code> {{readonlyInline}}</td> + <td>double</td> + <td>The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.</td> + </tr> + <tr> + <td><code>rotationRate</code> {{readonlyInline}}</td> + <td>{{domxref("DeviceRotationRate")}}</td> + <td>The rates of rotation of the device about all three axes.</td> + </tr> + </tbody> +</table> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">function handleMotionEvent(event) { + + var x = event.accelerationIncludingGravity.x; + var y = event.accelerationIncludingGravity.y; + var z = event.accelerationIncludingGravity.z; + + // Fai qualcosa di maestoso. +} + +window.addEventListener("devicemotion", handleMotionEvent, true); +</pre> + +<h2 id="Eventi_correlati">Eventi correlati</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/deviceorientation"><code>deviceorientation</code></a></li> +</ul> diff --git a/files/it/web/api/window/document/index.html b/files/it/web/api/window/document/index.html new file mode 100644 index 0000000000..5d98a10385 --- /dev/null +++ b/files/it/web/api/window/document/index.html @@ -0,0 +1,39 @@ +--- +title: Window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +<div>{{APIRef}}</div> + +<p>Restituisce un riferimento al documento contenuto nella finestra.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><i>doc</i> = window.document +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>doc</code> è un riferimento a un oggetto <a href="it/DOM/document">document</a>.</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre><html> +<head> + <title>Ciao, mondo!</title> +</head> +<body> + +<script type="text/javascript"> + var doc = window.document; + alert( doc.title); // produce: Ciao, mondo! +</script> + +</body> +</html></pre> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>HTML</p> diff --git a/files/it/web/api/window/focus/index.html b/files/it/web/api/window/focus/index.html new file mode 100644 index 0000000000..696383a27c --- /dev/null +++ b/files/it/web/api/window/focus/index.html @@ -0,0 +1,26 @@ +--- +title: Window.focus() +slug: Web/API/Window/focus +translation_of: Web/API/Window/focus +--- +<div>{{APIRef}}</div> + +<p>Seleziona la finestra, come se l'utente avesse cliccato su di essa.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.focus() +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval">if (click) { window.focus(); } +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Non ha effetto se la finestra è già selezionata. Si veda anche <a href="it/DOM/window.blur">window.blur</a>.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/forward/index.html b/files/it/web/api/window/forward/index.html new file mode 100644 index 0000000000..e07fcaa219 --- /dev/null +++ b/files/it/web/api/window/forward/index.html @@ -0,0 +1,22 @@ +--- +title: Window.forward() +slug: Web/API/Window/forward +translation_of: Web/API/Window/forward +--- +<div>{{APIRef}}</div> + +<p>Visualizza la pagina successiva che si trova nella Cronologia, come se l'utente avesse cliccato sul bottone Avanti.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.forward() +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval">function vaiAvanti() { if (possoAndareAvanti) window.forward(); } +</pre> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/getselection/index.html b/files/it/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c4f561801e --- /dev/null +++ b/files/it/web/api/window/getselection/index.html @@ -0,0 +1,46 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Window/getSelection +--- +<p>{{ ApiRef() }}</p> + +<p>Restituisce un oggetto <code>selection</code> che rappresenta il testo selezionato dall'utente.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><em>selection</em> = <em>window</em>.getSelection() ; +</pre> + +<ul> + <li><code>selection</code> è un oggetto di tipo <a href="it/DOM/Selection">Selection</a>.</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval">function esempio() { + var selezione = window.getSelection(); + window.alert(selezione); + var range = selezione.getRangeAt(0); + // fai qualcosa con il range +} +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>In JavaScript, quando un oggetto selezione viene passato a una funzione che si aspetta una stringa (come <code><a href="it/DOM/window.alert">window.alert</a></code> o <code><a href="it/DOM/document.write">document.write</a></code>), al suo posto viene passata una stringa, generalmente corrispondente al testo selezionato. Questo fa si che selection assomigli a una stringa, mentre invece è un normale oggetto dotato di metodi e proprietà. La stringa passata è infatti il risultato di <code><a href="/it/docs/Web/JavaScript/Reference/Global_Objects/String/toString">toString()</a></code>.</p> + +<p>Nell'esempio sopra, <code>selezione</code> è automaticamente "convertito" quando viene passato a <code><a href="it/DOM/window.alert">window.alert</a></code>. Tuttavia per utilizzare una proprietà o un metodo della classe <a href="it/JS/String">String</a>, come ad esempio <code><a href="it/JS/String.prototype.length">length</a></code> o <code><a href="it/JS/String.prototype.substr">substr</a></code>, occorre chiamare esplicitamente il metodo <code>toString</code>.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuna specifica.</p> + +<h2 id="Vedi_anche" name="Vedi_anche">Vedi anche</h2> + +<p><a href="it/DOM/Selection">Selection</a>, <a href="it/DOM/range">Range</a></p> diff --git a/files/it/web/api/window/history/index.html b/files/it/web/api/window/history/index.html new file mode 100644 index 0000000000..5f087d8d0e --- /dev/null +++ b/files/it/web/api/window/history/index.html @@ -0,0 +1,37 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +<div>{{APIRef}}</div> + +<p>Restituisce un riferimento all'oggetto <code>history</code>, che fornisce un'interfaccia per manipolare la Cronologia del browser.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><i>oggettoHistory</i> = window.history +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>oggettoHistory</code> è un riferimento a un oggetto <code>history</code></li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre>h = window.history; +if ( h.length ) { // se c'è una cronologia + h.back(); // vai indietro nella cronologia +} +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>L'oggetto <code>history</code> fornisce la seguente interfaccia: current, length, next, previous, back(), forward(), go().</p> + +<p>E' possibile accedere a questa interfaccia dall'oggetto <code>window</code> chiamando, per esempio, <code>window.history.back()</code>.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>HTML5</p> diff --git a/files/it/web/api/window/home/index.html b/files/it/web/api/window/home/index.html new file mode 100644 index 0000000000..ab9086cc2f --- /dev/null +++ b/files/it/web/api/window/home/index.html @@ -0,0 +1,24 @@ +--- +title: Window.home() +slug: Web/API/Window/home +translation_of: Web/API/Window/home +--- +<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div> + +<p>Rimanda il browser alla home page impostata.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.home() +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre>function vai_a_casa() { + window.home(); +} +</pre> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuna specifica.</p> diff --git a/files/it/web/api/window/index.html b/files/it/web/api/window/index.html new file mode 100644 index 0000000000..af317f6eab --- /dev/null +++ b/files/it/web/api/window/index.html @@ -0,0 +1,686 @@ +--- +title: Window +slug: Web/API/Window +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - TraduzioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Window +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Introduzione" name="Introduzione">Introduzione</h3> + +<p>Questo capitolo contiene una breve reference per tutti i metodi, proprietà, ed eventi disponibili attraverso l'oggetto <code>window</code> del DOM. L'oggetto <code>window</code> implementa l'interfaccia<em>window</em> , la quale eredita dall'interfaccia <strong>AbstractView</strong>.</p> + +<p>L'oggetto <code>window</code> rappresenta una finestra, contenente un documento DOM. La proprietà <span class="seoSummary"><code>document</code></span> punta ad un <span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/DOM/document">DOM document</a> ( documento DOM ) caricato in quella pagina</span></p> + +<p>Ogni tab che viene aperta contiene il suo personale oggetto <code>window</code>; ciò significa che l'oggetto <code>window</code> non è condiviso fra le varie tab aperte nella stessa finestra. Solo due metodi vengono condivisi dai vari oggetti <code>window</code> presenti in una stessa finestra, e sono i metodi <a href="it/DOM/window.resizeTo">window.resizeTo</a> e <a href="it/DOM/window.resizeBy">window.resizeBy</a>.</p> + +<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3> + +<dl> + <dt><a href="it/Components_object">window.Components</a></dt> + <dd>The entry point to many <a href="it/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="it/Components.classes">classes</a>, are only available to sufficiently privileged code.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.content">window.content</a> and window._content</dt> + <dd>Returns a reference to the content element in the current window. The variant with underscore is deprecated.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.closed">window.closed</a></dt> + <dd>This property indicates whether the current window is closed or not.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.controllers">window.controllers</a></dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.crypto">window.crypto</a></dt> + <dd>Returns the browser crypto object.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.defaultStatus">window.defaultStatus</a></dt> + <dd>Gets/sets the status bar text for the given window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.directories">window.directories</a></dt> + <dd>Returns a reference to the directories toolbar in the current chrome.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.document">window.document</a></dt> + <dd>Returns a reference to the document that the window contains.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.frameElement">window.frameElement</a></dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.frames">window.frames</a></dt> + <dd>Returns an array of the subframes in the current window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.history">window.history</a></dt> + <dd>Returns a reference to the history object.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.innerHeight">window.innerHeight</a></dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.innerWidth">window.innerWidth</a></dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.length">window.length</a></dt> + <dd>Returns the number of frames in the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.location">window.location</a></dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.locationbar">window.locationbar</a></dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.menubar">window.menubar</a></dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.name">window.name</a></dt> + <dd>Gets/sets the name of the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator">window.navigator</a></dt> + <dd>Returns a reference to the navigator object.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.appCodeName">window.navigator.appCodeName</a></dt> + <dd>Returns the internal "code" name of the current browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.appName">window.navigator.appName</a></dt> + <dd>Returns the official name of the browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.appVersion">window.navigator.appVersion</a></dt> + <dd>Returns the version of the browser as a string.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.cookieEnabled">window.navigator.cookieEnabled</a></dt> + <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.javaEnabled">window.navigator.javaEnabled()</a></dt> + <dd>Indicates whether Java is enabled in the host browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.language">window.navigator.language</a></dt> + <dd>Returns a string representing the language version of the browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.mimeTypes">window.navigator.mimeTypes</a></dt> + <dd>Returns a list of the MIME types supported by the browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.oscpu">window.navigator.oscpu</a></dt> + <dd>Returns a string that represents the current operating system.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.platform">window.navigator.platform</a></dt> + <dd>Returns a string representing the platform of the browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.plugins">window.navigator.plugins</a></dt> + <dd>Returns an array of the plugins installed in the browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.product">window.navigator.product</a></dt> + <dd>Returns the product name of the browser (e.g. "Gecko").</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.productSub">window.navigator.productSub</a></dt> + <dd>Returns the product version number (e.g. "5.0").</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.userAgent">window.navigator.userAgent</a></dt> + <dd>Returns the user agent string for the current browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.vendor">window.navigator.vendor</a></dt> + <dd>Returns the vendor name of the current browser (e.g. "Netscape6").</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.navigator.vendorSub">window.navigator.vendorSub</a></dt> + <dd>Returns the vendor version number (e.g. "6.1").</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.opener">window.opener</a></dt> + <dd>Returns a reference to the window that opened this current window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.outerHeight">window.outerHeight</a></dt> + <dd>Gets the height of the outside of the browser window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.outerWidth">window.outerWidth</a></dt> + <dd>Gets the width of the outside of the browser window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.pageXOffset">window.pageXOffset</a></dt> + <dd>Gets the amount of content that has been hidden by scrolling to the right.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.pageYOffset">window.pageYOffset</a></dt> + <dd>Gets the amount of content that has been hidden by scrolling down.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.parent">window.parent</a></dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.personalbar">window.personalbar</a></dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.pkcs11">window.pkcs11</a></dt> + <dd>Returns the pkcs11 object, which can be used to install drivers and other software associated with the pkcs11 protocol.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.prompter">window.prompter</a></dt> + <dd>Returns a reference to the prompt window, if any, currently displayed.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen">window.screen</a></dt> + <dd>Returns a reference to the screen object associated with the window.</dd> +</dl> + +<p><span class="comment">The following is duplicated on DOM:window.screen</span></p> + +<dl> + <dt><a href="it/DOM/window.screen.availTop">window.screen.availTop</a></dt> + <dd>Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.availLeft">window.screen.availLeft</a></dt> + <dd>Returns the first available pixel available from the left side of the screen.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.availHeight">window.screen.availHeight</a></dt> + <dd>Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.availWidth">window.screen.availWidth</a></dt> + <dd>Returns the amount of horizontal space in pixels available to the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.colorDepth">window.screen.colorDepth</a></dt> + <dd>Returns the color depth of the screen.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.height">window.screen.height</a></dt> + <dd>Returns the height of the screen in pixels.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.left">window.screen.left</a></dt> + <dd>Gets/sets the current distance in pixels from the left side of the screen.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.pixelDepth">window.screen.pixelDepth</a></dt> + <dd>Gets the bit depth of the screen.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.top">window.screen.top</a></dt> + <dd>Gets/sets the distance from the top of the screen.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screen.width">window.screen.width</a></dt> + <dd>Returns the width of the screen.</dd> +</dl> + +<p><span class="comment">end of duplicated content</span></p> + +<dl> + <dt><a href="it/DOM/window.screenX">window.screenX</a></dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.screenY">window.screenY</a></dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollbars">window.scrollbars</a></dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollMaxX">window.scrollMaxX</a></dt> + <dd>The maximum offset that the window can be scrolled to horizontally.</dd> + <dd>(i.e., the document width minus the viewport width)</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollMaxY">window.scrollMaxY</a></dt> + <dd>The maximum offset that the window can be scrolled to vertically.</dd> + <dd>(i.e., the document height minus the viewport height)</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollX">window.scrollX</a></dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollY">window.scrollY</a></dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.self">window.self</a></dt> + <dd>Returns an object reference to the window object itself.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.sidebar">window.sidebar</a></dt> + <dd>Returns a reference to the window object of the sidebar.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.status">window.status</a></dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.statusbar">window.statusbar</a></dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.toolbar">window.toolbar</a></dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.top">window.top</a></dt> + <dd>Returns a reference to the topmost window in the window hierarchy.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.window">window.window</a></dt> + <dd>Returns a reference to the current window.</dd> +</dl> + +<h3 id="Metodi" name="Metodi">Metodi</h3> + +<dl> + <dt><a href="it/DOM/window.alert">window.alert</a></dt> + <dd>Displays an alert dialog.</dd> +</dl> + +<p><span class="comment">base64 func <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=287112" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=287112</a> (see last comments) <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=123003" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=123003</a> <a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsGlobalWindow.cpp#4946" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946</a></span></p> + +<dl> + <dt><a href="it/DOM/window.atob">window.atob</a></dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.back">window.back</a></dt> + <dd>Moves back one in the window history.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.blur">window.blur</a></dt> + <dd>Sets focus away from the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.btoa">window.btoa</a></dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.captureEvents">window.captureEvents</a> {{ Obsolete_inline() }}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.clearInterval">window.clearInterval</a></dt> + <dd>Cancels the repeated execution set using <code>setInterval</code>.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.clearTimeout">window.clearTimeout</a></dt> + <dd>Clears a delay that's been set for a specific function.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.close">window.close</a></dt> + <dd>Closes the current window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.confirm">window.confirm</a></dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.dump">window.dump</a></dt> + <dd>Writes a message to the console.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.escape">window.escape</a></dt> + <dd>Encodes a string.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.focus">window.focus</a></dt> + <dd>Sets focus on the current window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.forward">window.forward</a></dt> + <dd>Moves the window one document forward in the history.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.getAttention">window.getAttention</a></dt> + <dd>Flashes the application icon.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.getComputedStyle">window.getComputedStyle</a></dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.getSelection">window.getSelection</a></dt> + <dd>Returns the selection object representing the selected item(s).</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.home">window.home</a></dt> + <dd>Returns the browser to the home page.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.moveBy">window.moveBy</a></dt> + <dd>Moves the current window by a specified amount.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.moveTo">window.moveTo</a></dt> + <dd>Moves the window to the specified coordinates.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.open">window.open</a></dt> + <dd>Opens a new window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.openDialog">window.openDialog</a></dt> + <dd>Opens a new dialog window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.print">window.print</a></dt> + <dd>Prints the current document.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.prompt">window.prompt</a></dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.releaseEvents">window.releaseEvents</a> {{ Obsolete_inline() }}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.resizeBy">window.resizeBy</a></dt> + <dd>Resizes the current window by a certain amount.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.resizeTo">window.resizeTo</a></dt> + <dd>Dynamically resizes window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scroll">window.scroll</a></dt> + <dd>Scrolls the window to a particular place in the document.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollBy">window.scrollBy</a></dt> + <dd>Scrolls the document in the window by the given amount.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollByLines">window.scrollByLines</a></dt> + <dd>Scrolls the document by the given number of lines.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollByPages">window.scrollByPages</a></dt> + <dd>Scrolls the current document by the specified number of pages.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.scrollTo">window.scrollTo</a></dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.setInterval">window.setInterval</a></dt> + <dd>Execute a function each X milliseconds.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.setTimeout">window.setTimeout</a></dt> + <dd>Sets a delay for executing a function.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.sizeToContent">window.sizeToContent</a></dt> + <dd>Sizes the window according to its content.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.stop">window.stop</a></dt> + <dd>This method stops window loading.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.unescape">window.unescape</a></dt> + <dd>Unencodes a value that has been encoded in hexadecimal (e.g. a cookie).</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.updateCommands">window.updateCommands</a></dt> +</dl> + +<h3 id="Gestori_di_Eventi" name="Gestori_di_Eventi">Gestori di Eventi</h3> + +<dl> + <dt><a href="it/DOM/window.onabort">window.onabort</a></dt> + <dd>An event handler property for abort events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onblur">window.onblur</a></dt> + <dd>An event handler property for blur events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onchange">window.onchange</a></dt> + <dd>An event handler property for change events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onclick">window.onclick</a></dt> + <dd>An event handler property for click events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onclose">window.onclose</a></dt> + <dd>An event handler property for handling the window close event.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.ondragdrop">window.ondragdrop</a></dt> + <dd>An event handler property for drag and drop events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onerror">window.onerror</a></dt> + <dd>An event handler property for errors raised on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onfocus">window.onfocus</a></dt> + <dd>An event handler property for focus events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onkeydown">window.onkeydown</a></dt> + <dd>An event handler property for keydown events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onkeypress">window.onkeypress</a></dt> + <dd>An event handler property for keypress events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onkeyup">window.onkeyup</a></dt> + <dd>An event handler property for keyup events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onload">window.onload</a></dt> + <dd>An event handler property for window loading.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onmousedown">window.onmousedown</a></dt> + <dd>An event handler property for mousedown events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onmousemove">window.onmousemove</a></dt> + <dd>An event handler property for mousemove events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onmouseout">window.onmouseout</a></dt> + <dd>An event handler property for mouseout events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onmouseover">window.onmouseover</a></dt> + <dd>An event handler property for mouseover events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onmouseup">window.onmouseup</a></dt> + <dd>An event handler property for mouseup events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onpaint">window.onpaint</a></dt> + <dd>An event handler property for paint events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onreset">window.onreset</a></dt> + <dd>An event handler property for reset events on the window.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onresize">window.onresize</a></dt> + <dd>An event handler property for window resizing.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onscroll">window.onscroll</a></dt> + <dd>An event handler property for window scrolling.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onselect">window.onselect</a></dt> + <dd>An event handler property for window selection.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onsubmit">window.onsubmit</a></dt> + <dd>An event handler property for submits on window forms.</dd> +</dl> + +<dl> + <dt><a href="it/DOM/window.onunload">window.onunload</a></dt> + <dd>An event handler property for unload events on the window.</dd> +</dl> + +<p>{{ languages( { "fr": "fr/DOM/window", "pl": "pl/DOM/window", "en": "en/DOM/window" } ) }}</p> diff --git a/files/it/web/api/window/localstorage/index.html b/files/it/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..f17f5cece8 --- /dev/null +++ b/files/it/web/api/window/localstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef()}}</p> + +<p><span class="seoSummary">La proprietà read-only <code>localStorage</code> ti permette di accedere all'oggetto {{domxref("Storage")}} per l'origine del {{domxref("Document")}}; i dati persistono anche tra diverse sessioni browser.</span> <code>localStorage</code> è simile a <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>, ma si differenzia dal fatto che i dati salvati con <code>localStorage</code>non hanno expiration time, i dati salvati in <code>sessionStorage</code> vengono cancellati al termine della sessione della pagina — cioé, quando la pagina viene chiusa.</p> + +<p>Si dovrebbe notare che i dati salvati in entrambi <code>localStorage</code> o <code>sessionStorage</code> <strong>sono specifici rispetto al protocollo della pagina.</strong></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>myStorage</em> = window.localStorage;</pre> + +<h3 id="Valore">Valore</h3> + +<p>L'oggetto {{domxref("Storage")}} che puo essere usato per accedere alla memoria del localStorage.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>La richiesta viola la policy decision, o l'origine non è un <a href="/en-US/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">valido scheme/host/port tuple</a> (può succedere, per esempio, se l'origine usa lo schema<code>file:</code> o <code>data:</code> ). Per esempio, l'utente può aver il browser configurato a negare i permessi di dati persistenti.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<p>Il seguente snippet accede all'oggetto local {{domxref("Storage")}} del dominio e aggiunge i dati usando {{domxref("Storage.setItem()")}}.</p> + +<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre> + +<p>La sintassi per leggere localStorage è la seguente:</p> + +<pre class="brush: js">var cat = localStorage.getItem("myCat");</pre> + +<p>La sintassi per rimuovere dati da localStorage è la seguente:</p> + +<pre class="brush: js">localStorage.removeItem("myCat");</pre> + +<div class="note"> +<p><strong>Note</strong>: Riferimenti di esempi completi all'articolo: <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usare lo Web Storage API</a>.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Tutti i browsers hanno livelli di capacità vari per entrambi<code>localStorage</code> e {{domxref("sessionStorage")}}. Qui una <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">dettagliata lista di tutte le capacità di vari browser</a>.</p> + +<div class="note"> +<p><strong>Note:</strong> A partire da iOS 5.1, Safari Mobile salva i dati di <code>localStorage</code> nella cartella cache, che è soggetta a rimozioni occasionali. Safari Mobile in Private mode previene la scrittura al <code>localStorage</code>.</p> +</div> + +<h2 id="Consulta_anche">Consulta anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("LocalStorage")}}</li> + <li>{{domxref("SessionStorage")}}</li> + <li>{{domxref("Window.sessionStorage")}}</li> +</ul> diff --git a/files/it/web/api/window/locationbar/index.html b/files/it/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..583c6def10 --- /dev/null +++ b/files/it/web/api/window/locationbar/index.html @@ -0,0 +1,43 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +translation_of: Web/API/Window/locationbar +--- +<div>{{APIRef}}</div> + +<p>Restituisce l'oggetto <code>locationbar</code>, che può essere reso invisibile.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><i>oggetto</i> = window.locationbar +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<p>Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.</p> + +<p>The following complete HTML example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.</p> + +<pre><html> +<head> + <title>Esperimenti sul DOM</title> + <script> + // modifico lo stato della barra in questa finestra + netscape.security.PrivilegeManager. + enablePrivilege("UniversalBrowserWrite"); + window.statusbar.visible=!window.statusbar.visible; + </script> +</head> +<body> + <p>Esperimenti sul DOM</p> +</body> +</html> +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso. Si veda anche: <a href="it/DOM/window.menubar">window.menubar</a>, <a href="it/DOM/window.personalbar">window.personalbar</a>, <a href="it/DOM/window.scrollbars">window.scrollbars</a>, <a href="it/DOM/window.statusbar">window.statusbar</a>, <a href="it/DOM/window.toolbar">window.toolbar</a></p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>HTML5</p> diff --git a/files/it/web/api/window/matchmedia/index.html b/files/it/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..a4dc984d9a --- /dev/null +++ b/files/it/web/api/window/matchmedia/index.html @@ -0,0 +1,91 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>Restituisce un nuovo oggetto {{domxref("MediaQueryList")}} che rappresenta i risultati dell'anaisi effettuta in base alla stringa <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> specificata.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre> + +<p><code>dove QueryString</code> è una stringa che rappresenta la ricerca media query per la quale restituire il nuovo oggetto {{domxref("MediaQueryList")}} .</p> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) { + /* the viewport is at least 400 pixels wide */ +} else { + /* the viewport is less than 400 pixels wide */ +}</pre> + +<p>Questo codice permette di gestire la pagina in modo diverso quando la finestra è molto piccola.</p> + +<p>Vedere <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a> per altri esempi.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità browser</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>9</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>10</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>12.1</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Specifica</h2> + +<ul> + <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li> +</ul> + +<h2 id="See_also" name="See_also">Vedere anche</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> + <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{domxref("MediaQueryListListener")}}</li> +</ul> diff --git a/files/it/web/api/window/moveby/index.html b/files/it/web/api/window/moveby/index.html new file mode 100644 index 0000000000..41f373f9eb --- /dev/null +++ b/files/it/web/api/window/moveby/index.html @@ -0,0 +1,36 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +<div>{{APIRef}}</div> + +<p>Sposta la finestra di un certo numero di pixel.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.moveBy(<i>x</i>, +<i>y</i>) +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>x</code> indica di quanti pixel la finestra deve essere spostata orizzontalmente</li> + <li><code>y</code> indica di quanti pixel la finestra deve essere spostata verticalmente</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre> function in_alto_a_destra() { + moveBy(10, -10); + } +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>E' possibile utilizzare numeri negativi come parametri. Questa funzione esegue uno spostamento della finestra relativamente alla sua posizione attuale, mentre <a href="it/DOM/window.moveTo">window.moveTo</a> la sposta in un punto assoluto.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/moveto/index.html b/files/it/web/api/window/moveto/index.html new file mode 100644 index 0000000000..5e9b2c271c --- /dev/null +++ b/files/it/web/api/window/moveto/index.html @@ -0,0 +1,37 @@ +--- +title: Window.moveTo() +slug: Web/API/Window/moveTo +translation_of: Web/API/Window/moveTo +--- +<div>{{APIRef}}</div> + +<p>Sposta la finestra alle coordinate specificate.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.moveTo(<i>x</i>, +<i>y</i>) +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>x</code> è l'asse orizzontale delle coordinate in cui vogliamo spostare la finestra</li> + <li><code>y</code> è l'asse verticale delle coordinate in cui vogliamo spostare la finestra</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre> function origine() { + // sposta la finestra all'angolo in alto a sinistra + window.moveTo(0, 0) + } +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Le coordinate iniziali sono 0, 0 e rappresentano l'angolo in alto a sinistra dello schermo. Questa funzione sposta la finestra in un punto assoluto, mentre <a href="it/DOM/window.moveBy">window.moveBy</a> la sposta relativamente alla sua posizione attuale.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/name/index.html b/files/it/web/api/window/name/index.html new file mode 100644 index 0000000000..8127d67285 --- /dev/null +++ b/files/it/web/api/window/name/index.html @@ -0,0 +1,23 @@ +--- +title: Window.name +slug: Web/API/Window/name +translation_of: Web/API/Window/name +--- +<p>{{APIRef}}<br> + Restituisce o imposta il nome della finestra.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><i>stringa</i> = window.name + window.name = +<i>stringa</i> +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval">window.name = "vista1"; +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Il nome della finestra viene utilizzato soprattutto per impostare i target dei link e dei form. In realtà una finestra non deve necessariamente avere un nome.</p> diff --git a/files/it/web/api/window/onuserproximity/index.html b/files/it/web/api/window/onuserproximity/index.html new file mode 100644 index 0000000000..41f760ee44 --- /dev/null +++ b/files/it/web/api/window/onuserproximity/index.html @@ -0,0 +1,45 @@ +--- +title: Window.onuserproximity +slug: Web/API/Window/onuserproximity +translation_of: Web/API/Window/onuserproximity +--- +<p>{{ ApiRef() }}</p> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">La proprietà </span></font><strong>Window.onuserproxymity</strong></code> rappresenta un {{domxref("EventHandler")}}, una funzione che viene richiamata quando l'evento {{event("userproximity")}} si verifica. Questi eventi sono del tipo {{domxref("UserProximityEvent")}} e si verificano quando il sensore di prossimità del dispositivo individua che un oggetto si sta avvicinando.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>window</em>.onuserproximity = <em>eventHandler</em></pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Proximity Events', '#user-proximity', 'Proximity Events') }}</td> + <td>{{ Spec2('Proximity Events') }}</td> + <td>Specifica iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div class="hidden">La tabella di compatibilità in questa pagina è da dati strutturati. Se vuoi contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandaci una pull request.</div> + +<p>{{Compat("api.Window.onuserproximity")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{event("userproximity")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity Events</a></li> +</ul> diff --git a/files/it/web/api/window/opener/index.html b/files/it/web/api/window/opener/index.html new file mode 100644 index 0000000000..368b0a2f74 --- /dev/null +++ b/files/it/web/api/window/opener/index.html @@ -0,0 +1,24 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +<div>{{APIRef}}</div> + +<p>Restituisce un riferimento alla finestra che ha aperto la finestra corrente.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><i>oggetto</i> = window.opener +</pre> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre> if window.opener != finestraPrincipale { + vaiInizio(window.opener); + } +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Quando una finestra viene aperta come popup da un'altra finestra, mantiene un riferimento a quest'ultima a cui si può accedere con <code>window.opener</code>. Se la finestra corrente non ha un "opener", questo metodo restituisce <code>null</code>.</p> diff --git a/files/it/web/api/window/orientationchange_event/index.html b/files/it/web/api/window/orientationchange_event/index.html new file mode 100644 index 0000000000..ba6e0dc550 --- /dev/null +++ b/files/it/web/api/window/orientationchange_event/index.html @@ -0,0 +1,66 @@ +--- +title: orientationchange +slug: Web/API/Window/orientationchange_event +translation_of: Web/API/Window/orientationchange_event +--- +<p>L'evento <code>orientationchange</code> si scatena quando viene modificato l'orientamento del dispositivo.</p> + +<h2 id="Informazioni_generali">Informazioni generali</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://compat.spec.whatwg.org/#event-orientationchange">Compatibility Living Standard</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Screen</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush:js;">// Note that "orientationchange" and screen.orientation are unprefixed in the following +// code although this API is still vendor-prefixed browsers implementing it. +window.addEventListener("orientationchange", function() { + alert("the orientation of the device is now " + screen.orientation.angle); +}); +</pre> diff --git a/files/it/web/api/window/print/index.html b/files/it/web/api/window/print/index.html new file mode 100644 index 0000000000..87f63a0b44 --- /dev/null +++ b/files/it/web/api/window/print/index.html @@ -0,0 +1,17 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +<div>{{APIRef}}</div> + +<p>Apre una finestra di stampa per stampare il documento corrente.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.print() +</pre> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/prompt/index.html b/files/it/web/api/window/prompt/index.html new file mode 100644 index 0000000000..a3336c95be --- /dev/null +++ b/files/it/web/api/window/prompt/index.html @@ -0,0 +1,51 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +<div>{{APIRef}}</div> + +<p>Mostra una finestra di dialogo che chiede all'utente di inserire del testo.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval"><i>input</i> = window.prompt( +<i>testo</i>, +<i>valore</i>); +</pre> + +<ul> + <li><code>input</code> è una stringa contenente il testo inserito dall'utente, oppure <code>null</code> se l'utente ha cliccato su "Cancella"</li> + <li><code>testo</code> è una stringa di testo da mostrare all'utente</li> + <li><code>valore</code> è una stringa contenente il valore che deve essere mostrato di default nel campo di testo; è un parametro opzionale</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre class="eval">var segno = prompt("Di che segno sei?"); +if (segno.toLowerCase() == "scorpione") + alert("Ma dai!.. anch'io!!!"); +</pre> + +<p>Quando l'utente clicca il bottone OK, viene restituito il testo che ha digitato. Se l'utente clicca su OK senza aver inserito del testo, viene restituita una stringa vuota. Se invece l'utente clicca su Cancella, la funzione restituisce <code>null</code>.</p> + +<h2 id="Note" name="Note">Note</h2> + +<p>Una finestra di dialogo contiene un campo di testo di una sola riga, un bottone OK e un bottone Cancella. La funzione restituisce il testo (eventualmente vuoto) inserito dall'utente nel campo di testo.</p> + +<p>A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and returns the (possibly empty) text the user inputted into that textbox.</p> + +<p>Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.</p> + +<p>I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di <a href="it/NsIPromptService">nsIPromptService</a>, invece di alert.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>HTML5</p> + +<h2 id="Altri_metodi" name="Altri_metodi">Altri metodi</h2> + +<ul> + <li>{domxref("window.alert", "alert")}}</li> + <li>{{domxref("window.confirm", "confirm")}}</li> +</ul> diff --git a/files/it/web/api/window/requestanimationframe/index.html b/files/it/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..f3c835b671 --- /dev/null +++ b/files/it/web/api/window/requestanimationframe/index.html @@ -0,0 +1,115 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - Animations + - Animazioni + - DOM + - DOM Reference + - Drawing + - Graphics + - Performance + - Reference + - Window + - requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +<div>{{APIRef}}</div> + +<div>Il metodo <strong><code>window.requestAnimationFrame()</code></strong>indica al browser che intendi eseguire un'animazione e desideri che il browser richiami una funzione specifica per aggiornare un'animazione prima che venga eseguito nuovamente il render del browser. Il metodo accetta una funzione di callback come argomento che verrà eseguita prima del nuovo render del browser.</div> + +<div> </div> + +<div class="note"><strong>Nota:</strong> la funzione di callback deve chiamare a sua volta <code>requestAnimationFrame() </code>se vuoi animare un'altro frame alla successiva azione di render del browser.</div> + +<p>Dovresti chiamare questo metodo ogni qualvolta intendi aggiornare lo stato della tua animazione sul monitor. In questo modo la tua richiesta verrà eseguita prima che il browser esegua nuvamente il render della pagina. Il numero di esecuzioni della callback è generalmente di 60 volte al secondo, ma di solito rispetta il refresh-rate del display per quasi tutti i browser secondo le raccomandazioni W3C.<br> + L'esecuzione di requestAnimationFrame() vengono messe in pausa in quasi tutti i browser quando la pagina è eseguita in un tab non visibile on in un {{ HTMLElement("iframe") }} non visibile in modo da migliorare le performance e l'utilizzo della batteria.</p> + +<p>Alla funzione di callback viene passato come singolo argomento il parametro {{domxref("DOMHighResTimeStamp")}} che indica i momento corrente in cui viene eseguito dalla coda di <code>requestAnimationFrame()</code><br> + Nel caso di callback multiple in un singolo frame, ogni funzione riceve lo stesso timestamp anche se è trascorso del tempo durante il calcolo di ogni processo.<br> + Il timestamp è un numero decimale, in millisecondi, con una precisione di 1ms (1000µs).</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Il parametro che specifica la funzione di callback da richiamare prima che venga eseguito il render successivo della pagina.<br> + La funzione accetta un solo parametro, {{domxref("DOMHighResTimeStamp")}}, che indica il momento esatto (nel formato {{domxref('performance.now()')}}) in cui <code>requestAnimationFrame()</code> inizia la sua esecuzione.</dd> +</dl> + +<h3 id="Valori_di_ritorno">Valori di ritorno</h3> + +<p>Un valore intero di tipo <code>long</code>, l'id della richiesta che identifica univocamente la callback specifica nella lista di callback. Questo è un valore assoluto, ma non dovresti fare nessun tipo di ragionamento sulla base di questo valore. Puoi, però, usare questo valore per passarlo a {{domxref("window.cancelAnimationFrame()")}} in modo da rimuovere/cancellare la callback dalla coda di richieste da eseguire.</p> + +<h2 id="Notes" name="Notes">Esempio</h2> + +<pre class="brush: js">var start = null; +var element = document.getElementById('SomeElementYouWantToAnimate'); +element.style.position = 'absolute'; + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.left = Math.min(progress / 10, 200) + 'px'; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step); +</pre> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Nessun cambiamento. Sostituisce il precedente.</p> + </td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td> + <p>Definizione iniziale</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_del_Browser">Compatibilità del Browser</h2> + +<div> + + +<p>{{Compat("api.Window.requestAnimationFrame")}}</p> +</div> + +<h2 id="See_also" name="See_also">Leggi anche</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> diff --git a/files/it/web/api/window/resizeby/index.html b/files/it/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..ee662251c4 --- /dev/null +++ b/files/it/web/api/window/resizeby/index.html @@ -0,0 +1,35 @@ +--- +title: Window.resizeBy() +slug: Web/API/Window/resizeBy +translation_of: Web/API/Window/resizeBy +--- +<p>{{APIRef}}</p> + +<p>Aumenta o diminuisce le dimensioni della finestra di un certo numero di pixel.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">window.resizeBy(<i>xDelta</i>, +<i>yDelta</i>) +</pre> + +<h3 id="Parametri" name="Parametri">Parametri</h3> + +<ul> + <li><code>xDelta</code> è il numero di pixel da aggiungere orizzontalmente</li> + <li><code>yDelta</code> è il numero di pixel da aggiungere verticalmente</li> +</ul> + +<h2 id="Esempio" name="Esempio">Esempio</h2> + +<pre>// rimpicciolisce la finestra +window.resizeBy(-200, -200); +</pre> + +<h2 id="Note" name="Note">Note</h2> + +<p>Questo metodo ridimensiona la finestra relativamente alle sue dimensioni attuali. Per ridimensionare la finestra in termini assoluti, è possibile utilizzare <a href="it/DOM/window.resizeTo">window.resizeTo</a>.</p> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/resizeto/index.html b/files/it/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..c716aa0411 --- /dev/null +++ b/files/it/web/api/window/resizeto/index.html @@ -0,0 +1,39 @@ +--- +title: Window.resizeTo() +slug: Web/API/Window/resizeTo +translation_of: Web/API/Window/resizeTo +--- +<p>{{APIRef}}</p> + +<p>Ridimensiona la finestra dinamicamente.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">window.resizeTo(<i>larghezza</i>, +<i>altezza</i>) +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>larghezza</code> è un intero che rappresenta la nuova larghezza in pixel</li> + <li><code>altezza</code> è un intero che rappresenta la nuova altezza in pixel</li> +</ul> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre> // questa funzione ridimensiona la finestra + // e fa in modo che occupi metà dello schermo + function ridimensiona() { + window.resizeTo(window.screen.availWidth/2, + window.screen.availHeight/2); + } +</pre> + +<h3 id="Note" name="Note">Note</h3> + +<p>Si veda anche <a href="it/DOM/window.resizeBy">window.resizeBy</a>.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/sessionstorage/index.html b/files/it/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..06c3b48c4a --- /dev/null +++ b/files/it/web/api/window/sessionstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +translation_of: Web/API/Window/sessionStorage +--- +<p>{{APIRef()}}</p> + +<p>La proprietà <strong><code>sessionStorage</code> </strong>permette di accedere all'oggetto di sessione {{domxref("Storage")}}. <code>sessionStorage</code> è simile a {{domxref("Window.localStorage")}}, l'unica differenza è che mentre i dati salvati in <code>localStorage</code> non hanno scadenza, i dati in <code>sessionStorage</code> vengono ripuliti ogniqualvolta la sessione della pagina termina. La sessione della pagina dura fino a quando il browser è aperto e sopravvive alla ricarica della pagina e al ripristino. <strong>L'apertura di una pagina in un nuovo tab o in una nuova finestra implica l'apertura di una nuova sessione, il che differisce da come funzionano i cookie di sessione.</strong></p> + +<p>Va ricordato che i dati memorizzati nel <code>sessionStorage</code> o <code>localStorage</code> <strong>sono specifici per il protocollo della pagina</strong>.</p> + +<pre class="brush: js">// Salva i dati nel sessionStorage +sessionStorage.setItem('key', 'value'); + +// Recupare i dati dal sessionStorage +var data = sessionStorage.getItem('key');</pre> + +<h3 id="Value">Value</h3> + +<p>Un oggetto {{domxref("Storage")}}.</p> + +<h2 id="Example">Example</h2> + +<p>Il seguente esempio accede all'oggetto di sessione corrente {{domxref("Storage")}} e vi aggiunge un elemento tramite {{domxref("Storage.setItem()")}}.</p> + +<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre> + +<p>Il seguente esempio salva automaticamente il contenuto di un campo di testo e se la pagina del browser viene ricaricata, ripristina il contenuto del campo di testo in modo da non perdere nessuna digitazione.</p> + +<pre class="brush: js">// Ottiene il campo di testo +var field = document.getElementById("field"); + +// Verifica se ha un valore di salvataggio automatico (autosave) +// (succederò solo se la pagina viene ricaricata accidentalmente) +if (sessionStorage.getItem("autosave")) { + // Ripristina il contenuto del campo di testo + field.value = sessionStorage.getItem("autosave"); +} + +// Rimane in ascolto di cambiamenti sul campo di testo +field.addEventListener("change", function() { + // E salva i risultati nell'oggetto sessionStorage + sessionStorage.setItem("autosave", field.value); +});</pre> + +<p> </p> + +<div class="note"> +<p><strong>Nota</strong>: Fare riferimento a <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> per un esempio completo.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto Base</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Ogni browser ha un livello di supporto differente per localStorage e sessionStorage. </p> + +<div class="note"> +<p><strong>Nota: </strong>da iOS 5.1, Safari Mobile salva i dati del localStorage nella directory cache, che è soggetta a pulizie occasinonali, tipicamente quando lo c'è poco spazio disponibile.</p> +</div> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("Window.localStorage")}}</li> +</ul> diff --git a/files/it/web/api/window/sidebar/index.html b/files/it/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/it/web/api/window/sidebar/index.html @@ -0,0 +1,56 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - NeedsTranslation + - Non-standard + - Property + - Reference + - TopicStub + - Window +translation_of: Web/API/Window/sidebar +--- +<div>{{APIRef}} {{Non-standard_header}}</div> + +<p>Returns a sidebar object, which contains several methods for registering add-ons with the browser.</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>The sidebar object returned has the following methods:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Method</th> + <th>Description (SeaMonkey)</th> + <th>Description (Firefox)</th> + </tr> + <tr> + <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> + <td>Adds a sidebar panel.</td> + <td rowspan="2">Obsolete since Firefox 23 (only present in SeaMonkey).<br> + End users can use the "load this bookmark in the sidebar" option instead. Also see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_Firefox_sidebar">Creating a Firefox sidebar.</a></td> + </tr> + <tr> + <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> + <td>Adds a sidebar panel, which is able to work in the background.</td> + </tr> + <tr> + <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td> + <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td> + </tr> + <tr> + <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td> + <td colspan="2">Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</td> + </tr> + <tr> + <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td> + <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td> + </tr> + </tbody> +</table> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>Mozilla-specific. Not part of any standard.</p> diff --git a/files/it/web/api/window/sizetocontent/index.html b/files/it/web/api/window/sizetocontent/index.html new file mode 100644 index 0000000000..4880ff9fbd --- /dev/null +++ b/files/it/web/api/window/sizetocontent/index.html @@ -0,0 +1,15 @@ +--- +title: window.sizeToContent +slug: Web/API/Window/sizeToContent +translation_of: Web/API/Window/sizeToContent +--- +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Ridimensiona automaticamente la finestra perchè si adatti al suo contenuto.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval">window.sizeToContent() +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">window.sizeToContent(); +</pre> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/status/index.html b/files/it/web/api/window/status/index.html new file mode 100644 index 0000000000..4b008c0afc --- /dev/null +++ b/files/it/web/api/window/status/index.html @@ -0,0 +1,26 @@ +--- +title: Window.status +slug: Web/API/Window/status +translation_of: Web/API/Window/status +--- +<div>{{APIRef("DOM")}}</div> + +<p>Legge o imposta il testo della barra di stato della finestra a cui si riferisce l'oggetto <code>window</code>.</p> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval"><i>stringa</i> = window.status +window.status = +<i>stringa</i> +</pre> + +<h3 id="Esempio" name="Esempio">Esempio</h3> + +<pre class="eval">while ( attesa ) { + window.status = "Sto caricando..."; +} +</pre> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/statusbar/index.html b/files/it/web/api/window/statusbar/index.html new file mode 100644 index 0000000000..6eb17fc2d8 --- /dev/null +++ b/files/it/web/api/window/statusbar/index.html @@ -0,0 +1,32 @@ +--- +title: window.statusbar +slug: Web/API/Window/statusbar +translation_of: Web/API/Window/statusbar +--- +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Restituisce l'oggetto <code>statusbar</code>, che rappresenta la barra di stato, la cui visibilità può essere disabilitata nel browser.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval"><i>oggetto</i> = window.statusbar +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<p>Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà <code>visible</code> dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.</p> +<pre><html> +<head> + <title>Esperimenti sul DOM</title> + <script> + // modifico lo stato della barra in questa finestra + netscape.security.PrivilegeManager. + enablePrivilege("UniversalBrowserWrite"); + window.statusbar.visible=!window.statusbar.visible; + </script> +</head> +<body> + <p>Esperimenti sul DOM</p> +</body> +</html> +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso.</p> +<p>Si veda anche: <a href="it/DOM/window.locationbar">window.locationbar</a>, <a href="it/DOM/window.menubar">window.menubar</a>, <a href="it/DOM/window.personalbar">window.personalbar</a>, <a href="it/DOM/window.scrollbars">window.scrollbars</a>, <a href="it/DOM/window.toolbar">window.toolbar</a></p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/stop/index.html b/files/it/web/api/window/stop/index.html new file mode 100644 index 0000000000..f807d3b843 --- /dev/null +++ b/files/it/web/api/window/stop/index.html @@ -0,0 +1,17 @@ +--- +title: window.stop +slug: Web/API/Window/stop +translation_of: Web/API/Window/stop +--- +<h3 id="Sommario" name="Sommario">Sommario</h3> +<p>Ferma il caricamento del documento corrente.</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<pre class="eval">window.stop() +</pre> +<h3 id="Esempio" name="Esempio">Esempio</h3> +<pre class="eval">window.stop(); +</pre> +<h3 id="Note" name="Note">Note</h3> +<p>Il metodo stop() riproduce ciò che accade quando l'utente clicca sul bottone stop del browser. Per via dell'ordine in cui vengono caricati gli script, questo metodo non può fermare il caricamento del documento in cui è contenuto, ma può fermare il caricamento di grandi immagini, nuove finestre e altri oggetti collegati al documento.</p> +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> +<p>DOM Level 0. Non è parte di alcuno standard.</p> diff --git a/files/it/web/api/window/top/index.html b/files/it/web/api/window/top/index.html new file mode 100644 index 0000000000..e884cc29d3 --- /dev/null +++ b/files/it/web/api/window/top/index.html @@ -0,0 +1,87 @@ +--- +title: Window.top +slug: Web/API/Window/top +tags: + - API + - DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/top +--- +<p>{{ APIRef }}</p> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>Ritorna un riferimento all'oggetto window più esterno nella gerarchia.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="eval">var <em>topWindow</em> = window.top; +</pre> + +<h2 id="Notes" name="Notes">Note</h2> + +<p>Mentre proprietà <code style="font-style: normal;"><a href="/en/DOM/window.parent" title="en/DOM/window.parent">window.parent</a> </code>restituisce un rifermiento alla window direttamente superiore, la proprietà window.top restituisce un riferimento alla window più alta nella gerarchia delle windows (la più esterna)</p> + +<p>Questa proprietà è particolarmente utile quando quando si sta lavorando da una window che può avere una o più windows che la contengono, in questo modo è possibile avere un riferimento alla window più esterna</p> + +<h2 id="Specification" name="Specification">Specifica</h2> + +<p>HTML5</p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h4 id="Gecko_notes">Gecko notes</h4> + +<div class="note"> +<p>Note: dalla versione <em>{{Gecko ("6.0")}}, questa proprietà è read only.</em></p> +</div> diff --git a/files/it/web/api/windoworworkerglobalscope/fetch/index.html b/files/it/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..057ab069a2 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,167 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +<div>{{APIRef("Fetch API")}}</div> + +<p>Il metodo <code><strong>fetch()</strong></code> del mixin {{domxref("WindowOrWorkerGlobalScope")}} avvia il processo di recupero di una risorsa dalla rete. Questo ritorna una "promise" che si risolve all'oggetto {{domxref("Response")}} che rappresenta la risposta alla tua richiesta.</p> + +<p><code>WorkerOrGlobalScope</code> è implementato sia da {{domxref("Window")}} sia da {{domxref("WorkerGlobalScope")}}, ciò significa che il metodo <code>fetch()</code> è disponibile in quasi tutti i contesti nei quali potresti voler recuperare risorse..</p> + +<p>Una promise {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} responge con un {{jsxref("TypeError")}} quando viene incontrato un errore di rete, sebbene questo stia spesso a significare un errore di permessi o simili. Un controllo accurato per un <code>fetch()</code> di successo richiederebbe di controllare che la promise si sia risolta, e anche il controllo che la proprietà {{domxref("Response.ok")}} ha valore <code>true</code>. Uno stato HTTP 404 non costituisce un errore di rete.</p> + +<p>Il metodo <code>fetch()</code> è controllato dalla direttiva <code>connect-src</code> della <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> piuttosto che dalla direttiva delle risorse che sta recuperando.</p> + +<div class="note"> +<p><strong>Nota</strong>: I parametri del metodo <code>fetch()</code> sono identici a quelli del costruttore {{domxref("Request.Request","Request()")}}.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Promise<Response> fetch(input[, init]);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><em>input</em></dt> + <dd>Definisce la risorsa ceh vuoi recuperare. Questa può essere: + <ul> + <li>Una {{domxref("USVString")}} contenente l'URL diretto della risorsa che vuoi recuperare. Alcuni browsers accettano <code>blob:</code> e <code>data:</code> come schemi.</li> + <li>Un oggetto {{domxref("Request")}}.</li> + </ul> + </dd> + <dt><em>init</em> {{Optional_inline}}</dt> + <dd>Un oggetto opzioni contenente qualsiasi impostazione personalizzata che si vuole applicare alla richiesta. Le opzioni possibili sono: + <ul> + <li><code>method</code>: Il metodo di richiesta, es., <code>GET</code>, <code>POST</code>.</li> + <li><code>headers</code>: Qualsiasi header si voglia aggiungere alla richiesta, contenuto in un oggetto {{domxref("Headers")}} o un oggetto letterale con valori {{domxref("ByteString")}}.</li> + <li><code>body</code>: Qualsiasi corpo si voglia aggiungere alla richiesta: può essere un oggetto {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, o {{domxref("USVString")}}. Si noti che una richiesta che usa il metodo <code>GET</code> o <code>HEAD</code> non può avere un corpo.</li> + <li><code>mode</code>: La modalità che si vuole usare per la richiesta, es., <code>cors</code>, <code>no-cors</code>, o <code>same-origin</code>.</li> + <li><code>credentials</code>: Le credenziali che si vuole vengano usate per la richiesta: <code>omit</code>, <code>same-origin</code>, o <code>include</code>. Per inviare automaticamente dei cookies per il dominio corrente, questa opzione deve essere indicata. Iniziando da Chrome 50, questa proprietà accetta anche un'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}}.</li> + <li><code>cache</code>: La modalità cache ceh si vuole usare per la richiesta: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, o <code>only-if-cached</code>.</li> + <li><code>redirect</code>: Il metodo di reindirizzamento: <code>follow</code> (seguire automaticamente i reindirizzamenti), <code>error</code> (interrompere con un errore se avviene un reindirizzamento), o <code>manual</code> (gestire manualmente i reindirizzamento). In Chrome il valore di default è <code>follow</code> (prima di Chrome 47 era impostato a <code>manual</code>).</li> + <li><code>referrer</code>: Una {{domxref("USVString")}} che specifica <code>no-referrer</code>, <code>client</code>, o una URL. Il valore predefinito è <code>client</code>.</li> + <li><code>referrerPolicy</code>: Specifica il valore dello header HTTP del referente. Può essere: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li> + <li><code>integrity</code>: Contiene il valore di <a href="/en-US/docs/Web/Security/Subresource_Integrity">integrità della sottorisorsa</a> (subresource integrity) della richiesta (es., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li> + <li><code>keepalive</code>: L'opzione <code>keepalive</code> può essere usata per premettere alla richiesta di sopravvivere alla pagina. Il recupero di una risorsa con l'opzione <code>keepalive</code> sostituisce l'API {{domxref("Navigator.sendBeacon()")}}. </li> + <li><code>signal</code>: Un'istanza oggetto {{domxref("AbortSignal")}}; permette di comunicare con una richiesta di recupero e di interromperla se lo si desidera con un {{domxref("AbortController")}}.</li> + </ul> + </dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una {{domxref("Promise")}} che risolve ad un oggetto {{domxref("Response")}}.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>Tipo</strong></th> + <th scope="col"><strong>Descrizione</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>AbortError</code></td> + <td>La richiesta è stata interrotta (tramite {{domxref("AbortController.abort()")}}).</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>Da <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> produrrà un <code>TypeError</code> se la URL possiede credenziali, come <code>http://user:password@example.com</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Esempi">Esempi</h2> + +<p>Nel nostro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">esempio Fetch Request</a> (vedi <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) viene creata un nuovo oggetto {{domxref("Request")}} usando il costruttore relativo, per poi recuperarlo con una chiamata <code>fetch()</code>. Siccome stiamo recuperando un'immagine, eseguiamo {{domxref("Body.blob()")}} alla risposta per dargli il tipo MIME adeguato in modo che venga gestito correttamente, poi creiamo un Oggetto URL dello stesso e lo mostriamo in un elemento {{htmlelement("img")}}.</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest).then(function(response) { + return response.blob(); +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p>Nel nostro esempio <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request</a> (vedi <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) facciamo la stessa cosa eccetto che passiamo un oggetto per l'inizializzazione quando invochiamo <code>fetch()</code>:</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myHeaders = new Headers(); +myHeaders.append('Content-Type', 'image/jpeg'); + +var myInit = { method: 'GET', + headers: myHeaders, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest,myInit).then(function(response) { + ... +});</pre> + +<p>Si noti che si può passare l'oggetto per l'inizializzazione insieme al costruttore <code>Request</code> per ottenere lo stesso effetto, es.:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre> + +<p>Si può anche usare un oggetto letterale come <code>headers</code> in <code>init</code>.</p> + +<pre class="brush: js">var myInit = { method: 'GET', + headers: { + 'Content-Type': 'image/jpeg' + }, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg', myInit); +</pre> + +<h2 id="Specificazioni">S<span class="short_text" id="result_box" lang="it"><span>pecificazioni</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definito in un <code>WindowOrWorkerGlobalScope</code> parziale nella specifica più recente.</td> + </tr> + <tr> + <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definizione iniziale</td> + </tr> + <tr> + <td>{{SpecName('Credential Management')}}</td> + <td>{{Spec2('Credential Management')}}</td> + <td>Aggiunge l'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} com un valore possibile per <code>init.credentials</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div class="hidden">La tabella delle compatibilità su questa pagina è generata da dati strutturati. Se vuoi contribuire ai dati, per favore visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e invia una richiesta pull.</div> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/it/web/api/windoworworkerglobalscope/index.html b/files/it/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f7151242c7 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,115 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - NeedsTranslation + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +<div>{{ApiRef()}}</div> + +<p>The <strong><code>WindowOrWorkerGlobalScope</code></strong> mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowOrWorkerGlobalScope</code>.</p> +</div> + +<h2 id="Properties_2">Properties</h2> + +<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p> + +<div id="Properties"> +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the origin of the global scope, serialized as a string.</dd> +</dl> +</div> + +<h2 id="Methods">Methods</h2> + +<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>This is where the main mixin is defined.</td> + </tr> + <tr> + <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definition of the <code>fetch()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Definition of the <code>caches</code> property.</td> + </tr> + <tr> + <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td> + <td>{{Spec2('IndexedDB 2')}}</td> + <td>Definition of the <code>indexedDB</code> property.</td> + </tr> + <tr> + <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}</td> + <td>{{Spec2('Secure Contexts')}}</td> + <td>Definition of the <code>isSecureContext</code> property.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}}</li> + <li>{{domxref("WorkerGlobalScope")}}</li> +</ul> diff --git a/files/it/web/api/windowtimers/clearinterval/index.html b/files/it/web/api/windowtimers/clearinterval/index.html new file mode 100644 index 0000000000..63b0682983 --- /dev/null +++ b/files/it/web/api/windowtimers/clearinterval/index.html @@ -0,0 +1,48 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +<div> +<div>{{APIRef("HTML DOM")}}</div> +</div> + +<p>Interrompe l'azione ripetuta dall'utilizzo del comando {{domxref("window.setInterval", "setInterval")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><em>window</em>.clearInterval(<var>intervalID</var>) +</pre> + +<p><font face="Consolas, Liberation Mono, Courier, monospace">intervalID è un identificatore dell'azione ripetuta che vuoi cancellare. Questo ID viene passato con il return di setInterval().</font></p> + +<h2 id="Example" name="Example">Esempio</h2> + +<p>Vedi <a href="/en-US/docs/DOM/window.setInterval#Example" title="DOM/window.setInterval#Example"><code>setInterval()</code> example</a>.</p> + +<h2 id="Specification" name="Specification">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li> + <li>{{domxref("WindowTimers.setTimeout")}}</li> + <li>{{domxref("WindowTimers.setInterval")}}</li> + <li>{{domxref("WindowTimers.clearTimeout")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> diff --git a/files/it/web/api/windowtimers/index.html b/files/it/web/api/windowtimers/index.html new file mode 100644 index 0000000000..d95ede2948 --- /dev/null +++ b/files/it/web/api/windowtimers/index.html @@ -0,0 +1,124 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface does not define any property, nor inherit any.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface does not inherit any method.</em></p> + +<dl> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td>1.0</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/it/web/api/worker/index.html b/files/it/web/api/worker/index.html new file mode 100644 index 0000000000..5b8c7518a7 --- /dev/null +++ b/files/it/web/api/worker/index.html @@ -0,0 +1,107 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM +translation_of: Web/API/Worker +--- +<p>{{APIRef("Web Workers API")}}</p> + +<p>L'interfaccia <strong><code>Worker</code></strong> delle <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> rappresenta un processo in background che può essere facilmente generato e in grado di inviare messaggi al creatore. Per creare un worker basta specificare nel metodo costruttore <code>Worker()</code> lo script che sarà incaricato di eseguire.</p> + +<p>I Workers saranno poi in grado di inizializzare ulteriori workers fintanto che questi workers hanno la stessa <a href="/en-US/docs/Web/Security/Same-origin_policy">origine</a> della pagina su cui sono ospitati (NB: l'annidamento di workers <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">non è ancora implementato in Blink</a>). I workers possono tuttavia usare <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> per richiamare risorse esterne, a patto che gli attributi <code>responseXML</code> e <code>channel</code> di <code>XMLHttpRequest</code> restituiscano <code>null</code>.</p> + +<p><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Non tutte le interfacce nè i metodi sono disponibili</a> nel contesto dello script interpretato da un <code>Worker</code>.</p> + +<p>Se si vuole utilizzare i workers nelle estensioni per Firefox ed avere accesso a <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, bisogna utilizzare l'interfaccia {{ domxref("ChromeWorker") }}.</p> + +<h2 id="Costruttori">Costruttori</h2> + +<dl> + <dt>{{domxref("Worker.Worker", "Worker()")}}</dt> + <dd>Crea un worker che eseguirà lo script specificato nella URL. I Workers possono essere anche invocati tramite <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd> +</dl> + +<h2 id="Proprietà">Proprietà</h2> + +<p><em>Eredita proprietà dal suo parent, {{domxref("EventTarget")}}, e implementa quelle di {{domxref("AbstractWorker")}}.</em></p> + +<h3 id="Eventi_gestiti">Eventi gestiti</h3> + +<dl> + <dt>{{domxref("AbstractWorker.onerror")}}</dt> + <dd>Un {{ domxref("EventListener") }} invocato quando un {{domxref("ErrorEvent")}} di tipo <code>error</code> arriva al worker. Questo evento è ereditato da {{domxref("AbstractWorker")}}.</dd> + <dt>{{domxref("Worker.onmessage")}}</dt> + <dd>Un {{ domxref("EventListener") }} invocato quando un {{domxref("MessageEvent")}} di tipo <code>message</code> arriva al worker — Per esempio quando un messaggio viene inviato al documento parent da un worker tramite {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Il messaggio viene salvato nella proprietà {{domxref("MessageEvent.data", "data")}} dell'evento.</dd> + <dt>{{domxref("Worker.onmessageerror")}}</dt> + <dd>Un {{domxref("EventHandler")}} che rappresenta il codice da invocare quando l'evento {{event("messageerror")}} è invocato.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<p><em>Eredita i metodi del suo parent, {{domxref("EventTarget")}}, e quelli di {{domxref("AbstractWorker")}}.</em></p> + +<dl> + <dt>{{domxref("Worker.postMessage()")}}</dt> + <dd>Invia un messaggio (<code>any</code> JavaScript object) al contesto interno del worker.</dd> + <dt>{{domxref("Worker.terminate()")}}</dt> + <dd>Termina immediatamente il worker troncando qualsiasi operazione in corso. Le istanze di ServiceWorker non supportano questo metodo.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<p>Il codice che segue mostra la creazione di un oggetto {{domxref("Worker")}} usando il costruttore {{domxref("Worker.Worker", "Worker()")}} e l'invio di un messaggio:</p> + +<pre class="brush: js">var myWorker = new Worker('worker.js'); +var first = document.querySelector('#number1'); +var second = document.querySelector('#number2'); + +first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Messaggio inviato al worker'); +}</pre> + +<p>Per un esempio completo: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Esempio worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/"> esegui worker</a>).</p> + +<h2 id="Specifiche"><br> + Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>Il supporto dipende per ciascun tipo di worker. Controlla le pagine dei singoli worker per avere maggiori dettagli.</p> + + + +<p>{{Compat("api.Worker")}}</p> + +<h3 id="Cross-origin_worker_comportamento_in_caso_di_errore">Cross-origin worker, comportamento in caso di errore</h3> + +<p>Nelle prime implementazioni browser caricare uno script cross-origin per un worker causava un errore <code>SecurityError</code>; nelle implementazioni piu' recenti invece viene generato un evento {{event("error")}} per rispettare le specifiche. Puoi trovare maggiori informazioni su come gestire queste situazioni qui: <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p> + +<h2 id="Vedi_Anche">Vedi Anche</h2> + +<ul> + <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Usare workers web</a></li> + <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Funzioni disponibili nei workers</a></li> + <li>Altri tipi di workers: { domxref("SharedWorker") }} e <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li> + <li>Non standard, Gecko-specific workers usati dalle estensioni: {{ domxref("ChromeWorker") }}</li> +</ul> diff --git a/files/it/web/api/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..634bd2ea10 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/index.html @@ -0,0 +1,173 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX API HTTP XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +<div>{{outdated()}}</div> + +<p>Questo oggetto è il cuore di <a href="/it/docs/AJAX">AJAX</a>: è infatti lo strumento che <a href="/it/docs/JavaScript">JavaScript</a> utilizza per accedere a un documento <a href="/it/docs/XML">XML</a>.</p> + +<p>Il W3C ha pubblicato una <a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/">bozza</a> di standard per questo oggetto il 5 aprile 2006.</p> + +<p>Seguono alcuni link:</p> + +<ul> + <li><a href="/it/docs/Cambiamenti_di_XMLHttpRequest_in_Gecko1.8">Cambiamenti di XMLHttpRequest in Gecko1.8</a></li> + <li><a href="/it/docs/Compatibilit%c3%a0_di_AJAX">Compatibilità di AJAX</a></li> +</ul> + +<ul> + <li><a class="external" href="http://kb.mozillazine.org/XMLHttpRequest">XMLHttpRequest su MozillaZine</a> (EN)</li> + <li><a class="external" href="http://xulplanet.com/references/objref/XMLHttpRequest.html">XMLHttpRequest su XULPlanet</a> (EN)</li> + <li><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIXMLHttpRequest.html">nsIXMLHttpRequest su XULPlanet</a> (EN)</li> + <li><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIJSXMLHttpRequest.html">nsIJSXMLHttpRequest su XULPlanet</a> (EN)</li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/extensions/xmlextras/base/public/nsIXMLHttpRequest.idl">Pagina LXR per nsIXMLHttpRequest.idl</a> (EN)</li> +</ul> + +<div>{{APIRef("XMLHttpRequest")}}</div> + +<p><span class="seoSummary"><code>XMLHttpRequest</code></span> è una API (interfaccia alla progammazione) la quale fornisce al client le funzionalità di trasferire bidirezionalmente dati tra esso ed il server in maniera sincrona od asincrona senza che il browser richieda al server una porzione di dati senza necessariamente effettuar l'aggiornamento della pagina.</p> + +<p>Nonostante il nome dato, XMLHttpRequest, originariamente sviluppato da Microsoft e successivamente adottato dalle altre case di sviluppo browser attraverso il suo <a href="https://xhr.spec.whatwg.org/">standard</a>, supporta protocolli <a href="https://it.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a> (inclusi quelli di tipo <code>file ed ftp</code>) oltre che l'XML.</p> + +<h2 id="Struttura_di_controllo">Struttura di controllo</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> + <dd>La struttura di controllo viene inizializzata con la funzione XMLHttpRequest() e necessita la sua chiamata prima di ogni altro suo metodo.</dd> +</dl> + +<h2 id="Proprietà">Proprietà</h2> + +<p><em>XMLHttpRequest eredita le proprietà di {{domxref("XMLHttpRequestEventTarget")}} e di {{domxref("EventTarget")}}:</em></p> + +<dl> + <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> + <dd>E' un {{domxref("EventHandler")}} chiamato al mutare di un <code>readyState</code> (stato di un evento).</dd> + <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> + <dd>Restituisce un <code>unsigned short</code>, rappresentante lo stato della richiesta.</dd> + <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> + <dd>Restituisce dati di tipo {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, oggetti JavaScript, od una {{domxref("DOMString")}}, a seconda del valore {{domxref("XMLHttpRequest.responseType")}}. la quale descrive l'entità del corpo della richiesta.</dd> + <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> + <dd>Restituisce una {{domxref("DOMString")}} la quale contiene l'esito della chiamata sotto forma testuale oppure <code>null</code> se la richiesta non ha riscontri o nel caso non sia stata ancora operata.</dd> + <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> + <dd>E' un valore enumerato il quale definisce il tipo del risultato della chiamata.</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> + <dd>Restituisce l'URL serializzato dell'esito della chiamata (in una stringa vuota se l'URL è vacante).</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> + <dd>Restituisce un {{domxref("Documento")}} contenente l'esito della chiamata (di tipo <code>null</code> nei casi in cui la richiesta non abbia esito, non sia stata inviata, o non possa essere convertita in XML o HTML). Not available in workers.</dd> + <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> + <dd>Restituisce un dato di tipo <code>unsigned short</code> rappresentante lo stato dell'esito della chiamata.</dd> + <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> + <dd>Restituisce una {{domxref("DOMString")}} contentente l'esito (in forma di stringa) fornita dal server HTTP. A differenza di {{domxref("XMLHTTPRequest.status")}}, include l'intero testo del messaggio in risposta (es. "<code>200 OK</code>").</dd> + <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> + <dd>Restituisce un <code>unsigned long</code> rappresentante il numero (espresso in millisecondi) rimanente alla chiamata prima che questa venga automaticamente soppressa.</dd> + <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> + <dd>E' un {{domxref("EventHandler")}} (gestore di eventi) che può occorrere quando una richiesta termina in timeout. {{gecko_minversion_inline("12.0")}}</dd> + <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> + <dd>{{domxref("XMLHttpRequestUpload")}}, rappresenta un processo di upload.</dd> + <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> + <dd>Fornisce uno stato {{jsxref("Boolean")}} che indica quando //that indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers.</dd> + <dd> </dd> + <dd> + <h3 id="Proprietà_non-standard">Proprietà non-standard</h3> + </dd> + <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> + <dd>{{Interface("nsIChannel")}}. Definisce il canale utilizzato dall'oggetto quando effettua la chiamata.</dd> + <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> + <dd>Restituisce un dato boolenao, true nel caso la chiamata venga inviata priva di cookie e/o dati di autenticazione nell'header.</dd> + <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> + <dd>Restituisce un dato booleano true nel caso in cui gli stessi parametri di origine non siano comparati dalla chiamata.</dd> + <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> + <dd>Restituisce un valore booleano indicante se l'oggetto rappresenta una chiamata attiva latente.</dd> + <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> + <dd>E' un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. contentente il risultato della chiamata in forma di un array JavaScript tipizzato.</dd> + <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> + <dd><strong>Questa funzione Gecko-only , booleana, è stata rimossa a partire da Firefox/Gecko 22.</strong> In sostituzione si veda <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, o <code>responseText</code> per il monitoraggio dei progressi degli eventi.</dd> + <dd> + <h3 id="Gestori_degli_eventi">Gestori degli eventi</h3> + + <p><code>onreadystatechange</code> come proprietà dell'istanza <code>XMLHttpRequest</code> è supportata in ogni browser.</p> + + <p>In virtù di ciò, un numero sempre maggiore di trigger degli eventi è stata implementata in vari browser (onload, onerror, onprogress, etc.). Ognuno di questi è supportato da Firefox, in particolare si veda <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> e <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> + + <p>Molte versioni recenti di browser, Firefox e derivate incluse, supportano la ricezione degli eventi <code>XMLHttpRequest</code> mediante le API standard <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> in aggiunta alle proprietà aggiuntive applicate ai metodi dei gestori degli eventi.</p> + + <h2 id="Metodi">Metodi</h2> + </dd> + <dt> {{domxref("XMLHttpRequest.abort()")}}</dt> + <dd> </dd> + <dd>Interrompe la chiamata se è stata già inviata.</dd> + <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> + <dd>Restituisce tutti gli header in risposta, separati da <a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>, sottoforma di stringa o <code>null</code> se non viene ricevuto nessun risultato.</dd> + <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> + <dd>Restituisce la stringa contenente il testo dell'header specifico o <code>null</code> se anche il risultato non è stato ricevuto o l'header non esiste.</dd> + <dt>{{domxref("XMLHttpRequest.open()")}}</dt> + <dd>Inizializza una chiamata. Questa funzione è derivante da codice Javascript; per inizializzare una chiamata dal codice nativo si veda <a class="internal" href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest%28%29"><code>openRequest()</code></a>.</dd> + <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> + <dd>Revoca il MIME type inviato dal server.</dd> + <dt>{{domxref("XMLHttpRequest.send()")}}</dt> + <dd>Invia la richiesta. Se la richiesta è asincrona (come è di default) questo metodo risponde non appena terminato l'invio della richiesta attiva.</dd> + <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> + <dd>Stabilisce il valore di un header HTTP di richiesta. E' preferibile chiamare <code>setRequestHeader()dopo</code> <a href="https://developer.mozilla.org/it/docs/Web/API/XMLHttpRequest$edit#open"><code>open()</code></a>, ma prima di <code>send()</code>.</dd> + <dd> + <h3 id="Metodi_non-standard">Metodi non-standard</h3> + </dd> + <dt>{{domxref("XMLHttpRequest.init()")}}</dt> + <dd>Inizializza l'oggetto da usare in codice C++.</dd> + <dd> + <div class="warning"><strong>Attenzione:</strong> Questo metodo <em>non</em> deve essere eseguito da JavaScript.</div> + </dd> + <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> + <dd>Inizializza una richiesta. Questo metodo è derivante da codice nativo; per inizializzare una richiesta da JavaScript si utilizzi invece <a class="internal" href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open%28%29"><code>open()</code></a>.</dd> + <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> + <dd>Una variante del metodo <code>send()</code> il quale invia dati binari.</dd> + <dt> + <h2 id="Specifiche">Specifiche</h2> + + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Live standard, ultima versione</td> + </tr> + </tbody> + </table> + </dt> +</dl> + +<h2 id="Compatibilità">Compatibilità</h2> + +<p> </p> + + + +<div>{{Compat("api.XMLHttpRequest")}}</div> + +<h2 id="Voci_correlate">Voci correlate</h2> + +<ul> + <li>MDN tutorials su XMLHttpRequest: + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started">AJAX — Getting Started</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData"><code>FormData</code></a></li> + </ul> + </li> + <li><a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> + <li><code>Chrome scope availability</code> — how to access XMLHttpRequest from JSM modules etc., which do not have access to DOM + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li> + </ul> + </li> +</ul> diff --git a/files/it/web/api/xmlhttprequest/onreadystatechange/index.html b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..1bbfb02852 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,119 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +<div>{{APIRef}}</div> + +<p>UN <a href="/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>EventHandler</code></a> che è invocato ogni volta che l'attributo <code>readyState </code>cambia. la callback è invocata dal thread dell'interfaccia utente. </p> + +<p>La proprietà <strong><code>XMLHttpRequest.onreadystatechange</code></strong> contiene l<code>'event handler </code>che deve essere invocato quando l'evento {{event("readystatechange")}} si verifica, ovvero ogni volta in cui la proprietà {{domxref("XMLHttpRequest.readyState", "readyState")}} del {{domxref("XMLHttpRequest")}} viene modificata.</p> + +<div class="warning"> +<p><strong>Warning:</strong> This should not be used with synchronous requests and must not be used from native code. .</p> +</div> + +<p>L'evento <code>readystatechange</code> non si verificherà se una richiesta <code>XMLHttpRequest</code> viene cancellata utilizzando il metodo <a href="/en-US/docs/Web/API/XMLHttpRequest/abort">abort()</a>.</p> + +<div class="note"> +<p>UPDATE: it's firing in the latest version of browsers (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Example <a href="https://jsfiddle.net/merksam/ve5oc0gn/">here</a> - just reaload page few times.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre> + +<h3 id="Values">Values</h3> + +<ul> + <li><code><em>callback</em></code> è la funzione che viene eseguita quando <code>readyState</code> cambia.</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js">var xhr = new XMLHttpRequest(), + method = "GET", + url = "https://developer.mozilla.org/"; + +xhr.open(<em>method</em>, <em>url</em>, true); +xhr.onreadystatechange = function () { + if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { + console.log(xhr.responseText); + } +}; +xhr.send();</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatIe(7)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(1.2)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer version 5 and 6 supported ajax calls using <code>ActiveXObject()</code>.</p> diff --git a/files/it/web/api/xmlhttprequest/open/index.html b/files/it/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..b4786aecc6 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,115 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>Il metodo <strong>XMLHttpRequest.open()</strong> inizializza una richiesta. Questo metodo è utilizzato da codice JavaScript; invece, per inizializzare una richiesta da codice nativo, usare <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p> + +<div class="note"><strong>Nota:</strong> Chiamare questo metodo da una richiesta già attiva (una in cui <code>open()</code> o <code>openRequest()</code> è stata già chiamata) è equivalente a chiamare <code>abort()</code>.</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">XMLHttpRequest.open(<var>metodo</var>,<var> url</var>) +XMLHttpRequest.open(<var>metodo</var>,<var> url</var>,<var> async)</var> +XMLHttpRequest.open(<var>metodo</var>,<var> url</var>,<var> async</var>,<var> utente</var>) +XMLHttpRequest.open(<var>metodo</var>,<var> url</var>,<var> async</var>,<var> utente</var>,<var> password</var>) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>metodo</code></dt> + <dd>Il metodo HTTP da utilizzare, come "GET", "POST", "PUT", "DELETE", ecc. Campo ignorato per URL non-HTTP(S).</dd> + <dt><code>url</code></dt> + <dd>{{domxref("DOMString")}} che rappresenta l'URL a cui inviare la richiesta.</dd> + <dt><code>async</code> {{optional_inline}}</dt> + <dd>Un parametro opzionale Booleano, <code>true</code> in maniera predefinita, indicante se effettuare o meno l'operazione in modalità asincrona. Se questo valore è <code>false</code>, il metodo <code>send()</code> non ritornerà finchè la risposta non sarà ricevuta. Se <code>true</code>, la notifica di una transazione completata è fornita utilizzando gli event listener. Questo <em>must</em> essere true se l'attributo <code>multipart</code> è <code>true</code>, o partirà un eccezione. + <div class="note"><strong>Nota:</strong> Da Gecko 30.0 {{geckoRelease("30.0")}}, le richieste sincrone sul thread principale sono state deprecate a causa di effetti negativi sull'esperienza utente.</div> + </dd> + <dt><code>utente</code> {{optional_inline}}</dt> + <dd>Il valore opzionale del nome dell'utente da utilizzare per scopi di autenticazione; il valore predefinito è <code>null</code>.</dd> + <dt><code>password</code> {{optional_inline}}</dt> + <dd>La password opzionale da utilizzare per scopi di autenticaziones; il valore predefinito è <code>null</code>.</dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_fra_browser">Compatibilità fra browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown}}</td> + <td>{{CompatIe('5')}}<sup>[1]</sup><br> + {{CompatIe('7')}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('1.2')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Questa funzionalità è stata implementata attraverso ActiveXObject(). Internet Explorer implementa lo standard XMLHttpRequest dalla versione 7.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<p><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utilizzare XMLHttpRequest</a></p> diff --git a/files/it/web/api/xmlhttprequest/readystate/index.html b/files/it/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..a37fa1e1db --- /dev/null +++ b/files/it/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,152 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +translation_of: Web/API/XMLHttpRequest/readyState +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>la proprietà <strong>XMLHttpRequest.readyState</strong> restituisce lo stato nel quale si trova il client di una richiesta XMLHttpRequest. Un client <abbr title="XMLHttpRequest">XHR</abbr> si può trovare in uno degli stati seguenti:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Value</td> + <td class="header">State</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td>Il Client è stato creato, ma il metodo <code>open()</code> della XHR non è stato ancora invocato.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td>Il metodo <code>open()</code> è stato invocato.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td>Il metodo <code>send() </code>della XHR è stato invocato, e sono già disponibili lo status della risposta HTTP ed il suo header. </td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td>Sta avvenendo il download dei dati; <code>responseText</code> contiene dati parziali.</td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>L'operazione è stata completata.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>UNSENT</dt> + <dd>Il Client è stato creato, ma il metodo <code>open()</code> della XHR non è stato ancora invocato.</dd> + <dt>OPENED</dt> + <dd>Il metodo <code>open() </code>della XHR è stato invocato. In questo stato è possibile settare l' header della richiesta HTTP utilizzando il metodo <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a>; può essere invocato il metodo <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>, che inizia il fetch della richiesta.</dd> + <dt>HEADERS_RECEIVED</dt> + <dd>Il metodo send() è stato invocato e sono stati ricevuto gli headers della risposta; è possibile conoscere il codice della risposta HTTP ed i suoi metadati.</dd> + <dt>LOADING</dt> + <dd>Sta avvenendo il download del body della risposta HTTP; se il <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> è "text" o vuoto, <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a> </code>conterrà un testo parziale.</dd> + <dt>DONE</dt> + <dd>L'operazione di fetch è terminata; Questo può significare sia che il trasferimento dei dati è stato un successo e questi sono completamente disponibili o che è fallito.</dd> +</dl> + +<div class="note"> +<p>The state names are different in Internet Explorer. Instead of <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE, the names READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) and <code>READYSTATE_COMPLETE</code> (4) are used.</p> +</div> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var xhr = new XMLHttpRequest(); +console.log('UNSENT', xhr.readyState); // readyState sarà pari a 0 + +xhr.open('GET', '/api', true); +console.log('OPENED', xhr.readyState); // readyState sarà pari a 1 + +xhr.onprogress = function () { + console.log('LOADING', xhr.readyState); // readyState sarà pari a 3 +}; + +xhr.onload = function () { + console.log('DONE', xhr.readyState); // readyState sarà pari a 4 +}; + +xhr.send(null); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#states')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>{{CompatIe(7)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari("1.2")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html new file mode 100644 index 0000000000..4f55ac07ff --- /dev/null +++ b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html @@ -0,0 +1,741 @@ +--- +title: Usare XMLHttpRequest +slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +<p>Per inviare una richiesta HTTP, crea un oggetto {{domxref("XMLHttpRequest")}}, apri un URL, ed invia la richiesta. Dopo che la transazione è completata, l'oggetto conterrà informazioni utili come il testo di risposta e lo <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">stato HTTP</a>. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto <code>XMLHttpRequest</code>.</p> + +<pre class="brush: js">function reqListener () { + console.log(this.responseText); +} + +var oReq = new XMLHttpRequest(); +oReq.onload = reqListener; +oReq.open("GET", "http://www.example.org/example.txt"); +oReq.send();</pre> + +<h2 id="Tipi_di_Richieste">Tipi di Richieste</h2> + +<p>Una richiesta inviata con XMLHttpRequest può essere restituita in due modi, sincrona o asincrona. Il tipo di richiesta viene deciso dall'argomento opzionale <code>async</code> (il terzo argomento) che viene impostato nel metodo <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> di {{domxref("XMLHttpRequest.open()")}}. Se l'argomento è <code>true</code> o se non è specificato, il <code>XMLHttpRequest</code> è processato in maniera asincrona, in caso contrario è processato in maniera sincrona. Una discussione dettagliata è una dimostrazione di queste due tipologie di richieste possono essere trovate nella pagina <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">richieste sincrone ed asincrone</a>. In generale, dovresti usare raramente le richieste sincrone, se mai ne farai uso.</p> + +<div class="note"><strong>Nota:</strong> Da Gecko 30.0 {{ geckoRelease("30.0") }}, le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi sull'esperienza utente.</div> + +<h2 id="Gestire_le_risposte">Gestire le risposte</h2> + +<p>Ci sono vari tipi di <a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">attributi di risposta</a> definite dallo standard W3C sul costruttore XMLHttpRequest. Questi sono in grado di fornire al client che effettua la richiesta importanti informazioni sullo stato della risposta. In alcuni casi in cui si lavora con risposte di tipo non testuale possono riguardare alcuni elementi di analisi e manipulazioni come evidenziato dai paragrafi seguenti.</p> + +<h3 id="Analizzare_e_modificare_la_proprietà_responseXML">Analizzare e modificare la proprietà <code>responseXML</code></h3> + +<p>Se si usa l'oggetto <code>XMLHttpRequest</code> per ricevere il contenuto di un documento XML remoto, la proprietà <code>responseXML</code> dell'oggetto stesso sarà assegnata a un oggetto DOM contentente un il documento XML a cui è stata effettuata una operazione di parsing. Se si lavora con tale proprietà può essere difficile analizzare e modificare tale proprietà. Di seguito sono riportate i quattro principali metodi per lavorare con tale documento XML:</p> + +<ol> + <li>Utilizzare <a href="/en-US/docs/XPath" title="XPath">XPath</a> per indirizzare (cioè puntare a) parti di esso.</li> + <li>Usare <a href="/en-US/docs/JXON" title="JXON">JXON</a> per convertire il documento in un albero JavaScript Object.</li> + <li>Effettuare il <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing e la serializzazione XML</a> manualmente su stringhe e oggetti.</li> + <li>Utilizzare un <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> per serializzare <strong>alberi DOM su stringhe o file</strong>.</li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>possono essere utilizzate se si conosce sempre il contenuto del documento XML a priori. In tal caso, se si utilizzano delle espressioni regolari con coscienza dei ritorni di riga, può essere necessario o consigliato di rimuovere le interruzioni di riga. In ogni caso è sempre sconsigliato utilizzare questo metodo e di considerarlo solo come "ultima spiaggia" in quanto se il documento XML dovesse cambiare anche in modo irrisorio questa metodologia potrebbe fallire.</li> +</ol> + +<h3 id="Analizzare_e_manipolare_una_proprietà_responseText_contenentente_un_documento_HTML">Analizzare e manipolare una proprietà <code>responseText</code> contenentente un documento HTML</h3> + +<div class="note"><strong>Nota:</strong> La W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification permette il parse del codice HTML tramite la proprietà <code>XMLHttpRequest.responseXML</code>. SI legga l'articolo a riguardo <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> per dettagli.</div> + +<p>Se si utilizza l'oggetto <code>XMLHttpRequest</code> per ottenere il contenuto di una pagina HTML remota, la proprietà <code>responseText</code> conterrà un amalgama di tutti i tag HTML. Ciò può essere difficile da manipolare e analizzare. Ci sono principalmente tre divere metodologie per analizzare questo insieme:</p> + +<ol> + <li>Utilizzare la proprietà <code>XMLHttpRequest.responseXML</code>.</li> + <li>Iniettare il contenuto nel corpo di un <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> attraverso la proprietà <code>fragment.body.innerHTML</code> e navigare il codice DOM del fragment.</li> + <li>Ancora una volta <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>possono essere utlizzate se si conosce sempre il contenuto della risposta HTML. Questo metodo è, comuqnue, sconsigliato perchè anche una piccola modifica del codice HTML sorgente potrebbe protare questa metodologia a fallire.</li> +</ol> + +<h2 id="Gestire_dati_binari">Gestire dati binari</h2> + +<p>Nonostante l'oggetto <code>XMLHttpRequest</code> è principalmente utilizzato per ricevere e inviare dati testuali, può essere utilizzato per inviare e ricevere dati dal contenuto binario. Esistono svariati metodi ben testati per fare sì che l'oggetto in questione invii dati binari. Questi metodo prevedono l'utilizzo del metodo <code>.overrideMimeType(...)</code> sull'oggetto.</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); +oReq.open("GET", url, true); +// riceve dei dati non porcessati come una stringa binaria +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> + +<p>La XMLHttpRequest Level 2 Specification aggiunge un nuovo <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">attributo responseType</a> che permette di inviare e ricevere dati binari in modo molto più semplice.</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url, true); +oReq.responseType = "arraybuffer"; +oReq.onload = function(e) { + var arraybuffer = oReq.response; // non responseText + /* ... */ +} +oReq.send(); +</pre> + +<p>Per più esempi si veda la pagina <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a>.</p> + +<h2 id="Monitoraggio_del_progresso">Monitoraggio del progresso</h2> + +<p>L'oggetto <code>XMLHttpRequest</code> fornisce la possibilità di ascoltare svariati eventi che possono occorrere mentre la richiesta è processata. Questo inclulde periodici aggiornamenti sul progresso, notificazione di errori e così via.</p> + +<p>Il supporto agli eventi di monitoraggio del progresso DOM dell'oggetto <code>XMLHttpRequest</code> ripetta le API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification progress events</a>: tali eventi implementano l'interfaccia {{domxref("ProgressEvent")}}.</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.addEventListener("progress", updateProgress, false); +oReq.addEventListener("load", transferComplete, false); +oReq.addEventListener("error", transferFailed, false); +oReq.addEventListener("abort", transferCanceled, false); + +oReq.open(); + +// ... + +// progress on transfers from the server to the client (downloads) +function updateProgress (oEvent) { + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total; + // ... + } else { + // Impossibile elaborare il progresso perche' non si conosce la grandezza totale + } +} + +function transferComplete(evt) { + alert("Trasferimento completato!"); +} + +function transferFailed(evt) { + alert("E' avvenuto un errore nel trasferimento"); +} + +function transferCanceled(evt) { + alert("Il trasferimento è stato cancellato dall'utente"); +}</pre> + +<p>Le linee 3-6 aggiungono degli event listener per i vari eventi che sono inviati mentre si performa un trasferimento di dati con l'oggetto <code>XMLHttpRequest</code>.</p> + +<div class="note"><strong>Nota:</strong> Quando si assegnano degli event listeners è necessario farlo prima di chiamare il metodo <code>open()</code> sulla richiesta. Se ciò non viene effettuato gli eventi non vengono inviati.</div> + +<p>L'event handler per il progresso, specificato dalla funzione <code>updateProgress()</code> in questo esempio, riceve il numero totale di byte da trasferire e il numero di byte trasferiti finora nei campi <code>total</code> e <code>loaded</code> rispettivamente. In ogni caso, se il campo <code>lengthComputable</code> risulta falsa, la lunghezza totale risulta sconosciuta e sarà riportata come zero.</p> + +<p>Gli eventi di progresso esistono sia per il download che per l'upload. Gli eventi di download sono notificati sull'oggetto <code>XMLHttpRequest</code> stesso, come indicato dall'esempio sopra. Quelli di upload, invece, sono notificati sull'attributo <code>XMLHttpRequest.upload</code> come mostrato sotto:</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.upload.addEventListener("progress", updateProgress, false); +oReq.upload.addEventListener("load", transferComplete, false); +oReq.upload.addEventListener("error", transferFailed, false); +oReq.upload.addEventListener("abort", transferCanceled, false); + +oReq.open(); +</pre> + +<div class="note"><strong>Nota:</strong> Gli eventi di progresso non sono disponibili per il protocollo <code>file://</code>.</div> + +<div class="note"><strong>Nota</strong>: Correntemente ci sono dei bug aperti per gli eventi di progresso che affliggono la versione 25 di Firefox su <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> e <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div> + +<div class="note"> +<p><strong>Nota:</strong> A partire da {{Gecko("9.0")}}, gli eventi di progresso possono essere lanciati per ogni parte di dato ricevuta, inclusa l'ultima parte dove l'ultimo pacchetto è ricevuto e la connesione chiusa prima che l'evento di progresso sia notificato. In questo caso l'evento di progresso è notificato automaticamente quando occorre l'evento di "load" per tale pacchetto. Questo permette di creare un monitoraggio affidabile solamente osservando gli eventi di progresso.</p> +</div> + +<div class="note"> +<p><strong>Nota:</strong> A partire da {{Gecko("12.0")}}, se l'evento di progresso è chiamato con un <code>responseType</code> di tipo <code>moz-blob</code>, il valore di risposta sarà un {{domxref("Blob")}} contenente i dati ricevuti fino a quel punto.</p> +</div> + +<p>Si puà anche rilevare tutti e tre le tipologie di terminazione del caricamento(<code>abort</code>, <code>load</code> o <code>error</code>) utilizzando l'evento <code>loadend</code>:</p> + +<pre class="brush:js">req.addEventListener("loadend", loadEnd, false); + +function loadEnd(e) { + alert("Trasferimento terminato (anche se non sappiamo come)."); +} +</pre> + +<p>Si noti che non c'è modo di essere sicuri di conoscere con le informazioni ricevute dall'evento <code>loadend</code> quali condizioni hanno causato il termine dell'operazione. In ogni caso si può usare questo per gestire operazioni che devono essere eseguite al termine del trasferimento.</p> + +<h2 id="Inviare_form_e_caricare_file">Inviare form e caricare file</h2> + +<p>Istanze di un oggetto <code>XMLHttpRequest</code> possono essere usate per inviare form in principalmente due modi:</p> + +<ul> + <li>utilizzando AJAX</li> + <li>utilizzando le API fornite dall'oggetto <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li> +</ul> + +<p>Il <strong>secondo modo</strong> (utilizzando l'oggetto <code>FormData</code>) è il più semplice e veloce, ma ha lo svantaggio che i dati raccolto non possono essere <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">trasformati in stringa</a>.<br> + Il<strong> primo modo</strong>, invece, è più complesso, ma è anche in cambio più potente e flessibile.</p> + +<h3 id="Usando_loggetto_XMLHttpRequest">Usando l'oggetto <code>XMLHttpRequest</code></h3> + +<p>Inviare form senza le API dell'oggetto <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> non richiede l'utilizzo di altre API tranne nel caso di <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> nel caso <strong>si voglia caricare più di un file</strong>.</p> + +<h4 id="Una_breve_introduzione_del_metodo_submit">Una breve introduzione del metodo submit</h4> + +<p>Un html {{ HTMLElement("form") }} può essere inviata in quattro possibili modi:</p> + +<ul> + <li>utilizzando il metodo <code>POST</code> e assegnando all'attributo <code>enctype</code> il valore <code>application/x-www-form-urlencoded</code> (default);</li> + <li>utilizzando il metodo <code>POST</code> e assegnando all'attributo <code>enctype</code> il valore <code>text/plain</code>;</li> + <li>utilizzando il metodo <code>POST</code> e assegnando all'attributo <code>enctype</code> il valore <code>multipart/form-data</code>;</li> + <li>utilizzando il metodo <code>GET</code> (in tal caso l'attributo <code>enctype</code> sarà ignorato).</li> +</ul> + +<p>Ora, si consideri di inviare una form contenente solo due campi, chiamati <code>foo</code> e <code>baz</code>. Se si sta utilizzando il metodo <code>POST</code> il server riceverà una stringa simile a una delle seguenti tre linee a seconda del tipo di encoding utilizzato:</p> + +<ul> + <li> + <p>Metodo: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> + + <pre>Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>Metodo: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> + + <pre>Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>Metodo: <code>POST</code>; Encoding type: <code>multipart/form-data</code>:</p> + + <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> + +<p>Invece, se si utilizza un metodo <code>GET</code> una stringa simile alla seguente sarà semplicemente aggiunta all'URL:</p> + +<pre>?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + +<h4 id="Un_piccolo_framwork_vanilla">Un piccolo framwork vanilla</h4> + +<p>Tutte queste cose sono eseguite automaticamente dal web browser ogni volta che si esegue il submit di una {{ HTMLElement("form") }}. Ma se si vuole fare lo stesso usando JavaScript bisogna istruire l'interprete su <em>tutte</em> le operazioni da eseguire. Inviare delle form in AJAX <em>puro</em> risulta troppo complesso per essere spiegato qui; per questa ragione abbiamo creato un <strong>framework completo (ma comunque puramente didattico)</strong> che possa essere usato in tutti e quattro i metodi di submit e anche per caricare dei file.</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with pure AJAX &ndash; MDN</title> +<script type="text/javascript"> + +"use strict"; + +/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; +} + +/*\ +|*| +|*| :: AJAX Form Submit Framework :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| +|*| This framework is released under the GNU Public License, version 3 or later. +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +|*| Syntax: +|*| +|*| AJAXSubmit(HTMLFormElement); +\*/ + +var AJAXSubmit = (function () { + + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + alert(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* alert(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + } else { + /* method is POST */ + oAjaxReq.open("post", oData.receiver, true); + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); + oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); + } else { + /* enctype is application/x-www-form-urlencoded or text/plain */ + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + } else { + /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + /* field type is not FILE or is FILE but is empty */ + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" + : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; + +})(); + +</script> +</head> +<body> + +<h1>Sending forms with pure AJAX</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> + +<p>Per testarlo, create una pagina chiamata <strong>register.php </strong>(al quale fanno riferimento gli attributi action di queste form) e inserite il seguente contenuto.</p> + +<pre class="brush: php"><?php +/* register.php */ + +header("Content-type: text/plain"); + +/* +NOTE: You should never use `print_r()` in production scripts, or +otherwise output client-submitted data without sanitizing it first. +Failing to sanitize can lead to cross-site scripting vulnerabilities. +*/ + +echo ":: data received via GET ::\n\n"; +print_r($_GET); + +echo "\n\n:: Data received via POST ::\n\n"; +print_r($_POST); + +echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; +if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } + +echo "\n\n:: Files received ::\n\n"; +print_r($_FILES); + +</pre> + +<p>La sintassi per attivare lo script è semplicemente:</p> + +<pre class="syntaxbox">AJAXSubmit(myForm);</pre> + +<div class="note"><strong>Nota: </strong>Questo framework utilizza l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> per eseguire l'upload dei file. QUesta è una API recente e non ancora implementata nei browser come IE9 o inferiori. Per questa ragione l'upload AJAX-only è considerato una <strong>tecnica sperimentale</strong>. Se non si ha bisogno dell'upload di file binari questo framework funzionera egregiamente nella maggior parte dei browser.</div> + +<div class="note"><strong>Nota:</strong> Il modo migliore per inviare dei contenuti binari è attraverso <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> o <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> attraverso il metodo <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> e possibilmente il metodo <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> dell'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Ma, siccome l'obiettivo di questo script è di fuonzionare con dei dati <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiabli</a>, si è usato il metodo <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> assieme al metodo <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> delle API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Per questo, lo script sopra funziona sono quando si stanno gestendo file di piccole dimensioni. Se non si intende caricare del contenuto binario, considerare anche l'utilizzo delle API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</div> + +<h3 id="Usare_oggetti_FormData">Usare oggetti FormData</h3> + +<p>Il costruttore <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permette di compliare una serie di coppie chiave/valore da inviare utilizzando una <code>XMLHttpRequest</code>. Si utilizza principalmente per inviare dati in una form, ma può essere usato indipendentemente dalle form per inviare dei dati con chiavi. I dati trasmessi sono gli stessi del formato utilizzato dal metodo <code>submit()</code> che le form usano per inviare i dati se il tipo encoding indicato è "multipart/form-data". Gli oggetti FormData possono essere utilizzati in uno svariato numero possibile con una XMLHttpRequest. Per esempi o speigazioni di come utilizzare una FormData con XMLHttpRequest si veda la pagina <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Usare l'oggetto FormData</a>. Per fini didattici di seguito una traduzione dell'<strong><a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">esempio precedente</a> modificato per accettare l'API delle <code>FormData</code></strong>. Si noti la brevità del codice.</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with FormData &ndash; MDN</title> +<script type="text/javascript"> +"use strict"; + +function ajaxSuccess () { + alert(this.responseText); +} + +function AJAXSubmit (oFormElement) { + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action, true); + oReq.send(new FormData(oFormElement)); + } else { + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } +} +</script> +</head> +<body> + +<h1>Sending forms with FormData</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<p>The text/plain encoding is not supported by the FormData API.</p> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> + +<div class="note"><strong>Nota:</strong> Come si è detto,gli oggetti<strong> {{domxref("FormData")}} non sono <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiabli</a></strong>. Se si desidera porre in stringa dei dati inviati, utilizzare il <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">precedente esempio in AJAX puro</a>. Si noti che ci sono degli elementi <code>file</code> nel campo {{ HTMLElement("input") }}, <strong>quando si invia una form attraverso l'API <code>FormData</code> API non è necessario utilizzare le API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a></strong>: i file sono automaticamente caricati.</div> + +<h2 id="Get_last_modified_date">Get last modified date</h2> + +<pre class="brush: js">function getHeaderTime () { + alert(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ +} + +var oReq = new XMLHttpRequest(); +oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true); +oReq.onload = getHeaderTime; +oReq.send();</pre> + +<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> + +<p>Let's create these two functions:</p> + +<pre class="brush: js">function getHeaderTime () { + + var + nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), + nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + window.localStorage.setItem('lm_' + this.filepath, Date.now()); + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } + +} + +function ifHasChanged(sURL, fCallback) { + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); +}</pre> + +<p>Test:</p> + +<pre class="brush: js">/* Let's test the file "yourpage.html"... */ + +ifHasChanged("yourpage.html", function (nModif, nVisit) { + alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); +});</pre> + +<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p> + +<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> + +<p>Modern browsers support cross-site requests by implementing the web applications working group's <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> + +<h2 id="Bypassing_the_cache">Bypassing the cache</h2> + +<p><span style="line-height: 1.572;">A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</span></p> + +<pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 +http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 +</pre> + +<p>Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> + +<p>You can automatically adjust URLs using the following code:</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); +oReq.send(null);</pre> + +<h2 id="Security">Security</h2> + +<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> + +<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> + +<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p> + +<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> + +<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie <code>open()</code>) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.</p> + +<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2> + +<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p> + +<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); +</pre> + +<p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason. If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p> + +<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] + .getService(Components.interfaces.nsIAppShellService) + .hiddenDOMWindow; +var oReq = new XMLHttpRequest();</pre> + +<h2 id="See_also">See also</h2> + +<ol> + <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li> + <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li> + <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li> + <li></li> +</ol> diff --git a/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..bb54418a41 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,50 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">Il costruttore <code><strong>XMLHttpRequest()</strong></code> crea una nuova {{domxref("XMLHttpRequest")}}.</span></p> + +<p>Per ulteriori dettagli sull'utilizzo di <code>XMLHttpRequest</code>, si veda <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Come usare XMLHttpRequest</a>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">const<em>richiesta</em> = new XMLHttpRequest(); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<p>Nessuno.</p> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un nuovo oggetto {{domxref("XMLHttpRequest")}}. Prima di chiamare {{domxref("XMLHttpRequest.send", "send()")}}, che invia la richiesta al server, l'oggetto va predisposto inizializzandolo, chiamando almeno {{domxref("XMLHttpRequest.open", "open()")}}.</p> + +<h2 id="Sintassi_non-standard_di_Firefox">Sintassi non-standard di Firefox</h2> + +<p>Firefox 16 ha aggiunto al costruttore un parametro non-standard che permette di abilitare la modalità anonima (si veda {{Bug("692677")}}). Assegnare il valore <code>true</code> alla flag <code>mozAnon</code> equivale all'atto pratico al costruttore <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> descritto nelle versioni precedenti delle specifiche di XMLHttpRequest.</p> + +<pre class="syntaxbox">const<em>richiesta</em> = new XMLHttpRequest(<em><var>dizParametri</var></em>);</pre> + +<h3 id="Parametri_non-standard">Parametri (non-standard)</h3> + +<dl> + <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt> + <dd>Sono disponibili due flag: + <dl> + <dt><code>mozAnon</code></dt> + <dd>Booleano: assegnando <code>true</code> a questa flag il browser non esporrà né l'{{Glossary("origine")}} né le <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">credenziali dell'utente</a> durante il recupero delle risorse. Ciò significa soprattutto che non verrà inviato alcun {{Glossary("Cookie", "cookie")}} a meno di non aggiungerlo esplicitamente attraverso setRequestHeader.</dd> + <dt><code>mozSystem</code></dt> + <dd>Booleano: assegnando <code>true</code> a questa flag vengono permesse connessioni inter-sito senza il consenso del server di destinazione dato attraverso {{Glossary("CORS")}}. <em>Richiede anche <code>mozAnon: true</code>, ovvero non si possono inviare cookie od altre credenziali dell'utente usando questo metodo. Questa flag funziona solo in app con privilegi, cioé sottoposte a riesame ({{Bug("692677")}}); non funziona su qualsivoglia pagine caricate da Firefox.</em></dd> + </dl> + </dd> +</dl> + +<h2 id="Voci_correlate">Voci correlate</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Come usare XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> +</ul> |