aboutsummaryrefslogtreecommitdiff
path: root/files/fi/web
diff options
context:
space:
mode:
Diffstat (limited to 'files/fi/web')
-rw-r--r--files/fi/web/api/aeskeygenparams/index.html48
-rw-r--r--files/fi/web/api/index.html10
-rw-r--r--files/fi/web/api/intersectionobserver/index.html87
-rw-r--r--files/fi/web/api/webgl_api/index.html229
-rw-r--r--files/fi/web/api/webvr_api/index.html250
-rw-r--r--files/fi/web/api/webvr_api/using_the_webvr_api/index.html438
-rw-r--r--files/fi/web/api/window/index.html509
-rw-r--r--files/fi/web/guide/events/index.html53
-rw-r--r--files/fi/web/guide/index.html58
-rw-r--r--files/fi/web/html/element/body/index.html166
-rw-r--r--files/fi/web/html/element/head/index.html108
-rw-r--r--files/fi/web/html/element/index.html109
-rw-r--r--files/fi/web/html/element/title/index.html122
-rw-r--r--files/fi/web/html/index.html99
-rw-r--r--files/fi/web/html/reference/index.html23
-rw-r--r--files/fi/web/index.html162
-rw-r--r--files/fi/web/javascript/index.html129
-rw-r--r--files/fi/web/reference/index.html29
18 files changed, 2629 insertions, 0 deletions
diff --git a/files/fi/web/api/aeskeygenparams/index.html b/files/fi/web/api/aeskeygenparams/index.html
new file mode 100644
index 0000000000..8e7efcc5d5
--- /dev/null
+++ b/files/fi/web/api/aeskeygenparams/index.html
@@ -0,0 +1,48 @@
+---
+title: AesKeyGenParams
+slug: Web/API/AesKeyGenParams
+translation_of: Web/API/AesKeyGenParams
+---
+<p>{{ APIRef("Web Crypto API") }}<strong><code>AesKeyGenParams</code></strong> hakemisto <a href="/fi/docs/Web/API/Web_Crypto_API">Web Crypto API</a>:sta edustaa objektia joka tulisi siirtää <code>algorithm</code> parametrina metodiin {{domxref("SubtleCrypto.generateKey()")}}, kun luodaan AES avainta: silloin kun algoritmiksi tunnistetaan joksikin seuraavista: <a href="/fi/docs/Web/API/SubtleCrypto/encrypt#AES-CBC">AES-CBC</a>, <a href="/fi/docs/Web/API/SubtleCrypto/encrypt#AES-CTR">AES-CTR</a>, <a href="/fi/docs/Web/API/SubtleCrypto/encrypt#AES-GCM">AES-GCM</a>, tai <a href="/fi/docs/Web/API/SubtleCrypto/wrapKey#AES-KW">AES-KW</a>.</p>
+
+<h2 id="Ominaisuudet">Ominaisuudet</h2>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>{{domxref("DOMString")}}. Tämän tulisi olla asetettuna joksikin seuraavista: <code>AES-CBC</code>,  <code>AES-CTR</code>, <code>AES-GCM</code>, ta <code>AES-KW</code>, riippuen siitä mitä algoritmia haluat käyttää.</dd>
+ <dt><code>length</code></dt>
+ <dd>
+ <p><code>Numero</code> — generoitavan avaimen bittien pituus. Tämän täytyy olla jokin näistä: 128, 192, tai 256.</p>
+ </dd>
+</dl>
+
+<h2 id="Esimerkkejä">Esimerkkejä</h2>
+
+<p>Katso {{domxref("SubtleCrypto.generateKey()")}}:n esimerkit.</p>
+
+<h2 id="Tekniset_tiedot">Tekniset tiedot</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Määritelmä</th>
+ <th scope="col">Tila</th>
+ <th scope="col">Kommentti</th>
+ </tr>
+ <tr>
+ <td>{{ SpecName('Web Crypto API', '#dfn-AesKeyGenParams', 'SubtleCrypto.AesKeyGenParams') }}</td>
+ <td>{{ Spec2('Web Crypto API') }}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2>
+
+<p>Selaimet jotka tukevat jotain AES-pohjaista algoritmia jota {{domxref("SubtleCrypto.generateKey()")}} metodi tukee.</p>
+
+<h2 id="Katso_myös">Katso myös</h2>
+
+<ul>
+ <li>{{domxref("SubtleCrypto.generateKey()")}}.</li>
+</ul>
diff --git a/files/fi/web/api/index.html b/files/fi/web/api/index.html
new file mode 100644
index 0000000000..98bda55ac9
--- /dev/null
+++ b/files/fi/web/api/index.html
@@ -0,0 +1,10 @@
+---
+title: Web API Interfaces
+slug: Web/API
+tags:
+ - Web
+translation_of: Web/API
+---
+<p>When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site.</p>
+
+<div>{{APIListAlpha}}</div>
diff --git a/files/fi/web/api/intersectionobserver/index.html b/files/fi/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..e62bd8b216
--- /dev/null
+++ b/files/fi/web/api/intersectionobserver/index.html
@@ -0,0 +1,87 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API:n </a> rajapinta <code><strong>IntersectionObserver</strong></code> tarjoaa asynkronisen keinon tarkkailla muutoksia kohde-elementin ja sen esi-isäelementin tai ylätason dokumentin {{Glossary('viewport')}}:n kanssa. Näihin korkeamman tason DOM -elementteihin viitataan nimellä "root".</p>
+
+<p>Kun <code>IntersectionObserver</code> luodaan, se konfiguroidaan tarkkailemaan DOM-elementtien näkyvyyttä suhteessa root:tiin. Tätä konfiguraatiota ei voida muuttaa sen jälkeen, kun se on initialisoitu, eli käytännössä yhdellä instanssilla tarkkaillaan elementtien näkyvyyttä yhden root -tason elementin suhteen. Yhdellä <code>IntersectionObserver</code>:lla voidaan kuitenkin tarkkailla monen elementin näkyvyyttä tämän suhteen.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd>Luo uuden <code>IntersectionObserver</code> -instanssin, joka suorittaa annetun "callback" -function kun se havaitsee, että kohde-elementin näkyvyys on ylittänyt annetun kynnyksen.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>Tietty elementin esi-isä -elementti, jonka suhteen kohteen {{domxref("element")}} näkyvyyttä tarkkaillaan. Jos tätä ei erityiesti määritellä, käytetään koko dokumentin juuren viewport:ia.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>An offset rectangle applied to the root's {{Glossary('bounding box')}} when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (<code>px</code>) or as a percentage (<code>%</code>). The default is "0px 0px 0px 0px".</dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd>Stops the <code>IntersectionObserver</code> object from observing any target.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>Tells the <code>IntersectionObserver</code> a target element to observe.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>Returns an array of {{domxref("IntersectionObserverEntry")}} objects for all observed targets.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>Tells the <code>IntersectionObserver</code> to stop observing a particular target element.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
+ // If intersectionRatio is 0, the target is out of view
+ // and we do not need to do anything.
+ if (entries[0].intersectionRatio &lt;= 0) return;
+
+ loadItems(10);
+ console.log('Loaded new items');
+});
+// start observing
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</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("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
+ <td>{{Spec2('IntersectionObserver')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in 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>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref('MutationObserver')}}</li>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+</ul>
diff --git a/files/fi/web/api/webgl_api/index.html b/files/fi/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..e7153d4db5
--- /dev/null
+++ b/files/fi/web/api/webgl_api/index.html
@@ -0,0 +1,229 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+ - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<p class="summary">WebGL tuo 3D-grafiikan Webbin esittelemällä sovellusohjelmointirajapinnan (API), joka on läheisesti yhteensovpiva HTML5 <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code>canvas</code></a>-elementissä käytetttävän OpenGL ES 2.0 -määrittelyn kanssa. Tuki WebGL:lle on nykyisin <a href="/en-US/docs/Firefox_4_for_developers" title="en-US/docs/Firefox 4 for developers">Firefox 4</a>+ -selaimissa, <a class="external" href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+ -selaimissa, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera </a>12+ -selaimissa ja <a href="http://www.apple.com/fr/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ -selaimissa.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Kehitysaiheita">Kehitysaiheita</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebGL/Getting_started_with_WebGL" title="en-US/docs/WebGL/Getting started with WebGL">Kuinka aloittaa WebGL-asennus</a></dt>
+ <dd>Kuinka asettaa WebGL-ympäristö.</dd>
+ <dt><a href="/en-US/docs/WebGL/Adding_2D_content_to_a_WebGL_context" title="en-US/docs/WebGL/Adding 2D content to a WebGL context">Lisätään 2D-sisältöä WebGL-ympäristöön</a></dt>
+ <dd>Kuinka renderoidaan yksinkertaisia litteitä muotoja WebGL:tä käyttäen.</dd>
+ <dt><a href="/en-US/docs/WebGL/Using_shaders_to_apply_color_in_WebGL" title="en-US/docs/WebGL/Using shaders to apply color in WebGL">Varjostimien käyttäminen värien toteuttamisessa WebGL:ssä</a></dt>
+ <dd>Esittelee, kuinka lisätä väri varjoja käyttäviin muotoihin.</dd>
+ <dt><a href="/en-US/docs/WebGL/Animating_objects_with_WebGL" title="en-US/docs/WebGL/Animating objects with WebGL">Objektien animointi WebGL:ssä</a></dt>
+ <dd>Näyttää kuin kiertää ja muuntaa objekteja yksinkertaisten animaatioiden luomiseksi.</dd>
+ <dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="en-US/docs/WebGL/Creating 3D objects using WebGL">3D-objektien luominen käyttäen WebGL:ää</a></dt>
+ <dd>Näyttää, kuinka luoda ja animoida 3D-objekti (tässä tapauskessa kuutio).</dd>
+ <dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="en-US/docs/WebGL/Using textures in WebGL">Using textures in WebGL</a></dt>
+ <dd>Demonstrates how to map textures onto the faces of an object.</dd>
+ <dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="en-US/docs/WebGL/Lighting in WebGL">Lighting in WebGL</a></dt>
+ <dd>How to simulate lighting effects in your WebGL context.</dd>
+ <dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="en-US/docs/WebGL/Animating textures in WebGL">Animating textures in WebGL</a></dt>
+ <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd>
+ <dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="en-US/docs/WebGL/WebGL best practices">Parhaimmat WebGL-käytännöt</a></dt>
+ <dd>Vihjeitä ja suosituksia WebGL-sisällön luomiseksi.</dd>
+ <dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="en-US/docs/WebGL/Cross-Domain Textures">Cross-domain textures</a></dt>
+ <dd>Information about loading textures from domains other than the one from which your content was loaded.</dd>
+ <dt><a href="/en-US/docs/WebGL/Using_Extensions" title="en-US/docs/WebGL/Using_Extensions">Using extensions</a></dt>
+ <dd>How to use extensions that are available in WebGL.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="Resurssit">Resurssit</h2>
+
+<dl>
+ <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL-spesifikaatio</a></dt>
+ <dd>WebGL-spesifikaatio.</dd>
+ <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a></dt>
+ <dd>The main web site for WebGL at the Khronos Group.</dd>
+ <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt>
+ <dd>A site with tutorials on how to use WebGL.</dd>
+ <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">The WebGL Cookbook</a></dt>
+ <dd>A web site with handy recipes for writing WebGL code.</dd>
+ <dt><a class="external" href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt>
+ <dd>A feed aggregator for people involved in the WebGL community.</dd>
+ <dt><a class="external" href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
+ <dd>A blazing fast matrix library for WebGL</dd>
+ <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt>
+ <dd>JavaScript Matrix and Vector library for High Performance WebGL apps</dd>
+ <dt><a class="external" href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt>
+ <dd><span>A JavaScript vector and matrix math library, optimized for WebGL usage.</span></dd>
+ <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt>
+ <dd>An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</dd>
+ <dt><a class="external" href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a></dt>
+ <dd>An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</dd>
+</dl>
+</div>
+</div>
+
+<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("2.0")}}</td>
+ <td>9</td>
+ <td>{{CompatNo()}}</td>
+ <td>12</td>
+ <td>5.1</td>
+ </tr>
+ <tr>
+ <td>Context name</td>
+ <td><code>experimental-webgl</code></td>
+ <td><code>experimental-webgl</code></td>
+ <td>n/a</td>
+ <td><code>experimental-webgl</code></td>
+ <td><code>experimental-webgl</code></td>
+ </tr>
+ <tr>
+ <td><a class="external" href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
+ <td>{{CompatGeckoDesktop("6.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><a class="external" href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
+ <td>{{CompatGeckoDesktop("10.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
+ <td>{{CompatGeckoDesktop("13.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
+ <td>{{CompatGeckoDesktop("15.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td>
+ <td>{{CompatGeckoDesktop("9.0")}}</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>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>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td>Context name</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><a class="external" href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
+ <td>{{CompatGeckoMobile("6.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><a class="external" href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
+ <td>{{CompatGeckoMobile("10.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
+ <td>{{CompatGeckoMobile("13.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
+ <td>{{CompatGeckoMobile("15.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ <tr>
+ <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td>
+ <td>{{CompatGeckoMobile("9.0")}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ <td>{{CompatUnknown()}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<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>
+
+<div>{{HTML5ArticleTOC()}}</div>
diff --git a/files/fi/web/api/webvr_api/index.html b/files/fi/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..e3b73598f2
--- /dev/null
+++ b/files/fi/web/api/webvr_api/index.html
@@ -0,0 +1,250 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+tags:
+ - API
+ - Experimental
+ - Expérimental(2)
+ - Landing
+ - NeedsTranslation
+ - Reference
+ - Référence(2)
+ - TopicStub
+ - VR
+ - Virtual Reality
+ - WebVR
+translation_of: Web/API/WebVR_API
+---
+<p>{{SeeCompatTable}}{{APIRef("WebVR API")}}</p>
+
+<p>WebVR -rajapinta tarjoaa tuen VR-laitteiden — kuten Oculus Rift tai HTC Vive -silmikoiden — käyttämiseen webbisovelluksille, jolloin kehittäjät voivat muuttaa silmikolta saadun sijainti- ja liiketiedon 3D-skenessä liikkumistiedoksi. Tämä mahdollistaa useita kiinnostavia sovellusmahdollisuuksia aina virtuaalisista tuote-esittelyistä ja interaktiivisista treenisovelluksista immersiivisiin FPS-räiskintäpeleihin.</p>
+
+<h2 id="Perusperiaatteet_ja_käyttö">Perusperiaatteet ja käyttö</h2>
+
+<p>Metodi {{domxref("Navigator.getVRDisplays()")}} hakee kaikki tietokoneeseen liitetyt VR-laitteet; jokaista näistä vastaa {{domxref("VRDisplay")}} -tyyppinen objekti.</p>
+
+<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>{{domxref("VRDisplay")}} on perusrajapinta WebVR API:in — sen ominaisuuksien ja metodien avulla voit esimerkiksi:</p>
+
+<ul>
+ <li>Hakea tiedot näyttölaitteen tunnistamiseen, sen ominaisuudet ja siihen liitetyt ohjaimet.</li>
+ <li>Hakea kunkin näytettäväksi tarkoitetun sisältöruudun {{domxref("VRFrameData", "frame data")}} ja toimittaa ruudut näytölle oikealla taajuudella.</li>
+ <li>Käynnistää ja pysäyttää näyttämisen.</li>
+</ul>
+
+<p>Tyypillinen (yksinkertainen) WebVR-sovellus toimisi esimerkiksi näin:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} -metodilla haetaan viittaus VR-näyttöön.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} -metodilla käynnistetään näyttäminen.</li>
+ <li>WebVR:n omalla versiolla {{domxref("VRDisplay.requestAnimationFrame()")}} -methodista suoritetaan sovelluksen renderöintisilmukkaa näytölle sopivalla virkistystaajuudella.</li>
+ <li>Renderöintisilmukassa haetaan ruudun näyttämiseen tarvittavat tiedot ({{domxref("VRDisplay.getFrameData()")}}) -metodilla, piirretään näytettävä skene kaksi kertaa — siis kerran molemmille silmille, ja sen jälkeen toimitetaan renderöity näkymä näytölle käyttäjälle näytettäväksi metodilla ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>Tämän lisäksi WebVR 1.1 lisää useita tapahtumia (event) {{domxref("Window")}} -objektiin, jolloin JavaScriptillä voidaan reagoida näytön tilan muutoksiin.</p>
+
+<p><strong>Huom</strong>: APIn toiminnasta löytyy paljon lisätietoa artikkeleista <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> ja <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a>.</p>
+
+<h3 id="Ohjaimien_käyttö_WebVRn_yhdistäminen_Gamepad_APIin">Ohjaimien käyttö: WebVR:n yhdistäminen Gamepad API:in</h3>
+
+<p>Useissa WebVR-laitekokoonpanoissa silmikon mukana on käytettävissä erillinen ohjain. Ohjaimia voidaan käyttää WebVR-sovelluksissa <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>:n kautta, ja erityisesti <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API:n</a>, joka lisää mukaan ohjaimen asentotiedon (<a href="/en-US/docs/Web/API/GamepadPose">controller pose</a>), tuntoperusteiset laitteet (<a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>) ja muita vastaavia.</p>
+
+<p><strong>Huom</strong>: Artikkeli <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> selittää perusteet VR-ohjaimien käytöstä WebVR-sovelluksissa.</p>
+
+<h2 id="WebVR_rajapinnat">WebVR rajapinnat</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay")}}</dt>
+ <dd>Edustaa mitä tahnsa APIn tukemaa VR-laitetta. Siinä on mukana yleistiedot laittesta, kuten laitteen tunnisteet (ID) ja kuvaukset sekä metodit VR-skenen esittämisen käynnistämiseen, silmäparametrien ja näytön ominaisuuksien hakemiseen ja muut olennaiset toiminnat.</dd>
+ <dt>{{domxref("VRDisplayCapabilities")}}</dt>
+ <dd>Esittää {{domxref("VRDisplay")}}:n ominaisuudet — näillä voidaan testata, saako laitteelta esimerkiksi sijaintitietoa.</dd>
+ <dt>{{domxref("VRDisplayEvent")}}</dt>
+ <dd>Edustaa WebVR-kohtaisen tapahtuman tapahtumaobjektia (kts. {{anch("Window", "window object extensions")}} alempana).</dd>
+ <dt>{{domxref("VRFrameData")}}</dt>
+ <dd>Vastaa kaikkea tietoa, mitä yksittäisen VR-skenen ruudun renderöintiin tarvitaan; metodi {{domxref("VRDisplay.getFrameData()")}} hakee nämä tiedot.</dd>
+ <dt>{{domxref("VRPose")}}</dt>
+ <dd>Edustaa tietyllä ajanhetkellä vallitsevaa sijaintitietoa (johon kuuluvat suunta, sijainti, nopeus ja kiihtyvyys.)</dd>
+ <dt>{{domxref("VREyeParameters")}}</dt>
+ <dd>Tarjoaa pääsyn kaikkeen tietoon, joka tarvitaan skenen renderöintiin oikein kullekin silmälle, esimerkiksi näkökentän laajuuden.</dd>
+ <dt>{{domxref("VRFieldOfView")}}</dt>
+ <dd>Näkökenttätieto, joka on määritelty keskipisteestä katsottuna neljällä asteluvulla.</dd>
+ <dt>{{domxref("VRLayerInit")}}</dt>
+ <dd>Tämä on {{domxref("VRDisplay")}}-näytöllä esitettävä kuvan eräs taso (layer).</dd>
+ <dt>{{domxref("VRStageParameters")}}</dt>
+ <dd>Huoneskaalaa tukevien laitteiden kanssa käytettävissä sovelluksissa "näyttämöalueen" tiedot löytyvät tästä.</dd>
+</dl>
+
+<h3 id="Laajennukset_muihin_rajapintoihin">Laajennukset muihin rajapintoihin</h3>
+
+<p>WebVR API laajentaa joitakin API-rajapintoja lisäten seuraavat ominaisuudet.</p>
+
+<h4 id="Gamepad">Gamepad</h4>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd>Palauttaa liitetyn {{domxref("VRDisplay")}} tunnisteen {{domxref("VRDisplay.displayId")}} — <code>VRDisplay</code> , jonka skeneä gamepad ohjaa.</dd>
+</dl>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
+ <dd>Palauttaa taulukon, jossa on mukana jokainen {{domxref("VRDisplay")}}, joka esittää parhaillaan ({{domxref("VRDisplay.ispresenting")}} on <code>true</code>).</dd>
+ <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
+ <dd>Palauttaa promise-objektin, joka sisältää taulukon {{domxref("VRDisplay")}} objekteja, jotka vastaavat kaikkia tietokoneeseen liitettyjä VR-näyttöjä.</dd>
+</dl>
+
+<h4 id="Window-tapahtumat">Window-tapahtumat</h4>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Edustaa tapahtumankäsittelijää (event handler), joka suoritetaan, kun VR_näytön esittämistila muuttuu — esimerkiksi tilasta 'esittää' tilaan 'ei esitä' tai päinvastoin (kun tapahtuma {{event("vrdisplaypresentchange")}} signaloidaan).</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Tämä tapahtumankäsittelijä suoritetaan, kun yhteensopiva VR-näyttö on kytketty tietokoneeseen (tapahtuma {{event("vrdisplayconnect")}} ).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Tämä tapahtumankäsittelijä suoritetaan, kun yhteensopiva VR-näyttö irrotetaan tietokoneesta (kun tapahtuma {{event("vrdisplaydisconnect")}} signaloidaan).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Edustaa taphtumaa, joka suoritetaan, kun näyttö on valmis esittämään sisältöä (tapahtuma {{event("vrdisplayactivate")}} ),esimerkiksi kun silmikko aktivoituu virransäästötilasta tai puetaan päälle.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Tämä tapahtumankäsittelijä suoritetaan, kun näytölle ei voi enää esittää sisältöä (kun tapahtuma {{event("vrdisplaydeactivate")}} signaloidaan), esimerkiksi syystä, että silmikkonäyttö on siirtynyt virransäästötilaan käyttämättömyyden vuoksi.</dd>
+</dl>
+
+<h4 id="Windown_tapahtumat_jotka_eivät_ole_käytettävissä">Window:n tapahtumat, jotka eivät ole käytettävissä</h4>
+
+<p>Seuraavat tapahtumat löytyvät APIn määrittelystä, mutta niiden toteutusta ei tunnu vielä löytyvän mistään selaimista.</p>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Edustaa tapahtumankäsittelijää, joka suoritetaan kun selain, käyttöjärjestelmä tai VR-laitteisto on keskeyttänyt esittämisen näytölle jostain syystä (tapahtuman {{event("vrdisplayblur")}} johdosta) — esimerkiksi käytettäessä järjestelmän valikkoa tai selainta. Tarkoitus on estää seurantaa tai VR-kokemuksen menetystä.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Tämä tapahtumankäsittelijä suoritetaan, kun esittäminen näytöllä palautuu edellisen tapahtuman jälkeen (tapahtumasta {{event("vrdisplayfocus")}} ).</dd>
+</dl>
+
+<h2 id="Esimerkkejä">Esimerkkejä</h2>
+
+<p>Näiltä sivustoilta töydät useita esimerkkejä:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — hyvin yksinkertaisia esimerkkejä MDN:n WebVR dokumentaation tueksi.</li>
+ <li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — mukavia yksinkertaisia ja hyvin kommentoituja esimerkkejä, jotka tulevat Carmel:in, Facebookin WebVR-selaimen mukana.</li>
+ <li><a href="https://webvr.info/samples/">WebVR.info samples</a> — hieman syvemmälle meneviä esimerkkejä lähdekoodeineen</li>
+ <li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — demottavia esimerkkejä</li>
+ <li><a href="https://aframe.io/">A-Frame homepage</a> — esimerkkejä A-Frame:n käytöstä</li>
+</ul>
+
+<h2 id="Spesifikaatiot">Spesifikaatiot</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("GamepadExtensions")}}</td>
+ <td>{{Spec2("GamepadExtensions")}}</td>
+ <td>Määrittää <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('WebVR 1.1')}}</td>
+ <td>{{Spec2('WebVR 1.1')}}</td>
+ <td>Alkuperäinen</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Ominaisuus</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>Perus</td>
+ <td>{{CompatNo}}<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(55)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Gamepad -laajennukset</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}<sup>[4]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<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>
+ <th>Chrome for Android</th>
+ <th>Samsung Internet for GearVR</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+ <td>{{CompatVersionUnknown}}<br>
+  </td>
+ </tr>
+ <tr>
+ <td>Gamepad extensions</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}<sup>[4]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>[1] API käytettävissä (Available) kaikilla alustoilla lipulla, mutta tällä hetkellä toimii ainoastaan kokeellisessa työpöytäversiossa (<a href="https://webvr.info/get-chrome/">experimental version of Chrome)</a> (muut versiot eivät palauta yhtään laitetta metodia {{domxref("Navigator.getVRDisplays()")}} kutsuttaessa).</p>
+
+<p>[2] Tällä hetkellä ainoastaan Windows ja Mac OSX tuki on oletuksena päällä.</p>
+
+<p>[3] Nyt ainoastaan laitteella Google Daydream.</p>
+
+<p>[4] Päällä Firefox Nightly ja Beta -versioissa 55 ja uudempi. Käytetään valinnalla <code>dom.gamepad-extensions.enabled</code>.</p>
+
+<h2 id="Katso_myös">Katso myös</h2>
+
+<ul>
+ <li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — Mozillan WebVR:n aloitussivu, jossa on demoja, apuohjelmia ja muuta tietoa.</li>
+ <li><a href="https://aframe.io/">A-Frame</a> — Open source web-sovelluskehys VR-kokemuksien rakentamiseen.</li>
+ <li><a href="https://webvr.info">webvr.info</a> — Ajantasaista tietoa WebVR:stä, selaintuesta ja yhteisöstä.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — Demoja, latauslinkkejä ja muuta Mozillan VR-ryhmän tarjoamia resursseja.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — Käyttökelpoinen mallipohja, jonka päälle WebVR-sovellus on helppo rakentaa.</li>
+ <li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript -toteutus WebVR:n toiminnoista.</li>
+</ul>
diff --git a/files/fi/web/api/webvr_api/using_the_webvr_api/index.html b/files/fi/web/api/webvr_api/using_the_webvr_api/index.html
new file mode 100644
index 0000000000..b4cf17e315
--- /dev/null
+++ b/files/fi/web/api/webvr_api/using_the_webvr_api/index.html
@@ -0,0 +1,438 @@
+---
+title: Using the WebVR API
+slug: Web/API/WebVR_API/Using_the_WebVR_API
+translation_of: Web/API/WebVR_API/Using_the_WebVR_API
+---
+<div>{{APIRef("WebVR API")}}</div>
+
+<p class="summary">WebVR API on hieno lisä webkehittäjän työkaluihin. Sen avulla WebGL- näkymä (scene) voidaan esittää Oculus Riftin and HTC Viven tapaisissa VR-näytöissä. Mutta miten pääset alkuun VR appsien tekemiseen webbiin? Tämä juttu opastaa sinut perusteisiin.</p>
+
+<div class="note">
+<p><strong>Huom</strong>: WebVR APIn vakain versio — 1.1 — on vasta implementoitu Firefox 55:een (Windowsin release-versio, Mac OS X :ssa vain 'Nightly'), ja sen saa myös Chrome:en käytettäessä Google Daydream -laitteistoa. Speksistä on myös tuoreempi versio — 2.0 — mutta se on kovin keskeneräinen. Lisätietoja viimeisimmästä speksistä löytyy linkistä <a href="https://w3c.github.io/webvr/">WebVR Spec Version List</a>.</p>
+</div>
+
+<h2 id="Aloitus">Aloitus</h2>
+
+<p>Päästäksesi alkuun tarvitset:</p>
+
+<ul>
+ <li>Tuetun VR-laitteiston.
+ <ul>
+ <li>halvin vaihtoehto on mobiililaite, tuettu selain, ja silmikkonäyttö, johon mobiililaitteen saa asetettua (esim. Google Cardboard). Tämä ei vastaa käyttökokemukseltaan aivan tarkoitukseen suunniteltua laitteistoa, mutta selviät ostamatta teho-PC:tä tai erityistä VR-näyttöä.</li>
+ <li>VR-laitteisto saattaa olla hinnakas, mutta sillä saadaan parempi käyttökokemus. Parhaiten WebVR-yhteensopivia laitteita ovat tällä hetkellä HTC VIVE ja The Oculus Rift. <a href="https://webvr.info/">webvr.info</a> :n etusivulla on lisätietoa laitteiden tarjonnasta ja selaintuesta niille.</li>
+ </ul>
+ </li>
+ <li>Mahdollisesti vaaditun riittävän tehokkaan tetokoneen VR-näkymien prosessointiin ja näyttämiseen VR-laitteistollesi. Koneen speksejä varten tutki sen VR-laitteiston vaatimuksia (e.g. <a href="https://www.vive.com/us/ready/">VIVE READY Computers</a>), jonka aiot hankkia.</li>
+ <li>Tuettu selain tulee olla asennettu — uusin <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/">Firefox Nightly</a> tai <a href="https://www.google.com/chrome/index.html">Chrome</a> ovat parhaat vaihtoehdot tällä hetkellä, PC:lle tai mobiiliin.</li>
+</ul>
+
+<p>Kun laitteisto ja ohjelmistot on asennettu, voit testata, toimiiko kokoonpanosi WebVR:n kanssa tästä linkistä - <a href="https://mdn.github.io/webvr-tests/aframe-demo/">simple A-Frame demo</a>, ja näet, saadaanko näkymä näkyviin ja pääsetkö VR-moodiin oikean alareunan painikkeella.</p>
+
+<p><a href="https://aframe.io/">A-Frame</a> on paras vaihtoehto päästä tekemään nopeasti WebVR-yhteensopivia 3D-näkymiä, ilman että tarvitsee ymmärtää rivikaupalla uutta JavaScript -koodia. Se ei kuitenkaan opeta, kuinka raaka WebVR API toimii ja siihen paneudummekin seuraavaksi.</p>
+
+<h2 id="Demon_esittely">Demon esittely</h2>
+
+<p>WebVR API :n toiminnan esdittelemiseksi tutustumme puhtaasti webgl:ää sisältävään esimerkkiimme, joka näyttää vähän tältä:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15121/Capture1.png" style="display: block; height: 761px; margin: 0px auto; width: 1341px;"></p>
+
+<div class="note">
+<p><strong>Huom</strong>: Demon lähdekoodi - <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">source code</a> - löytyy GitHubista ja livelinkki siihen on tässä: <a href="https://mdn.github.io/webvr-tests/raw-webgl-example/">view it live</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Huom</strong>: Ellei WebVR ei ala toimia selaimessa, varmista, että sitä ajetaan grafiikkakortin kautta. Esimerkiksi NVIDIA :lla sen omassa ohjauspaneelissa on pikavalikkovalinta <em><strong>Firefox</strong></em>, josta valitaan <em>Run with graphics processor &gt; High-performance NVIDIA processor</em>.</p>
+</div>
+
+<p>Demossa on kaikkien WebGL-demojen äiti — pyörivä  3D-kuutio. Toteutimme sen puhtaasti <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> :n koodilla. Tässä ei käsitellä perus JavaScriptiä tai WebGL:ää, vaan pelkästään WebVR osia.</p>
+
+<p>Demosta löytyy myös:</p>
+
+<ul>
+ <li>Painike, jolla näkymä saadaan päälle VR-näyttöön (ja pois).</li>
+ <li>Painike, joka näyttää (ja piilottaa) VR:n 'pose' -tiedot - eli silmikon sijainnin ja suunnan - reaaliajassa.</li>
+</ul>
+
+<p>Kun tutustut lähdekoodin päätiedostoon -<a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js"> main JavaScript file</a> - löydät WebVR-osat koodista kommenttien "WebVR" tekstien avulla.</p>
+
+<div class="note">
+<p><strong>Huom</strong>: JavaScriptin ja WebGL:n perusteista lisätietoja löytyy tutoriaaleista <a href="/en-US/docs/Learn/JavaScript">JavaScript learning material</a> ja <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL Tutorial</a>.</p>
+</div>
+
+<h2 id="Miten_se_toimii">Miten se toimii?</h2>
+
+<p>Tässä vaiheessa katsotaan koodin WebVR-osien toiminta.</p>
+
+<p>Tyypillinen (yksinkertainen) WebVR sovellus toimii näin:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} hakee viittauksen VR-näyttöösi.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} :ä käytetään käynnistämään esittäminen VR-näytölle.</li>
+ <li>WebVR:n omaa {{domxref("VRDisplay.requestAnimationFrame()")}} -metodia käytetään suorittamaan sovelluksen renderöintisilmukkaa näytölle sopivalla virkistystaajuudella.</li>
+ <li>Renderöintisilmukassa haet ruudun näyttämiseen vaaditun datan ({{domxref("VRDisplay.getFrameData()")}}), piirrät näytettävän skenen kahdesti — molemmille silmille — ja toimitat renderöidyn näkymän näytölle käyttäjälle näytettäväksi metodilla ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>Alla olevissa kappaleissa tutustutaan webgl-demoihimme yksityiskohtaisemmin ja nähdään tarkemmin, missä edellä mainittuja ominaisuuksia käytetään.</p>
+
+<h3 id="Aloitetaan_muuttujilla">Aloitetaan muuttujilla</h3>
+
+<p>Ensimmäinen esimerkki WebVR:n käytöstä näkyy alla olevassa koodissa:</p>
+
+<pre class="brush: js">// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;</pre>
+
+<p>Lyhyet selitykset ovat siis tarpeen:</p>
+
+<ul>
+ <li><code>frameData</code> sisältää {{domxref("VRFrameData")}} olion, joka on tehty {{domxref("VRFrameData.VRFrameData", "VRFrameData()")}} -muodostimella. Tämä on alkuaan tyhjä, mutta sisältää myöhemmin VR-näytölle näytettävien ruutujen renderöintiin tarvittavat tiedot, ja ne päivitetään aina renderöintisilmukassa uudelleen.</li>
+ <li><code>vrDisplay</code> on alkuun alustamaton, mutta siinä on myöhemmin viittaus VR-silmikkoomme ({{domxref("VRDisplay")}} — joka on API:n keskeinen ohjattava kohde).</li>
+ <li><code>btn</code> ja <code>poseStatsBtn</code> viittaavat sovelluksen ohjaamiseen käytettyihin painikkeisiin.</li>
+ <li><code>normalSceneFrame</code> ja <code>vrSceneFrame</code> ovat aluksi alustamattomia, mutta myöhemmin viittaavat {{domxref("Window.requestAnimationFrame()")}} ja {{domxref("VRDisplay.requestAnimationFrame()")}} metodeihin — nämä alustavat normaalin ja WebVR-spesifisen renderöintisilmukan suorittamisen; niiden välisestä erosta selitetään hieman jäljempänä.</li>
+ <li>Muut muuttujat sisältävät viittauksia käyttöliittymän oikeassa alakulmassa näkyvän VR-sijainnin ja suuntauksen näyttävän tietolaatikon eri osiin.</li>
+</ul>
+
+<h3 id="VR-näytön_hakeminen">VR-näytön hakeminen</h3>
+
+<p>Koodimme tärkeimpiä metodeja on <code>start()</code> — tämä suoritetaan, kun sivun body-osa on ladattu valmiiksi:</p>
+
+<pre class="brush: js">// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;</pre>
+
+<p>Aluksi<code>start()</code> hakee webbisivumme - <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/index.html">our HTML</a> - {{htmlelement("canvas")}} -osaan renderöitävään 3D-grafiikkaan tarvitun WebGL -ympäristön. Sitten tarkistetaan, että <code>gl</code> -ympäristö on käytettävissä — jos on, suoritetaan muutama metodi näytettävän skenen alustamiseksi.</p>
+
+<pre class="brush: js">function start() {
+ canvas = document.getElementById("glcanvas");
+
+ initWebGL(canvas); // Initialize the GL context
+
+ // WebGL setup code here</pre>
+
+<p>Seuraavaksi aloitetaan varsinainen näyttöprosessi. Siinä asetetaan canvas-elementti näyttämään selaimen koko näytettävä ala ja suorittamalla renderöintisilmukka(<code>drawScene()</code>) ensimmäisen kerran. Tässä siis ei-WebVR osuus— se normaali renderöintisilmukka.</p>
+
+<pre class="brush: js"> // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ drawScene();</pre>
+
+<p>Seuraavaksi tulee sitten ensimmäinen pala WebVR-koodia. Aluksi tarkistetaan, onko VR-näyttöjä edes käytettävissä {{domxref("Navigator.getVRDisplays")}}  — tästä alkaa API:n käyttö ja tämä on hyvä paikka WebVR:n ominaisuuksien tarkistamiseen. Koodilohkon lopussa (<code>else</code> -osassa) näkyy, että ellei sopivia näyttöjä ole, näytetään viesti, ettei selain tue WebVR 1.1 :ää.</p>
+
+<pre class="brush: js"> // WebVR: Check to see if WebVR is supported
+ if(navigator.getVRDisplays) {
+ console.log('WebVR 1.1 supported');</pre>
+
+<p><code>if() { ... }</code> koodilohkossa suoritetaan {{domxref("Navigator.getVRDisplays()")}} metodi. Tämä palauttaa <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">promise</a>-olion, jonka sisältönä on lista tietokoneeseen kytketyistä VR-näytöistä. Se on tyhjä, ellei näyttöjä ole..</p>
+
+<pre class="brush: js"> // Then get the displays attached to the computer
+ navigator.getVRDisplays().then(function(displays) {</pre>
+
+<p>Promise-olion <code>then()</code> -lohkossa tarkistetaan, että listan pituus on suurempi kuin 0; näin ollessa asetetaan <code>vrDisplay</code> -muuttujamme arvoksi listan ensimmäisen -indeksistä 0 löytyvän - alkion arvo. <code>vrDisplay</code> sisältää nyt {{domxref("VRDisplay")}} olion, joka vastaa laitteeseen liitettyä näyttöä!</p>
+
+<pre class="brush: js"> // If a display is available, use it to present the scene
+ if(displays.length &gt; 0) {
+ vrDisplay = displays[0];
+ console.log('Display found');</pre>
+
+<div class="note">
+<p><strong>Huom</strong>: On epätavallista, että tietokoneeseen olisi kytketty useita VR-näyttöjä, joten tätä yksinkertaista demoa varten usean näytön vaihtoehtoa ei huomioida.</p>
+</div>
+
+<h3 id="VR-esityksen_käynnistys_ja_pysäytys">VR-esityksen käynnistys ja pysäytys</h3>
+
+<p>Nyt kun käytössä on {{domxref("VRDisplay")}} olio, sen avulla voidaan tehdä useita juttuja. Seuraavaksi haluamme käynnistää toiminnot WebGL-sisällön näyttämisen aloittamiseksi ja lopettamiseksi.</p>
+
+<p>Jatkaaksemme edellisestä koodilohkosta, lisäämme käynnistys/pysäytys -painikkeeseemme (<code>btn</code>) tapahtumankuuntelijan (event listener) — ja painiketta klikattaessa halutaan tarkistaa, joko esitys näytölle on käynnissä (toteutus tälle on hieman kökkö ja perustuu painikkeen tekstin, <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code>, tutkimiseen).</p>
+
+<p>Ellei esitys näyttöön ole vielä käynnissä, käytetään {{domxref("VRDisplay.requestPresent()")}} -metodia pyytämään selainta käynnistämään esitys näytölle. Parametrinä metodille annetaan lista {{domxref("VRLayerInit")}} olioita, jotka vastaavat näytettäväksi haluttuja näyttötasoja.</p>
+
+<p>Koska tällä hetkellä on mahdollista esittää vain yksi näyttötaso, ja ainoa vaadittu olion jäsen on {{domxref("VRLayerInit.source")}} -ominaisuus (joka viittaa tuossa näyttötasossa näytettäväksi tarkoitettuun {{htmlelement("canvas")}} :iin; annetaan muille parametreille järkevät oletusarvot — kts. {{domxref("VRLayerInit.leftBounds", "leftBounds")}} ja {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), parametri on yksinkertaisesti [{ source: canvas }].</p>
+
+<p><code>requestPresent()</code> palauttaa promise-olion, joka saa sisällön, kun esittäminen käynnistyy onnistuneesti.</p>
+
+<pre class="brush: js"> // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+ btn.addEventListener('click', function() {
+ if(btn.textContent === 'Start VR display') {
+ vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+ console.log('Presenting to WebVR display');</pre>
+
+<p>Nyt kun esittämispyyntö oli ok, halutaan seuraavaksi asettaa renderöintisisältö esitettäväksi VR-näytölle. Aivan ensimmäiseksi asetetaan canvas samankokoiseksi VR-näytön näyttöalueen kanssa. Tämä onnistuu hakemalla {{domxref("VREyeParameters")}} molemmille silmille käyttäen metodia {{domxref("VRDisplay.getEyeParameters()")}}.</p>
+
+<p>Sen jälkeen lasketaan yksinkertaisesti VR-näytön kokonaisala silmän ominaisuuksien {{domxref("VREyeParameters.renderWidth")}} ja {{domxref("VREyeParameters.renderHeight")}} avulla.</p>
+
+<pre class="brush: js"> // Set the canvas size to the size of the vrDisplay viewport
+
+ var leftEye = vrDisplay.getEyeParameters('left');
+ var rightEye = vrDisplay.getEyeParameters('right');
+
+ canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+ canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);</pre>
+
+<p>Seuraavaksi pysäytetään renderöintisilmukka {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}}, joka aiemmin käynnistyi {{domxref("Window.requestAnimationFrame()")}} kutsulla <code>drawScene()</code> -metodista ja sen sijaan kutsutaan<code>drawVRScene()</code>:ä. Tämä metodi renderöi saman skenen kuin aiempikin käyttäen nyt VR-kohtaisia temppuja. Tämän renderöintisilmukan hallinta on nyt vastaavalla WebVR-versiolla, {{domxref("VRDisplay.requestAnimationFrame")}} -metodilla.</p>
+
+<pre class="brush: js"> // stop the normal presentation, and start the vr presentation
+ window.cancelAnimationFrame(normalSceneFrame);
+ drawVRScene();</pre>
+
+<p>Lopuksi päivitetään painikkeen teksti, jolloin seuraavalla klikkauskerralla painike tuleekin pysäyttämään esityksen VR-näytöllä.</p>
+
+<pre class="brush: js"> btn.textContent = 'Exit VR display';
+ });</pre>
+
+<p><br>
+ VR-näytöllä esittämisen pysäyttämiseksi painikkeen seuraavalla klikkauksella kutsutaan {{domxref("VRDisplay.exitPresent()")}} -metodia. Painikkeen teksti vaihdetaan taas toiseksi ja <code>requestAnimationFrame</code> -kutsut vaihdetaan taas keskenään. Tästä näkyy, että käytetään metodia {{domxref("VRDisplay.cancelAnimationFrame")}} VR-renderöintisilmukan pysäyttämiseen ja normaalin skenen renderöinti käynnistyy <code>drawScene()</code>-metodilla.</p>
+
+<pre class="brush: js"> } else {
+ vrDisplay.exitPresent();
+ console.log('Stopped presenting to WebVR display');
+
+ btn.textContent = 'Start VR display';
+
+ // Stop the VR presentation, and start the normal presentation
+ vrDisplay.cancelAnimationFrame(vrSceneFrame);
+ drawScene();
+ }
+ });
+ }
+ });
+ } else {
+ console.log('WebVR API not supported by this browser.');
+ }
+ }
+}</pre>
+
+<p>Kun esittäminen käynnistyy, selaimessa näkyy stereoskooppinen näkymä:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15123/Capture2.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Seuraavasta opitaan, miten stereonäkymä varsinaisesti tehdään.</p>
+
+<h3 id="Miksi_WebVRllä_on_oma_requestAnimationFrame()">Miksi WebVR:llä on oma requestAnimationFrame()?</h3>
+
+<p>Tämä on hyvä kysymys. Perussyy on sulava renderöinti VR-näytössä, joka saadaan aikaan käyttämällä VR-näytön omaa näytönpäivitysnopeutta eikä tietokoneen. VR-näytön päivitysnopeudet ovat tietokonetta suurempia, yleisesti jopa  90fps. Tämä poikkeaa tietokoneen peruspäivitysnopeudesta.</p>
+
+<p>Huomaa, että kun VR-näytössä ei esitetä, {{domxref("VRDisplay.requestAnimationFrame")}} toimii identtisesti {{domxref("Window.requestAnimationFrame")}}:n kanssa, joten halutessasi voisit käyttää vain yhtä renderöintisilmukkaa tekemämme sovelluksen kahden silmukan sijaan. Sovelluksessa käytetään kahta, koska VR-esityksen ollessa päällä halutaan tehdä hieman eri asioita kuin ilman sitä, ja nämä halutaan selkeyden vuoksi erottaa.</p>
+
+<h3 id="Renderöinti_ja_näyttäminen">Renderöinti ja näyttäminen</h3>
+
+<p>Tässä vaiheessa on nähty kaikki koodi, mikä tarvitaan VR-laitteiston hakemiseen, skenen näyttöpyynnön lähettämiseen ja renderöintisilmukan käynnistämiseen. Seuraavaksi kurkataan renderöintisilmukan sisälle ja selitetään, miten sen WebVR-spesifiset osat toimivat.</p>
+
+<p>Aluksi tarkastellaan renderöintisilmukkametodin  — <code>drawVRScene()</code> määrittelyä. Ensimmäinen tehtävä on kutsua {{domxref("VRDisplay.requestAnimationFrame()")}} -metodia silmukan toiston jatkamiseksi ensimmäisen kutsukerran jälkeen (tämä tehtiin aiemmin koodissa, kun VR-näytölle esittäminen aloitettiin). Tämä metodikutsu asetetaan globaalin <code>vrSceneFrame</code> -muuttujan arvoksi, jotta silmukka saadaan keskeytettyä {{domxref("VRDisplay.cancelAnimationFrame()")}} -metodilla, kun VR-esitys loppuu.</p>
+
+<pre class="brush: js">function drawVRScene() {
+ // WebVR: Request the next frame of the animation
+ vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);</pre>
+
+<p>Seuraavaksi kutsutaan metodia {{domxref("VRDisplay.getFrameData()")}}, joka saa parametriksi muuttujanimen, johon ruudun tiedot halutaan. Tämähän alustettiin jo aiemmin nimellä  <code>frameData</code>. Metodin suorittamisen jälkeen tässä muuttujassa on tarpeelliset tiedot seuraavan ruudun renderöintiin VR -laitteelle pakattuna {{domxref("VRFrameData")}} -olioon. Mukana on tieto projektio- ja näkymämatriiseista, joiden avulla skene saadaan renderöityä oikein vasemmalle ja oikealle silmälle sekä ajantasainen {{domxref("VRPose")}} -olio, jossa on mm. VR-näytön suunta- ja sijaintitiedot.</p>
+
+<p>Tätä tulee kutsua joka ruudun kohdalla, jotta renderöity näkymä olisi ajantasainen.</p>
+
+<pre class="brush: js"> // Populate frameData with the data of the next frame to display
+ vrDisplay.getFrameData(frameData);</pre>
+
+<p>Seuraavaksi haetaan senhetkinen {{domxref("VRPose")}} ominaisuudesta {{domxref("VRFrameData.pose")}}, tallennetaan sijainti ja suunta myöhempää käyttöä varten ja lähetetään pose-tieto näytettäväksi sivun tilatietoruutuun, siis mikäli <code>poseStatsDisplayed</code> -muuttuja on saanut arvon true.</p>
+
+<pre class="brush: js"> // You can get the position, orientation, etc. of the display from the current frame's pose
+
+ var curFramePose = frameData.pose;
+ var curPos = curFramePose.position;
+ var curOrient = curFramePose.orientation;
+ if(poseStatsDisplayed) {
+ displayPoseStats(curFramePose);
+ }</pre>
+
+<p>  Seuraavaksi canvas:in sisältö tyhjennetään ennen uuden piirron aloittamista, jotta seuraava ruutu piirrettäisiin puhtaalle pohjalle, eikä aiempi ruutu olisi alla sotkemassa:</p>
+
+<pre class="brush: js"> // Clear the canvas before we start drawing on it.
+
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</pre>
+
+<p>Nyt renderöidään molempien silmien näkymä. Aluksi tarvitaan projektion ja näkymän sijainti renderöintiä varten. Nämä ovat {{domxref("WebGLUniformLocation")}} -olioita, jotka on luotu {{domxref("WebGLRenderingContext.getUniformLocation()")}} -metodilla käyttäen parametreinä shader-ohjelman tunnusta ja nimitunnistetta.</p>
+
+<pre class="brush: js"> // WebVR: Create the required projection and view matrix locations needed
+ // for passing into the uniformMatrix4fv methods below
+
+ var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+ var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");</pre>
+
+<p>Seuraava renderöintivaihe sisältää:</p>
+
+<ul>
+ <li>Viewportin koon määrittäminen vasemmalle silmälle  {{domxref("WebGLRenderingContext.viewport")}} -metodilla — tämä on tietenkin canvas:in leveyden ensimmäinen puolikas kertaa sen täysi korkeus.</li>
+ <li>Vasemmalle silmälle renderöintiin käytettävät näkymä- ja projektiomatriisien arvojen määrittäminen — tämä tehdään käyttämällä {{domxref("WebGLRenderingContext.uniformMatrix", "WebGLRenderingContext.uniformMatrix4fv")}} -metodia, joka saa parametrikseen yllä haetut sijaintitiedot ja {{domxref("VRFrameData")}} -oliolta saatavat vasemman puolen matriisit.</li>
+ <li><code>drawGeometry()</code> funktion suorittaminen, joka suorittaa varsinaisen skenen renderöinnin — ja edellisistä vaiheista johtuen siis vain vasemmalle silmälle.</li>
+</ul>
+
+<pre class="brush: js"> // WebVR: Render the left eye’s view to the left half of the canvas
+ gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+ gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+ gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+ drawGeometry();</pre>
+
+<p>Ja sama oikealle silmälle:</p>
+
+<pre class="brush: js"> // WebVR: Render the right eye’s view to the right half of the canvas
+ gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+ gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+ gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+ drawGeometry();</pre>
+
+<p>Seuraavaksi määritellään<code>drawGeometry()</code> funktio. Suurin osa siitä koostuu tavallisesta WebGL -koodista, jolla saadaan piirrettyä 3D-kuutio. WebVR-spesifisiä osia löytyy <code>mvTranslate()</code> ja<code>mvRotate()</code> funktiokutsuista — ne välittävät matriisit WebGL-ohjelmalle, joka määrittää sen hetkiselle ruudulle kuution sijainnin ja kierron.</p>
+
+<p>Kuten huomaat, näitä arvoja muokataan {{domxref("VRPose")}} -oliolta saaduilla VR-näytön sijainti- (<code>curPos</code>) ja kiertotiedoilla (<code>curOrient</code>). Sen seurauksena esimerkiksi päätä vasemmalle käännettäessä kuvassa näkyvä kuutio siirtyy aivan odotetustikin oikealle, kun  x-sijaintitieto (<code>curPos[0]</code>) ja y-kiertotieto (<code>[curOrient[1]</code>) lisätään x-translaatioarvoon.</p>
+
+<p>Tämä on 'quick and dirty' -tapa käyttää VR pose-tietoa, mutta se näyttänee kuitenkin perusidean.</p>
+
+<pre class="brush: js"> function drawGeometry() {
+ // Establish the perspective with which we want to view the
+ // scene. Our field of view is 45 degrees, with a width/height
+ // ratio of 640:480, and we only want to see objects between 0.1 units
+ // and 100 units away from the camera.
+
+ perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+ // Set the drawing position to the "identity" point, which is
+ // the center of the scene.
+
+ loadIdentity();
+
+ // Now move the drawing position a bit to where we want to start
+ // drawing the cube.
+
+ mvTranslate([
+ 0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+ 5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+ -15.0 - (curPos[2] * 25)
+ ]);
+
+ // Save the current matrix, then rotate before we draw.
+
+ mvPushMatrix();
+ mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+ // Draw the cube by binding the array buffer to the cube's vertices
+ // array, setting attributes, and pushing it to GL.
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+ gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+ // Set the texture coordinates attribute for the vertices.
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+ gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+ // Specify the texture to map onto the faces.
+
+ gl.activeTexture(gl.TEXTURE0);
+ gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+ gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+ // Draw the cube.
+
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+ setMatrixUniforms();
+ gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ // Restore the original matrix
+
+ mvPopMatrix();
+ }
+</pre>
+
+<p>Seuraava koodipalanen ei liity mitenkään WebVR:ään — siinä vain kierretään kuutiota joka ruudun osalta:</p>
+
+<pre class="brush: js"> // Update the rotation for the next draw, if it's time to do so.
+
+ var currentTime = (new Date).getTime();
+ if (lastCubeUpdateTime) {
+ var delta = currentTime - lastCubeUpdateTime;
+
+ cubeRotation += (30 * delta) / 1000.0;
+ }
+
+ lastCubeUpdateTime = currentTime;</pre>
+
+<p>Renderöintisilmukan viimeiseen osaan kuuluu {{domxref("VRDisplay.submitFrame()")}} -metodin kutsuminen — kaikki tarpeellinen on nyt tehty ja näyttö on renderöity {{htmlelement("canvas")}} :iin, tämä metodi sitten toimittaa ruudun VR-näytölle, jolloin se ruutu näkyy myös siinä.</p>
+
+<pre class="brush: js"> // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+ vrDisplay.submitFrame();
+}</pre>
+
+<h3 id="Pose_(sijainti_kierto_ym.)_-tiedon_näyttäminen">Pose (sijainti, kierto, ym.) -tiedon näyttäminen</h3>
+
+<p>Tässä osassa tutustutaan <code>displayPoseStats()</code> -funktioon, joka näyttää kunkin ruudun päivitetyt pose-tiedot. Kyseinen funktio on melko yksinkertainen.</p>
+
+<p>Aluksi tallennetaan {{domxref("VRPose")}}-oliolta saadut kuusi ominaisuutta omiin muuttujiin — ne ovat tyyppiä {{domxref("Float32Array")}}.</p>
+
+<pre class="brush: js">function displayPoseStats(pose) {
+ var pos = pose.position;
+ var orient = pose.orientation;
+ var linVel = pose.linearVelocity;
+ var linAcc = pose.linearAcceleration;
+ var angVel = pose.angularVelocity;
+ var angAcc = pose.angularAcceleration;</pre>
+
+<p>Sitten tiedot kirjoitetaan tietolaatikkoon ja päivitetään ne joka ruudun kohdalla. Arvot on pyöristetty <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> -metodilla luettavuuden vuoksi.</p>
+
+<p>Huomaa ehtolause lineaarisen ja kulmakiihtyvyyden vektorien arvojen tarkastamisessa - siinä varmistetaan ennen näyttämistä, että arvot on tosiaan saatu luettua. Useimmilta VR-laitteistolta näitä arvoja ei vielä saada, joten ilman tarkistamista seuraisi virhetoiminta (ellei arvoja saada, vektorien arvoksi tulee <code>null</code>).</p>
+
+<pre class="brush: js"> posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+ orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+ linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+ angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+ if(linAcc) {
+ linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+ } else {
+ linAccStats.textContent = 'Linear acceleration not reported';
+ }
+
+ if(angAcc) {
+ angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+ } else {
+ angAccStats.textContent = 'Angular acceleration not reported';
+ }
+}</pre>
+
+<h2 id="WebVR_-tapahtumat">WebVR -tapahtumat</h2>
+
+<p>The WebVR spesifikaatiossa on määritetty useita liipaistavia tapahtumia (event), ja näin koodilla voidaan reagoida VR-näytön tilan muutoksiin (vrt. <a href="/en-US/docs/Web/API/WebVR_API#Window_events">Window events</a>). Esimerkiksi:</p>
+
+<ul>
+ <li>{{event("vrdisplaypresentchange")}} — Liipaistaan, kun VR-näytön esittämistila muuttuu — esim. esitetään -&gt; ei esitetä, ja päinvastoin.</li>
+ <li>{{event("vrdisplayconnect")}} — Saadaan, kun yhteensopiva VR-näyttö on liitetty tietokoneeseen.</li>
+ <li>{{event("vrdisplaydisconnect")}} — Tapahtuma VR-näytön irrotuksesta.</li>
+</ul>
+
+<p>Demossa on seuraava esimerkki tapahtumista:</p>
+
+<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function(e) {
+ console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});</pre>
+
+<p>Kuten näet {{domxref("VRDisplayEvent", "event object")}} tarjoaa kaksi hyödyllistä ominaisuutta — {{domxref("VRDisplayEvent.display")}}, joka viittaa {{domxref("VRDisplay")}} tapahtuman tuottajaan, ja {{domxref("VRDisplayEvent.reason")}}, jossa on selkokielinen syy tapahtumaan.</p>
+
+<p>Tämä on hyvin käyttökelpoinen tapahtuma; sitä voidaan käyttää huomaan yllättävä näytön irrotus, joka estäää tarpeettomat virheviestit ja kertoo tilanteen käyttäjälle. Googlen Webvr.info -esitysdemossa tapahtumaa käytetään suorittamaan <a href="https://github.com/toji/webvr.info/blob/master/samples/03-vr-presentation.html#L174"><code>onVRPresentChange()</code> funktio</a>, joka päivittää käyttöliittymän kontrollit tilannetta vastaaviksi ja muuttaa canvasin kokoa.</p>
+
+<h2 id="Yhteenveto">Yhteenveto</h2>
+
+<p>Tässä artikkelissa kerrottiin hyvin yksinkertaisen WebVR 1.1 sovelluksen tekemisestä, jonka avulla pääset alkuun sovellusten kehittämisessä.</p>
diff --git a/files/fi/web/api/window/index.html b/files/fi/web/api/window/index.html
new file mode 100644
index 0000000000..70b807464b
--- /dev/null
+++ b/files/fi/web/api/window/index.html
@@ -0,0 +1,509 @@
+---
+title: Window
+slug: Web/API/Window
+tags:
+ - API
+ - DOM
+ - Interface
+ - JavaScript
+ - NeedsTranslation
+ - Reference
+ - Tab
+ - TopicStub
+ - Window
+translation_of: Web/API/Window
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">The <strong><code>Window</code></strong> interface represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{domxref("document.defaultView")}} property.</p>
+
+<p>A global variable, <code>window</code>, representing the window in which the script is running, is exposed to JavaScript code.</p>
+
+<p>The <code>Window</code> interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the <code>Window</code> interface is a suitable place to include these items that need to be globally available. Many of these are documented in the  <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> and the <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p>
+
+<p>In a tabbed browser, each tab is represented by its own <code>Window</code> object; the global <code>window</code> seen by JavaScript code running within a given tab always represents the tab in which the code is running. That said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as {{Domxref("Window.resizeTo", "resizeTo()")}} and {{Domxref("Window.innerHeight", "innerHeight")}}. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p>
+
+<dl>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>This property indicates whether the current window is closed or not.</dd>
+ <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd>
+ <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the XUL controller objects for the current chrome window.</dd>
+ <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt>
+ <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Returns the browser crypto object.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the document that the window contains.</dd>
+ <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd>
+ <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd>
+ <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd>
+ <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd>
+ <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd>
+ <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>This property indicates whether the window is displayed in full screen or not.</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br>
+ Was: Multiple storage objects that are used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the history object.</dd>
+ <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+ <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Indicates whether a context is capable of using features that require secure contexts.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+ <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3>
+
+<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 global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Displays an alert dialog.</dd>
+
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd>
+ <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
+ <dd>Enables the scheduling of tasks during a browser's idle periods.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
+ <dd>Toggles a user's ability to resize a window.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <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("EventTarget.removeEventListener")}}</dt>
+ <dd>Removes an event listener from the window.</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>
+
+<h3 id="Obsolete_methods">Obsolete methods</h3>
+
+<dl>
+ <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt>
+ <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called if accelerometer detects a change (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called when the orientation is changed (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt>
+ <dd>An event handler property for any device orientation changes.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd>
+</dl>
+
+<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Called after the window loses focus, such as due to a popup.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Called after the ANY mouse button is pressed &amp; released</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Called when a double click is made with ANY mouse button.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Called after the window is closed</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Called when the RIGHT mouse button is pressed</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Called when the value of an &lt;input&gt; element changes</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Called when ANY mouse button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Called continously when the mouse is moved inside the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Called when the pointer leaves the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Called when the pointer enters the window</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Called when ANY mouse button is released</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Called when network connection is lost. See {{event("offline")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Called when network connection is established. See {{event("online")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Called when a back button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Called when a form is reset</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Called continuously as you are resizing the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Called when the mouse wheel is rotated around any axis</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Called after text in an input field is selected</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Called when a form is submitted</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Called when the user navigates away from the page.</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li>
+</ul>
diff --git a/files/fi/web/guide/events/index.html b/files/fi/web/guide/events/index.html
new file mode 100644
index 0000000000..0196a78f5a
--- /dev/null
+++ b/files/fi/web/guide/events/index.html
@@ -0,0 +1,53 @@
+---
+title: Event developer guide
+slug: Web/Guide/Events
+tags:
+ - DOM
+ - Event
+ - Guide
+ - NeedsTranslation
+ - NeedsUpdate
+ - TopicStub
+ - events
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+
+<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p>
+
+<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p>
+
+<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p>
+
+<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p>
+
+<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p>
+
+<p>The <strong>window</strong> in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it.</p>
+
+<p>The <strong>process</strong> loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p>
+
+<p>The <strong>user interaction</strong> with the web page contents can trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction-driven events include:</p>
+
+<ul>
+ <li>the original 'click' event,</li>
+ <li>mouse events,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li>
+ <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>, now deprecated.</li>
+</ul>
+
+<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p>
+
+<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p>
+
+<p>The <strong>network requests</strong> made by a web page might trigger some events.</p>
+
+<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p>
+
+<div class="note">
+<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p>
+</div>
+
+<h2 id="Docs">Docs</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/fi/web/guide/index.html b/files/fi/web/guide/index.html
new file mode 100644
index 0000000000..d87f4e3108
--- /dev/null
+++ b/files/fi/web/guide/index.html
@@ -0,0 +1,58 @@
+---
+title: Web developer guides
+slug: Web/Guide
+tags:
+ - Guide
+ - Landing
+ - NeedsTranslation
+ - TopicStub
+ - Web
+translation_of: Web/Guide
+---
+<p><strong>This article provides how-to information to help make use of specific technologies &amp; APIs.</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/Learn/HTML">HTML Learning Area</a></dt>
+ <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Learn/CSS">CSS Learning Area</a></dt>
+ <dd class="landingPageList">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Events developer guide</a></dt>
+ <dd class="landingPageList">Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd class="landingPageList">AJAX is a term that defines a group of technologies allowing web applications to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></dt>
+ <dd class="landingPageList">Modern Web sites and applications often need to present graphics of varying sophistication.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></dt>
+ <dd class="landingPageList">A list of all Web APIs and what they do.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript is the powerful scripting language used to create applications for the Web.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></dt>
+ <dd class="landingPageList">Browsers process text as Unicode internally. However, a way of representing characters in terms of bytes (character encoding) is used for transferring text over the network to the browser. The <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML specification recommends the use of the UTF-8 encoding</a> (which can represent all of Unicode), and regardless of the encoding used requires Web content to declare that encoding.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></dt>
+ <dd class="landingPageList">This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Firefox OS project, see the <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> page. Or you might be interested in details about <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox for Android</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></dt>
+ <dd class="landingPageList">When building modern Web apps and sites, it's important to make your content work quickly and efficiently. This lets it perform effectively for both powerful desktop systems and weaker handheld devices.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt>
+ <dd class="landingPageList">The Web platform provides different methods of parsing and serializing XML, each with its own pros and cons.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt>
+ <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) is a font file format that is free for anyone to use on the web.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></dt>
+ <dd class="landingPageList">The <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> object lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. It's primarily intended for sending form data, but can be used independently from forms in order to transmit keyed data. The transmission is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossary</a></dt>
+ <dd class="landingPageList">Defines numerous technical terms related to the Web and Internet.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
diff --git a/files/fi/web/html/element/body/index.html b/files/fi/web/html/element/body/index.html
new file mode 100644
index 0000000000..d4470f538b
--- /dev/null
+++ b/files/fi/web/html/element/body/index.html
@@ -0,0 +1,166 @@
+---
+title: '<body>: Dokumentin Body elementti'
+slug: Web/HTML/Element/body
+tags:
+ - Elementti
+ - HTML
+ - Osioiva pääelementti
+ - Osiot
+ - Referenssi
+ - Web
+translation_of: Web/HTML/Element/body
+---
+<p>{{HTMLRef}}</p>
+
+<p><strong>HTML <code>&lt;body&gt;</code> elementti</strong> edustaa HTML-asiakirjan sisältöä. Dokumentissa voi olla vain yksi <code>&lt;body&gt;</code> elementti.</p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Sisältökategoriat</a></th>
+ <td><a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Sectioning root</a>.</td>
+ </tr>
+ <tr>
+ <th scope="row">Sallittu sisältö</th>
+ <td><a href="/fi/docs/Web/HTML/Content_categories#Flow_content">Virtaussisältö</a>.</td>
+ </tr>
+ <tr>
+ <th scope="row">Tagin pois jättäminen</th>
+ <td>Aloitustagi voidaan jättää pois jos ensimmäinen asia elementin sisällä ei ole välilyönti, kommentti, {{HTMLElement("script")}} elementti tai {{HTMLElement("style")}} elementti. Lopetustagi voidaan jättää pois jos body elementillä on sisältöä tai on aloitustagi ja kommentti ei ole välittömästi sen jälkeen.</td>
+ </tr>
+ <tr>
+ <th scope="row">Sallitut vanhemmat</th>
+ <td>Sen on oltava jälkimmäinen elementti {{HTMLElement("html")}} elementistä.</td>
+ </tr>
+ <tr>
+ <th scope="row">Sallitut ARIA roolit</th>
+ <td>Ei mitään.</td>
+ </tr>
+ <tr>
+ <th scope="row">DOM rajapinta</th>
+ <td>{{domxref("HTMLBodyElement")}}
+ <ul>
+ <li><code>&lt;body&gt;</code> elementti paljastaa {{domxref("HTMLBodyElement")}} rajapinnan.</li>
+ <li>Voit käyttää body elementtiä {{domxref("document.body")}} ominaisuuden kautta.</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Ominaisuudet">Ominaisuudet</h2>
+
+<p>Tämä elementti sisältää <a href="/en-US/docs/Web/HTML/Global_attributes">globaalit ominaisuudet</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt>
+ <dd>Tekstin väri hyperlinkeille kun valittuna. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta yhdessä {{cssxref(":active")}} pseudoluokan kanssa sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt>
+ <dd>Taustakuvan URI. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("background")}} ominaisuutta elementissä sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt>
+ <dd>Taustaväri dokumentille. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("background-color")}} ominaisuutta elementissä sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt>
+ <dd>Kehon pohjamarginaali. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-bottom")}} ominaisuutta elementissä sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt>
+ <dd>Kehon vasen marginaali. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-left")}} ominaisuutta elementissä sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt>
+ <dd>Tekstin väri avaamattomille hyperlinkeille. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta yhdessä {{cssxref(":link")}} pseudoluokan kanssa sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("onafterprint")}}</dt>
+ <dd>Funktio, jota kutsua kun käyttäjä on tulostanut dokumentin.</dd>
+ <dt>{{htmlattrdef("onbeforeprint")}}</dt>
+ <dd>Funktio, jota kutsua kun käyttäjä pyytää tulostusta dokumentista.</dd>
+ <dt>{{htmlattrdef("onbeforeunload")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentti aiotaan purkaa.</dd>
+ <dt>{{htmlattrdef("onblur")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentti menettää kohdistuksen.</dd>
+ <dt>{{htmlattrdef("onerror")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentti ei lataudu kunnolla.</dd>
+ <dt>{{htmlattrdef("onfocus")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentti vastaanottaa kohdistuksen.</dd>
+ <dt>{{htmlattrdef("onhashchange")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentin fragmenttitunnisteosa (alkaen (<code>'#'</code>) risuaitamerkillä) dokumentin nykyisestä osoitteessa on muuttunut.</dd>
+ <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Funktio, jota kutsua kun haluttu kieli muuttuu.</dd>
+ <dt>{{htmlattrdef("onload")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentti on lopettanut lataamisen.</dd>
+ <dt>{{htmlattrdef("onmessage")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentti on vastaaottanut viestin.</dd>
+ <dt>{{htmlattrdef("onoffline")}}</dt>
+ <dd>Funktio, jota kutsua kun verkkoyhteys on epäonnistunut.</dd>
+ <dt>{{htmlattrdef("ononline")}}</dt>
+ <dd>Funktio, jota kutsua kun verkkoyhteys on palautunut.</dd>
+ <dt>{{htmlattrdef("onpopstate")}}</dt>
+ <dd>Funktio, jota kutsua kun läyttäjä on navigoinut istuntohistoriaa.</dd>
+ <dt>{{htmlattrdef("onredo")}}</dt>
+ <dd>Funktio, jota kutsua kun käyttäjä on liikkunut eteenpäin kumoa transaktiohistoriassa.</dd>
+ <dt>{{htmlattrdef("onresize")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentin kokoa on muutettu.</dd>
+ <dt>{{htmlattrdef("onstorage")}}</dt>
+ <dd>Funktio, jota kutsua kun tallennusalue on muuttunut.</dd>
+ <dt>{{htmlattrdef("onundo")}}</dt>
+ <dd>Funktio, jota kutsua kun käyttäjä on liikkunut taaksepäin kumoa transaktiohistoriassa.</dd>
+ <dt>{{htmlattrdef("onunload")}}</dt>
+ <dd>Funktio, jota kutsua kun dokumentti on menossa pois.</dd>
+ <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt>
+ <dd>Kehon oikea marginaali.<em> Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-right")}} ominaisuutta elementissä sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt>
+ <dd>Tekstin etualan väri. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta elementissä sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt>
+ <dd>Kehon ylämarginaali. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-top")}} ominaisuutta elementissä sen sijaan.</em></dd>
+ <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt>
+ <dd>Tekstin väri vierailluille hyperlinkeille. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta yhdessä {{cssxref(":visited")}} pseudoluokan kanssa sen sijaan.</em></dd>
+</dl>
+
+<h2 id="Esimerkki">Esimerkki</h2>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;Dokumentin otsikko&lt;/title&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ &lt;p&gt;Tämä on kappale&lt;/p&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Tekniset_tiedot">Tekniset tiedot</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Määritelmä</th>
+ <th scope="col">Tila</th>
+ <th scope="col">Kommentti</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '&lt;body&gt;')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Muutetu listaa epäyhdenmukaisista ominaisuuksista.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Poistettu käytöstä aikaisemmin vanhentuneet ominaisuudet. Määritelty epäyhdenmukaisten käyttäytymienen ja ei-koskaan standardoitu <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> ja <code>marginbottom</code>. Lisätty <code>on*</code> ominaisuudet.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}</td>
+ <td>{{Spec2('HTML4.01')}}</td>
+ <td>Vanhennutettu <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> ja <code>vlink</code> ominaisuudet.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2>
+
+
+
+<p>{{Compat("html.elements.body")}}</p>
+
+<h2 id="Katso_myös">Katso myös</h2>
+
+<ul>
+ <li>{{HTMLElement("html")}}</li>
+ <li>{{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/fi/web/html/element/head/index.html b/files/fi/web/html/element/head/index.html
new file mode 100644
index 0000000000..165583a167
--- /dev/null
+++ b/files/fi/web/html/element/head/index.html
@@ -0,0 +1,108 @@
+---
+title: '<head>: Dokumentin metadata (Header) elementti'
+slug: Web/HTML/Element/head
+tags:
+ - Elementti
+ - HTML
+ - 'HTML:Metadata sisältö'
+ - Referenssi
+ - Web
+translation_of: Web/HTML/Element/head
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;head&gt;</code> elemetti</strong> tarjoaa yleisen informaation (metadatan) dokumentista, mukaan lukien sen otsikon sekä linkit skripteihin ja tyylitiedostoihin.</p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th><a href="/fi/docs/Web/HTML/Content_categories">Sisältökategoriat</a></th>
+ <td>Ei mitään.</td>
+ </tr>
+ <tr>
+ <th>Sallittu sisältö</th>
+ <td>Jos dokumentti on {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} dokumentti, tai jos otsikkoinformaatio on saatavilla korkeamman tason protokollasta, nolla tai enemmän metadata elementtejä.<br>
+ Muutoin, yksi tai enemmän metadata elementtejä missä täsmälleen yksi on {{HTMLElement("title")}} elementti.</td>
+ </tr>
+ <tr>
+ <th>Tagin pois jättäminen</th>
+ <td>Aloitusmerkki voidaan jättää pois jos ensimmäinen asia head elementin sisällä on elementti.<br>
+ Päätymerkki voidaan jättää pois jos head elementin jälkeen ensimmäinen asia ei ole välilyönti tai kommentti.</td>
+ </tr>
+ <tr>
+ <th>Sallitut vanhemmat</th>
+ <td>{{HTMLElement("html")}} elementti, jonka ensimmäisenä lapsena.</td>
+ </tr>
+ <tr>
+ <th>Sallitut ARIA roolit</th>
+ <td>Ei mitään.</td>
+ </tr>
+ <tr>
+ <th>DOM rajapinta</th>
+ <td>{{domxref("HTMLHeadElement")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Ominaisuudet">Ominaisuudet</h2>
+
+<p>Tämä elementti sisältää <a href="/en-US/docs/Web/HTML/Global_attributes">globaalit ominaisuudet</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt>
+ <dd>Metadata profiilien URI osoitteet välilyöntien erottamana.</dd>
+</dl>
+
+<h2 id="Esimerkki">Esimerkki</h2>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;Dokumentin otsikko&lt;/title&gt;
+ &lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Huomatukset">Huomatukset</h2>
+
+<p>Modernit, HTML5-yhteensopivat selaimet automaattisesti rakentavat <code>&lt;head&gt;</code> elementin jos tagit on jätetty merkitsemättä. <a class="external" href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Tätä käytöstä ei voida taata muinaisissa selaimissa</a>.</p>
+
+<h2 id="Tekniset_tiedot">Tekniset tiedot</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Määrittely</th>
+ <th scope="col">Tila</th>
+ <th scope="col">Kommentti</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '&lt;head&gt;')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Ei muutosta viimeisestä snapshotista</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Käytöstä poistettiin <code>profile</code></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '&lt;head&gt;')}}</td>
+ <td>{{Spec2('HTML4.01')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2>
+
+<p class="hidden">The compatibility table in 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>
+
+<p>{{Compat("html.elements.head")}}</p>
+
+<h2 id="Katso_myös">Katso myös</h2>
+
+<ul>
+ <li>Elementit joita voidaan käyttää <code>&lt;head&gt;</code> elementin sisällä: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}, {{HTMLElement("template")}}</li>
+</ul>
diff --git a/files/fi/web/html/element/index.html b/files/fi/web/html/element/index.html
new file mode 100644
index 0000000000..7d2c18afaa
--- /dev/null
+++ b/files/fi/web/html/element/index.html
@@ -0,0 +1,109 @@
+---
+title: HTML elements reference
+slug: Web/HTML/Element
+tags:
+ - Basic
+ - Element
+ - HTML
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+ - Web
+ - 'l10n:priority'
+translation_of: Web/HTML/Element
+---
+<div>{{HTMLSidebar("Elements")}}</div>
+
+<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}, which are created using {{Glossary("Tag", "tags")}}.</span> They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.</p>
+
+<div class="note">
+<p>For more information about the basics of HTML elements and attributes, see <a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">the section on elements in the Introduction to HTML article</a>.</p>
+</div>
+
+<h2 id="Main_root">Main root</h2>
+
+<p>{{HTMLRefTable("HTML Root Element")}}</p>
+
+<h2 id="Document_metadata">Document metadata</h2>
+
+<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p>
+
+<p>{{HTMLRefTable("HTML Document Metadata")}}</p>
+
+<h2 id="Sectioning_root">Sectioning root</h2>
+
+<p>{{HTMLRefTable("Sectioning Root Element")}}</p>
+
+<h2 id="Content_sectioning">Content sectioning</h2>
+
+<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.   </p>
+
+<p>{{HTMLRefTable("HTML Sections")}}</p>
+
+<h2 id="Text_content">Text content</h2>
+
+<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code>&lt;/body&gt;</code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content.     </p>
+
+<p>{{HTMLRefTable("HTML Grouping Content")}}</p>
+
+<h2 id="Inline_text_semantics">Inline text semantics</h2>
+
+<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p>
+
+<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p>
+
+<h2 id="Image_and_multimedia">Image and multimedia</h2>
+
+<p>HTML supports various multimedia resources such as images, audio, and video.</p>
+
+<p>{{HTMLRefTable("multimedia")}}</p>
+
+<h2 id="Embedded_content">Embedded content</h2>
+
+<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p>
+
+<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p>
+
+<h2 id="Scripting">Scripting</h2>
+
+<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p>
+
+<p>{{HTMLRefTable("HTML Scripting")}}</p>
+
+<h2 id="Demarcating_edits">Demarcating edits</h2>
+
+<p>These elements let you provide indications that specific parts of the text have been altered.</p>
+
+<p>{{HTMLRefTable("HTML Edits")}}</p>
+
+<h2 id="Table_content">Table content</h2>
+
+<p>The elements here are used to create and handle tabular data.</p>
+
+<p>{{HTMLRefTable("HTML tabular data")}}</p>
+
+<h2 id="Forms">Forms</h2>
+
+<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p>
+
+<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p>
+
+<h2 id="Interactive_elements">Interactive elements</h2>
+
+<p>HTML offers a selection of elements which help to create interactive user interface objects.</p>
+
+<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+
+<h2 id="Web_Components">Web Components</h2>
+
+<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p>
+
+<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p>
+
+<h2 id="Obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2>
+
+<div class="warning">
+<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p>
+</div>
+
+<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
diff --git a/files/fi/web/html/element/title/index.html b/files/fi/web/html/element/title/index.html
new file mode 100644
index 0000000000..d53e81e109
--- /dev/null
+++ b/files/fi/web/html/element/title/index.html
@@ -0,0 +1,122 @@
+---
+title: '<title>: Dokumentin otsikkoelementti'
+slug: Web/HTML/Element/title
+tags:
+ - Elementti
+ - HTML
+ - HTML dokumentin metadata
+ - 'HTML:Metadata sisältö'
+ - Ikkunan nimi
+ - Ikkunan otsikko
+ - Otsikko
+ - Referenssi
+ - Sivun nimi
+ - Sivun otsikko
+ - Välilehden nimi
+ - Välilehden otsikko
+ - Web
+translation_of: Web/HTML/Element/title
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML otsikkoelementti</strong> (<strong><code>&lt;title&gt;</code></strong>) määrittelee dokumentin otsikon, joka näkyy selaimen otsikkopalkissa tai sivun välilehdessä. Se usein sisältää tekstiä ja tagit sen sisällä on jätetty huomiotta.</span></p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row"><a href="/fi/docs/Web/HTML/Content_categories">Sisältökategoriat</a></th>
+ <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata sisältö</a>.</td>
+ </tr>
+ <tr>
+ <th scope="row">Sallittu sisältö</th>
+ <td>Teksti, joka ei ole elementtien välinen välilyönti.</td>
+ </tr>
+ <tr>
+ <th scope="row">Tagin pois jättäminen</th>
+ <td>Molemmat avaus- ja sulkumerkit ovat pakollisia. Huomaa, että selainten pitäisi jättää loput sivusta huomiotta, jos <code>&lt;/title&gt;</code> on jäänyt merkitsemättä.</td>
+ </tr>
+ <tr>
+ <th scope="row">Sallitut vanhemmat</th>
+ <td>{{ HTMLElement("head") }} elementti joka ei sisällä toisia {{ HTMLElement("title") }} elementtejä.</td>
+ </tr>
+ <tr>
+ <th scope="row">Sallitut ARIA roolit</th>
+ <td>Ei mitään.</td>
+ </tr>
+ <tr>
+ <th scope="row">DOM rajapinta</th>
+ <td>{{domxref("HTMLTitleElement")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Ominaisuudet">Ominaisuudet</h2>
+
+<p>Tämä elementti sisältää vain <a href="/en-US/docs/Web/HTML/Global_attributes">globaalit ominaisuudet</a>.</p>
+
+<h2 id="Käyttöohjeet">Käyttöohjeet</h2>
+
+<p><code>&lt;title&gt;</code> elementtiä käytetään aina sivun {{HTMLElement("head")}} lohkossa.</p>
+
+<h2 id="Esimerkki">Esimerkki</h2>
+
+<pre class="brush: html">&lt;title&gt;Mahtava sivun otsikko&lt;/title&gt;
+</pre>
+
+<h2 id="Koskien_esteettömyyttä">Koskien esteettömyyttä</h2>
+
+<p>On tärkeää antaa <code>title</code> elementille arvo joka kuvaa sivun tarkoitusta. </p>
+
+<p>Avustavan tekniikan käyttäjille tarkoitettu tavallinen navigointitekniikka on lukea sivun otsikko ja päätellä, mitä sisältöä se sisältää. Tämä johtuu siitä, että sivun navigoiminen sen sisällön määrittelemiseksi voi olla aikaa vievää ja mahdollisesti sekavaa.</p>
+
+<h4 id="Esimerkki_2">Esimerkki</h4>
+
+<pre>&lt;title&gt;Valikko - Kiinalainen ravintola - RuokaNam: Verkko-ostoksia tänään!&lt;/title&gt;
+</pre>
+
+<p>Voit auttaa käyttäjiä päivittämällä sivun <code>title</code> arvon vastaamaan merkittäviä sivun tilamuutoksia (kuten lomakkeiden vahvistusongelmia).</p>
+
+<h4 id="Esimerkki_3">Esimerkki</h4>
+
+<pre>&lt;title&gt;2 virhettä - Tilauksesi - Kiinalainen ravintola - RuokaNam: Verkko-ostoksia tänään!&lt;/title&gt;
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Tekniset_tiedot">Tekniset tiedot</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Määrittely</th>
+ <th scope="col">Tila</th>
+ <th scope="col">Kommentti</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
+ <td>{{Spec2('HTML4.01')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2>
+
+<p class="hidden">The compatibility table in 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>
+
+<p>{{Compat("html.elements.title")}}</p>
diff --git a/files/fi/web/html/index.html b/files/fi/web/html/index.html
new file mode 100644
index 0000000000..5f508bf107
--- /dev/null
+++ b/files/fi/web/html/index.html
@@ -0,0 +1,99 @@
+---
+title: 'HTML: HyperText Markup Language'
+slug: Web/HTML
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) on verkon yksinkertaisin rakennuspalikka. Se määrittelee merkityksen ja rakenteen verkkosisällölle. Muita teknologioita käytetään yleisesti kuvailemaan verkkosivun ulkonäkö/tyyli (<a href="/fi/docs/Web/CSS">CSS</a>) tai toiminnallisuus/käyttäytyminen (<a href="/fi/docs/Web/JavaScript">JavaScript</a>).</span></p>
+
+<p>"HyperText" viittaa linkkeihin, jotka yhdistävät verkkosivut toisiin, joko yhden sivuston sisällä tai toiselle sivustolle. Linkit ovat keskeisiä verkolle. Kun lataat sisältöä Internetiin ja yhdistät sen muiden käyttäjien luomiin sivuihin, sinusta tilee aktiivinen osallistuja World Wide Websissä.</p>
+
+<p>HTML käyttää merkintää (eng. markup) tekstin, kuvien, ja muun sisällön merkitsemiseen Web-selaimessa. HTML-merkintä sisältää erityisiä "elementtejä", kuten {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} ja monia muita.</p>
+
+<p>HTML tagit toimivat samoin kirjainkoosta riippumatta. Eli nei voidaan kirjoittaa isoilla kirjaimilla, pienillä kirjaimilla, tai näiden seoksella. Esimerkiksi <strong>&lt;title&gt; </strong>tagi voidaan kirjoittaa myös &lt;Title&gt;,&lt;TITLE&gt; tai muulla tapaa.</p>
+
+<p>Artikkelit alla kertovat sinulle lisää HTML:sta.</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>HTML esittely</span>
+
+ <p>Mikäli olet uusi Web-kehityksessä, muista lukea <a href="/fi/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML perusteet</a> artikkeli oppiaksesi mitä HTML on ja miten sitä käytetään.</p>
+ </li>
+ <li><span>HTML oppaat</span>
+ <p>HTML-oppimateriaalia käsitteleviä artikkeleita, oppaita, sekä täydellisiä esimerkkejä löytyy <a href="/fi/docs/Learn/HTML">HTML oppimisalueestamme</a>.</p>
+ </li>
+ <li><span>HTML referenssit</span>
+ <p>Laajassa <a href="/fi/docs/Web/HTML/Reference">HTML referenssi</a>osiossamme löydät HTML-elementtien ja attribuuttien yksityiskohdat.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Tools" id="Aloittelijan_oppaat">Aloittelijan oppaat</h2>
+
+<p>Our <a href="/fi/docs/Learn/HTML">HTML oppimisalueemme</a> sisältää useita moduuleja, jotka opettavat HTML:n alusta loppuun — aikaisempaa osaamista ei vaadita.</p>
+
+<dl>
+ <dt><a href="/fi/docs/Learn/HTML/Introduction_to_HTML">HTML esittely</a></dt>
+ <dd>Tämä moduuli totuttaa sinut tärkeisiin konsepteihin ja syntakseihin kuten HTML-koodin soveltamista tekstiin, miten luoda hyperlinkkejä, sekä kuinka käyttää HTML:ää verkkosivun rakenteeseen.</dd>
+ <dt><a href="/fi/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ja upottaminen</a></dt>
+ <dd>Tämä moduuli tutkii HTML:n käyttöä multimedian sisällyttämiseen verkkosivuihin, mukaan lukien eri tavat, joilla kuvia voidaan sisällyttää, ja miten videoita, ääntä, ja jopa toisia verkkosivuja upotetaan.</dd>
+ <dt><a href="/fi/docs/Learn/HTML/Tables">HTML taulukot</a></dt>
+ <dd>Verkkosivun taulukkotietojen esittäminen ymmärrettävällä, helposti saatavilla olevilla tavoilla voi olla haaste. Tämä moduuli kattaa perustaulukon merkinnän sekä monimutkaisempia ominaisuuksia kuten kuvaukset ja tiivistelmät.</dd>
+ <dt><a href="/fi/docs/Learn/HTML/Forms">HTML lomakkeet</a></dt>
+ <dd>Lomakkeet ovat erittäin tärkeä osa verkkoa — ne tarjoavat paljon toimintoja, joita tarvitset vuorovaikuttaaksesi verkkkosivuja, kuten rekisteröidä ja kirjautua sisään, lähettää palautetta, ostaa tuotteta, ja paljon muuta. Tämän moduulin avulla pääset alkuun asiakaspuolen lomakkeiden luomisessa. </dd>
+ <dt><a href="https://developer.mozilla.org/fi/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></dt>
+ <dd>Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</dd>
+</dl>
+
+<h2 id="Edistyneet_aiheet">Edistyneet aiheet</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></dt>
+ <dd class="landingPageList">The <code><a href="/fi/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code> attribute, in combination with an appropriate <a class="glossaryLink" href="/fi/docs/Glossary/CORS">CORS</a> header, allows images defined by the {{HTMLElement("img")}} element to be loaded from foreign origins and used in a {{HTMLElement("canvas")}} element as if they were being loaded from the current origin.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></dt>
+ <dd class="landingPageList">Some HTML elements that provide support for <a href="/fi/docs/HTTP/Access_control_CORS">CORS</a>, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Focus_management_in_HTML">Focus management in HTML</a></dt>
+ <dd class="landingPageList">The <code><a href="/fi/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/fi/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a web page.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Using_the_application_cache">Using the application cache</a></dt>
+ <dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/fi/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a></dt>
+ <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Referenssit">Referenssit</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Reference">HTML reference</a></dt>
+ <dd class="landingPageList">HTML consists of <strong>elements</strong>, each of which may be modified by some number of <strong>attributes</strong>. HTML documents are connected to each other with <a href="/fi/docs/Web/HTML/Link_types">links</a>.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Element">HTML element reference</a></dt>
+ <dd class="landingPageList">Lista kaikista <a class="glossaryLink" href="/fi/docs/Glossary/HTML">HTML</a> <a class="glossaryLink" href="/fi/docs/Glossary/Element">elementeistä</a>.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Attributes">HTML attribute reference</a></dt>
+ <dd class="landingPageList">Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Global_attributes">Global attributes</a></dt>
+ <dd class="landingPageList">Global attributes may be specified on all <a href="/fi/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Inline_elements">Inline elements</a> and <a href="/fi/docs/Web/HTML/Block-level_elements">block-level elements</a></dt>
+ <dd class="landingPageList">HTML elements are usually "inline" or "block-level" elements. An inline element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block."</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Link_types">Link types</a></dt>
+ <dd class="landingPageList">In HTML, various link types can be used to establish and define the relationship between two documents. Link elements that types can be set on include <a href="/fi/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fi/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> and <a href="/fi/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a></dt>
+ <dd class="landingPageList">The <a href="/fi/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> and <a href="/fi/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> elements allow you to play audio and video media. These elements provide a browser-native alternative to similar capabilities found in Adobe Flash and other plug-ins.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Kinds_of_HTML_content">Kinds of HTML content</a></dt>
+ <dd class="landingPageList">HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements which can or can't be used in them. This is a guide to these categories.</dd>
+ <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mode and standards mode</a></dt>
+ <dd class="landingPageList">Historical information on quirks mode and standards mode.</dd>
+</dl>
+
+<h2 class="landingPageList" id="Liittyvät_aiheet">Liittyvät aiheet</h2>
+
+<dl>
+ <dt><a href="/fi/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt>
+ <dd>This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.</dd>
+</dl>
+</div>
+</div>
+<span class="alllinks"><a href="/fi/docs/tag/HTML">View All...</a></span></section>
diff --git a/files/fi/web/html/reference/index.html b/files/fi/web/html/reference/index.html
new file mode 100644
index 0000000000..2e7444a505
--- /dev/null
+++ b/files/fi/web/html/reference/index.html
@@ -0,0 +1,23 @@
+---
+title: HTML referenssi
+slug: Web/HTML/Reference
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>Tämä <a href="/fi-fi/docs/Web/HTML">HTML</a> referenssi kuvaa kaikki <strong>elementit</strong> ja <strong>ominaisuudet</strong> HTML:stä, mukaan lukien <strong>globaalit ominaisuudet</strong> jotka koskevat kaikkia elementtejä.</p>
+
+<dl>
+ <dt><a href="/fi-fi/docs/Web/HTML/Element">HTML elementtireferenssi</a></dt>
+ <dd>Tällä sivulla luetellaan kaikki HTML elementit, jotka on luotu tageilla.</dd>
+ <dt><a href="/fi-fi/docs/Web/HTML/Attributes">HTML ominaisuusreferenssi</a></dt>
+ <dd>HTML-elementeissä on ominaisuuksia. Nämä ovat lisäarvoja, jotka <span class="tlid-translation translation"><span title="">määrittävät elementit tai säätävät niiden käyttäytymistä eri tavoin käyttäjien haluamiin kriteereihin.</span></span></dd>
+ <dt><a href="/fi-fi/docs/Web/HTML/Global_attributes">Globaalit ominaisuudet</a></dt>
+ <dd><span class="tlid-translation translation"><span title="">Globaalit ominaisuudet ovat ominaisuuksia, jotka ovat yhteisiä kaikille HTML-elementeille;</span> <span title="">niitä voidaan käyttää kaikissa elementeissä, vaikka niillä ei ehkä ole vaikutusta joihinkin elementteihin.</span></span></dd>
+ <dt><a href="/fi-fi/docs/Web/HTML/Link_types">Linkkityypit</a></dt>
+ <dd><span class="tlid-translation translation"><span title="">HTML:ssä seuraavat linkityypit osoittavat kahden asiakirjan välistä suhdetta, jossa toinen linkkaa toiseen asiakirjaan käyttämällä &lt;a&gt;, &lt;area&gt; tai &lt;link&gt; -elementtiä.</span></span></dd>
+ <dt><a href="/fi-fi/docs/Web/Guide/HTML/Content_categories">Sisältökategoriat</a></dt>
+ <dd><span class="tlid-translation translation"><span title="">Jokainen HTML-elementti on yhden tai useamman sisältökategorian jäsen - nämä kategoriat ryhmittävät elementtejä, jotka jakavat yhteisiä ominaisuuksia</span></span>.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/fi-fi/docs/tag/HTML" title="Article tagged: HTML">Katso kaikki sivut tagilla "HTML"...</a></span></p>
diff --git a/files/fi/web/index.html b/files/fi/web/index.html
new file mode 100644
index 0000000000..0fb75fc460
--- /dev/null
+++ b/files/fi/web/index.html
@@ -0,0 +1,162 @@
+---
+title: Web teknologia kehittäjille
+slug: Web
+tags:
+ - Landing
+ - NeedsTranslation
+ - TopicStub
+ - Web
+translation_of: Web
+---
+<section id="Quick_Links">
+<ol>
+ <li><strong><a href="/fi/docs/Web">Web-teknologiat kehittäjille</a></strong></li>
+ <li class="toggle">
+ <details><summary>Perusteet</summary>
+ <ol>
+ <li><a href="/fi/docs/Web/HTML">HTML</a></li>
+ <li><a href="/fi/docs/Web/CSS">CSS</a></li>
+ <li><a href="/fi/docs/Web/HTTP">HTTP</a></li>
+ </ol>
+ </details>
+ </li>
+ <li class="toggle">
+ <details open><summary>Skriptaus</summary>
+ <ol>
+ <li><a href="/fi/docs/Web/JavaScript">JavaScript</a></li>
+ <li><a href="/fi/docs/Web/API">Web-rajapinnat</a></li>
+ <li><a href="/fi/docs/Web/Events">Eventit</a></li>
+ <li><a href="/fi/docs/Web/Web_components">Web-komponentit</a></li>
+ </ol>
+ </details>
+ </li>
+ <li class="toggle">
+ <details open><summary>Grafiikka</summary>
+ <ol>
+ <li><a href="/fi/docs/Web/HTML/Canvas">Canvas</a></li>
+ <li><a href="/fi/docs/Web/SVG">SVG</a></li>
+ <li><a href="/fi/docs/Web/API/WebGL_API">WebGL</a></li>
+ </ol>
+ </details>
+ </li>
+ <li class="toggle">
+ <details open><summary>Muuta</summary>
+ <ol>
+ <li><a href="/fi/docs/Web/Media">Web-media teknologiat</a></li>
+ <li><a href="/fi/docs/WebAssembly">WebAssembly</a></li>
+ <li><a href="/fi/docs/Web/MathML">MathML</a></li>
+ <li><a href="/fi/docs/Web/XSLT">XSLT</a></li>
+ <li><a href="/fi/docs/Web/EXSLT">EXSLT</a></li>
+ <li><a href="/fi/docs/Web/XPath">XPath</a></li>
+ </ol>
+ </details>
+ </li>
+</ol>
+</section>
+
+<p class="summary">Avoin verkko esittää uskomattomia mahdollisuuksia kehittäjille, jotka haluavat luoda verkkosivuja tai verkkosovelluksia. Hyödyntääksesi näitä teknologioita, sinun täytyy tietää kuinka niitä käytetään. Tutki alla olevia linkkejä oppiaksesi lisää eri web-teknologioista.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Web-teknologiat">Web-teknologiat</h2>
+
+<h3 id="Perusteet">Perusteet</h3>
+
+<dl>
+ <dt><a href="/fi/docs/Web/HTML">HTML</a></dt>
+ <dd><strong>HyperText Markup Language</strong> eli <strong>HTML</strong> käytetään kuvaamaan verkkosivun <em>sisältö.</em></dd>
+ <dt><a href="/fi/docs/Web/CSS">CSS</a></dt>
+ <dd><strong>Cascading Style Sheets</strong> eli <strong>CSS</strong> käytetään kuvaamaan verkkosivun sisällön ulkonäkö tai esitys.</dd>
+ <dt><a href="/fi/docs/Web/HTTP">HTTP</a></dt>
+ <dd><strong><dfn>Hypertext Transfer Protocol</dfn></strong><dfn> eli </dfn><strong><dfn>HTTP</dfn></strong><dfn> käytetään toimittamaan HTML ja muut hypermediatiedostot verkossa.</dfn></dd>
+</dl>
+
+<h3 id="Skriptaus">Skriptaus</h3>
+
+<dl>
+ <dt><a href="/fi/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd><strong>JavaScript </strong>on ohjelmointikieli, joka suoritetaan selaimessasi. Voit käyttää sitä lisäämään interaktiivisuutta tai muita dynaamisia ominaisuuksia verkkosivustollesi tai sovellukseesi.</dd>
+ <dd>With the advent of <a href="/fi/docs/Glossary/Node.js">Node.js</a>, you can also run JavaScript on the server.</dd>
+ <dt><a href="/fi/docs/Web/Reference/API">Web APIs</a></dt>
+ <dd><strong>Web Application Programming Interfaces (Web APIs)</strong> are used to perform a variety of tasks, such as manipulating the <a href="/fi/docs/DOM">DOM</a>, playing audio or video, or generating 3D graphics.
+ <ul>
+ <li>The <a href="/fi/docs/Web/API">Web API interface reference</a> lists all the object types you can use while developing for the web.</li>
+ <li>The <a href="/fi/docs/WebAPI">WebAPI page</a> lists all the communication, hardware access, and other APIs you can use in web applications.</li>
+ <li>The <a href="/fi/docs/Web/Events">Event reference</a> lists all the events you can use to track and react to interesting things that have taken place in your webpage or application.</li>
+ </ul>
+ </dd>
+ <dt><a href="/fi/docs/Web/Web_components">Web-komponentit</a></dt>
+ <dd>Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.</dd>
+</dl>
+
+<h3 id="Grafiikka">Grafiikka</h3>
+
+<dl>
+ <dt><a href="/fi/docs/Web/HTML/Canvas">Canvas</a></dt>
+ <dd>The {{HTMLElement("canvas")}} element provides APIs to draw 3D graphics using TextScript.</dd>
+ <dt><a href="/fi/docs/Web/SVG">SVG</a></dt>
+ <dd><strong>Scalable Vector Graphics (SVG)</strong> lets you use lines, curves, and other geometric shapes to render graphics. With vectors, you can create images that scale cleanly to any size.</dd>
+ <dt><a href="/fi/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd><strong>WebGL</strong> is a JavaScript API that lets you draw 3D or 2D graphics using the HTML {{HTMLElement("canvas")}} element. This technology lets you use standard OpenGL ES in Web content.</dd>
+</dl>
+
+<h3 id="Ääni_video_ja_multimedia">Ääni, video, ja multimedia</h3>
+
+<dl>
+ <dt><a href="/fi/docs/Web/Media">Web media technologies</a></dt>
+ <dd>A list of media-related APIs with links to the documentation you'll need for each.</dd>
+ <dt><a href="/fi/docs/Web/Media/Overview">Overview of media technology on the web</a></dt>
+ <dd>A general look at the open web technologies and APIs that provide support for audio and video playback, manipulation, and recording. If you're not sure which API you should use, this is the place to start.</dd>
+ <dt><a href="/fi/docs/Web/API/Media_Streams_API">Media capture and streams API</a></dt>
+ <dd>A reference for the API that makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.</dd>
+ <dt><a href="/fi/docs/Web/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Using HTML audio and video</a></dt>
+ <dd>Embedding video and/or audio in a web page and controlling its playback.</dd>
+ <dt><a href="/fi/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>The RTC in WebRTC stands for Real-Time Communications, technology that enables audio/video streaming and data sharing between browser clients (peers).</dd>
+</dl>
+
+<h3 id="Muut">Muut</h3>
+
+<dl>
+ <dt><a href="/fi/docs/Web/MathML">MathML</a></dt>
+ <dd><strong>Mathematical Markup Language (MathML)</strong> lets you display complex mathematical equations and syntax.</dd>
+ <dt><a href="/fi/docs/Web/XSLT">XSLT</a></dt>
+ <dd><strong>Extensible Stylesheet Language Transformations (XSLT)</strong> let you convert XML documents into more human readable HTML.</dd>
+ <dt><a href="/fi/docs/Web/EXSLT">EXSLT</a></dt>
+ <dd>Extra functions which provide additional features to XSLT.</dd>
+ <dt><a href="/fi/docs/Web/XPath">XPath</a></dt>
+ <dd><strong>XPath</strong> lets you select DOM nodes in a document using a more powerful syntax than what is currently provided by <a href="/fi/docs/Web/CSS/CSS_Selectors">CSS selectors</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Oppimisalue">Oppimisalue</h2>
+
+<dl>
+ <dt><a href="/fi/docs/Learn">Learning web development</a></dt>
+ <dd>This set of articles provides beginners with everything they need to start coding simple websites.</dd>
+ <dt><a href="https://developer.mozilla.org/fi/Apps/Progressive">Progressive web apps</a></dt>
+ <dd>Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of docs and guides tell you all you need to know about PWAs.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Muut_aiheet">Muut aiheet</h2>
+
+<dl>
+ <dt><a href="/fi/docs/Web/Apps">Developing web applications</a></dt>
+ <dd>This set of articles explains the techniques used in developing web apps for mobile and desktop environments.</dd>
+ <dt><a href="/fi/docs/Web/Accessibility">Accessibility</a></dt>
+ <dd>Accessible websites enable as many people as possible to use the web, including those whose visual, auditory, or other abilities are limited in some way. This set of articles provides information about accessible web development.</dd>
+ <dt><a href="/fi/docs/Web/Localization">Localization (L10n) and Internationalization (I18n)</a></dt>
+ <dd>The web is a global community! Make sure your site is part of it by keeping in mind the need to provide content in the language and layout expected by everyone that might want to use your site or app.</dd>
+ <dt><a href="/fi/docs/Web/Security">Security</a></dt>
+ <dd>Don't let your website or app leak private data to the bad guys. Use this set of articles to make sure your projects are secure.</dd>
+ <dt><a href="/fi/docs/WebAssembly">WebAssembly</a></dt>
+ <dd>WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ with a compilation target so that they can run on the web.</dd>
+</dl>
+</div>
+</div>
+
+<p><span class="alllinks"><a href="/fi/docs/tag/Web">Katso kaikki...</a></span></p>
diff --git a/files/fi/web/javascript/index.html b/files/fi/web/javascript/index.html
new file mode 100644
index 0000000000..d8a689c886
--- /dev/null
+++ b/files/fi/web/javascript/index.html
@@ -0,0 +1,129 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>JavaScript</strong> (<strong>JS</strong>) on kevyt, tulkattu, tai <a href="https://en.wikipedia.org/wiki/Just-in-time_compilation">juuri-ajallaan</a> käännetty ohjelmointikieli, joka pitää funktioita "<a href="/en-US/docs/Glossary/First-class_Function">ensimmäisen luokan kansalaisina"</a>. Vaikka se tunnetaan parhaiten verkkoselaimessa toimivana skriptauskielenä, sitä käyttävät myös monet <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">ei-selainpohjaiset ympäristöt</a>, kuten <a href="/en-US/docs/Glossary/Node.js">Node.js</a>, <a class="external" href="https://couchdb.apache.org/">Apache CouchDB</a> ja <a class="external" href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>.</span> JavaScript on  <a href="/en-US/docs/Glossary/Prototype-based_programming">prototyyppipohjainen</a>, yksisäikeinen, dynaaminen ohjelmointikieli, joka tukee monia eri ohjelmintitapoja, kuten olio-ohjelmointi-, imperatiivista sekä funktionaalista ohjelmointityyliä. Lue lisää<a href="/en-US/docs/Web/JavaScript/About_JavaScript"> JavaScript</a>istä.</p>
+
+<p>Tämä osa on omistettu pelkästään JavaScriptille ohjelmointikielenä huomioimatta ominaisuuksia, jotka ovat eritysiä verkkosivuille tai muille ajoympäristöille. Tarkempaa tietoa selainten <a href="/en-US/docs/Glossary/API">ohjelmointirajapinnoista</a>, joita käytetään verkkosivujen kehittämisessä löytyy <a href="/en-US/docs/Web/API">Web API</a>- ja <a href="/en-US/docs/Glossary/DOM">DOM</a>-osioista.</p>
+
+<p>JavaScriptin käyttämä standardi on <a href="/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Vuodesta 2012 lähtien kaikki <a href="https://kangax.github.io/compat-table/es5/">modernit selaimet</a> tukevat täysin ECMAScript 5.1:tä ja sitä vanhemmat selaimet tukevat vähintään ECMAScript 3:sta. 17. kesäkuuta 2015 <a href="https://www.ecma-international.org">ECMA International</a> julkaisi kuudennen version ECMAScriptistä, jonka virallinen nimitys on ECMAScript 2015, tätä kutsuttiin alunperin ECMAScript 6 tai ES6:ksi. Siitä lähtien, ECMAScript-standardia on päivitetty vuosittain. Tämä dokumentaatio viittaa tämänhetkiseen vedokseen, mikä on tällä hetkellä <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>.</p>
+
+<p>JavaScriptiä ei kannata sekoittaa <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java-ohjelmointikieleen</a>. Molemmat "Java" ja "JavaScript" ovat Oraclen tuotemerkkejä Yhdysvalloissa ja muissa maissa, mutta siitä huolimatta näillä kahdella ohjelmointikielellä on hyvin erilainen syntaksi, semantiikka ja käyttökohteet.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Oppaita">Oppaita</h2>
+
+<p>Opi JavaScriptiä oppaiden avulla.</p>
+
+<h3 id="Aloittelijoille">Aloittelijoille</h3>
+
+<p>Suuntaa <a href="/en-US/docs/Learn/JavaScript">JavaScriptin opiskeluosioon</a> jos haluat oppia JavaScriptiä mutta sinulla ei ole aikaisempaa kokemusta JavaScript-ohjelmoinnista. Sieltä löydät seuraavat itseopiskelumoduulit:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript-ensiaskeleet</a></dt>
+ <dd>Tämä osio vastaa kysymyksiin "mitä JavaScript on?", "miltä se näyttää" ja "mitä sillä voi tehdä?". Samalla kuvataan myös kielen perusominaisuudet kuten muuttujat ja erilaiset perustietotyypit.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript-osakokonaisuudet</a></dt>
+ <dd>Jatkaa JavaScriptin perustavien ominaisuuksien läpikäymimistä ja esittelee yleisimmät ohjausrakenteet kuten ehdolliset lausunnot, silmukat, funktiot ja tapahtumat.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Esittelyssä JavaScript-oliot</a></dt>
+ <dd>On tärkeää ymmärtää JavaScriptin oliopohjainen luonne jos haluat ymmärtää JavaScriptiä paremmin ja kehittyä taidoissasi kirjoittaa tehokasta JavaScript-koodia.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynkroninen JavaScript</a></dt>
+ <dd>Mitä on asynkroninen JavaScript, miksi se on tärkeää ja kuinka sitä voidaan käyttää tehokkaasti, esimerkiksi pitämällä suoritussäie vapaana suorittaessa säikeen pysäyttäviä operaatioita kuten noudettaessa resursseja verkkopalvelimelta.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Käyttäjäpuolen web ohjelmointirajapinnat (API:t)</a></dt>
+ <dd>Mitä API:t ovat ja kuinka käyttää joitain kaikista yleisimmistä API:sta, joihin törmätään yleisesti web-kehityksessä.</dd>
+</dl>
+
+<h3 id="JavaScript-opas">JavaScript-opas</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Guide">JavaScript-opas</a></dt>
+ <dd>Yksityiskohtaisempi opas JavaScript-ohjelmointikieeleen, joka on suunnattu lukijoille, joilla on aikaisempaa kokemusta ohjelmoinnista, jollain muulla ohjelmointikielellä.</dd>
+</dl>
+
+<h3 id="Keskitaso">Keskitaso</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript uudelleen esiteltynä</a></dt>
+ <dd>Yleiskatsaus heille, jotka <em>luulevat</em> tuntevansa JavaScriptin.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript-tietorakenteet</a></dt>
+ <dd>Yleiskatsaus JavaScriptin tietorakenteista.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Yhtä kuin -vertailu ja samankaltaisuus</a></dt>
+ <dd>JavaScript tarjoaa kolme erilaista arvonvertailuoperaattoria: tiukka yhdenvertaisuus <code>===</code>-operaattoria käyttämällä, väljä yhdenvertaisuus <code>==</code>-operaattoria käyttämällä sekä {{jsxref("Global_Objects/Object/is", "Object.is()")}}-metodi.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Closures">Sulkeumat</a></dt>
+ <dd>
+ <p>Sulkeuma on yhdistelmä funktiota sekä kirjoitusympäristöä, jossa kyseinen funktio määriteltiin.</p>
+ </dd>
+</dl>
+
+<h3 id="Edistyneet">Edistyneet</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Periytyminen ja prototyyppiketjut</a></dt>
+ <dd>Kuvaus laajasti väärinkäsitetystä ja aliarvioidusta prototyyppipohjaisesta periytymismallista.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict-tila</a></dt>
+ <dd>Strict-tila määritelee sen, että muuttujia ei pysty käyttämään ennen kuin ne ovat alustettu. Se on rajoitettu variaatio ECMAScript 5:stä, jolla on parempi suorituskyky ja jota on helpompi "debugata".</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScriptin tyypitetyt taulukot</a></dt>
+ <dd>JavaScriptin tyypitetyt taulukot mahdollistavat pääsyn raakaan binääridataan.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Memory_Management">Muistinhallinta</a></dt>
+ <dd>Muistin elämänkaari ja roskien keruu JavaScriptissä.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/EventLoop">Samanaikaisuusmalli ja tapahtumasilmukka</a></dt>
+ <dd>JavaScriptin samankaltaisuusmalli perustuu "tapahtumasilmukkaan".</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Viite">Viite</h2>
+
+<p>Selaa täydellistä <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript-viitedokumentaatiota</a>.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Vakio-oliot</a></dt>
+ <dd>Tutustu vakiona sisäänrakennettuihin olioihin {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}} sekä muihin.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a></dt>
+ <dd>Learn more about the behavior of JavaScript's operators {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>, and more.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements and declarations</a></dt>
+ <dd>Learn how {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, and more JavaScript statements and keywords work.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Funktiot</a></dt>
+ <dd>Opi työskentelemään JavaScriptin funktioiden kanssa kehittääksesi sovelluksiasi.</dd>
+</dl>
+
+<h2 id="Työkalut_resurssit">Työkalut &amp; resurssit</h2>
+
+<p>Helpful tools for writing and debugging your <strong>JavaScript </strong>code.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and more.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt>
+ <dd>A JavaScript shell allows you to quickly test snippets of JavaScript code.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>Collaboration made easy. By adding TogetherJS to your site, your users can help each other out on a website in real time!</dd>
+ <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Stack Overflow questions tagged with "JavaScript".</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versions and release notes</a></dt>
+ <dd>Browse JavaScript's feature history and implementation status.</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>Edit JavaScript, CSS, HTML and get live results. Use external resources and collaborate with your team online.</dd>
+ <dt><a href="https://plnkr.co/">Plunker</a></dt>
+ <dd>Plunker is an online community for creating, collaborating on and sharing your web development ideas. Edit your JavaScript, CSS, HTML files and get live results and file structure.</dd>
+ <dt><a href="https://jsbin.com/">JSBin</a></dt>
+ <dd>
+ <p>JS Bin is an open source collaborative web development debugging tool.</p>
+ </dd>
+ <dt><a href="https://codepen.io/">Codepen</a></dt>
+ <dd>
+ <p>Codepen is another collaborative web development tool used as a live result playground.</p>
+ </dd>
+ <dt><a href="https://stackblitz.com/">StackBlitz</a></dt>
+ <dd>
+ <p>StackBlitz is another online playground/debugging tool, which can host and deploy full stack applications using React, Angular, etc.</p>
+ </dd>
+</dl>
+</div>
+</div>
diff --git a/files/fi/web/reference/index.html b/files/fi/web/reference/index.html
new file mode 100644
index 0000000000..45b6594981
--- /dev/null
+++ b/files/fi/web/reference/index.html
@@ -0,0 +1,29 @@
+---
+title: Web-teknologian referenssi
+slug: Web/Reference
+tags:
+ - Landing
+ - Reference
+ - Web
+translation_of: Web/Reference
+---
+<p>{{draft()}}<br>
+ The open web is built using a number of technologies that require an adequate knowledge in order to use them. Below you'll find the links to our reference material for each of them.</p>
+
+<h2 class="Documentation" id="Web-teknologiat">Web-teknologiat</h2>
+
+<p>It is recommended that you already <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">got started with the web</a>, however it isn't absolutely necessary.</p>
+
+<dl>
+ <dt><strong><a href="/en-US/docs/Glossary/HTML">HTML</a></strong> — Verkon jäsentäminen</dt>
+ <dd><strong>HyperText Markup Language</strong> is used to define and describe semantically the content (<a href="/en-US/docs/Glossary/markup">markup</a>) of a web page in a well-structured format. HTML provides a means to create structured documents made up of blocks called <a href="/en-US/docs/Web/HTML/Element">HTML elements</a> that are delineated by <em><a href="/en-US/docs/Glossary/Tag">tags</a></em>, written using angle brackets. Some introduce content into the page directly, others provide information about document text and may include other tags as sub-elements. Obviously, browsers do not display them, since they are used to interpret the content of the page.<br>
+ <br>
+ <a href="/en-US/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> | <a href="/en-US/Learn/HTML">Learn HTML</a> | <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/en-US/docs/Web/Guide/HTML">Developer guide</a> | <a href="/en-US/docs/Web/HTML/Element">Element reference</a> | <a href="/en-US/docs/Web/HTML/Reference">Reference</a></dd>
+ <dt><strong><a href="/en-US/docs/Glossary/CSS">CSS</a></strong> — Verkon muotoilu</dt>
+ <dd><strong>Cascading Style Sheets</strong> are used to describe the appearance of web content.<br>
+ <br>
+ <a href="/en-US/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>  | <a href="/en-US/docs/Web/Guide/CSS/Getting_started">Getting started with CSS</a> | <a href="/en-US/Learn/CSS">Learn CSS</a> | <a href="/en-US/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/en-US/docs/Web/Guide/CSS">Developer guide</a> | <a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Common CSS questions</a> | <a href="/en-US/docs/Web/CSS/Reference">Reference</a></dd>
+ <dt><strong><a href="/en-US/docs/Glossary/JavaScript">JavaScript</a></strong> — Dynaaminen asiakaspuolen skriptaus</dt>
+ <dd>The <strong>JavaScript </strong>programming language is used to add interactivity and other dynamic features to web sites.</dd>
+ <dd><a href="/en-US/docs/Learn/JavaScript">Learn JavaScript</a> | <a href="/en-US/docs/Web/JavaScript/Guide">Developer guide</a> | <a href="/en-US/docs/Web/JavaScript/Reference">Reference</a></dd>
+</dl>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-11-14 15:20:32 +0000