diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/fi | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/fi')
75 files changed, 6449 insertions, 0 deletions
diff --git a/files/fi/_redirects.txt b/files/fi/_redirects.txt new file mode 100644 index 0000000000..7ea90f0549 --- /dev/null +++ b/files/fi/_redirects.txt @@ -0,0 +1,6 @@ +# FROM-URL TO-URL +/fi/docs/Apps /fi/docs/Web/Apps +/fi/docs/Etusivu /fi/docs/Web +/fi/docs/Skinin_luominen_Firefoxiin:Aloittaminen /fi/docs/Skinin_luominen_Firefoxiin/Aloittaminen +/fi/docs/WebGL /fi/docs/Web/API/WebGL_API +/fi/docs/en /en-US/ diff --git a/files/fi/_wikihistory.json b/files/fi/_wikihistory.json new file mode 100644 index 0000000000..aa82164fce --- /dev/null +++ b/files/fi/_wikihistory.json @@ -0,0 +1,360 @@ +{ + "DOM": { + "modified": "2019-03-23T23:35:02.223Z", + "contributors": [ + "teoli" + ] + }, + "DOM/navigator.doNotTrack": { + "modified": "2019-03-23T23:34:48.293Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator": { + "modified": "2019-03-23T23:34:56.542Z", + "contributors": [ + "fscholz", + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.appCodeName": { + "modified": "2019-03-23T23:34:50.037Z", + "contributors": [ + "AshfaqHossain", + "Karvjorm" + ] + }, + "DOM/window.navigator.appName": { + "modified": "2019-03-23T23:34:51.570Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.appVersion": { + "modified": "2019-03-23T23:34:48.787Z", + "contributors": [ + "arunpandianp", + "Karvjorm" + ] + }, + "DOM/window.navigator.battery": { + "modified": "2019-03-23T23:34:51.352Z", + "contributors": [ + "AshfaqHossain", + "Karvjorm" + ] + }, + "DOM/window.navigator.buildID": { + "modified": "2019-03-23T23:34:47.974Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.connection": { + "modified": "2019-03-23T23:34:50.817Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.cookieEnabled": { + "modified": "2019-03-23T23:34:44.696Z", + "contributors": [ + "valtlai", + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.language": { + "modified": "2019-03-23T23:34:47.370Z", + "contributors": [ + "AshfaqHossain", + "Karvjorm" + ] + }, + "DOM/window.navigator.mimeTypes": { + "modified": "2019-03-23T23:34:46.573Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.onLine": { + "modified": "2019-03-23T23:34:35.718Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.oscpu": { + "modified": "2019-03-23T23:34:33.342Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.platform": { + "modified": "2019-03-23T23:34:40.545Z", + "contributors": [ + "jsx", + "Karvjorm" + ] + }, + "DOM/window.navigator.plugins": { + "modified": "2019-03-23T23:34:30.762Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.product": { + "modified": "2019-03-23T23:34:35.892Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.productSub": { + "modified": "2019-03-23T23:34:36.834Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.userAgent": { + "modified": "2019-03-23T23:34:27.801Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "DOM/window.navigator.vendor": { + "modified": "2019-03-23T23:34:28.021Z", + "contributors": [ + "khalid32", + "Karvjorm" + ] + }, + "HTML": { + "modified": "2019-03-23T23:34:49.523Z", + "contributors": [ + "Prasanth" + ] + }, + "HTML/Canvas": { + "modified": "2019-03-23T23:34:49.838Z", + "contributors": [ + "Karvjorm" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:40.977Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:38.464Z", + "contributors": [ + "dartvaneri" + ] + }, + "Learn/JavaScript/Ensimmaiset_askeleet": { + "modified": "2020-07-16T22:29:50.029Z", + "contributors": [ + "dartvaneri" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:26:12.710Z", + "contributors": [ + "Sheppy" + ] + }, + "Mozilla/Add-ons": { + "modified": "2020-10-05T13:27:56.684Z", + "contributors": [ + "rebloor" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2020-12-04T09:31:07.373Z", + "contributors": [ + "Zearin_Galaurum" + ] + }, + "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { + "modified": "2020-10-12T08:31:12.121Z", + "contributors": [ + "SphinxKnight", + "halttunen.jarkko1" + ] + }, + "Mozilla_Developer_Centerin_sisällöt": { + "modified": "2019-03-23T23:43:43.976Z", + "contributors": [ + "Melter" + ] + }, + "Skinin_luominen_Firefoxiin": { + "modified": "2019-01-16T16:12:14.893Z", + "contributors": [ + "Melter" + ] + }, + "Skinin_luominen_Firefoxiin/Aloittaminen": { + "modified": "2019-03-23T23:43:46.736Z", + "contributors": [ + "Melter" + ] + }, + "Teemat": { + "modified": "2019-03-23T23:43:19.026Z", + "contributors": [ + "fscholz", + "Melter" + ] + }, + "Web": { + "modified": "2019-08-08T04:26:04.971Z", + "contributors": [ + "mirorauhala", + "ethertank" + ] + }, + "Web/API": { + "modified": "2019-03-23T22:48:44.475Z", + "contributors": [ + "teoli", + "fscholz" + ] + }, + "Web/API/AesKeyGenParams": { + "modified": "2019-04-08T13:29:19.556Z", + "contributors": [ + "mirorauhala" + ] + }, + "Web/API/IntersectionObserver": { + "modified": "2020-10-15T22:28:19.927Z", + "contributors": [ + "tvaisanen" + ] + }, + "Web/API/WebGL_API": { + "modified": "2019-03-23T23:34:46.240Z", + "contributors": [ + "fscholz", + "Karvjorm" + ] + }, + "Web/API/WebVR_API": { + "modified": "2019-03-23T22:01:46.926Z", + "contributors": [ + "laitinent", + "chrisdavidmills" + ] + }, + "Web/API/WebVR_API/Using_the_WebVR_API": { + "modified": "2019-03-23T22:01:50.838Z", + "contributors": [ + "laitinent" + ] + }, + "Web/API/Window": { + "modified": "2020-10-15T22:09:21.465Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Guide": { + "modified": "2020-06-01T01:14:35.609Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Guide/Events": { + "modified": "2019-03-18T21:37:53.387Z", + "contributors": [ + "gportioli" + ] + }, + "Web/HTML": { + "modified": "2019-09-10T15:19:38.441Z", + "contributors": [ + "SphinxKnight", + "mirorauhala" + ] + }, + "Web/HTML/Element": { + "modified": "2020-12-07T13:30:47.690Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/HTML/Element/body": { + "modified": "2020-10-15T22:11:12.460Z", + "contributors": [ + "mirorauhala" + ] + }, + "Web/HTML/Element/head": { + "modified": "2020-10-15T22:11:11.385Z", + "contributors": [ + "mirorauhala" + ] + }, + "Web/HTML/Element/title": { + "modified": "2020-10-15T22:11:11.927Z", + "contributors": [ + "mirorauhala" + ] + }, + "Web/HTML/Reference": { + "modified": "2019-09-09T07:16:57.959Z", + "contributors": [ + "SphinxKnight", + "mirorauhala" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-22T23:19:55.226Z", + "contributors": [ + "ashley", + "tvaisanen" + ] + }, + "Web/Reference": { + "modified": "2019-03-18T21:22:48.091Z", + "contributors": [ + "mirorauhala" + ] + }, + "demos": { + "modified": "2019-01-16T13:28:20.845Z", + "contributors": [ + "Nzon" + ] + }, + "demos/detail": { + "modified": "2019-01-16T13:28:09.443Z", + "contributors": [ + "Nzon" + ] + }, + "fi": { + "modified": "2019-03-24T00:08:59.851Z", + "contributors": [ + "teoli", + "syssgx", + "techexpert", + "Melter" + ] + } +}
\ No newline at end of file diff --git a/files/fi/archive/api/index.html b/files/fi/archive/api/index.html new file mode 100644 index 0000000000..5a3f7413cb --- /dev/null +++ b/files/fi/archive/api/index.html @@ -0,0 +1,13 @@ +--- +title: API +slug: Archive/API +tags: + - API + - Archive + - NeedsTranslation + - TopicStub +translation_of: Archive/API +--- +<p>Archived documentation about obsolete web standards APIs.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/fi/archive/api/navigator/index.html b/files/fi/archive/api/navigator/index.html new file mode 100644 index 0000000000..69d23d39fc --- /dev/null +++ b/files/fi/archive/api/navigator/index.html @@ -0,0 +1,8 @@ +--- +title: Navigator +slug: Archive/API/Navigator +translation_of: Archive/API/Navigator +--- +<p>In progress. Features that used to hang off the {{domxref("Navigator")}} interface, but have since been removed.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/fi/archive/api/navigator/moznotification/index.html b/files/fi/archive/api/navigator/moznotification/index.html new file mode 100644 index 0000000000..49e829c258 --- /dev/null +++ b/files/fi/archive/api/navigator/moznotification/index.html @@ -0,0 +1,53 @@ +--- +title: navigator.mozNotification +slug: Archive/API/Navigator/mozNotification +translation_of: Archive/API/Navigator/mozNotification +--- +<p>{{ non-standard_header() }}</p> + +<p>Tarjoaa tuen {{ domxref("notification") }} -objektien luomiseksi, joita käytetään käyttäjän hälyttämiseksi näyttämällä työpöytäilmoituksia. Nykyisin niitä tuetaan vain Firefox Mobile -selaimessa. Katso esimerkkinä <a href="/en/DOM/Displaying_notifications" title="en/DOM/Displaying notifications">Ilmoitusten näyttäminen</a>.</p> + +<h2 id="Method_overview" name="Method_overview">Metodi-yhteenveto</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>notification <a href="#createNotification()">createNotification</a>(in DOMString title, in DOMString description, in DOMString iconURL {{ optional_inline() }});</code></td> + </tr> + </tbody> +</table> + +<h2 id="Methods" name="Methods">Metodit</h2> + +<h3 id="createNotification()" name="createNotification()">createNotification()</h3> + +<p>Luo ja palauttaa ilmoitusobjektin, jota voidaan käyttää määritellyn viestin näyttämiseen valinnaisella verkko-osoitteella.</p> + +<pre class="eval">notification createNotification( + in DOMString title, + in DOMString description, + in DOMString iconURL {{ optional_inline() }} +); +</pre> + +<h6 id="Parameters" name="Parameters">Parametrit</h6> + +<dl> + <dt><code>title</code></dt> + <dd>Ilmoituksen otsikko.</dd> + <dt><code>description</code></dt> + <dd>Ilmoituksessa näytettävä teksti.</dd> + <dt><code>iconURL</code> {{ optional_inline() }}</dt> + <dd>Verkko-osoite ilmoituksessa näytettävän kuvan tunnistamiseksi.</dd> +</dl> + +<h6 id="Return_value" name="Return_value">Paluuarvo</h6> + +<p>Uusi {{ domxref("notification") }} -objekti.</p> + +<h2 id="Katso_myös">Katso myös</h2> + +<ul> + <li>{{ domxref("notification") }}</li> + <li><a href="/en/DOM/Displaying_notifications" title="en/DOM/Displaying notifications">Ilmoitusten näyttäminen</a></li> +</ul> diff --git a/files/fi/archive/b2g_os/api/index.html b/files/fi/archive/b2g_os/api/index.html new file mode 100644 index 0000000000..d71360a2fa --- /dev/null +++ b/files/fi/archive/b2g_os/api/index.html @@ -0,0 +1,14 @@ +--- +title: B2G OS APIs +slug: Archive/B2G_OS/API +tags: + - API + - B2G API + - NeedsTranslation + - TopicStub + - b2g os api's +translation_of: Archive/B2G_OS/API +--- +<p id="B2G_OS_uses_standard_Web_API's">List of B2G OS APIs</p> + +<p>{{APIListAlpha('/en-US/docs/Archive/B2G_OS/API')}}</p> diff --git a/files/fi/archive/b2g_os/api/navigator/index.html b/files/fi/archive/b2g_os/api/navigator/index.html new file mode 100644 index 0000000000..4b68621aed --- /dev/null +++ b/files/fi/archive/b2g_os/api/navigator/index.html @@ -0,0 +1,18 @@ +--- +title: Navigator (Firefox OS extensions) +slug: Archive/B2G_OS/API/Navigator +tags: + - API + - Firefox OS + - Interface + - Navigator + - NeedsTranslation + - Non-standard + - TopicStub +translation_of: Archive/B2G_OS/API/Navigator +--- +<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. This page represents the list of properties and methods added to <code>Navigator</code> on Firefox OS devices. For the list of properties and methods available to any Web sites, consult {{domxref("Navigator")}}.</p> + +<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("Window.navigator")}} property.</p> + +<p>{{subpageswithsummaries}}</p> diff --git a/files/fi/archive/b2g_os/api/navigator/mozapps/index.html b/files/fi/archive/b2g_os/api/navigator/mozapps/index.html new file mode 100644 index 0000000000..cc5e8ba440 --- /dev/null +++ b/files/fi/archive/b2g_os/api/navigator/mozapps/index.html @@ -0,0 +1,77 @@ +--- +title: window.navigator.mozApps +slug: Archive/B2G_OS/API/Navigator/mozApps +translation_of: Archive/B2G_OS/API/Navigator/mozApps +--- +<p>(fi translation)</p> + +<p>{{ non-standard_header() }}</p> + +<h3 id="Summary" name="Summary">Yhteenveto</h3> + +<p>Palauttaa {{ domxref("Apps") }} -objektin, jota voit käyttää <a href="/en-US/docs/Apps">Open Web apps</a>-sovellusten asentamiseen, hallinnointiin ja ohjaamiseen selaimessa.</p> + +<h3 id="Syntax" name="Syntax">Syntaksi</h3> + +<pre class="eval">var <em>apps</em> = window.navigator.mozApps; +</pre> + +<h3 id="Value" name="Value">Arvo</h3> + +<p><code>navigator.mozApps</code> on {{ domxref("Apps") }} -objekti, jota voit käyttää <a href="/en-US/docs/Apps">Open Web apps</a>-sovellusten asentamiseen, hallinnointiin ja ohjaamiseen selaimessa.</p> + +<h3 id="Specification" name="Specification">Spesifikaatio</h3> + +<p>Ei ole minkään spesifikaation osa; toteutettu Gecko-alustalla ohjelmointivirheen {{ Bug("697383") }} vuoksi.</p> + +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Perustuki</td> + <td>---</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>---</td> + <td>---</td> + <td>---</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>---</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>---</td> + <td>---</td> + <td>---</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/fi/archive/b2g_os/api/navigator/moztelephony/index.html b/files/fi/archive/b2g_os/api/navigator/moztelephony/index.html new file mode 100644 index 0000000000..eb7db87649 --- /dev/null +++ b/files/fi/archive/b2g_os/api/navigator/moztelephony/index.html @@ -0,0 +1,40 @@ +--- +title: window.navigator.mozTelephony +slug: Archive/B2G_OS/API/Navigator/MozTelephony +translation_of: Archive/B2G_OS/API/Navigator/MozTelephony +--- +<p>{{ non-standard_header() }}</p> +<h2 id="Summary" name="Summary">Yhteenveto</h2> +<p>Palauttaa {{ domxref("Telephony") }} -objektin, jota voit käyttää puheluiden aloittamiseen ja ohjaamiseen selaimesta.</p> +<h2 id="Syntax" name="Syntax">Syntaksi</h2> +<pre class="eval">var <em>phone</em> = window.navigator.mozTelephony; +</pre> +<h2 id="Value" name="Value">Arvo</h2> +<p><code>navigator.mozTelephony</code> on {{ domxref("Telephony") }} -objekti, jota voit käyttää ohjaamaan sen laitteen puhelinomaisuuksia, jossa selain on toiminnassa.</p> +<h2 id="Specification" name="Specification">Spesifikaatio</h2> +<p>Ei ole minkään spesifikaation osa; Ehdotuksen otaksutaan kuitenkin perustuvan asiakirjaan <a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebTelephony" title="https://wiki.mozilla.org/WebAPI/WebTelephony">WebTelephony design document</a>.</p> +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> +<p>Ilmeisistä syistä tukea odotetaan pääasiassa mobiiliselaimissa.</p> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("12.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<p> </p> diff --git a/files/fi/archive/b2g_os/api/telephony/index.html b/files/fi/archive/b2g_os/api/telephony/index.html new file mode 100644 index 0000000000..9fc3f3bfc8 --- /dev/null +++ b/files/fi/archive/b2g_os/api/telephony/index.html @@ -0,0 +1,105 @@ +--- +title: Telephony +slug: Archive/B2G_OS/API/Telephony +translation_of: Archive/B2G_OS/API/Telephony +--- +<p>{{ Apiref() }}</p> +<p>Tarjoaa tuen puhelintoimintaa tukevalle laitteelle puhelujen valinnassa, vastaamisessa ja hallinoinnissa.</p> +<h2 id="Attribuutit">Attribuutit</h2> +<dl> + <dt> + {{ domxref("Telephony.active") }}</dt> + <dd> + Objekti {{ domxref("TelephonyCall") }} osoittaa puhelun, joka on parhaillaan käynnissä. Aktiivi puhelu on se, joka vastaanottaa syötteen mikrofonista ja kaikki {{ domxref("Telephony.startTone()") }} -metodin tuottamat äänet.</dd> + <dt> + {{ domxref("Telephony.calls") }}</dt> + <dd> + {{ domxref("TelephonyCall") }} -objektien taulukko, yksi jokaiselle puhelulle, joka on parhaillaan yhdistettynä.</dd> + <dt> + {{ domxref("Telephony.muted") }}</dt> + <dd> + Asetetaan arvoon <code>true</code> mikrofonin mykistämiseksi tai <code>false</code> mikrofonin ottamiseksi käyttöön.</dd> + <dt> + {{ domxref("Telephony.oncallschanged") }}</dt> + <dd> + Käsittelijä "callschanged"-tapahtumalle; tämä {{ domxref("CallEvent") }} -tapahtuma lähetetään aina kun {{ domxref("Telephony.calls", "calls") }} -luettelo muuttuu.</dd> + <dt> + {{ domxref("Telephony.onincoming") }}</dt> + <dd> + Käsittelijä "incoming"-tapahtumalle; tämä {{ domxref("CallEvent") }} lähetetään aina kun uusi puhelu on tulossa.</dd> + <dt> + {{ domxref("Telephony.speakerEnabled") }}</dt> + <dd> + Aseta arvoon <code>true</code> kaiutintoiminnallisuuden käyttöönottamiseksi tai arvoon <code>false</code> sen ottamiseksi pois käytöstä.</dd> +</dl> +<h2 id="Metodit">Metodit</h2> +<dl> + <dt> + {{ domxref("Telephony.dial()") }}</dt> + <dd> + Soittaa määriteltyyn puhelinnumeroon, joka on määritelty merkkijonona.</dd> + <dt> + {{ domxref("Telephony.startTone()") }}</dt> + <dd> + Aloittaa määrätyn DTMF-äänen tuottamisen.</dd> + <dt> + {{ domxref("Telephony.stopTone()") }}</dt> + <dd> + Lopettaa parhaillaan kuuluvan DTMF-äänen.</dd> +</dl> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>Ei ole minkään spesifikaation osa; ehdotuksen otaksutaan kuitenkin perustuvan asiakirjaan <a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebTelephony" title="https://wiki.mozilla.org/WebAPI/WebTelephony">WebTelephony design document</a>.</p> +<h3 id="Selainyhteensopivuus">Selainyhteensopivuus</h3> +<p>Ilmeisestä syystä tukea odotetaan pääasiassa mobiiliselamille.</p> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("12.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Katso_myös">Katso myös</h2> +<ul> + <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Using the Telephony API</a></li> + <li>{{ domxref("TelephonyCall") }}</li> + <li>{{ domxref("CallEvent") }}</li> + <li>{{ domxref("window.navigator.mozTelephony") }}</li> +</ul> diff --git a/files/fi/archive/b2g_os/index.html b/files/fi/archive/b2g_os/index.html new file mode 100644 index 0000000000..79d37af630 --- /dev/null +++ b/files/fi/archive/b2g_os/index.html @@ -0,0 +1,229 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +tags: + - B2G + - B2G OS + - Basic + - Beginner + - Gaia + - Gecko + - Gonk + - Mozilla + - NeedsTranslation + - Overview + - TopicStub + - b2g smartphone os + - getting started with b2gos + - web based os from mozilla + - web os gecko +translation_of: Archive/B2G_OS +--- +<div class="summary"><span class="seoSummary">B2G OS is (was) a complete, standalone operating system for the open web. It is an open source project developed by the Mozilla community and forms the basis of Firefox OS products. As of 2017 it is<strong> no longer maintained</strong>.</span></div> + +<p><strong>B2G OS </strong>is a community maintained open source operating system for<strong> </strong>smartphones, tablets, smart TVs and other connected devices. The project was <a href="https://wiki.mozilla.org/Booting_to_the_Web">started</a> in 2011 and is based on the Linux kernel and Gecko rendering engine. The entire user interface is built using web technologies (HTML, CSS and JavaScript) and can be used to launch and use <a href="/en-US/Apps">web applications</a>. Since Mozilla <a href="https://discourse.mozilla-community.org/t/firefox-os-connected-devices-announcement/6864">discontinued</a> their commercial Firefox OS smartphone program the smartphone part of the project is entirely maintained by Mozilla's volunteer community, and branded as B2G OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13140/B2g_wordmark.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Index_of_pages">Index of pages</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Automated_testing">Automated Testing of B2G OS</a></dt> + <dd class="landingPageList">This page offers articles that provide information about various aspects of testing B2G OS, including running different tests, automation, and result reporting and tracking.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Add-ons">B2G OS add-ons</a></dt> + <dd class="landingPageList">You should follow the below steps to get set up to start developing extensions.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/API">B2G OS APIs</a></dt> + <dd class="landingPageList">List of B2G OS APIs</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Architecture">B2G OS architecture</a></dt> + <dd class="landingPageList">This article is a high-level overview of the architecture of the B2G OS platform, introducing key concepts and explaining how its components interact at a basic level.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/B2G_OS_build_prerequisites">B2G OS build prerequisites</a></dt> + <dd class="landingPageList">Before obtaining the code to build B2G OS, even if you are simply trying to build Gaia, you need a properly configured <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions">build system</a> — this page shows you how. You can currently build on 64-bit Linux distributions and OS X.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Phone_guide">B2G OS phone guide</a></dt> + <dd class="landingPageList">This section contains developer information relevant to specific phones that run B2G OS — both developer and consumer devices.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS">Building and installing B2G OS</a></dt> + <dd class="landingPageList">The articles listed on this page will guide you through building and installing B2G OS on an emulator or compatible device, or the <a href="/en-US/docs/Mozilla/B2G_OS/Platform/Gaia/Introduction_to_Gaia" title="Mozilla/B2G_OS/Platform/Gaia/Introduction to Gaia">Gaia</a> user interface in the Firefox browser.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Building">Building B2G OS</a></dt> + <dd class="landingPageList">Once you've <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">set up your build system</a> and performed your <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">initial pull and configure</a> the code, you can build Boot to Gecko. This guide explains how.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Building_the_B2G_OS_simulator">Building the B2G OS Simulator</a></dt> + <dd class="landingPageList">Just like <a href="http://nightly.mozilla.org" title="http://nightly.mozilla.org">Firefox Nightlies</a>, the B2G OS simulator desktop client (identified by <em>b2g-</em>) is automatically built every day from the latest source code. The latest build is <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">available from the Mozilla FTP server</a>. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G</a></dt> + <dd class="landingPageList">Depending on your specific needs, you have an assortment of options to consider when experimenting with Firefox OS or the <a href="/en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a> user interface. You can choose among the following options; each has its advantages and disadvantages to consider, and some are more flexible than others.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Crash_Reporting_Guide_for_Firefox_OS_Partners">Crash Reporting Guide for Firefox OS Partners</a></dt> + <dd class="landingPageList">Mozilla has a world-class system for collecting, analyzing, and fixing crashes and other stability issues such as hangs. Firefox OS partners need to work with Mozilla to correctly enable crash reporting and upload symbols.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt> + <dd class="landingPageList">The <code>.userconfig</code> file isn't checked into source code control, so your changes won't be overwritten when you update your source tree. It needs to be created in the <a href="https://github.com/mozilla-b2g/B2G">root of the B2G tree</a>; that is, in the same directory as <code>flash.sh</code>, <code>build.sh</code>, and so forth. You should add this before you run your config and build steps.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Debugging">Debugging on Firefox OS</a></dt> + <dd class="landingPageList">There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Developer_Mode">Developer Mode</a></dt> + <dd class="landingPageList">The current Firefox OS permissions model precludes modification and installation of certified/internal apps, which makes some device APIs completely unavailable to Marketplace and web apps. <strong>Developer Mode (DM)</strong> allows the user to indicate that they would like to relax the permissions model and expose all device APIs to content, as well as setting a group of related preferences. This article provides a high-level overview.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Developing_Firefox_OS">Developing Firefox OS</a></dt> + <dd class="landingPageList">This section provides useful documentation covering different ways in which Firefox OS (codename Boot2Gecko, or B2G) can be modified/customized during the build process, and how you can help to develop the low level platform areas such as <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> and <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Firefox_OS_apps">Firefox OS apps</a></dt> + <dd class="landingPageList">This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Board_guide">Firefox OS board guide</a></dt> + <dd class="landingPageList">This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Releases">Firefox OS developer release notes</a></dt> + <dd class="landingPageList">This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Security">Firefox OS security</a></dt> + <dd class="landingPageList">The following articles cover security-related topics about Firefox OS. This includes overall security features as well as application security and how the install process is kept secure.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Simulator">Firefox OS Simulator</a></dt> + <dd class="landingPageList"><span style="line-height: 1.5;">The Firefox OS Simulator is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. This means that in many cases, you don't need a real device to test and debug your app. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Firefox_OS_usage_tips">Firefox OS usage tips</a></dt> + <dd class="landingPageList">Explains all of the developer features on the phone and what they do (Settings > Device information > More information > Developer)</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia">Gaia</a></dt> + <dd class="landingPageList">Gaia is B2G OS's user interface and suite of default apps: it includes the lock screen, home screen, dialer, and other applications. Essentially, Gaia is a set of complex web apps that runs on top of the B2G OS platform. This set of articles covers all you need to know to contribute to the Gaia project.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></dt> + <dd class="landingPageList">Once you've built Boot to Gecko for a <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator">supported mobile device</a>, you can install it. This article will guide you through the process.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Introduction">Introduction to Firefox OS</a></dt> + <dd class="landingPageList">This set of documentation is aimed mainly at web developers and platform developers who want to learn how Firefox OS works, how to contribute to the project, and how to build their own custom versions of the software and install it on devices. For those who want to create and distribute their own web apps, the <a href="/en-US/Apps">App Center</a> and <a href="/en-US/Marketplace">Marketplace Zone</a> are good places to go.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Mulet">Mulet</a></dt> + <dd class="landingPageList">Following this guide you're going to run Gaia inside of a special build of Firefox called Firefox Mulet. This gives you the advantages of having a rapid development cycle, as well as standard web development tools and debuggers available to work with. First of all, you need to have the <a class="external external-icon" href="https://github.com/mozilla-b2g/gaia">Gaia</a> repo cloned on your machine and build your own profile. Then, you have to install mulet and run it, passing your Gaia profile as the profile to use.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Quickstart">Open web apps quickstart</a></dt> + <dd class="landingPageList">Quickstart information on coding Open Web Apps.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Pandaboard">Pandaboard</a></dt> + <dd class="landingPageList">This is a guide to setting up Firefox OS on a <a href="http://pandaboard.org/" title="http://pandaboard.org/">PandaBoard</a>. The PandaBoard is a low-cost OMAP 4 based development board for developing mobile operating systems.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/PasscodeHelper_Internals">PasscodeHelper Internals</a></dt> + <dd class="landingPageList">PasscodeHelper is a Gaia helper library for modifying and checking the Firefox OS lockscreen passcode (i.e., pin) from within Gaia, performing functions such as checking whether an entered passcode is correct, and changing the code. This article documents how PasscodeHelper works.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Porting_B2G_OS">Porting B2G OS</a></dt> + <dd class="landingPageList">This page lists the available resources for porting B2GOS.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first B2G build</a></dt> + <dd class="landingPageList">Depending on your internet connection, the configuration steps may take several hours to download everything you need to build B2G OS. Waiting is not as fun as doing, so after you have read through this page and have kicked off the configure script, consider using the time to set up and try out the <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator" title="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">B2G OS simulator</a>, begin familiarizing yourself with <a class="vt-p" href="/en-US/docs/Apps" title="/en-US/docs/Apps">Documentation for app developers</a> including Designing and Building an App, or familiarize yourself with the information on upcoming steps.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Resources">Resources</a></dt> + <dd class="landingPageList"><em>Resources for App hackers, as generated from our workshops</em></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Running_Tests_on_Firefox_OS_for_Developers">Running tests on Firefox OS: A guide for developers</a></dt> + <dd class="landingPageList">If you are a Gecko developer, then you should review the Firefox OS-specific documentation for the test automation you are already familar with: <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Mochitests">mochitest</a>, <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Reftests">reftest</a>, and <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Automated_testing/XPCShell">xpcshell</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Platform">The B2G OS platform</a></dt> + <dd class="landingPageList">The B2G OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on B2G OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Troubleshooting">Troubleshooting B2G OS</a></dt> + <dd class="landingPageList">This article provides tips for resolving common problems you may have while using B2G OS.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Using_the_App_Manager">Using the App Manager</a></dt> + <dd class="landingPageList">The App Manager is a tool for Firefox Desktop which provides a number of useful tools to help developers test, deploy and debug HTML5 web apps on Firefox OS phones & Simulator, directly from Firefox browser. This page documents how to use the App Manager.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Using_the_B2G_emulators">Using the B2G emulators</a></dt> + <dd class="landingPageList">This article provides a brief guide to some key things you should know when using the boot to Gecko emulators. This doesn't appear to be a complete user manual; instead, it simply tells you a few useful things that you might not learn on your own.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Web_applications">Web applications</a></dt> + <dd class="landingPageList">This page is intended to be a first, non thorough, attempt to collect web apps.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Bluetooth_API">Web Bluetooth API (Firefox OS)</a></dt> + <dd class="landingPageList">The Web Bluetooth API lets an open web app discover, pair with, and connect to Bluetooth devices. As it is a completely experimental and non-standard API, the Bluetooth API is currently available for certified applications only. However, there is some traction to have such an API available for regular Web content; this will be discussed as part of the <a href="http://www.w3.org/2012/sysapps/">W3C's System Applications Working Group</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/B2G_OS/Web_Telephony_API">Web Telephony API</a></dt> + <dd class="landingPageList">Web Telephony is an API that makes it possible for web content to handle voice phone calls using JavaScript.</dd> +</dl> + +<h2 id="Old_page_content">Old page content</h2> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: <a href="https://wiki.mozilla.org/B2G/Transition_Project/Call_For_Contribution">Call for contribution</a> & <a href="https://discourse.mozilla-community.org/t/updated-9th-july-call-for-app-maintainers-adopt-an-app/9300/1">Call for App adoption</a> has been made to gather more people, feel free to share it !</p> +</div> + +<div class="column-container"> +<div class="column-third"> +<h2 id="How_you_can_help">How you can help</h2> + +<ul> + <li>File & fix bugs (meta bug is <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1252143" rel="nofollow">bug 1252143</a>)</li> + <li>Help us fix failing <a class="external text" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Automated_testing" rel="nofollow">tests</a></li> + <li>Port a gaia <a href="https://mozilla-b2g.github.io/gaia/">smartphone app</a>: + <ol> + <li>Turn it into a webapp (or)</li> + <li>Turn it into chrome:// (<a href="https://discourse.mozilla-community.org/t/why-gaia-apps-are-turned-to-chrome/8011">why?</a>) & report back<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">Port B2G OS to your phone</a> or help us to maintain a port</li> + <li>Help improve translate this documentation & wiki</li> + <li>Propose & implement new smartphone features</li> +</ul> +</div> + +<div class="column-third"> +<h2 id="Get_involved"> Get involved</h2> + +<ul> + <li>Mailing list (<a class="external text" href="https://lists.mozilla.org/listinfo/dev-fxos" rel="nofollow">dev-fxos</a>)</li> + <li><a class="external text" href="https://wiki.mozilla.org/IRC" rel="nofollow">IRC</a> (irc.mozilla.org Channel: #b2g)</li> + <li><a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse </a></li> + <li><a class="external text" href="https://telegram.me/B2GOS" rel="nofollow">Telegram Group</a></li> + <li>Follow us on <a href="https://twitter.com/Boot2Gecko">Twitter</a>, or just look for <a href="https://twitter.com/hashtag/B2GOS?src=hash">#B2GOS</a></li> + <li><a href="https://wiki.mozilla.org/B2G/Transition_Project/Working_Groups">Working Groups</a></li> + <li>Documentation issues tracker on <a href="https://github.com/mozilla-b2g/B2GOS-community/issues">GitHub</a></li> + <li><a class="external text" href="https://wiki.mozilla.org/B2G/Meeting" rel="nofollow">B2G Weekly Meeting</a> for engineering status updates</li> +</ul> + +<p>To participate in meetings and community Working Groups meetings, register on this <a href="https://calendar.google.com/calendar/embed?src=mozilla.com_2d3638353137343333373332@resource.calendar.google.com">Calendar</a>. They are announced on <a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a>, where you can find information about how to attend & notes.</p> +</div> + +<div class="column-third"> +<h2 id="Compatible_devices">Compatible devices</h2> + +<ul> + <li><a href="https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082">Sony Xperia Z3C</a> (developer phone)</li> + <li><a href="https://discourse.mozilla-community.org/t/flame-builds/8548">Flame </a>(developer phone)</li> + <li><a href="https://discourse.mozilla-community.org/t/zte-open-c/8402">ZTE Open C</a></li> + <li><a href="https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1">Nexus 5</a></li> + <li>WileyFox Swift</li> + <li>Nexus 4 (WIP*)</li> + <li><a href="https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334">Fairphone 2 </a> (WIP*)</li> + <li><a href="https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361">Sony Xperia E3 </a> (WIP*)</li> + <li><a href="https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348">Sony Xperia Z1C</a> (WIP*)</li> + <li><a href="https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273">Xiaomi Redmi 1S</a> (WIP*)</li> +</ul> + +<p>For more information see this <a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">page</a>.<br> + Flash you device easily with <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS/B2G_installer_add-on">B2G installer</a>.<br> + Your device is not in the list ? Try <a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Mulet">Mulet </a>on desktop.</p> + +<p>*WIP = Work In Progress.</p> +</div> +</div> + +<div class="hidden"> +<h2 id="Subnav">Subnav</h2> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><strong><a href="/en-US/docs/Archive/B2G_OS">B2G OS</a></strong></li> + <li><strong><a href="/en-US/docs/Archive/B2G_OS/Firefox_OS_apps">Firefox OS apps</a></strong></li> + <li class="toggle"> + <details><summary><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS">Build and install</a></summary> + <ol> + <li><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Building">Building B2G OS</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/docs/Archive/B2G_OS/Porting_B2G_OS">Porting B2G OS</a></summary> + <ol> + <li><a href="/en-US/docs/Archive/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia">Developing Gaia</a></summary> + <ol> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li> + <li><a href="/en-US/docs/Archive/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li> + </ol> + </details> + </li> + <li><a href="/en-US/docs/Archive/B2G_OS/API">B2G OS APIs</a></li> +</ol> +</section> +</div> diff --git a/files/fi/archive/index.html b/files/fi/archive/index.html new file mode 100644 index 0000000000..4f4a70c023 --- /dev/null +++ b/files/fi/archive/index.html @@ -0,0 +1,21 @@ +--- +title: Archive of obsolete content +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/fi/demos/detail/index.html b/files/fi/demos/detail/index.html new file mode 100644 index 0000000000..1f9d7dfbe2 --- /dev/null +++ b/files/fi/demos/detail/index.html @@ -0,0 +1,5 @@ +--- +title: detail +slug: demos/detail +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/fi/demos/index.html b/files/fi/demos/index.html new file mode 100644 index 0000000000..c357e7ac63 --- /dev/null +++ b/files/fi/demos/index.html @@ -0,0 +1,5 @@ +--- +title: demos +slug: demos +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/fi/dom/index.html b/files/fi/dom/index.html new file mode 100644 index 0000000000..9475de14d5 --- /dev/null +++ b/files/fi/dom/index.html @@ -0,0 +1,90 @@ +--- +title: Document Object Model (DOM) +slug: DOM +tags: + - DOM + - NeedsTranslation + - References + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +<div class="geckoVersionNote"> + <div class="callout-box"> + <strong><a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="en-US/docs/Using_the_W3C_DOM_Level_1_Core">Using the W3C DOM Level 1 Core</a></strong><br> + Introduction to the W3C DOM.</div> +</div> +<div> + <p><span class="seoSummary">The <strong>Document Object Model</strong> (<strong>DOM</strong>) is an API for <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as <a href="/en-US/docs/JavaScript" title="https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a>.</span></p> +</div> +<div class="cleared topicpage-table row"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the DOM</h2> + <dl> + <dt> + <a href="/en-US/docs/Gecko_DOM_Reference" title="en-US/docs/Gecko_DOM_Reference">Gecko DOM Reference</a></dt> + <dd> + The Gecko Document Object Model Reference.</dd> + <dt> + <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="en-US/docs/About_the_Document_Object_Model">About the Document Object Model</a></dt> + <dd> + A short introduction to the DOM.</dd> + <dt> + <a href="/en-US/docs/JavaScript_technologies_overview" title="en-US/docs/The_DOM_and_JavaScript">The DOM and JavaScript</a></dt> + <dd> + What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.</dd> + <dt> + <a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="en-US/docs/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt> + <dd> + How to obtain information on and manipulate styling via the DOM.</dd> + <dt> + <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM event reference">DOM event reference</a></dt> + <dd> + Lists all the DOM events and their meanings.</dd> + <dt> + <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="en-US/docs/DOM/Manipulating_the_browser_history">History API: Manipulating the browser history</a></dt> + <dd> + Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.</dd> + <dt> + <a href="/en-US/docs/Using_files_from_web_applications" title="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">File API: Using files from web applications</a></dt> + <dd> + Describes the HTML5-introduced capability to select a local file and read data from it.</dd> + <dt> + <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="en-US/docs/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></dt> + <dd> + Explains how to detect and use information about a web page being in the foreground or in the background.</dd> + <dt> + <a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Fullscreen API: Using the fullscreen mode</a></dt> + <dd> + Describes how to set up a page that use the whole screen, without any browser UI around it.</dd> + <dt> + <a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></dt> + <dd> + How to figure out the right way to determine the dimensions of elements, given your needs.</dd> + <dt> + <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface" title="en-US/docs/Dynamically_modifying_XUL-based_user_interface">Dynamically modifying XUL-based user interface</a></dt> + <dd> + The basics of manipulating the XUL UI with DOM methods.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/DOM" title="/en-US/docs/tag/DOM">View All...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>You need help on a DOM-related problem and can't find the solution in the documentation?</p> + <ul> + <li>Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li> + </ul> + <h2 class="Tools" id="Tools" name="Tools">Tools easing working with the DOM</h2> + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> + <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/DOM:Tools" title="/en-US/docs/tag/DOM:Tools">View All...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + </div> +</div> +<p> </p> diff --git a/files/fi/dom/navigator.donottrack/index.html b/files/fi/dom/navigator.donottrack/index.html new file mode 100644 index 0000000000..c331048a10 --- /dev/null +++ b/files/fi/dom/navigator.donottrack/index.html @@ -0,0 +1,73 @@ +--- +title: navigator.doNotTrack +slug: DOM/navigator.doNotTrack +translation_of: Web/API/Navigator/doNotTrack +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa käyttäjän do-not-track -asetuksen. Tämä on "yes", jos käyttäjä on pyytänyt, että hänen vierailemiaan webbisivuja, sisältöä tai mainoksia ei seurata.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><em>dnt</em> = <em>navigator</em>.doNotTrack; +</pre> +<p>Huomaa, että <strong><code>navigator.doNotTrack</code> ei ole do-not-track -otsakkeessa lähetettävä arvo</strong>. Kun the do-not-track otsake lähettää "1", <code>navigator.doNotTrack</code> on "yes". Kun otsaketta ei ole asetettu, <code>navigator.doNotTrack</code> on "unspecified". Kun otsake lähettää "0" (ei tueta nykyisin Firefoxissa), <code>navigator.doNotTrack</code> on "no".</p> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre class="eval">dump(window.navigator.doNotTrack); +// tulostaa "yes" jos DNT ei ole käytössä; muussa tapauksessa tämä on "unspecified" Firefoxissa +</pre> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p><a class="external" href="http://www.w3.org/TR/tracking-dnt/" title="http://www.w3.org/TR/tracking-dnt/">Tracking Preference Expression</a> (Working Draft) perustuu tämän spesifikaation aikaisempaan versioon josssa <code>navigator.doNotTrack</code> <strong>on</strong> do-not-track -otsakkeessa lähetettävä arvo.</p> +<h3 id="Katso_myös">Katso myös</h3> +<ul> + <li><a href="/en/The_Do_Not_Track_Field_Guide" title="https://developer.mozilla.org/en/The_Do_Not_Track_Field_Guide">The Do Not Track field guide</a></li> +</ul> +<h3 id="Selainyhteensopivuus">Selainyhteensopivuus</h3> +<p>{{CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th><strong>Feature</strong></th> + <th><strong>Chrome</strong></th> + <th><strong>Firefox (Gecko)</strong></th> + <th><strong>Internet Explorer</strong></th> + <th><strong>Opera</strong></th> + <th><strong>Safari</strong></th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>9</td> + <td>12</td> + <td>5.1 käyttöjärjestelmässä OS X 10.7</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th><strong>Feature</strong></th> + <th><strong>Android</strong></th> + <th><strong>Firefox Mobile (Gecko)</strong></th> + <th><strong>IE Mobile</strong></th> + <th><strong>Opera Mobile</strong></th> + <th><strong>Safari Mobile</strong></th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<ul> + <li>IE9 käyttää toimittajaetuliitettä, toisin sanoen, navigator.msDoNotTrack</li> + <li>IE9, Opera 12, ja Safari 5.1 perustuvat tämän spesifikaation aikaisempaan versioon jossa <code>navigator.doNotTrack</code> <strong>on</strong> do-not-track-otsakkeessa lähetettävä arvo.</li> +</ul> +<p><strong>{{ languages( { "zh-cn": "zh-cn/DOM/navigator.doNotTrack" } ) }}</strong></p> diff --git a/files/fi/dom/navigator.id/index.html b/files/fi/dom/navigator.id/index.html new file mode 100644 index 0000000000..98287f72cb --- /dev/null +++ b/files/fi/dom/navigator.id/index.html @@ -0,0 +1,43 @@ +--- +title: navigator.id +slug: DOM/navigator.id +translation_of: Archive/Navigator-id +--- +<div> + {{ ApiRef() }} {{ non-standard_header() }}</div> +<div class="note"> + <strong>Huomaa:</strong> Tukea tälle toiminnallisuudelle ei ole vielä rakennettu yhteenkään selaimeen. Personaa käyttävien webbisivustojen on sisällytettävä omille sivustoilleen polyfill-kirjasto, jota ylläpidetään osoitteessa <a class="link-https" href="https://login.persona.org/include.js" title="https://login.persona.org/include.js">https://login.persona.org/include.js</a>.</div> +<h2 id="Summary" name="Summary">Yhteenveto</h2> +<p><a href="/en-US/docs/Persona" title="BrowserID">BrowserID-yhteyskäytäntö</a> määrittää uuden <code>id</code>-ominaisuuden {{ domxref ("window.navigator")}}-objektiin, jonka kautta se paljastaa BrowserID-sovellusohjelmointirajapinnan (API). Tämä API on läpikäynnyt useita merkittäviä korjausversioita. Jokainen sukupolvi on lueteltu erikseen alla.</p> +<h2 id="ObserverMethods" name="ObserverMethods">"Observer" API (nykyinen)</h2> +<p>Observer API esittelee paljon pyydettyjä ominaisuuksia, kuten parannetun jälkitodennuskokemuksen ensikertalaiskäyttäjille, automaattiset pysyväiskirjautumiset ja helpomman integroinnin kotoperäisiin sovelluksiin.</p> +<dl> + <dt> + {{ domxref("navigator.id.watch()")}}</dt> + <dd> + Rekisteröi kutsuttavan callback-funktion, kun käyttäjä kirjautuu sisään tai ulos webbisivustosta.</dd> + <dt> + {{ domxref("navigator.id.request()")}}</dt> + <dd> + Pyytää allekirjoitetun tunnistusvakuutuksen käyttäjältä.</dd> + <dt> + {{ domxref("navigator.id.logout()")}}</dt> + <dd> + Sulkee käyttäjän pois webbisivulta ja estää <code>onlogin</code>-toiminnon automaattisesta käynnistymisestä heidän seuraavalla vierailullaan.</dd> +</dl> +<h2 id="CallbackMethods" name="CallbackMethods">Callback" API (nykyinen)</h2> +<p>Callback API esiteltiin marraskuussa 2011. Se paransi sovellusohjelmointirajapinnan (API) alustusta sallimalla valitsimien välittämisen kohteelle <code>navigator.id.get()</code> ja tarjoamalla kokeellisen tuen BrowserID-hallituille pysyville istunnoille.</p> +<dl> + <dt> + {{ domxref("navigator.id.get()")}}</dt> + <dd> + Hakee käyttäjän BrowserID:n allekirjoitetussa vakuutuksessa.</dd> +</dl> +<h2 id="VerifiedEmailMethods" name="VerifiedEmailMethods">"VerifiedEmail" API (vanhentunut)</h2> +<p>VerifiedEmail API oli BrowserID:n ensimmäinen sovellusohjelmointirajapinta (API). Se vanheni vuoden 2011 lopussa.</p> +<dl> + <dt> + {{ domxref("navigator.id.getVerifiedEmail()")}} {{ deprecated_inline() }}</dt> + <dd> + Hakee käyttäjän BrowserID:n allekirjoitetussa vakuutuksessa. Tämä metodi on vanhentunut; {{ domxref("navigator.id.get()")}} on taaksepäin yhteensopiva ja sitä voidaan käyttää sen sijasta.</dd> +</dl> diff --git a/files/fi/dom/navigator.mozsocial/index.html b/files/fi/dom/navigator.mozsocial/index.html new file mode 100644 index 0000000000..069119ac3d --- /dev/null +++ b/files/fi/dom/navigator.mozsocial/index.html @@ -0,0 +1,45 @@ +--- +title: navigator.mozSocial +slug: DOM/navigator.mozSocial +translation_of: Archive/mozSocial +--- +<div> + {{Apiref}}{{non-standard_header}}{{fx_minversion_header("17.0")}}</div> +<p>Ominaisuuden <code>navigator.mozSocial</code> property palauttama <code>MozSocial</code> -objekti on käytettävissä sosiaalisen median tarjoajien paneelin sisällä ja tarjoaa toiminnallisuutta, jota se ehkä voi tarvita.</p> +<div class="note"> + <p><strong>Huomaa:</strong> Vaikka Mozilla toivoo lähetävänstä tämän API:n standardisoitavaksi, se ei ole vielä tehnyt sitä.</p> +</div> +<h2 id="Attributes" name="Attributes">Attribuutit</h2> +<dl> + <dt> + {{domxref("MozSocial.isVisible")}}</dt> + <dd> + Palauttaa Boolean-arvon; tulos on <code>true</code>, jos sisältö on näkyvä, muutoin se on <code>false</code>.</dd> +</dl> +<h2 id="Methods" name="Methods">Metodit</h2> +<dl> + <dt> + {{domxref("MozSocial.closePanel()")}}</dt> + <dd> + Sulkee parhaillaan auki olevan flyout-paneelin.</dd> + <dt> + {{domxref("MozSocial.getAttention()")}}</dt> + <dd> + Suorittaa joitakin toimintoja, jotka suunniteltiin saamaan käyttäjän huomio; tarkka käyttäytyminen voi vaihdella alustalta alustalle. Tämä saattaa näyttää visuaalisen tehosteen, soittaa ääni-ilmoituksen, vilkuttaa näyttöä tai käyttää jotain muuta tekniikkaa.</dd> + <dt> + {{domxref("MozSocial.getWorker()")}}</dt> + <dd> + Palauttaa viitteen palvelutekijälle; kun sisälöllä on tämä viite, se voi kutsua sen <code>postMessage()</code>-metodia ja viestiä palvelun kanssa.</dd> + <dt> + {{domxref("MozSocial.openChatWindow()")}}</dt> + <dd> + Avaa jutteluikkunan, joka on ankkuroitu selainikkunan pohjalle. Jokainen selainikkuna otaksutaan olevan yksittäistä juttelua varten, mutta toiminnallisuus saattaa vaihdella tarjoajasta riippuen.</dd> + <dt> + {{domxref("MozSocial.openPanel()")}}</dt> + <dd> + Avaa sivupalkkiin tiettyyn pystysiirrososoitteeseen kiinnitetyn flyout-paneelin. Tämä saattaa olla esimerkiksi sivupalin ilmoituksessa viitattu todellinen keskustelu.</dd> +</dl> +<h2 id="See_also" name="See_also">Katso myös</h2> +<ul> + <li><a href="/en-US/docs/Social_API" title="Social_API">Social API</a></li> +</ul> diff --git a/files/fi/dom/smsmanager/index.html b/files/fi/dom/smsmanager/index.html new file mode 100644 index 0000000000..8738d33711 --- /dev/null +++ b/files/fi/dom/smsmanager/index.html @@ -0,0 +1,88 @@ +--- +title: SmsManager +slug: DOM/SmsManager +translation_of: Archive/B2G_OS/API/MozSmsManager +--- +<p>{{ ApiRef() }}</p> +<p>{{ non-standard_header() }}</p> +<p>Tarjoaa tuen lähettää ja hallinnoida SMS-viestejä laitteella, jossa on WebSMS. Nykyisin toteutettu objektina <code>MozSmsManager</code>.</p> +<h2 id="Metodit">Metodit</h2> +<dl> + <dt> + <code>delete(jsval param)</code></dt> + <dd> + Poistaa viestin ja palauttaa {{ domxref("SmsRequest") }} -objektin (jossa <code>SmsRequest.result</code> on Boolean-arvo, joka kertoo, onko viesti poistettu). Viestitunnistetta tai {{ domxref("SmsMessage") }} -objektia voidaan käyttää parametrina.</dd> + <dt> + <code>getMessage(long id)</code></dt> + <dd> + Hakee <code>id</code>-tunnisteella määritellyn viestin ja palauttaa {{ domxref("SmsRequest") }} -objektin, jossa <code>SmsRequest.result</code> on {{ domxref("SmsMessage") }}.</dd> + <dt> + <code>getMessages(SmsFilter filter, boolean reverse)</code></dt> + <dd> + Hakee viestit, jotka on määritelty käyttäen {{ domxref("SmsFilter") }} -objektia. Järjestys voidaan kääntää päinvastaiseksi käyttämällä boolean-muuttujaa toisena parametrina. Palautetaan {{ domxref("SmsRequest") }} -objekti, jossa <code>SmsRequest.result</code> on {{ domxref("SmsCursor") }}.</dd> + <dt> + <code>getNumberOfMessagesForText(DOMString text)</code></dt> + <dd> + Palauttaa tietyn moniosaisen SMS-viestien lukumäärän (160-merkkiä yksittäinen SMS-viesti).</dd> + <dt> + <code>markMessageRead(long id, boolean aValue)</code></dt> + <dd> + Merkitsee määritellyllä <code>id</code>-tunnisteella varustetun viestin luetuksi tai lukemattomaksi riippuen <code>aValue</code>-boolean-arvosta. Palautetaan {{ domxref("SmsRequest") }} -objekti.</dd> + <dt> + <code>send(DOMString[] number, DOMString message)</code></dt> + <dd> + Lähettää viestin määriteltyyn numeroon. Jos <code>number</code> on {{ domxref("DOMString") }} (vain yksi numero), palautetaan {{ domxref("SmsRequest") }} -objekti. Jos <code>number</code> on {{ domxref("DOMString", "DOMStrings") }} -taulukko (useita numeroita), palautetaan {{ domxref("SmsRequest") }} -objektien taulukko.</dd> +</dl> +<h2 id="Tapahtumat">Tapahtumat</h2> +<dl> + <dt> + <code>ondelivered</code></dt> + <dd> + Käsittelijä "delivered"-tapahtumalle; tämä {{ domxref("SMSEvent") }} aina kun SMS-viesti on toimitettu vastaanottajalle.</dd> + <dt> + <code>onreceived</code></dt> + <dd> + Käsittelijä "received"-tapatumalle; tämä {{ domxref("SMSEvent") }} lähetetään aina kun SMS-viesti vastaanotetaan.</dd> + <dt> + <code>onsent</code></dt> + <dd> + Käsittelijä "sent"-tapahtumalle; tämä {{ domxref("SMSEvent") }} lähetetään aina kun SMS-viesti lähetetään.</dd> +</dl> +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> +<p>Ilmeisestä syystä tukea odotetaan pääasiassa mobiiliselaimilta.</p> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("12.0") }} {{ property_prefix("moz") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>markMessageRead</code> method</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Spesifikaatio">Spesifikaatio</h2> +<p>Ei ole minkään spesifikaation osa; ehdotuksen otaksutaan kuitenkin perustuvatn asiakirjaan <a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebSMS" title="https://wiki.mozilla.org/WebAPI/WebSMS">WebSMS design document</a>.</p> +<h3 id="Katso_myös">Katso myös</h3> +<ul> + <li>{{ domxref("window.navigator.mozSms") }}</li> +</ul> diff --git a/files/fi/dom/window.navigator.appcodename/index.html b/files/fi/dom/window.navigator.appcodename/index.html new file mode 100644 index 0000000000..23c36d88b1 --- /dev/null +++ b/files/fi/dom/window.navigator.appcodename/index.html @@ -0,0 +1,23 @@ +--- +title: window.navigator.appCodeName +slug: DOM/window.navigator.appCodeName +translation_of: Web/API/NavigatorID/appCodeName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa nykyisen selaimen sisäisen "code"-nimen.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval">codeName = window.navigator.appCodeName +</pre> +<h3 id="Parameters" name="Parameters">Parametrit</h3> +<ul> + <li><code>codeName</code> on selaimen sisäinen nimi merkkijonona.</li> +</ul> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre>dump(window.navigator.appCodeName); +</pre> +<h3 id="Notes" name="Notes">Kommentit</h3> +<p>Mozilla, Netscape 6, jad IE5 kaikki käyttävät sisäistä nimeä "Mozilla."</p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>DOM Level 0. Ei ole spesifikaation osa.</p> +<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.navigator.appCodeName","ja": "ja/DOM/window.navigator.appCodeName", "pl": "pl/DOM/window.navigator.appCodeName" } ) }}</p> diff --git a/files/fi/dom/window.navigator.appname/index.html b/files/fi/dom/window.navigator.appname/index.html new file mode 100644 index 0000000000..c7c263d226 --- /dev/null +++ b/files/fi/dom/window.navigator.appname/index.html @@ -0,0 +1,27 @@ +--- +title: window.navigator.appName +slug: DOM/window.navigator.appName +translation_of: Web/API/NavigatorID/appName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa selaimen nimen. HTML5-spesifikaatio sallii kaikkien selainten myös palauttaa tässä "Netscape" yhteensopivuussyistä.</p> +<div class="note"> + <strong>Huomaa:</strong> Älä nojaa tähän ominaisuuteen oikean selainnimen palauttamiseksi. Gecko-perustaisissa selaimissa (kuten Firefox) ja WebKit-perustaisissa selaimissa (kuten Chrome ja Safari) palautettu arvo on "Netscape".</div> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval">appName = window.navigator.appName +</pre> +<h3 id="Parameters" name="Parameters">Palautettu arvo</h3> +<ul> + <li><code>appName</code> on selaimen nimi merkkijonona.</li> +</ul> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre class="brush: js">alert(window.navigator.appName); +// shows the name of the browser +</pre> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: Järjestelmätila ja kykeneväisyydet: Navigator-objekti</a></li> +</ul> +<p>Tämä oli alunperin osa DOM-tasoa 0, mutta on sen jälkeen sisällytetty HTML5-spesifikaatioon.</p> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.appName", "pl": "pl/DOM/window.navigator.appName", "zh-cn": "zh-cn/DOM/window.navigator.appName" } ) }}</p> diff --git a/files/fi/dom/window.navigator.appversion/index.html b/files/fi/dom/window.navigator.appversion/index.html new file mode 100644 index 0000000000..f4a0377ec2 --- /dev/null +++ b/files/fi/dom/window.navigator.appversion/index.html @@ -0,0 +1,32 @@ +--- +title: window.navigator.appVersion +slug: DOM/window.navigator.appVersion +translation_of: Web/API/NavigatorID/appVersion +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Yhteenveto</span></div> +<p>Palauttaa selaimen version merkkijonona. Se voi olla joko pelkkä versionumero, kuten "5.0", tai versionumero, jota seuraa yksityiskohtaisempia tietoja. HTML5-spesifikaatio sallii myös kaikkien selainten palauttaa tässä "4.0" yhteensopivuussyistä.</p> +<div class="note"> + <strong>Huomaa:</strong> Älä nojaa tähän ominaisuuteen oikean selainversion palauttamiseksi. Gecko-perustaisissa selaimissa (kuten Firefox) ja WebKit-perustaisissa selaimissa (kuten Chrome ja Safari) palautettu arvo alkaa merkkiyhdistelmällä "5.0", jota seuraa alustatiedot. Opera 10 ja uudemmissa selaimissa palautettu versio ei myöskään täsmää oikeaan selainversioon.</div> +<h2 id="Syntax" name="Syntax">Syntaksi</h2> +<pre class="syntaxbox">window.navigator.appVersion +</pre> +<h3 id="Returned_value" name="Returned_value">Palautettu arvo</h3> +<ul> + <li><code>ver</code> selaimen versionumero merkkijonona.</li> +</ul> +<h2 id="Example" name="Example">Esimerkki</h2> +<pre class="brush: js">alert("Your browser version is reported as " + navigator.appVersion); +</pre> +<h2 id="Notes" name="Notes">Kommentit</h2> +<p>Ominaisuus <code>window.navigator.userAgent</code> voi myös ehkä sisältää versionumeron (esimerkki: "<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>"), mutta sinun tulisi olla tietoinen, kuinka helposti user agent -merkkijonoa voi muuttaa ja "huijata" muita selaimia, alustoja tai user agent -ohjelmia ja kuinka kavereita toimittajat itse ovat näiden ominaisuuksien kanssa.</p> +<p>Ominaisuuksia <code>window.navigator.appVersion</code>, <code>window.navigator.appName</code> ja <code>window.navigator.userAgent</code> on käytetty "selainnuuhkimis"-koodissa: skripteissä, jotka yrittävät havaita, minkälaista selainta käytät ja säätävät sivut sen mukaiseksi. Tämä johti nykyiseen tilanteeseen, joissa selainten on palautettava vääriä arvoja näissä ominaisuuksissa, jotta niitä ei voitaisi lukita ulos joiltakin webbisivustoilta.</p> +<h2 id="Specification" name="Specification">Spesifikaatio</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: Järjestelmätila ja kykeneväisyydet: Navigator-objekti</a></li> +</ul> +<p>Tämä oli alunperin osa DOM-taso 0:aa, mutta on sittemmin sisällytettty HTML5-spesifikaatioon.</p> diff --git a/files/fi/dom/window.navigator.battery/index.html b/files/fi/dom/window.navigator.battery/index.html new file mode 100644 index 0000000000..4a04e78520 --- /dev/null +++ b/files/fi/dom/window.navigator.battery/index.html @@ -0,0 +1,137 @@ +--- +title: window.navigator.battery +slug: DOM/window.navigator.battery +translation_of: Web/API/Navigator/battery +--- +<p>{{ ApiRef() }}</p> +<p><strong>Battery Status API</strong>, useimmiten lyhennettynä <em>Battery API</em>, tarjoaa tietoa järjestelmän akun lataustasosta ja sallii sinulle ilmoitettavan muutaman akkutasomuutostapahtuman kautta. Tätä voitaisiin käyttää lataamaan vähemmän suoritinintensiiviset tehtävät sivustollasi, jos akkuvirta on vähissä ja tallentaa muutokset ennen akkuvirran loppumista, jotta estetään tietojen häviäminen.</p> +<p>Battery Status API laajentaa {{domxref("window.navigator")}}-objektin metodilla <code>battery</code>. Se määrittää myös muutamia uusia tapahtumia.</p> +<h2 id="Attribuutit">Attribuutit</h2> +<dl> + <dt> + <code>charging</code></dt> + <dd> + <strong>Kirjoitussuojattu</strong>. Boolean-arvo edustaa järjestelmän akun lataustilaa. Palauttaa arvon <code>true</code>, jos akkua ladataan, jos järjestelmän akun tila ei ole määriteltävissä, tai jos akkua ei ole liitetty järjestelmään. Palauttaa arvon <code>false</code>, jos akkua puretaan.</dd> + <dt> + <code>chargingTime</code></dt> + <dd> + <strong>Kirjoitussuojattu</strong>. Double-arvo edustaa jäljellä olevaa sekuntimäärää siihen kun järjestelmän akku ladattu täyteen. Palauttaa arvon 0, jos akku on ladattu täyteen.<br> + Palauttaa positiivisen äärettämän arvon, jos akkua puretaan tai jos toteutus ei kykene ilmoittamaan jäljellä olevaa latausaikaa.</dd> + <dt> + <code>dischargingTime</code></dt> + <dd> + <strong>Kirjoitussuojattu</strong>. Double-arvo edustaa jäljellä olevaa sekuntimäärää siihen kun järjestelmän akku on täysin purettu ja järjestelmä keskeytetään. Palauttaa positiivisen äärettömän arvon, jos akkua ladataan, jos toteutus ei kykene ilmoittamaan purkamisaikaa, tai jos järjestelmään ei ole liitetty akkua.</dd> + <dt> + <code>level</code></dt> + <dd> + <strong>Kirjoitussuojattu</strong>. Double-arvo edustaa järjestelmän akun lataustasoa skaalalla 0 ... 1.0. Palauttaa arvon 0, jos akku on tyhjä ja järjestelmä on siirtymässä keskeytystilaan. Palauttaa arvon 1.0, jos akku on täynnä, jos toteutus ei kykene ilmoittamaan akun tasoa, tai jos akkua ei ole liitetty järjestelmään.</dd> +</dl> +<h2 id="Tapahtumat">Tapahtumat</h2> +<dl> + <dt> + <code>chargingchange</code></dt> + <dd> + Laukeaa, kun akun lataustilaa päivitetään.</dd> + <dt> + <code>chargingtimechange</code></dt> + <dd> + Laukeaa, kun akun latausaikaa päivitetään.</dd> + <dt> + <code>dischargingtimechange</code></dt> + <dd> + Laukeaa, kun akun purkausaikaa päivitetään.</dd> + <dt> + <code>levelchange</code></dt> + <dd> + Laukeaa, kun akun tasoa päivitetään.</dd> +</dl> +<h2 id="Esimerkki">Esimerkki</h2> +<p>Katso myös <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">esimerkkiä spesifikaatiossa</a>.</p> +<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; + +function updateBatteryStatus() { + alert("Battery status: " + battery.level * 100 + " %"); + + if (battery.charging) { + alert("Battery is charging"); + } +} + +battery.addEventListener("chargingchange", updateBatteryStatus); +battery.addEventListener("levelchange", updateBatteryStatus); +updateBatteryStatus(); +</pre> +<h2 id="Spesifikaatiot">Spesifikaatiot</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikaatio</th> + <th scope="col">Tila</th> + <th scope="col">Kommentti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Battery API')}}</td> + <td>{{Spec2('Battery API')}}</td> + <td>Alustava spesifikaatio.</td> + </tr> + </tbody> +</table> +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Perustuki</td> + <td>20 {{ property_prefix("webkit") }}</td> + <td>{{CompatGeckoDesktop("10")}} {{ property_prefix("moz") }} [1]<br> + {{CompatGeckoDesktop("16")}} (without prefix) [2]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>20 {{ property_prefix("webkit") }}</td> + <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} [1]<br> + {{CompatGeckoMobile("16")}} (without prefix) [2]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko-kommentit">Gecko-kommentit</h3> +<p>[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference <code>dom.battery.enabled</code> to <code>true</code>. Starting with Firefox 11.0, <code>mozBattery</code> is enabled by default.</p> +<p class="note">[2] The Battery API is currently supported on Android, Windows, and Linux with UPower installed. Support for MacOS is available starting with Gecko 18.0 {{geckoRelease("18.0")}}.</p> +<h2 id="Katso_myös">Katso myös</h2> +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Blog post - Using the Battery API</a></li> + <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh on the JavaScript Battery Api</a></li> + <li><a href="https://github.com/pstadler/battery.js" title="https://github.com/pstadler/battery.js">battery.js - a tiny cross-browser wrapper</a></li> +</ul> diff --git a/files/fi/dom/window.navigator.buildid/index.html b/files/fi/dom/window.navigator.buildid/index.html new file mode 100644 index 0000000000..a7bdf2efba --- /dev/null +++ b/files/fi/dom/window.navigator.buildid/index.html @@ -0,0 +1,21 @@ +--- +title: window.navigator.buildID +slug: DOM/window.navigator.buildID +translation_of: Web/API/Navigator/buildID +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa selaimen rakentamistunnisteen.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><em>buildID</em> = <em>navigator</em>.buildID; +</pre> +<p><code>buildID</code> on sovelluksen rakentamistunniste merkkijonona. Tämä rakentamistunniste on muotoa <code>YYYYMMDDHH</code>.</p> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre class="eval">dump(window.navigator.buildID); +// prints "2006090803" to the console +</pre> +<h3 id="Note" name="Note">Huomaa</h3> +<p>Käytettävissä selaimessa <a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a> (<a href="/en/Gecko" title="en/Gecko">Gecko</a> 1.8.1) ja uudemmissa. Toteutettu kohteessa {{ Bug(345993) }}.</p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>Ei kuulu mihinkään standardiin.</p> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.buildID", "zh-cn": "zh-cn/DOM/window.navigator.buildID", "pl": "pl/DOM/window.navigator.buildID" } ) }}</p> diff --git a/files/fi/dom/window.navigator.connection/index.html b/files/fi/dom/window.navigator.connection/index.html new file mode 100644 index 0000000000..da01bbcdc7 --- /dev/null +++ b/files/fi/dom/window.navigator.connection/index.html @@ -0,0 +1,100 @@ +--- +title: window.navigator.connection +slug: DOM/window.navigator.connection +translation_of: Web/API/Navigator/connection +--- +<p>{{ Apiref() }}</p> +<p>{{ SeeCompatTable() }}</p> +<p>Network Information API tarjoaa tietoa järjestelmän verkkoyhteydestä, kuten käyttäjän laitteen nykyisestä kaistanleveydestä tai onko yhteys mitattu. Tätä voitaisiin käyttää valitsemaan HD-sisältö tai LD-sisältö käyttäjän yhteyteen perustuen.</p> +<h2 id="Attribuutit">Attribuutit</h2> +<dl> + <dt> + <code>bandwidth</code></dt> + <dd> + <strong>Kirjoitussuojattu</strong>. Double-arvo edustaa arvioitua nykyisen yhteyden latauskaistanleveyttä (arvona MB/s). <code>0</code> jos käyttäjä ei ole parhaillaan verkkoyhteydessä ja <code>infinity</code> jos kaistanleveys on tuntematon.</dd> + <dt> + <code>metered</code></dt> + <dd> + <strong>Kirjoitussuojattu</strong>. <code><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code>-arvo palauttaen <code>true</code>, jos yhteys on mitattu (esim.: pay-per-use).</dd> +</dl> +<h2 id="Tapahtumat">Tapahtumat</h2> +<dl> + <dt> + <code>onchange</code></dt> + <dd> + Laukeaa, kun yhteys muuttuu.</dd> +</dl> +<h2 id="Esimerkki">Esimerkki</h2> +<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; + +function updateConnectionStatus() { + alert("Connection bandwidth: " + connection.bandwidth + " MB/s"); + if (connection.metered) { + alert("The connection is metered!"); + } +} + +connection.addEventListener("change", updateConnectionStatus); +updateConnectionStatus(); +</pre> +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Perustuki</td> + <td>20? {{ property_prefix("webkit") }}</td> + <td>12.0 {{ property_prefix("moz") }} (katso kommentit)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatNo() }}</td> + <td>12.0 {{ property_prefix("moz") }} (katso kommentit)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko-kommentit">Gecko-kommentit</h3> +<ul> + <li>Network API voidaan ottaa pois käytöstä käyttäen <code>dom.network.enabled</code>-asetusta.</li> + <li>Attribuutti <code>metered</code> on oletusarvoisesti <code>false</code> ja voidaan asettaa käyttäen asetusta <code>dom.network.metered</code> (katso {{ bug("716943") }} <span id="summary_alias_container"><span id="short_desc_nonedit_display">yhteyden merkitseminen mitatuksi verkkovierailuilla</span></span>).</li> + <li>Gecko 12.0 -versiosta alkaen Network API toteutettiin vain Android-järjestelmissä. Tuki Linux- ({{ bug("712442") }}) ja Windows- ({{ bug("721306") }}) järjestelmille on kehitteillä.</li> + <li>Ennen Gecko 14.0 -versiota <code>navigator.mozConnection</code> ei ollut EventTarget-ilmentymä ja funktiota <code>addEventListener</code> ei voitu kutsua. Tämä on korjattu ({{ bug("735261") }}).</li> +</ul> +<h2 id="Spesifikaatio">Spesifikaatio</h2> +<ul> + <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li> +</ul> +<h2 id="Katso_myös">Katso myös</h2> +<ul> + <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Verkko- ja erillissovellustapahtumat</a></li> +</ul> diff --git a/files/fi/dom/window.navigator.cookieenabled/index.html b/files/fi/dom/window.navigator.cookieenabled/index.html new file mode 100644 index 0000000000..46a49e6eae --- /dev/null +++ b/files/fi/dom/window.navigator.cookieenabled/index.html @@ -0,0 +1,99 @@ +--- +title: Navigator.cookieEnabled +slug: DOM/window.navigator.cookieEnabled +tags: + - API + - DOM + - Ominaisuus +translation_of: Web/API/Navigator/cookieEnabled +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<p>Palauttaa totuusarvon, joka osoittaa, ovatko evästeet käytössä vai eivät.</p> + +<h2 id="Syntaksi">Syntaksi</h2> + +<pre class="eval">var cookieEnabled = navigator.cookieEnabled; +</pre> + +<ul> + <li><code>cookieEnabled</code> on totuusarvo, <code>true</code> tai <code>false</code>.</li> +</ul> + +<h2 id="Esimerkki">Esimerkki</h2> + +<pre class="brush: js">if (!navigator.cookieEnabled) { + // kerrotaan käyttäjälle, että evästeiden käyttöönotto tekee sivusta paljon hyödyllisemmän +} +</pre> + +<h2 id="Määrittelyt">Määrittelyt</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", "webappapis.html#dom-navigator-cookieenabled", "Navigator.cookieEnabled")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Alkuperäinen määrittely</td> + </tr> + </tbody> +</table> + +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(1.0) }}<sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Ennen Gecko 8.0:aa {{ geckoRelease("8.0") }}, <code>window.navigator.cookieEnabled</code> ilmoittaa väärän tuloksen, jos sivulle, jolle tarkistus suoritetaan, on asetettu sivustopoikkeus. Tämä on korjattu.</p> diff --git a/files/fi/dom/window.navigator.language/index.html b/files/fi/dom/window.navigator.language/index.html new file mode 100644 index 0000000000..7fde093ceb --- /dev/null +++ b/files/fi/dom/window.navigator.language/index.html @@ -0,0 +1,82 @@ +--- +title: window.navigator.language +slug: DOM/window.navigator.language +translation_of: Web/API/NavigatorLanguage/language +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa selaimen kieliversiota edustavan merkkijonon.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><em>lang</em> = window.navigator.language +</pre> +<h3 id="Parameters" name="Parameters">Parametrit</h3> +<ul> + <li>kieliversiota edustava <code>lang</code>-merkkijono on määritelty dokumentissa <a class="external" href="http://tools.ietf.org/html/rfc4646" title="http://tools.ietf.org/html/rfc4646">RFC 4646</a>. Kelvollisen kielikoodin esimerkit sisältävät "en", "en-US", "fr", "es-ES", jne.</li> +</ul> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre class="brush: js">if ( window.navigator.language != "en" ) { + doLangSelect(window.navigator.language); +} +</pre> +<h3 id="Selainyhteensopivuus">Selainyhteensopivuus</h3> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Perustuki</td> + <td> + <p>{{ CompatVersionUnknown() }}</p> + <p>Selaimesta <a href="https://code.google.com/p/chromium/issues/detail?id=1862" title="https://code.google.com/p/chromium/issues/detail?id=1862">Chrome 0.3.154</a> alkaen tämä ominaisuus perustuu <code>Accept-Language</code> <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP header</a>-otsakkeen arvoon.</p> + </td> + <td> + <p>{{ CompatGeckoDesktop(1.0) }}</p> + <p>Ennen Gecko 2.0 {{ geckoRelease("2.0") }} -selainversiota tämän ominaisuuden arvo oli osa user agent -merkkijonoa, jonka {{ domxref("window.navigator.userAgent", "navigator.userAgent") }} ilmoitti.</p> + <p>Selaimesta Gecko 5.0 {{ geckoRelease("5.0") }} alkaen tämän ominaisuuden arvo perustuu <code>Accept-Language</code> <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP header</a>-otsakkeen arvoon.</p> + </td> + <td> + <p>{{ CompatNo() }}</p> + <p>Lähimmät käytettävissä olevat (ei-standardit) ominaisuudet ovat <a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a> ja <a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a>.</p> + </td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td> + <p>{{ CompatNo() }}</p> + <p>Lähimmät käytettävissä olevat (ei-standardit) ominaisuudet ovat <a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a> ja <a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a>.</p> + </td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>DOM Level 0. Ei ole spesifikaation osa.</p> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.language","zh-cn": "zh-cn/DOM/window.navigator.language", "pl": "pl/DOM/window.navigator.language", "fi": "fi/DOM/window.navigator.language" } ) }}</p> diff --git a/files/fi/dom/window.navigator.mimetypes/index.html b/files/fi/dom/window.navigator.mimetypes/index.html new file mode 100644 index 0000000000..52298d1eb1 --- /dev/null +++ b/files/fi/dom/window.navigator.mimetypes/index.html @@ -0,0 +1,22 @@ +--- +title: window.navigator.mimeTypes +slug: DOM/window.navigator.mimeTypes +translation_of: Web/API/NavigatorPlugins/mimeTypes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeTypeArray.html">MimeTypeArray</a></code>-objektin, joka sisältää <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeType.html">MimeType</a></code>-objektien luettelon, joka edustaa selaimen tunnistamia MIME-tyyppejä.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><i>mimeTypes</i> = navigator.mimeTypes; +</pre> +<p><code>mimeTypes</code> on <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeTypeArray.html">MimeTypeArray</a></code>-objekti, jolla on <code>length</code>-ominaisuus samoin kuin metodit <code>item(index)</code> ja <code>namedItem(name)</code>.</p> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre> alert(window.navigator.mimeTypes.item(0).description); // alerts "Mozilla Default Plug-in" +</pre> +<h3 id="Notes" name="Notes">Kommentit</h3> +<p>Nollanella elementillä mimeTypes-määrittelyssä ("Mozilla Default Plug-in" <code>MimeType</code> object) on <code>*</code>-ominaisuus <code>type</code> eikä tyypilinen MIME-muoto kuten <code>"image/x-macpaint"</code></p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.mimeTypes", "pl": "pl/DOM/window.navigator.mimeTypes" } ) }}</p> diff --git a/files/fi/dom/window.navigator.mozsms/index.html b/files/fi/dom/window.navigator.mozsms/index.html new file mode 100644 index 0000000000..131c90f2d2 --- /dev/null +++ b/files/fi/dom/window.navigator.mozsms/index.html @@ -0,0 +1,49 @@ +--- +title: window.navigator.mozSms +slug: DOM/window.navigator.mozSms +translation_of: Archive/B2G_OS/API/Navigator/mozSms +--- +<p>{{ ApiRef() }}</p> +<p>{{ non-standard_header() }}</p> +<h2 id="Summary" name="Summary">Yhteenveto</h2> +<p>Palauttaa {{ domxref("SmsManager") }} -objektin, jota voit käyttää SMS-viestien vastaanottamiseen ja lähettämiseen.</p> +<h2 id="Syntax" name="Syntax">Syntaksi</h2> +<pre class="eval">var sms = window.navigator.mozSms; +</pre> +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> +<p>Ilmeisistä syistä tuke otaksutaan pääasiassa mobiiliselaimissa.</p> +<table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("12.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +<p> </p> +<h2 id="Asetukset_saatavuus">Asetukset & saatavuus</h2> +<ul> + <li>WebSMS on oletuksena pois käytöstä ja voidaan ottaa käyttöön asettamalla asetuksen <code>dom.sms.enabled</code> arvoon true.</li> + <li>Asetuksen <code>dom.sms.whitelist</code> on määriteltävä pilkulla erotellun valkoisen listan sallituista tietokonenimistä, jotka saavat käyttää WebSMS Api:a. Tämä merkkijono on oletuksena tyhjä.</li> + <li>WebSMS on ainoa käytettävissä oleva sertifikoitu sovellus Firefox OS:ssä (B2G).</li> +</ul> +<h2 id="Specification" name="Specification">Spesifikaatio</h2> +<p>Ei ole minkään spesifikaation osa; On kuitenkin odotettu <a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebSMS" title="https://wiki.mozilla.org/WebAPI/WebSMS">WebSMS-suunnitteluasiakirjaan</a> perustuvaa ehdotusta.</p> +<h2 id="Katso_myös">Katso myös</h2> +<ul> + <li><a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">WebSMS API</a></li> + <li>{{ domxref("SmsManager") }}</li> + <li>{{ domxref("window.navigator.mozTelephony") }} puhelujen ohjaamiseen.</li> +</ul> diff --git a/files/fi/dom/window.navigator.online/index.html b/files/fi/dom/window.navigator.online/index.html new file mode 100644 index 0000000000..e3faca86f5 --- /dev/null +++ b/files/fi/dom/window.navigator.online/index.html @@ -0,0 +1,101 @@ +--- +title: window.navigator.onLine +slug: DOM/window.navigator.onLine +translation_of: Web/API/NavigatorOnLine/onLine +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">Yhteenveto</h2> +<p>Palauttaa selaimen verkkotilan. Ominaisuus palauttaa boolean-arvon, joka on <code>true</code>, kun verkkoyhteys on päällä ja <code>false</code>, kun selain toimii erillissovelluksena. Ominaisuus lähettää päivityksiä aina kun selaimen kyky yhdistyä verkkoon muuttuu. Päivitys tapahtuu, kun käyttäjä seuraa linkkiä tai kun skripti pyytää etäsivua. Esimerkiksi ominaisuuden pitäisi palauttaa <code>false</code>, kun käyttäjä napsauttaa linkkiä pian internet-yhteyden katkeamisen jälkeen.</p> +<p>Selaimet toteuttavat tätä ominaisuutta eri tavoin.</p> +<p>Chrome- ja Safari-selaimissa, jos selain ei kykene yhdistämään paikallisverkkoon (LAN) tai reitittimeen, se on erillissovellus; kaikki muut tilat palauttavat arvon <code>true</code>. Joten samalla kun voit otaksua, että selain on erillissovelluksena, kun sa palauttaa arvon <code>false</code>, et voi olettaa, että pääset internettiin, kun se palauttaa arvon true. Voisit saada vääriä positiivisia, sellaisissa tapauksissa, kun tietokone käyttää virtuaalisointiohjelmistoa, jolla on virtuaalisia ethernet-adaptereja, jotka ovat aina "yhdistettynä". Jos haluat todella määrittää selaimen verkkotilan, niin sinun olisi sikis kehitettävä muita keinoja tarkistamiseen. Lisäoppia varten katso HTML5 Rocks article, <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a>.</p> +<p>Firefox- ja Internet Explorer-selaimissa selaimen kytkeminen offline-tilaan lähettää arvon <code>false</code>. Kaikki muut tilat palauttavat arvon <code>true</code>.</p> +<p>Voit nähdä verkkotilan muutokset kuuntelemalla tapahtumia kohteissa <code>window.onOnline</code> ja <code>window.onOffline</code>.</p> +<h2 id="Syntax" name="Syntax">Syntaksi</h2> +<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine; +</pre> +<p><code>online</code> on boolean-arvo <code>true</code> tai <code>false</code>.</p> +<h2 id="Example" name="Example">Esimerkki</h2> +<p>Katso <a class="external" href="http://html5-demos.appspot.com/static/navigator.onLine.html"> live-esimerkki</a>.</p> +<p>Sen tarkistamiseksi, että oletko verkossa, kysele <code>window.navigator.onLine</code>, kuten seuraavassa esimerkissä:</p> +<pre class="brush: js">if (navigator.onLine) { + alert('online') +} else { + alert('offline'); +}</pre> +<p>Verkkotila-arvojen muutosten näkemiseksi kuuntele (käyttäen <code><a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code>) tapatumia kohteessa <code>window.onOnline</code> ja <code>window.onOffline</code>, kuten seuraavassa esimerkissä:</p> +<pre class="brush: js">window.addEventListener("offline", function(e) {alert("offline");}) + +window.addEventListener("online", function(e) {alert("online");}) +</pre> +<h2 id="Browser_compatibility" name="Browser_compatibility">Selainyhteensopivuus</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Chrome**</th> + <th>Firefox (Gecko)*</th> + <th>Internet Explorer</th> + <th>Opera*</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Perustuki</td> + <td> + <p>Windows: 11<br> + Mac: 14<br> + Chrome OS: 13<br> + Linux: Palauttaa aina arvon <code>true</code></p> + <p>Historiaa varten katso <a class="external" href="http://crbug.com/7469" title="http://crbug.com/7469">crbug.com/7469</a></p> + </td> + <td> + <p>{{CompatNo}}<br> + {{bug("336359")}}<br> + {{bug("426932")}}<br> + {{bug("620472")}}</p> + <p>{{bug("654579")}}</p> + </td> + <td>8***</td> + <td>{{CompatNo}}</td> + <td>5.0.4</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Ominaisuus</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Perustuki</td> + <td>Android 2.2 (Vika WebView-komponentissa, katso julkaisu <a class="external" href="http://code.google.com/p/android/issues/detail?id=16760">16760</a>)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>* Firefox 4, ja Opera 11.10 palauttaa arvon <code>true</code>, kun "Work Offline"-tila on pois käytöstä ja <code>false</code>, kun se on käytössä riippumatta todellisesta yhteydestä.</p> +<p>** Chrome-selaimen aiemmat versiot palattavat virheellisesti <code>true</code> kun selain ensin avataa, mutta se alkaa ilmoittaa oiken yhteysarvon ensimmäisen verkkotapahtuman jälkeen.</p> +<p>*** Selaimessa IE 8 "online"- ja "ofline"-tapahtumat nostettiin kohteessa document.body, selaimessa IE 9 - sekä kohteessa document.body että kohteessa window</p> +<h2 id="Notes" name="Notes">Kommentit</h2> +<p>Katso yksityiskohtaisempaa kuvausta tästä ominaisuudesta asiakirjasta <a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online/Offline Events</a> samoin kuin uusista offline-kohtaisista ominaisuuksista, jotka esiteltiin selaimessa Firefox 3.</p> +<h2 id="Specification" name="Specification">Spesifikaatio</h2> +<p>Kuvattu asiakirjassa <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#navigator.online">HTML 5 Working draft</a></p> +<h2 id="See_also" name="See_also">Katso myös</h2> +<ul> + <li><a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li> +</ul> diff --git a/files/fi/dom/window.navigator.oscpu/index.html b/files/fi/dom/window.navigator.oscpu/index.html new file mode 100644 index 0000000000..da15e79c7d --- /dev/null +++ b/files/fi/dom/window.navigator.oscpu/index.html @@ -0,0 +1,70 @@ +--- +title: window.navigator.oscpu +slug: DOM/window.navigator.oscpu +translation_of: Web/API/Navigator/oscpu +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaaa merkkijonon, joka identifioi nykyisen käyttäjärjestelmän.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><em>oscpuInfo</em> = window.navigator.oscpu +</pre> +<ul> + <li><code>oscpuInfo</code> on merkkijono, joka noudattaa seuraavaa muotoa:</li> +</ul> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Käyttöjärjestelmä</th> + <th><code>oscpuInfo</code>-merkkijonomuoto</th> + </tr> + <tr> + <td>OS/2</td> + <td>OS/2 Warp x (joko 3, 4 tai 4.5)</td> + </tr> + <tr> + <td>Windows CE</td> + <td>WindowsCE x.y<sup>1</sup></td> + </tr> + <tr> + <td>Windows 64-bit (64-bit build)</td> + <td>Windows NT x.y; Win64; x64</td> + </tr> + <tr> + <td>Windows 64-bit (32-bit build)</td> + <td>Windows NT x.y; WOW64</td> + </tr> + <tr> + <td>Windows 32-bit</td> + <td>Windows NT x.y</td> + </tr> + <tr> + <td>Mac OS X (PPC build)</td> + <td>PPC Mac OS X x.y</td> + </tr> + <tr> + <td>Mac OS X (i386/x64 build)</td> + <td>Intel Mac OS X x.y</td> + </tr> + <tr> + <td>Linux 64-bit (32-bit build)</td> + <td>Output of uname -s plus "i686 on x86_64"</td> + </tr> + <tr> + <td>Linux</td> + <td>Output of uname -sm</td> + </tr> + </tbody> +</table> +<p><sup>1</sup>x.y viittaa käyttöjärjestelmän versioon</p> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre class="brush: js">function osInfo() { + alert(window.navigator.oscpu); +} +// palauttaa esimerkiksi: "Windows NT 6.0" +</pre> +<h3 id="Notes" name="Notes">Kommentit</h3> +<p>Jollei koodi ole etuoikeutettu (chrome tai ainakin on UniversalBrowserRead-etuoikeus), se voi saada <code>general.oscpu.override</code>-asetusarvon eikä todellista alustaa.</p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.oscpu", "zh-cn": "zh-cn/DOM/window.navigator.oscpu", "pl": "pl/DOM/window.navigator.oscpu" } ) }}</p> diff --git a/files/fi/dom/window.navigator.platform/index.html b/files/fi/dom/window.navigator.platform/index.html new file mode 100644 index 0000000000..af2888a91f --- /dev/null +++ b/files/fi/dom/window.navigator.platform/index.html @@ -0,0 +1,22 @@ +--- +title: window.navigator.platform +slug: DOM/window.navigator.platform +translation_of: Web/API/NavigatorID/platform +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa selaimen alustaa edustavan merkkijonon.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><em>platform</em> = <em>navigator</em>.platform +</pre> +<p><code>platform</code> on merkkijono, joka on yksi seuraavista arvoista: "Win32", "Linux i686", "MacPPC", "MacIntel", tai jokin muu.</p> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre class="brush: js">alert(navigator.platform);</pre> +<h3 id="Notes" name="Notes">Kommentit</h3> +<p>Jollei koodisi ole etuoikeutettu (chrome tai vähintään UniversalBrowserRead-etuoikeus), se voi ehkä saada <code>general.platform.override</code>-asetusarvon eikä oikean alustan.</p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: System state and capabilities: the Navigator object</a></li> +</ul> +<p>Tämä oli alunperin osa DOM Level 0-määrittelyä, mutta on sittemmin sisällytetty HTML5-spesifikaatioon.</p> +<p>{{ languages( {"ja": "ja/DOM/window.navigator.platform", "zh-cn": "zh-cn/DOM/window.navigator.platform", "pl": "pl/DOM/window.navigator.platform" } ) }}</p> diff --git a/files/fi/dom/window.navigator.plugins/index.html b/files/fi/dom/window.navigator.plugins/index.html new file mode 100644 index 0000000000..993d145809 --- /dev/null +++ b/files/fi/dom/window.navigator.plugins/index.html @@ -0,0 +1,39 @@ +--- +title: window.navigator.plugins +slug: DOM/window.navigator.plugins +translation_of: Web/API/NavigatorPlugins/plugins +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa {{ domxref("PluginArray") }} -objektin, joka luettelee sovellukseen asennetut lisäosat.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><em>plugins</em> = navigator.plugins; +</pre> +<p><code>plugins</code> on <code>PluginArray</code>, sisältäen {{ domxref("Plugin") }} -objektit asennetuille lisäosille.</p> +<p>Palautettu arvo ei ole JavaScript-taulukko, vaan siinä on <code>length</code>-ominaisuus ja se tukee yksittäisten alkoiden lukemista käyttäen hakasulkuesitysmuotoa (<code>plugins{{ mediawiki.external(2) }}</code>), samoin kuin <code>item(<em>index</em>)</code>- ja <code>namedItem(<em>"name"</em>)</code>-metodien kautta.</p> +<h3 id="Example" name="Example">Esimerkki</h3> +<p>Seuraava esimerkki tulostaa tietoa asennetuista lisäosista ylemmän tason asiakirjaan. Huomaa Plugin-objektissa saatavilla olevat ominaisuudet: <code>name</code>, <code>filename</code>, <code>description</code>, ja <code>version</code>.</p> +<p>{{ gecko_minversion_note("1.9.2", "Ominaisuus <code>version</code> lisättiin selaimeen Gecko 1.9.2.") }}</p> +<pre><script type="text/javascript"> + var L = navigator.plugins.length; + document.write(L.toString().bold() + " Plugin(s)".bold()); + document.write("<br>"); + document.write("Name | Filename | description".bold()); + document.write("<br>"); + for(var i=0; i<L; i++) { + document.write(navigator.plugins[i].name); + document.write(" | "); + document.write(navigator.plugins[i].filename); + document.write(" | "); + document.write(navigator.plugins[i].description); + document.write(" | "); + document.write(navigator.plugins[i].version); + document.write("<br>"); + } +</script> +</pre> +<h3 id="Notes" name="Notes">Kommentit</h3> +<p>Objekti {{ domxref("Plugin") }} paljastaa pienen käyttöliittymän, josta saa tietoa selaimeesi asennetuista eri lisäosista. Lisäosien luettelo on saatavissa myös kirjoittamalla <code>about:plugins</code> selaimen sijaintipalkkiin.</p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.plugins","zh-cn": "zh-cn/DOM/window.navigator.plugins", "pl": "pl/DOM/window.navigator.plugins" } ) }}</p> diff --git a/files/fi/dom/window.navigator.product/index.html b/files/fi/dom/window.navigator.product/index.html new file mode 100644 index 0000000000..743d09ba0d --- /dev/null +++ b/files/fi/dom/window.navigator.product/index.html @@ -0,0 +1,36 @@ +--- +title: window.navigator.product +slug: DOM/window.navigator.product +translation_of: Web/API/NavigatorID/product +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Tämä ominaisuus palauttaa nykyisen selaimen tuotenimen.</p> +<div class="note"> + <strong>Huomaa:</strong> Älä nojaa tähän ominaisuuteen oikean tuotenimen palauttamiseksi. Sekä Gecko- että WebKit-selaimet palauttavat "Gecko" tämän ominaisuuden arvona.</div> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><i>productName</i> = window.navigator.product +</pre> +<h3 id="Parameters" name="Parameters">Palautettu arvo</h3> +<ul> + <li><code>productName</code> on merkkijono.</li> +</ul> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre class="brush: html"><script> +function prod() { + dt = document.getElementById("d"); + dt.innerHTML = window.navigator.product; +} +</script> +<button onclick="prod();">product</button> +<div id="d"> </div> +// palauttaa merkkijonon "Gecko" +</pre> +<h3 id="Notes" name="Notes">Kommentit</h3> +<p>Gecko-perustaisissa selaimissa <code>product</code> täsmää siihen osaan user agent -merkkijonoon, joka tulee heti alustan jälkeen. Esimerkiksi Netscape 6.1-selaimen user agent -merkkijonossa tuote on "<code>Gecko</code>" ja koko agent-merkkijono on seuraava: <code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</code>.</p> +<p>WebKit-perustaisten selainten <code>product</code>-merkkijono palauttaa arvon "<code>Gecko</code>" vaikka koko user agent -merkkijonon heti alustan jälkeinen merkkijono on itse asiassa seuraava: <code>(KHTML, like Gecko)</code>.</p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>DOM Level 0. Ei ole spesifikaation osa.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.product", "pl": "pl/DOM/window.navigator.product" } ) }}</p> diff --git a/files/fi/dom/window.navigator.productsub/index.html b/files/fi/dom/window.navigator.productsub/index.html new file mode 100644 index 0000000000..af2f4646c1 --- /dev/null +++ b/files/fi/dom/window.navigator.productsub/index.html @@ -0,0 +1,29 @@ +--- +title: window.navigator.productSub +slug: DOM/window.navigator.productSub +translation_of: Web/API/Navigator/productSub +--- +<div> + {{ApiRef}} {{non-standard_header}}</div> +<h2 id="Summary" name="Summary">Yhteenveto</h2> +<p><b>productSub</b> palauttaa nykyisen selaimen rakentamisnumeron.</p> +<h2 id="Syntax" name="Syntax">Syntaksi</h2> +<pre class="syntaxbox"><i>prodSub</i> = window.navigator.productSub</pre> +<ul> + <li><code>prodSub</code> on merkkijono.</li> +</ul> +<h2 id="Example" name="Example">Esimerkki</h2> +<pre class="brush:js"><script> +function prodsub() { + var dt = document.getElementById("d").childNodes[0]; + dt.data = window.navigator.productSub; +} +</script> + +<button onclick="prodsub();">productSub</button> +// palauttaa: 20010725</pre> +<h2 id="Notes" name="Notes">Kommentit</h2> +<p>IE-selaimessa tämä ominaisuus palauttaa määrittelemättömän.</p> +<p>Apple Safari- ja Google Chrome-selaimissa tämä ominaisuus palauttaa aina <code>20030107</code>.</p> +<h2 id="Specification" name="Specification">Spesifikaatio</h2> +<p>{{dom0}}</p> diff --git a/files/fi/dom/window.navigator.useragent/index.html b/files/fi/dom/window.navigator.useragent/index.html new file mode 100644 index 0000000000..e9e9f95084 --- /dev/null +++ b/files/fi/dom/window.navigator.useragent/index.html @@ -0,0 +1,42 @@ +--- +title: window.navigator.userAgent +slug: DOM/window.navigator.userAgent +translation_of: Web/API/NavigatorID/userAgent +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">Yhteenveto</h2> +<p>Palauttaa nykyisen selaimen user agent -merkkijonon.</p> +<h2 id="Syntax" name="Syntax">Syntaksi</h2> +<pre class="syntaxbox">var <var>ua</var> = window.navigator.userAgent; +</pre> +<h3 id="Value" name="Value">Arvo</h3> +<p><code>ua</code> tallentaa nykyisen selaimen user agent -merkkijonarvon.</p> +<p>Ominaisuus <code>window.navigator.userAgent</code> on <em>read-write</em>-arvo; sillä ei ole oletusarvoa.</p> +<p>Merkkijono user agent rakennetaan muotorakenteeseen, joka koostuu useasta tieto-osiosta. Jokainen näistä osista tulee muista navigator-ominaisuuksista, jotka käyttäjä voi myös asettaa. Gecko-perustaiset selaimet noudattavat seuraavaa rakennetta:</p> +<pre>userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; +Localization; rv: revision-version-number) product/productSub +Application-Name Application-Name-version +</pre> +<h2 id="Example" name="Example">Esimerkki</h2> +<pre class="brush:js">alert(window.navigator.userAgent) +// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1" +</pre> +<h2 id="Notes" name="Notes">Kommentit</h2> +<p>Selaintunnistus, joka perustuu user agent -merkkijono havainnointiin <strong>epäluotetttava</strong> ja <strong>sitä ei suositella</strong>, koska käyttäjä voi asettaa user agent -merkkijonon. Esimerkiksi:</p> +<ul> + <li>Firefoxissa voit vaihtaa asetuksen {{pref("general.useragent.override")}} komennolla <code>about:config</code>. Jotkut Firefox-laajennukset tekevät sen; tämä muuttaa kuitenkin vain lähetettävän HTTP-otsakkeen, ja ei vaikuta JavaScript-koodilla suoritettuun selaimen tunnistukseen</li> + <li>Opera 6+ sallii käyttäjien asettaa selaintunnistusmerkkijono valikon kautta</li> + <li>Microsoft Internet Explorer käyttää Windows registryä</li> + <li>Safari ja iCab sallivat käyttäjien vaihtaa selaimen user agent -merkkijonoksi ennalta asetetun Internet Explorer- tai Netscape -merkkijonon valikon kautta.</li> +</ul> +<h2 id="Specification" name="Specification">Spesifikaatio</h2> +<p>{{DOM0}}</p> +<h2 id="See_also" name="See_also">Katso myös</h2> +<ul> + <li><a href="/en-US/docs/Gecko_user_agent_string_reference">Gecko user agent -merkkijonoviite</a></li> + <li><a href="/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages" title="Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages">Browser identification (aka "browser sniffing"): not best, not reliable approach</a></li> + <li><a href="/en-US/docs/Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection" title="Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection">Limit the use of User Agent String based Detection</a></li> + <li><a href="/en-US/docs/Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection" title="Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection">Use feature oriented object detection</a></li> + <li><a href="http://www.gtalbot.org/DHTMLSection/ListAllAttributesAndMethodsOfObjects.html">Interactive cross-browser demo on navigator properties</a></li> +</ul> diff --git a/files/fi/dom/window.navigator.vendor/index.html b/files/fi/dom/window.navigator.vendor/index.html new file mode 100644 index 0000000000..b0f88079ce --- /dev/null +++ b/files/fi/dom/window.navigator.vendor/index.html @@ -0,0 +1,24 @@ +--- +title: window.navigator.vendor +slug: DOM/window.navigator.vendor +translation_of: Web/API/Navigator/vendor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Yhteenveto</h3> +<p>Palauttaa nykyisen selaimen selaintoimittajan nimen.</p> +<h3 id="Syntax" name="Syntax">Syntaksi</h3> +<pre class="eval"><em>venString</em> = window.navigator.vendor +</pre> +<h3 id="Parameters" name="Parameters">Parametrit</h3> +<ul> + <li><code>venString</code> on merkkijono.</li> +</ul> +<h3 id="Example" name="Example">Esimerkki</h3> +<pre>window.navigator.vendor +// returns "Netscape6" +</pre> +<h3 id="Notes" name="Notes">Kommentit</h3> +<p>toimittaja on toinen userAgent-merkkijonon osa. Tuote ja toimittaja voivat olla erilaisia--kuten kun Netscape 6.1 käyttää Gecko-tuotetta tehdäkseen oman renderointinsa. Katso myös <a href="/en/DOM/window.navigator.product" title="en/DOM/window.navigator.product">navigator.product</a>, <a href="/en/DOM/window.navigator.userAgent" title="en/DOM/window.navigator.userAgent">navigator.userAgent</a></p> +<h3 id="Specification" name="Specification">Spesifikaatio</h3> +<p>DOM Level 0. Ei ole spesifikaation osa.</p> +<p>{{ languages( { "ja": "ja/DOM/window.navigator.vendor" ,"zh-cn": "zh-cn/DOM/window.navigator.vendor" } ) }}</p> diff --git a/files/fi/dom/window.navigator/index.html b/files/fi/dom/window.navigator/index.html new file mode 100644 index 0000000000..3851727b18 --- /dev/null +++ b/files/fi/dom/window.navigator/index.html @@ -0,0 +1,110 @@ +--- +title: window.navigator +slug: DOM/window.navigator +translation_of: Web/API/Window/navigator +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">Yhteenveto</h2> + +<p>Palauttaa viitteen navigaattori-objektiin, jolta voidaan kysellä tietoja skriptiä suorittavasta sovelluksesta.</p> + +<h2 id="Example" name="Example">Esimerkki</h2> + +<div style="overflow: hidden;"> +<pre class="brush:js">alert("You're using " + navigator.appName); +</pre> +</div> + +<h2 id="Properties" name="Properties">Ominaisuudet</h2> + +<dl> + <dt>{{domxref("window.navigator.appCodeName", "navigator.appCodeName")}} {{non-standard_inline}}</dt> + <dd>Palauttaa nykyisen selaimen sisäisen "code"-nimen. Älä nojaa tähän ominaisuuteen oikean arvon palauttamiseksi.</dd> + <dt>{{domxref("window.navigator.appName", "navigator.appName")}}</dt> + <dd>Palauttaa selaimen virallisen nimen. Älä nojaa tähän ominaisuuteen oikean arvon palauttamiseksi.</dd> + <dt>{{domxref("window.navigator.appVersion", "navigator.appVersion")}}</dt> + <dd>Palauttaa selaimen version merkkijonona. Älä nojaa tähän ominaisuuteen oikean arvon palauttamiseksi.</dd> + <dt>{{domxref("window.navigator.battery", "navigator.battery")}} {{gecko_minversion_inline("10.0")}}</dt> + <dd>Palauttaa {{domxref("window.navigator.battery", "battery")}}-objektin, jota voit käyttää tietojen saamiseksi akun lataustilasta.</dd> + <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt> + <dd>Palauttaa selaimen rakentamistunnisteen (esim.: "2006090803")</dd> + <dt>{{domxref("window.navigator.connection", "navigator.connection")}}</dt> + <dd>Tarjoaa tietoa laitteen verkkoyhteydestä.</dd> + <dt>{{domxref("window.navigator.cookieEnabled", "navigator.cookieEnabled")}}</dt> + <dd>Palauttaa boolean-arvon, joka kertoo, että ovatko evästeet käytössä selaimessa vai eivät.</dd> + <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt> + <dd>Ilmoittaa käyttäjän do-not-track -asetuksen. Kun tämä arvo on "yes", webbisivustosi tai sovelluksesi ei pitäisi seurata käyttäjää.</dd> + <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt> + <dd>Palauttaa {{domxref("window.navigator.id", "id")}}-objektin, jota voit käyttää <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a>-tuen lisäämiseksi webbisivustollesi.</dd> + <dt>{{domxref("window.navigator.language", "navigator.language")}}</dt> + <dd>Palauttaa selaimen kieliversiota edustavan merkkijonon.</dd> + <dt>{{domxref("window.navigator.mimeTypes", "navigator.mimeTypes")}}</dt> + <dd>Palauttaa selaimen tukemien MIME-tyypien luettelon.</dd> + <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt> + <dd>Palauttaa {{domxref("window.navigator.mozApps", "Apps")}}-objektin, jota voit käyttää <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>-sovellusten asentamiseen, hallinnointiin ja ohjaamiseen.</dd> + <dt>{{domxref("navigator.mozNotification")}} {{non-standard_inline}}<br> + {{domxref("navigator.webkitNotification")}}</dt> + <dd>Palauttaa {{domxref("navigator.mozNotification", "notification")}}-objektin, jota voit käyttää toimittamaan ilmoituksia käyttäjältä webbisovelluksellesi.</dd> + <dt>{{domxref("window.navigator.mozSms", "navigator.mozSms")}} {{gecko_minversion_inline("12.0")}} {{non-standard_inline}}</dt> + <dd>Palauttaa {{domxref("SmsManager")}}-objektin, jota voit käyttää SMS-viestinnän hallinnointiin webbisovelluksessasi.</dd> + <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt> + <dd>{{todo("NeedsText")}}</dd> + <dt>{{domxref("window.navigator.mozTelephony", "navigator.mozTelephony")}} {{non-standard_inline}}</dt> + <dd>Palauttaa {{domxref("Telephony")}}-objektin, jota voit käyttää luomaan ja hallinnoimaan puheluja.</dd> + <dt>{{domxref("window.navigator.onLine", "navigator.onLine")}}</dt> + <dd>Palauttaa boolean-arvon, joka osoittaa, että onko selaimesi verkkoyhteydessä vai ei.</dd> + <dt>{{domxref("window.navigator.oscpu", "navigator.oscpu")}}</dt> + <dd>Palauttaa nykyistä käyttäjärjestelmää edustavan merkkijonon.</dd> + <dt>{{domxref("window.navigator.platform", "navigator.platform")}}</dt> + <dd>Palauttaa selainalustaa edustavan merkkijonon.</dd> + <dt>{{domxref("window.navigator.plugins", "navigator.plugins")}}</dt> + <dd>Palauttaa selaimeen asennettujen lisäosien taulukon.</dd> + <dt>{{domxref("window.navigator.product", "navigator.product")}} {{non-standard_inline}}</dt> + <dd>Palauttaa nykyisen selaimen tuotenimen. (esim.: "Gecko")</dd> + <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt> + <dd>Palauttaa nykyisen selaimen rakennusnumeron (esim.: "20060909")</dd> + <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt> + <dd>Palauttaa tyhjän merkkijonon. Netscape 4.7x-selaimessa palauttaa merkkijonon "US & CA domestic policy" tai "Export policy".</dd> + <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt> + <dd>Palauttaa boolean-arvon, joka osoittaa, että suoritetaanko selainta erillistilassa. Käytettävissä vain Apple:n iOS Safari -selaimessa.</dd> + <dt>{{domxref("window.navigator.userAgent", "navigator.userAgent")}}</dt> + <dd>Palauttaa nykyisen selaimen user agent -merkkijonon.</dd> + <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt> + <dd>Palauttaa nykyisen selaimen toimittajanimen (esim.: "Netscape6")</dd> + <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt> + <dd>Palauttaa toimittajaversionumeron (esim.: "6.1")</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt> + <dd>Palauttaa PointerLock-objektin <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>:a varten.</dd> +</dl> + +<h2 id="Methods" name="Methods">Metodit</h2> + +<dl> + <dt>{{domxref("window.navigator.javaEnabled", "navigator.javaEnabled")}}</dt> + <dd>Osoittaa, että onko tietokoneen selaimen Java käytössä vai ei.</dd> + <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt> + <dd>Sallii koodin tarkistaa verkkoa käyttämättä, että onko tietyssä URI-osoitteessa oleva asiakirja olemassa.</dd> + <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt> + <dd>Asettaa käyttäjäasetuksen. Tämä methodi on <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">käytettävissä vain privileged-koodille</a> ja on vanhentunut; sinun pitäisi käyttää sen sijasta XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a>:a.</dd> + <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt> + <dd>Sallii webbisivuston rekisteröidä itsensä tietyn MIME-tyypin mahdollisena käsittelijänä.</dd> + <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt> + <dd>Sallii webbisivuston rekisteröidä itsensä tietyn yhteyskäytännön mahdollisena käsittelijänä.</dd> + <dt>{{domxref("window.navigator.taintEnabled", "navigator.taintEnabled")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{non-standard_inline}}</dt> + <dd>Palauttaa arvon <code>false</code>. JavaScript taint/untaint -funktiot poistettu JavaScript 1.2:ssa.</dd> + <dt>{{domxref("window.navigator.vibrate", "navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> + <dd>Aiheuttaa värähtelyä laitteissa, jotka tukevat sitä. Ei tee mitään, jos värähtelytuki ei ole käytettävissä.</dd> +</dl> + +<h2 id="Specification" name="Specification">Spesifikaatio</h2> + +<ul> + <li>Määritelty osoitteessa <a class="external" href="http://www.whatwg.org/html/#navigator" title="http://www.whatwg.org/html/#navigator">HTML</a>.</li> +</ul> + +<h2 id="See_also" name="See_also">Katso myös</h2> + +<ul> + <li><a href="/en-US/docs/DOM_Client_Object_Cross-Reference/navigator" title="DOM_Client_Object_Cross-Reference/navigator">DOM Client Object Cross-Reference:navigator</a></li> +</ul> diff --git a/files/fi/fi/index.html b/files/fi/fi/index.html new file mode 100644 index 0000000000..853468da46 --- /dev/null +++ b/files/fi/fi/index.html @@ -0,0 +1,21 @@ +--- +title: Etusivu +slug: fi +tags: + - Kaikki_luokat +--- +<div class="mainpage"> + <table class="features-table"> + <tbody> + <tr> + <td> + <p><img alt="Image:Firefoxlogo2.png" class="internal" src="/@api/deki/files/1155/=Firefoxlogo2.png"></p> + <h4 id="Firefox_2_kehitt.C3.A4jille" name="Firefox_2_kehitt.C3.A4jille"><a href="/fi/Firefox_2_kehittäjille" title="fi/Firefox_2_kehittäjille">Firefox 2 kehittäjille</a></h4> + <p>Firefox 2 on julkaistu, ja on <strong><a class="external" href="http://www.mozilla.com/en-US/firefox/all.html">ladattavissa</a></strong>. Katso <a href="/fi/Firefox_2_kehittäjille" title="fi/Firefox_2_kehittäjille">Firefox 2 kehittäjille</a> (osin suomennettu) saadaksesi lisätietoa</p> + </td> + </tr> + </tbody> + </table> + <p><span class="comment">Categories</span> <span class="comment">Interwiki Language Links</span></p> +</div> +<p> </p> diff --git a/files/fi/how_to_get_a_stacktrace_for_a_bug_report/index.html b/files/fi/how_to_get_a_stacktrace_for_a_bug_report/index.html new file mode 100644 index 0000000000..4816a85621 --- /dev/null +++ b/files/fi/how_to_get_a_stacktrace_for_a_bug_report/index.html @@ -0,0 +1,97 @@ +--- +title: Kuinka saadaan pinovedos vikailmoitusta varten +slug: How_to_get_a_stacktrace_for_a_bug_report +tags: + - Bugzilla +translation_of: Mozilla/How_to_get_a_stacktrace_for_a_bug_report +--- +<p>Jos lähetät Bugzillalla vikailmoituksen kaatumisesta, siihen tulisi myös liittää pinovedos (stacktrace, call stack). Pinovedos kertoo Mozillan kehittäjille, mikä kaatui ja tarjoaa lähtökohdan kaatumisen syyn selvittämiseksi. Tässä artikkelissa kuvataan, kuinka Mozillan kaatumisenilmoitusohjelmalla (Crash Reporter, Breakpad) hankitaan kaatumistunnus (Crash ID), jonka avulla kehittäjämme voivat hankkia pinovedoksen. Tässä artikkelissa kerrotaan myös vaihtoehtoisia tapoja pinovedoksen hankkimiseen, jos et pysty hankkimaan kaatumistunnusta.</p> + +<h2 id="Vaatimukset">Vaatimukset</h2> + +<p>Tarvitset binääripaketin Firefoxista <a class="external external-icon" href="https://www.mozilla.org/en-US/firefox/">Mozilla.org:sta</a>. Myös SeaMonkey ja Thunderbird tukevat kaatumisilmoitusta.</p> + +<p>Mozillan kaatumisilmoitusten palvelimella on nykyisellään virheenkorjaustietoja (debug information) ainoastaan Mozillan jakeluista ja siksi kaatumisilmoitus ei toimi, jos käytät esimerkiksi Linux-jakelun mukana tullutta versiota tai olet itse kääntänyt ohjelman lähdekoodista. Näissä tapauksissa on käytettävä yhtä alla luetelluista <a href="#Alternative_ways_to_get_a_stacktrace">vaihtoehtoisista tavoista</a>.</p> + +<div class="note"><strong>Huomaa: </strong>Kun täytät kaatumisilmoitusta, on tärkeää tietää, tapahtuuko kaatuminen myös <a class="external" href="http://support.mozilla.com/kb/Safe+Mode" title="http://support.mozilla.com/kb/Safe+Mode">Firefoxin vikasietotilassa</a>. Tämä auttaa kehittäjiä päättelemään, aiheuttaako kaatumisen mahdollisesti jokin <a class="external" href="http://support.mozilla.com/kb/Troubleshooting+extensions+and+themes" title="http://support.mozilla.com/kb/Troubleshooting+extensions+and+themes">laajennus</a> tai <a class="external" href="http://support.mozilla.com/kb/Troubleshooting+plugins" title="http://support.mozilla.com/kb/Troubleshooting+plugins">liitännäinen</a>.</div> + +<h2 id="Kaatumistunnuksen_hankkiminen_Mozillan_kaatumisilmoitusohjelmalla">Kaatumistunnuksen hankkiminen Mozillan kaatumisilmoitusohjelmalla</h2> + +<table> + <tbody> + <tr> + <td> + <p><strong>1. Lähetä kaatumisen jälkeen ilmoitus järjestelmäämme.</strong></p> + + <p>Mozillan kaatumisilmoitusohjelman ikkunan pitäisi ilmestyä automaattisesti, kun Firefox kaatuu. Jos sinulla on mitään lisätietoja kaatumisesta, kuten mitä olit tekemässä kun kaatuminen tapahtui, kirjoita nämä lisätietokenttään. Varmista, että <strong>valintaruutu "Lähetä Mozillalle kaatumisilmoitus, jotta ongelma voidaan korjata"</strong><strong> on valittu</strong> ja napsauta uudelleenkäynnistys-painiketta. Kaatumisenilmoitusohjelman pitäisi nyt lähettää kaatumisilmoitus ja Firefoxin tulisi käynnistyä uudelleen.</p> + + <div class="note">"Lisätietoja"-painikketta napsauttamalla saat lisää informaatiota kaatumisesta. Nämä tietot eivät kuitenkaan ole hyödyllisiä vikailmoituksessa.</div> + </td> + <td> + <p style="text-align: center;"><img alt="reporter.jpg" class="internal lwrap" src="../../../../@api/deki/files/2854/=reporter.jpg?size=webview" style="float: left; height: 307px; width: 300px;"></p> + </td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <td> + <p><strong>2. Kerro meille lähettämäsi kaatumisilmoituksen kaatumistunnus (Crash ID).</strong></p> + + <p>Voit tarkastella kaikkia lähetettyjä ilmoituksia<strong> kirjoittamalla "about:crashes" Firefox osoitepalkkiin</strong> ja painamalla enter. Firefox avaa luettelon lähetetyistä kaatumisilmoituksista, jossa näkyy myös kaatumistunnus. Kopioi kaksi tai kolme kaatumisen ajankohtaan parhaiten sopivista kaatumistunnuksista ja liitä ne Bugzillan vikailmoitukseen. Tarkistathan, että ilmoituksen lähetysaika ajoittuu kaatumisen ajankohtaan, jottta et turhaan lähetä kaatumistunnuksia, joilla ei ole mitään tekemistä tämän kaatumisen kanssa.</p> + + <div class="note">Voit liittää kaatumistunnuksen alkuun "bp-", jolloin Bugzilla muodostaa tunnuksista linkit: <strong>bp-</strong>a70759c6-1295-4160-aa30-bc4772090918</div> + </td> + <td> + <p style="text-align: center;"><img alt="crashlist.jpg" class="internal lwrap" src="../../../../@api/deki/files/2855/=crashlist.jpg?size=webview" style="float: left; height: 403px; width: 450px;"></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Kaatumistunnuksen_hankkiminen_jos_Firefox_kaatuu_jo_käynnistyksessä">Kaatumistunnuksen hankkiminen jos Firefox kaatuu jo käynnistyksessä</h3> + +<p>Jos Firefox kaatuu jo käynnistyessään voit silti tarkastella lähetettyjä kaatumisilmoituksia. Kaatumisilmoituksia pääsee tarkastelemaan kaikilla Firefoxin profiileilla, joten jos <a class="external external-icon" href="https://support.mozilla.org/fi/kb/profiilien-hallinta-luo-ja-poista-profiileja">uusi profiili</a> ei kaada Firefoxia, voit tarkastella sen avulla kaatumisilmoituksia "about:crashes" -sivulla <a class="external" href="#How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter" title="#How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter">yllä kuvatulla tavalla</a>.</p> + +<h4 id="Kaatumistunnuksen_löytäminen_Firefoxin_ollessa_suljettu">Kaatumistunnuksen löytäminen Firefoxin ollessa suljettu</h4> + +<p>Jos et voi käynnistää Firefoxia ollenkaan, löydät kaatumisilmoitukset käyttöjärjestelmästäsi riippuen jostain seuraavista sijainneista:</p> + +<p>Windows : <span class="filename">%APPDATA%\Mozilla\Firefox\Crash Reports\submitted\</span><br> + OS X : <span class="filename">~/Library/Application Support/Firefox/Crash Reports/submitted/</span><br> + Linux : <span class="filename">~/.mozilla/firefox/Crash Reports/submitted/</span></p> + +<p>Kansion jokainen tiedosto sisältää yhden lähetetyn kaatumisilmoituksen kaatumistunnuksen. Voit tarkastella tiedoston luonti- tai muokkausaikaa päätelläksesi, mitkä kaatumisilmoitukset liittyvät vikailmoitukseesi.</p> + +<h2 id="Vaihtoehtoisia_tapoja_pinovedoksen_hankkimiseen">Vaihtoehtoisia tapoja pinovedoksen hankkimiseen</h2> + +<p>Jos Mozillan kaatumisenilmoitusohjelma ei ilmesty tai ei ole käytetävissä, on pinovedos hankittava käsin:</p> + +<h4 id="Windows">Windows</h4> + +<p>Pinovedoksen hankkimiseen löydät ohjeet artikkelista <a class="internal" href="/en-US/docs/Mozilla/How_to_get_a_stacktrace_with_WinDbg">Create a stacktrace with Windbg</a>.</p> + +<p>Prosessin täydellisen tilannevedoksen hankkiminen kuvataan artikkelissa <a href="/en-US/docs/Mozilla/How_to_get_a_process_dump_with_Windows_Task_Manager">How to get a process dump with Windows Task Manager [en-US]</a></p> + +<h4 id="OS_X">OS X</h4> + +<p>Suorita /Applications/Utilities/Console.app. Laajenna "~/Library/Logs" ja "CrashReporter". Etsi sitten "firefox-bin" -lokeja.</p> + +<h4 id="Linux">Linux</h4> + +<p>Huomaa, että useimmissa distroissa pakkaus, jolle on löydettävä symbolit, on jotain sen tyyppistä kuin "xulrunner", ei "firefox".</p> + +<h2 id="Where_did_my_crash_get_submitted.3F" name="Where_did_my_crash_get_submitted.3F">Kaatumisilmoitustiedostot koneellasi</h2> + +<p>Kun kaatumisilmoitusohjelma (Breakpad) havaitsee kaatumisen, se ensin kirjoittaa kaatumisilmoitustiedostot (esim. .dump ja .extra -tiedostot) 'Crash Reports' -kansion alikansioon 'pending'.</p> + +<p>Jos Breakpad onnistuu lähettämään kaatumisilmoituksen palvelimelle, oletusarvoisesti 'pending' kansiossa olevat kaatumiseen liittyvät tiedostot poistetaan ja 'submitted' kansioon lisätään tekstitiedosto (.txt), joka sisältää kaatumistunnuksen, jolla palvelin tallensi kaatumisilmoituksen. Jos haluat, että Breakpad jättää .dump ja .extra -tiedostot koneellesi, jotta voit tarkastella niitä paikallisesti, aseta ympäristömuuttuja MOZ_CRASHREPORTER_NO_DELETE_DUMP arvoon 1.</p> + +<ul> + <li>Ubuntu: <a class="external external-icon" href="https://wiki.ubuntu.com/MozillaTeam/Bugs#Obtain%20a%20backtrace%20from%20an%20apport%20crash%20report%20(using%20gdb)">Instructions from the Ubuntu Team</a></li> + <li>openSUSE: <a class="external external-icon" href="https://en.opensuse.org/openSUSE:Bugreport_application_crashed">General instructions from openSUSE</a></li> + <li>Fedora: <a class="external external-icon" href="https://fedoraproject.org/wiki/StackTraces">Capturing Stack Traces</a></li> + <li>Gentoo: <a class="external external-icon" href="https://wiki.gentoo.org/wiki/Debugging_with_GDB">Debugging using GDB</a></li> +</ul> diff --git a/files/fi/html/canvas/index.html b/files/fi/html/canvas/index.html new file mode 100644 index 0000000000..bbef096b3d --- /dev/null +++ b/files/fi/html/canvas/index.html @@ -0,0 +1,73 @@ +--- +title: Canvas +slug: HTML/Canvas +translation_of: Web/API/Canvas_API +--- +<p><a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>:een lisätty <strong>HTML {{HTMLElement("canvas")}}-elementti</strong> on elementti, jota voidaan käyttää grafiikan piirtämiseen skriptaamalla (tavallisesti <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>-kielellä). Sitä voidaan käyttää esimerkiksi diagrammojen piirtämiseen, valokuvayhdistelmien tekemiseen, animaatioiden luomiseen ja jopa ajantasaiseen video-käsittelyyn.</p> +<p>Mozilla-sovellukset saivat <code><canvas></code>-tuen Gecko 1.8-versiosta alkaen (toisin sanoen <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>:stä lähtien). Elementin esitteli alunperin Apple OS X-käyttöjärjestelmä <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a>- ja Safari-sovelluksissa. Internet Explorer tukee <code><canvas></code>:ia versiosta 9 lähtien; IE-selaimen aiemmissa versioissa webbisivulle voidaan tehokkaasti lisätä <code><canvas></code>-tuki Googlen <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a>-hankkeen skriptillä. Google Chrome ja Opera 9 tukevat myös <code><canvas></code>:ia.</p> +<p><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> käyttää myös <code><canvas></code>-elementtiä 3D-grafiikan laitteistokiihdytykseen webbisivuilla.</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentaatio</h2> + <dl> + <dt> + <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Spesifikaatio</a></dt> + <dd> + Elementti <code><canvas></code> on osa WhatWG Web applications 1.0 -spesifikaatiota, joka tunnetaan myös nimellä HTML5.</dd> + <dt> + <a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas-oppikurssi</a></dt> + <dd> + Laaja oppikurssi, joka kattaa sekä <code><canvas></code>-peruskäytön että sen edistyneemmät ominaisuudet.</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">Koodikatkelma:Canvas</a></dt> + <dd> + Joitakin <code><canvas></code>:iin liittyviä koodikatkelmia.</dd> + <dt> + <a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas-esimerkkejä</a></dt> + <dd> + Muutama <code><canvas></code>-esittelyohjelma.</dd> + <dt> + <a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">DOM-objektien piirtäminen canvas-elementtiin</a></dt> + <dd> + Kuinka piirtää canvas-komponenttiin DOM-sisältö, kuten HTML-elementit.</dd> + <dt> + <a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Perussädeheittäjä</a></dt> + <dd> + Canvasia käyttävä sädejäljitysanimaation esittelyohjelma.</dd> + <dt> + <a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="Gecko_DOM_Reference#Canvas_interfaces">Canvas DOM -rajapinnat</a></dt> + <dd> + Canvas DOM -rajapinnat Gecko-alustalla.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="tag/HTML:Canvas">Katso kaikkia...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="Yhteisö">Yhteisö</h2> + <ul> + <li>Katso Mozilla-foorumeita... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-kehittäjät Yahoo-ryhmä</a></li> + </ul> + <h2 class="Resources" id="Resources" name="Resources">Resurssit</h2> + <ul> + <li><a class="external" href="http://joshondesign.com/p/books/canvasdeepdive/title.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Syvä sukellus HTML5 Canvasiin</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas-muistilappu</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li> + </ul> + <h2 class="Libraries" id="Libraries" name="Libraries">Kirjastot</h2> + <ul> + <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> on tehokas ja kevyt canvas-ympäristö</li> + <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> on toiseen käyttöympäristöön siirretty Prosessin visualisointikieli</li> + <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> on kirjasto, jossa on Flash-tyyppinen sovellusohjelmointirajapinta (API)</li> + <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> on taulukko- ja grafiikkakirjasto</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> on avainkehys-animaatioympäristön sovellusohjelmointirajapinta Canvasille</li> + <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> on WebGL-ympäristö datan visualisointiin, luovaan koodaukseen ja pelikehitykseen.</li> + <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> luo vuorovaikutteisia 2D Canvas -datavisualisointeja webbiin.</li> + <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> on sovellusten ja pelin kehitysympäristö</li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Asiaan liittyvät aiheet</h2> + <ul> + <li><a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></li> + </ul> + </div> +</div> +<div> + {{HTML5ArticleTOC()}}</div> diff --git a/files/fi/html/index.html b/files/fi/html/index.html new file mode 100644 index 0000000000..dd02719a98 --- /dev/null +++ b/files/fi/html/index.html @@ -0,0 +1,84 @@ +--- +title: HTML +slug: HTML +tags: + - HTML + - NeedsTranslation + - References + - TopicStub +translation_of: Web/HTML +--- +<div class="callout-box"> + <div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;"> + HTML5 Demos</div> + <p>A <a href="https://developer.mozilla.org/en-US/demos/tag/tech:html5" title="demos/tag/tech:html5">collection of demos</a> showing the latest HTML technologies in action.</p> + <p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="The logo of HTML" class="default" src="/files/3563/HTML5_Logo_128.png" style="width: 128px; height: 128px;"></a></p> +</div> +<p><strong>HyperText Markup Language (<em>HTML</em>)</strong> is the language used to create web pages and other types of documents viewable in a browser. More precisely, HTML is the language that describes the structure and the semantic of a document. The content is tagged with HTML elements like <code><img></code>, <code><title></code>, <code><p></code>, <code><div></code>, …</p> +<p>HTML is an international standard whose specifications are maintained by the <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> and the <a href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a>.</p> +<p>HTML is considered a <em>living standard</em> and is technically under continuous development. That always-current version of the HTML specification is referred to as <strong>HTML5</strong>.</p> +<div class="cleared topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about HTML</h2> + <dl> + <dt> + <a href="/en-US/docs/HTML/Introduction" title="Introduction to HTML"><strong>Introduction to HTML</strong></a></dt> + <dd> + This page provides basic information on syntax and semantics of an HTML page (document). This will provide basic information required to develop HTML documents.</dd> + <dt> + <a href="/en-US/docs/HTML/Element" title="HTML/Element">HTML element reference</a></dt> + <dd> + Get details about each element supported by different browsers.</dd> + <dt> + <a href="/en-US/docs/HTML/Attributes" title="HTML/Attributes">HTML attributes list </a></dt> + <dd> + See all attributes and what elements they are associated with.</dd> + <dt> + <a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></dt> + <dd> + Learn about the new HTML5 APIs and elements along with their support.</dd> + <dt> + <a href="/en-US/docs/HTML/Forms" title="HTML/Forms">HTML Forms Guide</a></dt> + <dd> + HTML forms are a complex part of HTML. This guide will help you mastering them, from structure to styling, from browser support to custom controls.</dd> + <dt> + <a href="/en-US/docs/Web_development/Historical_artifacts_to_avoid" title="HTML/Bad_copy_pasting_habits">Bad copy-pasting habits</a></dt> + <dd> + Web technologies are very often learned by viewing sources of other pages and copy-pasting. However, this often means that bad habits perpetuate. This page lists some of these bad patterns and show you can achieve their goal the right way.</dd> + <dt> + <a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></dt> + <dd> + A new HTML element for programmable graphics. <code><canvas></code> can be used for rendering graphs, UI elements, and other custom graphics on the client.</dd> + <dt> + <a href="/en-US/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages" title="HTML/Tips for authoring fast-loading HTML pages">Tips for Authoring Fast-loading HTML Pages</a></dt> + <dd> + An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and internet connection.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/HTML" title="Article tagged: HTML">View All...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>You need help on a HTML-related problem and can't find the solution in the documentation?</p> + <ul> + <li>Consult the dedicated Mozilla forum : {{DiscussionList("dev-tech-html", "mozilla.dev.tech.html")}}</li> + <li>Go to <a href="http://stackoverflow.com/questions/tagged/html" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, a collaboratively built and maintained Q&A site and look if you can find the answer to your quetion. If not you will be able to ask your question there.</li> + </ul> + <p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <h2 class="Tools" id="Tools" name="Tools">Tools easing HTML development</h2> + <ul> + <li>Firefox' <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a><span class="external">, a popular</span> extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.</li> + <li><a class="external" href="http://validator.w3.org/">HTML Validator</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a></li> + <li><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a></li> + <li><a class="external" href="http://prettydiff.com/?html">Pretty Diff</a></li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Tools" title="Article tagged: HTML:Tools">View All...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li>The <a href="/en-US/docs/CSS" title="CSS">Cascading Style Sheets (CSS)</a> used to give style to HTML.</li> + <li>The <a href="/en-US/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li> + <li><a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> is the <a href="/en-US/docs/XML" title="XML">XML</a> version of the language.</li> + </ul> + </div> +</div> +<p> </p> diff --git a/files/fi/learn/index.html b/files/fi/learn/index.html new file mode 100644 index 0000000000..151d18edcc --- /dev/null +++ b/files/fi/learn/index.html @@ -0,0 +1,122 @@ +--- +title: Learn web development +slug: Learn +tags: + - Beginner + - Index + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">Welcome to the MDN learning area. This set of articles aims to provide complete beginners to web development with all that they need to start coding simple websites.</p> + +<p>The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable". From there you should be able to start making your own way, learning from <a href="https://developer.mozilla.org/en-US/">the rest of MDN</a> and other intermediate to advanced resources that assume a lot of previous knowledge.</p> + +<p>If you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. You should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work.</p> + +<div class="warning"> +<p><strong>Important</strong>: The content in the learning area is being added to regularly. If you have questions regarding topics you'd like to see covered or feel are missing, see the {{anch("Contact us")}} section below for information on how to get in touch.</p> +</div> + +<h2 id="Where_to_start">Where to start</h2> + +<ul class="card-grid"> + <li><span>Complete beginner:</span> If you are a complete beginner to web development, we'd recommend that you start by working through our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> module, which provides a practical introduction to web development.</li> + <li><span>Specific questions:</span> If you have a specific question about web development, our <a href="/en-US/docs/Learn/Common_questions">Common questions</a> section may have something to help you.</li> + <li><span>Beyond the basics:</span> If you have a bit of knowledge already, the next step is to learn {{glossary("HTML")}} and {{glossary("CSS")}} in detail: start with our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module and move on to our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module.</li> + <li><span>Moving onto scripting:</span> If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to {{glossary("JavaScript")}} or server-side development. Begin with our <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side first steps</a> modules.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Our <a href="/en-US/docs/Glossary">glossary</a> provides terminology definitions.</p> +</div> + +<p>{{LearnBox({"title":"Random glossary entry"})}}</p> + +<h2 id="Topics_covered">Topics covered</h2> + +<p>The following is a list of all the topics we cover in the MDN learning area.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a></dt> + <dd>Provides a practical introduction to web development for complete beginners.</dd> + <dt><a href="/en-US/docs/Learn/HTML">HTML — Structuring the web</a></dt> + <dd>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is. This topic teaches HTML in detail.</dd> + <dt><a href="/en-US/docs/Learn/CSS">CSS — Styling the web</a></dt> + <dd>CSS is the language that we can use to style and lay out our web content, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript">JavaScript — Dynamic client-side scripting</a></dt> + <dd>JavaScript is the scripting language used to add dynamic functionality to web pages. This topic teaches all the essentials needed to become comfortable with writing and understanding JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility">Accessibility — make the web usable by everyone</a></dt> + <dd>Accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. This topic gives you all you need to know.</dd> + <dt><a href="/en-US/docs/Learn/Performance">Web Performance — making websites fast and responsive</a></dt> + <dd>Web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a users bandwidth, screen size, network, or device capabilities.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing">Tools and testing</a></dt> + <dd>This topic covers the tools developers use to facilitate their work, such as cross browser testing tools.</dd> + <dt><a href="/en-US/docs/Learn/Server-side">Server-side website programming</a></dt> + <dd>Even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials showing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). </dd> +</dl> + +<h2 id="Getting_our_code_examples">Getting our code examples</h2> + +<p>The code examples you'll encounter in the Learning Area are all <a href="https://github.com/mdn/learning-area/">available on GitHub</a>. If you want to copy them all to your computer, the easiest way is to <a href="https://github.com/mdn/learning-area/archive/master.zip">download a ZIP of the latest master code branch</a>.</p> + +<p>If you'd rather copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions:</p> + +<ol> + <li><a href="https://git-scm.com/downloads">Install Git</a> on your machine. This is the underlying version control system software that GitHub works on top of.</li> + <li><a href="https://github.com/join">Sign up for a GitHub account</a>.</li> + <li>Once you've signed up, log in to <a href="https://github.com">github.com</a> with your username and password.</li> + <li>Open your computer's <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">command prompt</a> (Windows) or terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>)</li> + <li>To copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command: + <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre> + </li> + <li>You can now enter the directory and find the files you are after (either using your finder/file explorer or the <a href="https://en.wikipedia.org/wiki/Cd_(command)">cd command</a>).</li> +</ol> + +<p>You can update the <code>learning-area</code> repository with any changes made to the master version on GitHub with the following steps:</p> + +<ol> + <li>In your command prompt/terminal, go inside the <code>learning-area</code> directory using <code>cd</code>. For example, if you were in the parent directory: + + <pre class="brush: bash">cd learning-area</pre> + </li> + <li>Update the repository using the following command: + <pre class="brush: bash">git pull</pre> + </li> +</ol> + +<h2 id="Contact_us">Contact us</h2> + +<p>If you want to get in touch with us about anything, the best way is to drop us a message on our <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">learning area discourse thread</a> or <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC channels</a>. We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or any other questions or concerns.</p> + +<p>If you're interested in helping develop/improve the content, take a look at <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla developer newsletter</a></dt> + <dd>Our newsletter for web developers, which is a great resource for all levels of experience.</dd> + <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> + <dd>A great series of videos explaining web fundamentals, aimed at complete beginners to web development. Created by <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>A great interactive site for learning programming languages from scratch.</dd> + <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> + <dd>Basic coding theory with a gamified learning process. Mainly focused on beginners.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Basic coding theory and practice, mainly aimed at children/complete beginners.</dd> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> + <dd>Free and open courses for learning tech skills, with mentorship and project-based learning</dd> + <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> + <dd>Interactive site with tutorials and projects to learn web development.</dd> + <dt><a href="https://learning.mozilla.org/web-literacy/">Web literacy map</a></dt> + <dd>A framework for entry-level web literacy & 21st Century skills, which also provides access to teaching activities sorted by category.</dd> + <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt> + <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd> + <dt><a href="https://edabit.com/">Edabit</a></dt> + <dd>Hundreds of free interactive coding challenges in various languages.</dd> +</dl> diff --git a/files/fi/learn/javascript/ensimmaiset_askeleet/index.html b/files/fi/learn/javascript/ensimmaiset_askeleet/index.html new file mode 100644 index 0000000000..44a95ed91f --- /dev/null +++ b/files/fi/learn/javascript/ensimmaiset_askeleet/index.html @@ -0,0 +1,54 @@ +--- +title: JavaScript ensimmäiset askeleet +slug: Learn/JavaScript/Ensimmaiset_askeleet +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Meidän ensimmäisessä JavaScript moduulissa vastaamme muutamiin perus-kysymyksiin, kuten "mitä JavaScript on?", "miltä se näyttää?", ja "mitä se voi tehdä?", ennen kuin saat ensimmäisen käytännön kokemuksen JavaScriptin kirjoittamisesta. Tämän jälkeen me pohdimme joitakin keskeisiä rakennuspalkioita yksityiskohtaisesti, kuten muuttujat, merkkijonot, numerot ja taulukot.</p> + +<h2 id="Edellytykset">Edellytykset</h2> + +<p>Ennen tämän moduulin aloittamista sinulla ei tarvitse olla yhtään aikasempaa kokemusta JavaScriptistä, mutta sinun tulisi olla perehetynyt jonkin verran HTML:ään ja CSS:ään. Suosittelemme, että käyt läpi seuraavat moduulite ennen kuin aloitat JavaScriptin:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Alkuun Webin kanssa</a> (Joka sisältää todella <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">alkeis-JavaScript-esittelyn</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Esittelyssä HTML</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Esittelyssä CSS</a>.</li> +</ul> + +<p> </p> + +<div class="note"> +<p><strong>Huomio</strong>: Jos työskentelet tietokoneella/tabletilla/muulla laitteella, missä et voi luoda omia tiedostoja, sinä voit kokeilla (useimpia) koodi esimerkkejä online-koodausohjelmilla kuten <a href="http://jsbin.com/">JSBin</a> tai <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Oppaat">Oppaat</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Mitä JavaScript on?</a></dt> + <dd>Tervetuloa MDN:n aloittelijoiden JavaScript kurssille! Ensimmäisessä artikkelissa katsomme JavaScriptiä korkealta tasolta, vastaten kysymyksiin kuten "mikä se on?" ja "mitä se tekee?", ja varmistamme että olet tyytyväinen JavaScriptin tarkoitukseen.such problems by providing</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Ensimmäinen sukellus JavaScriptiin</a></dt> + <dd>Nyt olet oppinut jotain JavaScriptin teoriasta, ja mitä voit tehdä sillä. Aiomme antaa sinulle tehokurssin JavaScriptin perusominaisuuksista täysin käytännönläheisen oppaan kautta. Täällä sinä tulet rakentamaan yksinkeraisen "Arvaa numero" pelin, askel askeleelta.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Mitä meni väärin? JavaScriptin vianmääritys</a></dt> + <dd>Kun rakensit "Arvaa numero" pelin edellisessä artikkelissa, saatoit huomata ettei se toiminut. Ole huoleti — tämän artikkelin tavoitteena on säästää sinut hiusten repimiseltä tällaisissa ongelmissa tarjoamalla muutamia neuvoja kuinka löytää ja korjata virhee JavaScript ohjelmassa.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Tallennetaan tarvitsemasi tiedot — muuttujat</a></dt> + <dd>Kun olet lukenut pari edellistä artikkelia, sinun pitäisi tietää mitä JavaScript on, mitä se voi tehdä sinulle, kuinka käyttää sitä muiden web-tekniikoiden rinnalla, ja mitkä on se n pää ominaisuudet katsottuna korkealta tasolta. Tässä artikkelissa menemme alas todellisiin perusteisiin, katsotaan kuinka työskennellään kaikkein yksinkertaisimpien JavaScriptin rakennuspalikoiden kanssa — Muuttujat.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Perus matematikkaa JavaScriptillä — numerot ja operaattorit</a></dt> + <dd>Tässä vaiheessa kurssia pohdimme matematikkaa JavaScriptissä — kuinka voimme yhdistää operaattoreita ja muita ominaisuuksia onnistuaksemme manipuloimaan numeroita komonnoissamme.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Tekstin käsittely — merkkijonot JavaScriptssä</a></dt> + <dd>Seuraavaksi käännämme huomiomme merkkijonoihin — tällä nimellä tekstin pätkiä kutsutaan ohjelmoinnissa. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Hyödyllisiä merkkijono metodeja</a></dt> + <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Taulukot</a></dt> + <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd> +</dl> + +<h2 id="Arviointi">Arviointi</h2> + +<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Typerä tarina generaattori</a></dt> + <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd> +</dl> diff --git a/files/fi/learn/javascript/index.html b/files/fi/learn/javascript/index.html new file mode 100644 index 0000000000..bb376953cd --- /dev/null +++ b/files/fi/learn/javascript/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript +slug: Learn/JavaScript +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} on ohjelmointikieli, joka mahdollistaa monimutkaisten asioiden toteuttamisen web-sivuille — web-sivut tekevät aina enemmän, kuin vain ovat siellä ja näyttävät muutumatonta sisältöä katsottavaksesi — näyttävät ajankohtaisia sisältöpäivityksiä, vuorovaikutteisia karttoja, animoituja 2D/3D grafiikoita tai vierittävät video jukebokseja, jne, — voit lyödä vetoa, että JavaScript on todennäköisesti osallisena tähän.</p> + +<h2 id="Oppimispolku">Oppimispolku</h2> + +<p>JavaScript on luultavasti vaikeampi oppia, kuin siihen liittyvät tekniikat, kuten <a href="/en-US/docs/Learn/HTML">HTML</a> ja <a href="/en-US/docs/Learn/CSS">CSS</a>. Ennen kuin yrität opetella JavaScriptiä, sinun kannattaa ehdottomasti ensin tutustua ainakin näihin kahteen teknikkaan, ja ehkä muihinkin. Aloita seuraavista moduuleista:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Alkuun Webin kanssa</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Esittelyssä HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Esittelyssä CSS</a></li> +</ul> + +<p>Aiempi kokemus muista ohjelmointikielistä voi myös auttaa.</p> + +<p>JavaScriptin perusteiden tultua tutuiksi, sinun pitäisi olla kykeneväinen oppimaan lisää edistyneemmistä aiheista, esimerkiksi:</p> + +<ul> + <li>JavaScript perusteellisesti, joka opetetaan meidän <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript oppaassa</a></li> + <li><a href="/en-US/docs/Web/API">HTML5 API</a></li> +</ul> + +<h2 id="Moduulit">Moduulit</h2> + +<p>Tämä aihe sisältää seuraavat moduulit, ehdotetussa opiskelujärjestyksessä.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript ensimmäiset askeleet</a></dt> + <dd>Ensimmäisessä JavaScript-moduulissamme, vastaamme ensiksi joihinkin peruskysymyksiin, kuten “Mikä on JavaScript”, “Miltä se näyttää?” ja “Mitä se voi tehdä?”, ennen kuin annamme sinulle ensimmäisen käytännön kokemuksen JavaScriptin kirjoittamisesta. Tämän jälkeen me käsittelemme joitakin keskeisiä JavaScriptin ominaisuuksia yksityiskohtaisesti, kuten muuttujat, merkkijonot, luvut ja taulukot.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScriptin rakenneosat</a></dt> + <dd> + <p dir="ltr" id="docs-internal-guid-e603018a-8f4c-9c95-0322-bddbf2b777b4" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;">Tässä moduulissa jatkamme kattavaa JavaScriptin keskeisten perusominaisuuksien läpikäyntiä, kääntäen huomiomme yleisimmin käytettyihin koodilohkojen tyyppeihin, kuten ehtolauseet, silmukat, funktiot ja tapahtumat. Olet nähnyt nämä jutut jo tällä kurssilla, mutta vain ohimennen - tässä käsitellään erityisesti niitä.</p> + </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Esittelyssä JavaScript objektit</a></dt> + <dd>JavaScriptissä useimmat keskeiset ominaisuudet ovat objekteja, merkkijonoista ja taulukoista JavaScriptin päälle rakennettuihin selain API:hin. Voit jopa tehdä omia olioita yhdistämään toisiinsa liittyvät funktiot ja muuttujat tehokkaaksi paketiksi. Sinun on tärkeää ymmärtää JavaScriptin oliopohjainen luonne, jos haluat viedä eteenpäin tietämystäsi kielestä ja kirjoittaa tehokasta koodia, siksi olemme tehneet tämän moduulin, auttamaan sinua. Täällä opetamme olioiden teoriaa ja syntaksia yksityiskohtaisesti, katsomme kuinka luoda oma olio ja selitämme mitä JSON-tieto on ja kuinka työskennellä sen kanssa.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Asiakas-puolen web API:t</a></dt> + <dd>Kun kirjoitetaan asiakas-puolen JavaScriptiä web-sivuille tai sovelluksiin, et mene kovin pitkälle, ennen kuin aloitat käyttämään API:ja - rajapintoja selaimen ja käyttöjärjestelmään eri osioiden käsittelemiseen sivuston ollessa käynnissä, tai jopa toiselta web-sivulta tai palvelusta tulevan tiedon käsittelemiseen. Tässä moduulissa tutkimme mitä API:t ovat ja kuinka käyttää joitakin yleisimpiä API:ja, joihin tulet törmäämään usein kehitystyössä.</dd> +</dl> + +<h2 id="Katso_myös">Katso myös</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">MDN JavaScript</a></dt> + <dd>Tärkein tuloportti MDN:n JavaScript-dokumentaation ytimeen - täältä löydät laajat referenssiasiakirjat kaikkiin JavaScript-kielen osiin, ja joitakin edistyneitä tutoriaaleja, jotka on suunnattu kokeneille JavaScriptareille.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Koodauksen matematiikka</a></dt> + <dd>Erinomainen videotutoriaalien sarja oppia matematiikkaa, jota sinun tulee ymmärtää, ollaksesi tehokas ohjelmoija, tehnyt <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/fi/mozilla/add-ons/index.html b/files/fi/mozilla/add-ons/index.html new file mode 100644 index 0000000000..45157d094f --- /dev/null +++ b/files/fi/mozilla/add-ons/index.html @@ -0,0 +1,83 @@ +--- +title: Add-ons +slug: Mozilla/Add-ons +tags: + - Add-ons + - Extension + - Extensions + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons +--- +<p>{{AddonSidebarMain}}</p> + +<p><span class="seoSummary">Add-ons allow developers to extend and modify the functionality of Firefox.</span> They are written using standard Web technologies - JavaScript, HTML, and CSS - plus some dedicated JavaScript APIs.</p> + +<p>Among other things, an add-on could:</p> + +<ul> + <li>Change the appearance or content of particular websites</li> + <li>Modify the Firefox user interface</li> + <li>Add new features to Firefox</li> +</ul> + +<p>There are several types of add-ons, but the most common type are extensions.</p> + +<h2 id="Developing_extensions">Developing extensions</h2> + +<p>In the past, there were several toolsets for developing Firefox extensions, but as of November 2017, extensions must be built using <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions APIs</a>. Other toolsets, such as overlay add-ons, bootstrapped add-ons, and the Add-on SDK, are no longer supported.</p> + +<p>Extensions written using WebExtensions APIs for Firefox are designed to be cross-browser compatible. In most cases, it will run in Chrome, Edge, and Opera with few if any changes. They are also fully compatible with multiprocess Firefox. You can see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">the APIs currently supported in Firefox and other browsers</a>.</p> + +<h3 id="Extension_Workshop">Extension Workshop</h3> + +<p>The <a href="https://extensionworkshop.com">Firefox Extension Workshop </a>can help you develop extensions for Firefox and give your users simple, yet powerful ways to customize their browsing experience. You’ll find:</p> + +<ul> + <li><a href="https://extensionworkshop.com/#about">Overview of the Firefox extension features</a></li> + <li><a href="https://extensionworkshop.com/documentation/develop/">Tools and processes for developing and testing</a></li> + <li><a href="https://extensionworkshop.com/documentation/publish/">How to publish your extension on addons.mozilla.org or distribute it yourself</a></li> + <li><a href="https://extensionworkshop.com/documentation/manage/">How to manage your published extension</a></li> + <li><a href="https://extensionworkshop.com/documentation/enterprise/">An enterprise guide for developing and using extensions</a></li> + <li><a href="https://extensionworkshop.com/documentation/themes/">How to develop themes for Firefox</a></li> + <li><a href="https://extensionworkshop.com/community/">Firefox developer communities</a></li> +</ul> + +<h3 id="Extensions_for_Firefox_for_Android">Extensions for Firefox for Android</h3> + +<p>In 2020, Mozilla will release a new Firefox for Android experience. This new, high-performance browser for Android has been rebuilt from the ground up using GeckoView, Mozilla’s mobile browser engine. We are currently building support for the WebExtensions API on GeckoView.</p> + +<h3 id="Migrate_an_existing_extension">Migrate an existing extension</h3> + +<p>If you maintain a legacy extension, such as an XUL overlay, bootstrapped, or Add-on SDK-based extension, you can still port it to use WebExtension APIs. There are some <a href="https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension/">porting resources on Firefox Extension Workshop</a>, our site for Firefox-specific development resources.</p> + +<p>For more information about transition support, please visit our <a href="//wiki.mozilla.org/Add-ons/developer/communication">wiki page.</a></p> + +<h2 id="Publishing_add-ons">Publishing add-ons</h2> + +<p><a href="https://addons.mozilla.org">Addons.mozilla.org</a>, commonly known as "AMO," is Mozilla's official site for developers to list add-ons, and for users to discover them. By uploading your add-on to AMO, you can participate in our community of users and creators and find an audience for your add-on.</p> + +<p>You are not required to list your add-on on AMO, but your add-on must be signed by Mozilla else users will not be able to install it.</p> + +<p>For an overview for the process of publishing your add-on see <a href="https://extensionworkshop.com/documentation/publish/signing-and-distribution-overview/">Signing and distributing your add-on</a>.</p> + +<h2 id="Other_types_of_add-ons">Other types of add-ons</h2> + +<p>In addition to extensions, there are a few other add-on types that allow users to customize Firefox. Those add-ons include:</p> + +<ul> + <li> + <p><a href="/en-US/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">User dictionaries</a> let you spell-check in different languages.</p> + </li> + <li> + <p><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Language packs</a> let you have more languages available for the user interface of Firefox. </p> + </li> +</ul> + +<h2 id="Contact_us">Contact us</h2> + +<p>Check out the <a href="/en-US/docs/Mozilla/Add-ons/Contact_us">contact us</a> page for details on how to get help, keep up to date with add-ons news, and give us feedback.</p> + +<div></div> diff --git a/files/fi/mozilla/add-ons/webextensions/index.html b/files/fi/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..a6444fc083 --- /dev/null +++ b/files/fi/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,85 @@ +--- +title: Browser Extensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - Add-ons + - Landing + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p><span class="seoSummary">Extensions, or add-ons, can modify and enhance the capability of a browser. Extensions for Firefox are built using the WebExtensions API cross-browser technology.</span></p> + +<p>The technology for extensions in Firefox is, to a large extent, compatible with the <a href="https://developer.chrome.com/extensions">extension API</a> supported by Chromium-based browsers (such as Google Chrome, Microsoft Edge, Opera, Vivaldi). In most cases, extensions written for Chromium-based browsers run in Firefox with <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Guides</span> + + <p>Whether you’re just beginning or looking for more advanced advice, learn about how extensions work and use the WebExtensions API from our extensive range of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">tutorials and guides</a>.</p> + </li> + <li><span>References</span> + <p>Get comprehensive details about the methods, properties, types, and events of the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">WebExtensions APIs</a> and full details about the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest keys</a>.</p> + </li> + <li><span>Firefox workflow</span> + <p>Discover how to build and publish extensions for Firefox: get the lowdown on developer tools, publication and distribution, and porting on <a href="https://extensionworkshop.com/">Extension Workshop</a>.</p> + </li> +</ul> + +<p><strong>If you have ideas or questions or need help,</strong> you can reach us on the <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or in the <a href="https://matrix.to/#/!CuzZVoCbeoDHsxMCVJ:mozilla.org?via=mozilla.org&via=matrix.org&via=humanoids.be">Add-ons Room</a> on <a href="https://wiki.mozilla.org/Matrix">Matrix</a>.</p> + +<div class="topicpage-table"> +<div class="section"> +<h2 id="Get_started">Get started</h2> + +<p>Discover <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">what extensions can do</a> before building <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">your first extension.</a> Learn about the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">anatomy of an extension</a> and get an overview of the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview">extension development and publication workflow, Firefox style</a>. Explore a little deeper with a comprehensive selection of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples">example extensions</a> that you can run right in Firefox.</p> + +<h2 id="Concepts">Concepts</h2> + +<p>Get detailed information on the concept that underpin extensions <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">from an overview of the JavaScript API</a>, through <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts,</a> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">working with files</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">internationalization</a>, and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">content security policy</a>, to more advanced subjects such as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">native messaging</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">using the devtools APIs</a>, and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests">native manifests</a>.</p> + +<h2 id="User_interface">User interface</h2> + +<p>Discover all the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">user interface</a> components you can use in your extensions, with coding examples and tips.</p> + +<h2 id="How_to">How to</h2> + +<p>From patterns you’ll regularly use such as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">work with the Tabs API</a> and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">adding a button to the toolbar</a> to more advanced topics such as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">intercepting HTTP requests</a> and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">working with contextual identities</a>, you’ll find a range of tutorials to get you started.</p> + +<ul> +</ul> + +<h2 id="Firefox_workflow">Firefox workflow</h2> + +<p>When you are ready to create your extension for Firefox or port your Chrome extension head over to <a href="https://extensionworkshop.com/">Extension Workshop</a>. It has details on:</p> + +<ul> + <li>The Firefox workflow, such as <a href="https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/">temporarily installing extensions during development</a>, <a href="https://extensionworkshop.com/documentation/develop/debugging/">debugging</a>, <a href="https://extensionworkshop.com/documentation/develop/request-the-right-permissions/">request the right permissions</a>, and more.</li> + <li>The <a href="https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/">web-ext</a> developer tool.</li> + <li><a href="https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/">Porting a Google Chrome extension</a>, <a href="https://extensionworkshop.com/documentation/develop/differences-between-desktop-and-android-extensions/">differences between desktop and Android</a>, and more.</li> + <li><a href="https://extensionworkshop.com/documentation/publish/">Publishing and distribution overview</a>, <a href="https://extensionworkshop.com/documentation/publish/promoting-your-extension/">promoting your extension</a>, the <a href="https://extensionworkshop.com/documentation/manage/">extension lifecycle best practices</a>, and more.</li> +</ul> +</div> + +<div class="section"> +<h2 id="Reference">Reference</h2> + +<h3 id="JavaScript_APIs">JavaScript APIs</h3> + +<p>Get comprehensive details about the methods, properties, types, and events for all the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript APIs</a>. There is also detailed information about the compatibility of each API with the major browsers. Most reference pages also include coding examples and links to the extension examples that use the API.</p> + +<h3 id="Manifest_keys">Manifest keys</h3> + +<p>Get full details about the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest keys</a>, including all their properties and settings. There’s also detailed information on the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">compatibility</a> of each key with the major browsers.</p> +</div> +</div> + +<div class="SnapLinksContainer" style="margin-left: 0px; margin-top: 0px; display: none;"> +<div class="SL_SelectionRect"> +<div class="SL_SelectionLabel"></div> +</div> +</div> +</section> diff --git a/files/fi/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/fi/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..8a1eddb4b3 --- /dev/null +++ b/files/fi/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,60 @@ +--- +title: What are extensions? +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<div class="blockIndicator note"> +<p>Jos olet jo perehtynyt selainlaajennusten peruskäsitteisiin, ohita tämä osa <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">nähdäksesi, kuinka laajennustiedostot kootaan</a> . Käytä sitten <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions#Reference">lähdeteos</a> alkaa rakentaa laajennus. Käy <a href="https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension">Firefox Extension Workshopissa</a> saadaksesi lisätietoja <a href="https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension">Firefoxin</a> testauksen, julkaisemisen ja laajennusten työnkulusta.</p> +</div> + +<p>Laajennus lisää ominaisuuksia ja toimintoja selaimeen. Se on luotu käyttämällä tuttuja verkkopohjaisia tekniikoita - HTML, CSS ja JavaScript. Se voi hyödyntää samoja web-sovellusliittymiä kuin verkkosivun JavaScript, mutta laajennuksella on myös pääsy omiin JavaScript-sovellusliittymiensä sarjoihin. Tämä tarkoittaa, että voit tehdä paljon enemmän laajennuksessa kuin koodilla verkkosivulla. Tässä on vain muutama esimerkki asioista, joita voit tehdä:</p> + +<p><strong>Paranna tai täydennä verkkosivustoa</strong> : Käytä lisäosaa toimittaa lisää selaimen sisäisiä ominaisuuksia tai tietoja verkkosivustoltasi. Anna käyttäjien kerätä tietoja vierailemiltasi sivuilta parantamaan tarjoamaasi palvelua.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p> + +<p>Esimerkkejä: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant Firefoxille</a> , <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a> ja <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly Firefoxille</a></p> + +<p><strong>Anna käyttäjien näyttää persoonallisuutensa</strong> : Selainlaajennukset voivat manipuloida verkkosivujen sisältöä; esimerkiksi antaa käyttäjien lisätä suosikkilogonsa tai -kuvansa taustaksi jokaiselle vierailemalleen sivulle. Laajennusten avulla käyttäjät voivat myös päivittää Firefox-käyttöliittymän ulkoasun samalla tavalla kuin erilliset <a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">teeman lisäosat</a> .</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> + +<p>Esimerkkejä: <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a> , <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a> ja <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p> + +<p><strong>Lisää tai poista sisältöä verkkosivuilta</strong> : Voit auttaa käyttäjiä estämään häiritseviä mainoksia verkkosivuilta, tarjoamaan pääsyn matkaoppaaseen aina, kun maa tai kaupunki mainitaan verkkosivulla, tai alustamaan sivun sisältö uudelleen yhtenäisen lukukokemuksen tarjoamiseksi. Kyky käyttää ja päivittää sekä sivun HTML: ää että CSS: ää laajennusten avulla käyttäjät voivat nähdä verkon haluamallaan tavalla.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p> + +<p>Esimerkkejä: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a> , <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a> ja <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store ™</a></p> + +<p><strong>Lisää työkaluja ja uusia</strong> selausominaisuuksia: Lisää uusia ominaisuuksia tehtäväpalkkiin tai luo QR-koodikuvia URL-osoitteista, hyperlinkeistä tai sivutekstistä. Joustavien käyttöliittymäasetusten ja <a href="/en-US/Add-ons/WebExtensions">WebExtensions-sovellusliittymien tehon avulla</a> voit helposti lisätä uusia ominaisuuksia selaimeen. Ja voit parantaa melkein minkä tahansa verkkosivuston ominaisuuksia tai toimintoja, sen ei tarvitse olla verkkosivustosi.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p> + +<p>Esimerkkejä: <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Trello-</a> ja <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">tomaattikellon </a><a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">uimarannat</a></p> + +<p><strong>Pelit</strong> : Tarjoa perinteisiä tietokonepelejä offline-pelitoiminnoilla tai tutustu uusiin pelimahdollisuuksiin; esimerkiksi sisällyttämällä pelattavuus jokapäiväiseen selaamiseen.</p> + +<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p> + +<p>Esimerkkejä: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroidit ponnahdusikkunassa</a> , <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">pasianssin korttipeli Uusi välilehti</a> ja <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a> .</p> + +<p><strong>Lisää kehitystyökaluja</strong> : Voit tarjota verkkokehitystyökaluja yrityksesiä tai kehittää hyödyllisen tekniikan tai lähestymistavan verkkokehitykseen, jonka haluat jakaa. Joko niin, voit parantaa sisäänrakennettuja Firefox-kehittäjätyökaluja lisäämällä uuden välilehden kehittäjän työkalupalkkiin.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p> + +<p>Esimerkkejä: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a> , <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a> ja <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">ax Developer Tools</a></p> + +<p>Firefoxin laajennukset rakennetaan <a href="/en-US/Add-ons/WebExtensions">WebExtensions API: illa</a> , joka on selainten välinen järjestelmä laajennusten kehittämiseksi. Suurelta osin sovellusliittymä on yhteensopiva <a class="external external-icon" href="https://developer.chrome.com/extensions">laajennussovellusliittymän kanssa,</a> jota Google Chrome ja Opera tukevat. Näille selaimille kirjoitetut laajennukset toimivat useimmissa tapauksissa Firefoxissa tai Microsoft Edgessä vain muutamalla <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">muutoksella</a> . API on myös täysin yhteensopiva <a href="/en-US/Firefox/Multiprocess_Firefox">moniprosessisen Firefoxin kanssa</a> .</p> + +<p>Jos sinulla on ideoita tai kysyttävää tai tarvitset apua <a href="https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension">vaeltavien legacy lisäosa WebExtensions API</a> , pääsette on <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-lisät postituslistalle</a> tai <a href="https://chat.mozilla.org/#/room/#addons:mozilla.org">lisäosat huoneen</a> päälle <a href="https://wiki.mozilla.org/Matrix">Matrix</a> .</p> + +<h2 id="Mitä_seuraavaksi">Mitä seuraavaksi?</h2> + +<ul> + <li>Käy läpi yksinkertaisen laajennuksen kehittäminen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">ensimmäisessä laajennuksessa</a> .</li> + <li>Opi laajennuksen rakenteesta laajennuksen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">anatomiassa</a> .</li> + <li>Kokeile esimerkkilaajennuksia <a href="/en-US/Add-ons/WebExtensions/Examples">esimerkkilaajennuksissa</a> .</li> +</ul> diff --git a/files/fi/mozilla/command_line_options/index.html b/files/fi/mozilla/command_line_options/index.html new file mode 100644 index 0000000000..a9aa17a467 --- /dev/null +++ b/files/fi/mozilla/command_line_options/index.html @@ -0,0 +1,269 @@ +--- +title: Komentorivivalitsimet +slug: Mozilla/Command_Line_Options +tags: + - Komentorivi + - Kysymykset ja vastaukset + - Käyttäjän dokumentit + - Laajennukset + - Lisäosat + - Mozillan kehittäminen + - Tarvitsee päivitystä + - XULRunner + - Ylläpito +translation_of: Mozilla/Command_Line_Options +--- +<p><span class="seoSummary">Komentorivivalitsimia käytetään Mozillan sovelluksissa määrittämään erilaisia käynnistysvaihtoehtoja.</span> Voit esimerkiksi käyttää komentorivivalitsimia ohittamaan Profiilinhallinnan ja avata tietyn profiilin, jos käytössä on useita profiileja. Voit myös määrittää, kuinka Mozillan sovellukset käynnistyvät, mitä komponentteja avataan ja mitä komponentit tekevät, kun ne avautuvat. <span class="seoSummary">Tällä sivulla kuvaillaan yleisesti käytetyt komentorivivalitsimet sekä niiden käyttäminen.</span></p> +<h2 id="Syntax_Rules" name="Syntax_Rules">Syntaksi</h2> +<p>Kerrotaan alkuun säännöt, jotka koskevat kaikkia komentorivivalitsimia.</p> +<ul> + <li>Jos komennon parametri sisältää välilyöntejä, täytyy parametri kirjoittaa lainausmerkkien sisään, esimerkiksi "Seppo Surfaaja".</li> + <li>Komennot eivät ole kirjainkokoriippuvaisia.</li> + <li>Komentojen parametrit - profiilinimiä lukuunottamatta - eivät ole kirjainkokoriippuvaisia.</li> + <li>Välilyönnit ( ) erottavat komennot ja parametrit.</li> + <li>Jokainen viestin parametri seuraa sääntöä: <var><code>kenttä</code></var><code>=<var>arvo</var></code>, esimerkiksi: + <ul> + <li><code>to=</code><span class="nowiki"><code>foo@nowhere.net</code></span></li> + <li><code>subject=upea sivu</code></li> + <li><code>attachment=www.mozilla.org</code></li> + <li><code>attachment='<span class="nowiki">file:///c:/testi.txt</span>'</code></li> + <li><code>body=Tutustu upeaan sivuun</code></li> + </ul> + </li> + <li>Useat viestiparametrit erotetaan toisistaan pilkulla (,), esimerkiksi: <code>"<span class="nowiki">to=foo@nowhere.net,subject=upea sivu</span>"</code>. Erottavien pilkkujen edessä tai jäljessä ei voi olla välilyöntiä ( ). Jos yhteen kenttään syötetään useampia arvoja, on nämä arvot kirjoitettava heittomerkkien (') sisään, esimerkiksi: <code>"<span class="nowiki">to='foo@nowhere.net,foo@foo.de',subject=upea sivu</span>"</code> .</li> +</ul> +<h2 id="How_to_use_command_options" name="How_to_use_command_options">Komentorivivalitsimien käyttäminen</h2> +<p>Komentorivivalitsimet syötetään sovelluksen käynnistävän komennon jälkeen. Joillakin valitsimilla on argumentteja. Argumentit syötetään komentorivivalitsimen jälkeen. Joillakin valitsimilla on myös lyhenteitä. Esimerkiksi komentorivivalitsin "-editor" voidaan lyhentää "-edit". Kun lyhenteitä on käytettävissä, ne mainitaan tässä tekstissä. Joissakin tapauksissa valitsimen argumentit on suljettava lainausmerkkeihin, jolloin tämä mainitaan valitsimen kuvauksessa. Myös useampia komentorivivalitsimia voidaan käyttää. Yleisesti valitsimien syntaksi on seuraava:</p> +<pre>sovellus -valitsin -valitsin "argumentti" -valitsin argumentti +</pre> +<h3 id="Esimerkkejä">Esimerkkejä</h3> +<p>Seuraava esimerkki näyttää, kuinka "-ProfileManager" valitsinta käytetään avaamaan Profiilin Hallinta ennen Firefoxin käynnistämistä:</p> +<h4 id="Windows">Windows</h4> +<p>Valitse Windowsin Käynnistä-valikosta Suorita. Kirjoita:</p> +<pre class="eval">firefox -ProfileManager +</pre> +<h4 id="Mac_OS_X">Mac OS X</h4> +<p>Avaa Ohjelmat > Lisäohjelmat. Avaa Pääte ja kirjoita:</p> +<pre class="eval">cd /Applications/Firefox.app/Contents/MacOS +./firefox -ProfileManager +</pre> +<h4 id="Linux">Linux</h4> +<p>Avaa Terminal (Pääte) ja kirjoita:</p> +<pre class="eval">cd <span style="font-style: italic;">Thunderbird</span><var>_ohjelma_hakemisto</var> +./thunderbird -ProfileManager +</pre> +<p>Yllä oleva esimerkki liittää "-ProfileManager" -valitsimen Mozillan Thunderbird-sähköpostiohjelmaan.</p> +<h2 id="User_Profile" name="User_Profile">Käyttäjäprofiili</h2> +<h3 id="-CreateProfile_profile_name" name="-CreateProfile_profile_name"><code>-CreateProfile <var>profiilin_nimi</var></code></h3> +<p>Luo uuden profiilin, jonka nimi on <var>profiilin_nimi</var>, mutta ei käynnistä itse sovellusta. <var>profiilin_nimi</var> ei saa sisältää välilyöntejä ( ).</p> +<pre class="eval">firefox -CreateProfile SeppoSurfaaja +</pre> +<h3 id="-CreateProfile_.22profile_name_profile_dir.22" name="-CreateProfile_.22profile_name_profile_dir.22"><code>-CreateProfile "<var>profiilin_nimi</var> <var>profiilin_kansio</var>"</code></h3> +<p>Luo uuden <var>profiilin_nimi -nimisen profiilin kansioon </var><var>profiilin_kansio, mutta ei käynnistä itse sovellusta</var>. Huomaa, että <var>profiilin_nimi ja profiilin_kansio on suljettu lainausmerkkeihin</var>.</p> +<p>HUOMAA: <var>profiilin_kansio ei saa olla olemassa oleva kansio eikä ennestään saa olla olemassa profiilia profiilin_nimi.</var></p> +<pre class="eval">firefox -CreateProfile "SeppoSurfaaja c:\internet\moz-profile" +</pre> +<h3 id="-ProfileManager_or_-P" name="-ProfileManager_or_-P"><code>-ProfileManager</code></h3> +<p>Käynnistä Profiilin Hallinta. Lyhyt muoto: <strong>-P</strong> ilman profiilin nimeä.</p> +<h3 id="-P_.22profile_name.22" name="-P_.22profile_name.22"><code>-P "<var>profiilin_nimi</var>"</code></h3> +<p>Ohita Profiilin Hallinta ja käynnistä sovellus käyttäen profiilia <var>profiilin_nimi</var>. Käytännöllinen vaihtoehto, kun työskennellään useiden profiilien kanssa. Huomaa, että <var>profiilin_nimi on kirjainkokoriippuvainen</var>. Jos profiilia ei määritellä argumenttina, käynnistyy Profiilien hallinta. Linuxeissa, joissa on ohjelman versio 7.x tai vanhempi, on käytettävä isoa P-kirjainta (P), sillä pieni P-kirjain (p) käynnistää ohjelman Puhdistustilassa (muistin ja muistivuotojen tutkimiseen). Muilla alustoilla käyvät molemmat vaihtoehdot.</p> +<pre class="eval">firefox -P "Seppo Surfaaja" +</pre> +<h3 id="-profile_.22.2Fpath.2Fto.2Fprofile.22" name="-profile_.22.2Fpath.2Fto.2Fprofile.22"><code>-profile "<var>profiilin_polku</var>"</code></h3> +<p>Käynnistä käyttäen profiilia, joka löytyy polusta "profiilin_polku". Vain <strong>Firefox</strong>, <strong>Thunderbird</strong> ja <strong>SeaMonkey2.x</strong>.</p> +<p><code>"profiilin_polku"</code> voi olla joko absoluuttinen polku (<code>"<var>/path/to/profile</var>"</code>) tai suhteellinen polku <code>("<var>path/to/profile</var>"</code>).</p> +<div class="note"> + <strong>Huomaa: </strong>Käyttöjärjestelmässä<strong> </strong>Mac OS X suhteellisen polun määrittämistä ei tueta Firefoxin versiossa 4.0 tai uudemmissa. Katso {{ bug(673955) }}.</div> +<h3 id="-no-remote" name="-no-remote"><code>-no-remote</code></h3> + +<p>Salli sovelluksen useamman kopioin olla avoimena yhtaikaa.</p> +<pre class="eval">firefox -no-remote -P "ToinenProfiili" +</pre> +<div class="note"> + <strong>Huomaa: </strong>Firefoxin versiosta 9 alkaen tämä ei kaikilla alustoilla todella tarkoita sitä, mitä nimi antaa ymmärtää. Esimerkiksi tällä valitsimella käynnistetty instanssi ei hyväksy tai lähetä etäkomentoja, katso {{ bug(650078) }}. Tämä tarkoittaa sitä, että tällaisia instansseja ei voi uudelleenkäyttää. Myös kun tätä valitsinta käytetään, uusi instanssi luodaan joka tapauksessa.</div> + +<h3 id="-migration" name="-migration"><code>-migration</code></h3> +<p>Käynnistää ohjelman alussa Ohjatun Tuonnin.</p> +<h3 id="-override_.2Fpath.2Fto.2Foverride.ini" name="-override_.2Fpath.2Fto.2Foverride.ini"><code>-override <em>/path/to/</em>override.ini</code></h3> +<p>Lataa määritetyn <code>override.ini</code> -tiedoston, ja ohittaa tiedoston <code>application.ini</code> ({{ Source("browser/app/application.ini") }}). Tätä voidaan käyttää estämään Ohjattu Tuonti ohjelman käynnistyksessä lataamalla <code>override.ini</code>. Vain <strong>Firefox</strong>.</p> +<pre class="eval">[XRE] +EnableProfileMigrator=0 +</pre> +<h2 id="Browser" name="Browser">Selain</h2> +<h3 id="-browser" name="-browser"><code>-browser</code></h3> +<p>Käynnistä sovellus käyttäen selain-komponenttia. Vain <strong>Firefox</strong> ja <strong>SeaMonkey</strong>.</p> +<h3 id="-url_URL" name="-url_URL"><code>-url <var>URL</var></code></h3> +<p><var>Avaa URL</var> uudessa välilehdessä tai ikkunassa, riippuen selaimen asetuksista. <code>-url</code> -valitsinta ei välttämättä tarvitse käyttää. Voit listata useita URL:ia, kun ne erotetaan välilyönnillä. Vain <strong>Firefox</strong> ja <strong>SeaMonkey</strong>.</p> +<div class="note"> + <strong>Huomaa: </strong>Kun avaat useita URL:ia, Firefox avaa ne aina välilehtinä uudessa ikkunassa.</div> +<pre class="eval">firefox www.mozilla.com +firefox www.mozilla.com developer.mozilla.org +</pre> +<h3 id="-private" name="-private"><code>-private</code></h3> +<p>Avaa luotavan Firefox-istunnon pysyvästi Yksityinen Selaus -tilassa. Vain <strong>Firefox 3.6</strong> ja uudemmat.</p> +<p>Ei ole käytettävissä Ubuntussa <strong>Firefoxin versiossa 20 </strong>ja uudemmissa.</p> +<h3 id="-private-toggle" name="-private-toggle"><code>-private-window</code></h3> +<p>Avaa uuden ikkunan Yksityinen Selaus -tilassa käynnissä olevaan Firefoxin instanssiin. Vain <strong>Firefox 20</strong> ja uudemmat.</p> +<h3 id="-private-toggle" name="-private-toggle"><code>-private-window URL</code></h3> +<p>Avaa URL:n uudessa Yksityinen Selaus -ikkunassa. Jos Yksityinen Selaus -ikkuna on jo avoinna, avataan uusi välilehti olemassa olevaan ikkunaan.<strong> </strong>Vain <strong>Firefox 29 </strong>ja uudemmat. Ei toimi <strong>Firefox 31:ssä</strong> linux mint 17:llä - aiheuttaa sivun avautumisen normaaliin selausikkunaan.</p> +<h3 id="-new-tab_URL" name="-new-tab_URL"><code>-new-tab <var>URL</var></code></h3> +<p>Avaa <var>URL:n</var> uudessa välilehdessä. Vain <strong>Firefox</strong> ja <strong>SeaMonkey2.x</strong>.</p> +<h3 id="-new-window_URL" name="-new-window_URL"><code>-new-window <var>URL</var></code></h3> +<p>Avaa <var>URL:n uudessa ikkunassa</var>. Vain <strong>Firefox</strong> ja <strong>SeaMonkey2.x</strong>.</p> +<h3 id="-search_term" name="-search_term"><code>-search hakulauseke</code></h3> +<p><var>Etsi merkkijonoa hakulauseke oletushakukoneellasi</var>. Vain <strong>Firefox</strong> ja <strong>SeaMonkey 2.1</strong> ja uudemmat.</p> +<h3 id="-preferences" name="-preferences"><code>-preferences</code></h3> +<p>Avaa Asetukset -ikkunan. Vain <strong>Firefox</strong> ja <strong>SeaMonkey2.x</strong>.</p> +<h3 id="-setDefaultBrowser" name="-setDefaultBrowser"><code>-setDefaultBrowser</code></h3> +<p>Asettaa sovelluksen järjestelmän oletusselaimeksi. Vain <strong>Firefox</strong>.</p> +<h2 id="Mail.2FNews" name="Mail.2FNews">Sähköposti/Uutiset</h2> +<h3 id="-mail" name="-mail"><code>-mail</code></h3> +<p>Käynnistää Sähköposti-komponentin. Vain <strong>Thunderbird</strong> ja <strong>SeaMonkey</strong>.</p> +<h3 id="-news_news_URL" name="-news_news_URL"><code>-news</code> <var>uutisten_URL</var></h3> +<p>Käynnistää Uutiset-komponentin. Jos <var>uutisen_URL</var> (vapaaehtoinen) on määritelty, avaa määritellyn uutisryhmän. Vain <strong>Thunderbird</strong> ja <strong>SeaMonkey</strong>.</p> +<pre class="eval">thunderbird -news <span class="nowiki">news://palvelin/ryhmä</span> +</pre> +<h3 id="-compose_message_options" name="-compose_message_options"><code>-compose <var>viestin_asetukset</var></code></h3> +<p>Käynnistää Kirjoita-komponentin . Katso <a href="#Syntax_Rules">Syntaksi</a>. Vain <strong>Thunderbird</strong> ja <strong>SeaMonkey</strong>.</p> +<pre class="eval">thunderbird -compose "<span class="nowiki">to=foo@nowhere.net</span>" +</pre> +<h3 id="-addressbook" name="-addressbook"><code>-addressbook</code></h3> +<p>Käynnistää Osoitekirja-komponentin. Vain <strong>Thunderbird</strong> ja <strong>SeaMonkey</strong>.</p> +<h3 id="-options" name="-options"><code>-options</code></h3> +<p>Käynnistää Asetukset-ikkunan. Vain <strong>Thunderbird</strong>.</p> +<h3 id="-offline" name="-offline"><code>-offline</code></h3> +<p>Käynnistää sovelluksen yhteydettömässä tilassa. Vain <strong>Thunderbird</strong> ja <strong>SeaMonkey</strong>.</p> +<h3 id="-setDefaultMail" name="-setDefaultMail"><code>-setDefaultMail</code></h3> +<p>Asettaa sovelluksen järjestelmän oletussähköpostiohjelmaksi. Vain <strong>Thunderbird</strong>.</p> +<h2 id="Calendar" name="Calendar">Kalenteri</h2> +<h3 id="-calendar" name="-calendar"><code>-calendar</code></h3> +<p>Avaa sovelluksen Kalenteri-komponentin. Vain <strong>Sunbird</strong>.</p> +<h3 id="-subscribe_URL_or_-url_URL" name="-subscribe_URL_or_-url_URL"><code>-subscribe <var>URL</var></code> tai <code>-url <var>URL</var></code></h3> +<p>Tilaa annetun <var>URL:n</var>. Vain <strong>Sunbird</strong>.</p> +<h3 id="-showdate_date" name="-showdate_date"><code>-showdate päivämäärä</code></h3> +<p>Näyttää määritetyn päivän kalenterin. Vain <strong>Sunbird</strong>.</p> +<pre class="eval">sunbird -showdate 08/04/2008 +</pre> +<h2 id="Other_Components" name="Other_Components">Muut komponentit</h2> +<h3 id="-editor_URL_or_-edit_URL" name="-editor_URL_or_-edit_URL"><code>-editor <var>URL</var></code> tai <code>-edit <var>URL</var></code></h3> +<p>Avaa editorin (Composer) <var>annetulle URL.lle</var> (<var>missä URL on vapaaehtoinen</var>). Vain <strong>SeaMonkey</strong>.</p> +<pre class="eval">seamonkey -edit www.mozilla.org +</pre> +<h3 id="-jsconsole" name="-jsconsole"><code>-jsconsole</code></h3> +<p>Käynnistää sovelluksen ja avaa <a href="/docs/Error_Console" title="Error_Console">Virhekonsolin</a>.</p> +<div class="warning"> + <p>Virhekonsoli on poistettu käytöstä Firefoxissa, ja sen saa esiin vain, jos asettaa ominaisuuden <code>devtools.errorconsole.enabled</code> arvoon <code>true</code>. Käytä sen sijaan <a href="/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web konsolia </a>web-sisällölle, tai <a href="/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Selainkonsolia</a> chrome-sisällölle.</p> + <p>Alkaen Firefoxin versiosta 28, -jsconsole käynnistää Firefoxin ja avaa Selainkonsolin.</p> +</div> +<h3 id="-inspector_URL" name="-inspector_URL"><code>-inspector <var>URL</var></code></h3> +<p>Käynnistää sovelluksen <a href="/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspectorin</a> kanssa, jos se on asennettu, ja tutkii määritetyn URL:n (<var>missä URL</var> on vapaaehtoinen).</p> +<h3 id="-venkman" name="-venkman"><code>-venkman</code></h3> +<p>Käynnistää sovelluksen JavaScript debuggeri <a href="/docs/Venkman" title="Venkman">Venkman</a>in kanssa, jos se on asennettu.</p> +<h3 id="-venkman" name="-venkman"><code>-purgecaches</code></h3> +<p>Geckolla (layout-moottorilla) on javascript-välimuisti, jota ei resetoida käynnistyksessä. Tämä valitsin tyhjentää sen.</p> +<h3 id="-chat"><code>-chat</code></h3> +<p>Käynnistää sevelluksen IRC-asiakkaan, <a class="link-https" href="https://addons.mozilla.org/firefox/addon/16">ChatZillan</a> kanssa, jos se on asennettu.</p> +<h2 id="XULRunner" name="XULRunner">XULRunner</h2> +<h3 id="-app_.2Fpath.2Fto.2Fapplication.ini" name="-app_.2Fpath.2Fto.2Fapplication.ini"><code>-app <em>/path/to/</em>application.ini</code></h3> +<p>Käynnistää uuden prosessin <a href="/docs/XULRunner" title="XULRunner">XULRunner</a> sovelluksesta polussa <em>path/to</em>. Toimii myös Firefoxin versiolla 3 ja uudemmilla.</p> +<h3 id="--register-global"><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">--register-global</span></h3> +<p><span style="line-height: 21px;">Rekisteröi XULRunnerin järjestelmään kaikille käyttäjille. Komento on suoritettava Järjestelmänvalvoja / admin / root -oikeuksilla.</span></p> +<h3 id="--register-user"><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">--register-user</span></h3> +<p><span style="line-height: 21px;">Rekisteröi XULRunnerin yksittäiselle käyttäjälle.</span></p> +<h3 id="--unregister-global"><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">--unregister-global</span></h3> +<p><span style="line-height: 21px;">Poistaa XULRunnerin rekisteröinnin kaikilta käyttäjiltä.</span></p> +<h3 id="--unregister-user"><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">--unregister-user</span></h3> +<p><span style="line-height: 21px;">Poistaa XULRunnerin rekisteröinnin yksittäiseltä käyttäjältä.</span></p> +<h3 id="--install-app_pathtomyapplication.(xpixulapp)"><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">--install-app path/to/myapplication.(xpi|xulapp)</span></h3> +<p><span style="line-height: 1.572;">Asentaa XULRunner-sovelluksen järjestelmän polkuun path/to. Sovellukset asennetaan järjestelmäsi oletussijaintiin (program files|Applications|usr/lib) polkuun julkaisijannimi/SovelluksenNimi. Sovellukset voidaan poistaa järjestelmäsi tavanomaisilla menetelmillä.</span></p> +<pre class="eval" style="margin-top: 0px; margin-bottom: 1.286em; font-size: 14px;">"C:\Program Files\Mozilla XULRunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "C:\Users\Billdo\Desktop\myapplication.xpi"</pre> +<pre><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">/opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/Desktop/myapplication.xulapp</span></pre> +<pre><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"></span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">/Library/Frameworks/XUL.framework/xulrunner-bin --install-app ~/Desktop/myapplication.xpi</span></pre> +<h2 id="Chrome" name="Chrome">Chrome</h2> +<h3 id="-chrome_chrome_URL" name="-chrome_chrome_URL"><code>-chrome <var>chrome_URL</var></code></h3> +<p>Lataa määritetyn chromen.</p> +<pre class="eval">firefox -chrome <a class="external" rel="freelink">chrome://inspector/content</a> +</pre> +<h3 id="-register_chrome_URL" name="-register_chrome_URL"><code>-register <var>chrome_URL</var></code></h3> +<p>Rekisteröi määritetyn chromen, mutta ei käynnistä sovellusta.</p> +<h2 id="Add-ons" name="Add-ons">Lisäosat</h2> +<p>{{ gecko_minversion_note("1.9.2", "-install-global-extension ja -install-global-theme on poistettu Geckon versiosta 1.9.2 ja uudemmista.") }}</p> +<h3 id="-install-global-extension_.2Fpath.2Fto.2Fextension" name="-install-global-extension_.2Fpath.2Fto.2Fextension"><code>-install-global-extension <var>/path/to/extension</var></code></h3> +<p>Asentaa laajennuksen sovelluksen hakemistoon. Parametri on polku laajennukseen. Komennon suoritus vaatii järjestelmänvalvojan oikeudet.</p> +<h3 id="-install-global-theme_.2Fpath.2Fto.2Ftheme" name="-install-global-theme_.2Fpath.2Fto.2Ftheme"><code>-install-global-theme <var>/path/to/theme</var></code></h3> +<p>Sama kuin edellinen, mutta teemoille. Komennon suoritus vaatii järjestelmänvalvojan oikeudet.</p> +<div class="note"> + <p><strong>Huomaa: </strong>Firefoxin versiosta 2.0.0.7, on <code>-install-global-extension</code> ja <code>-install-global-theme</code> valitsimien argumentit rajoitettu sallimaan asennuksen vain paikallisilta levyiltä tai liitetyistä asemista. Asentaminen suoraan verkkojaosta ei enää onnistu.</p> +</div> +<h3 id="-safe-mode" name="-safe-mode"><code>-safe-mode</code></h3> +<p>Käynnistää sovelluksen tämän käynnistyskerran kaikki laajennukset estettyinä (Laajennuksia ei ladata, mutta niitä ei pysyvästi estetä).</p> +<h2 id="Locale" name="Locale">Kieliversio</h2> +<h3 id="-UILocale_locale" name="-UILocale_locale"><code>-UILocale <var>kieliversio</var></code></h3> +<p>Käynnistää sovelluksen käyttäen kieliversio-parametrilla määritettyjä kieliresursseja.</p> +<pre class="eval">firefox -UILocale en-US +</pre> +<h2 id="Remote_Control" name="Remote_Control">Etähallinta</h2> +<h3 id="-remote_remote_command" name="-remote_remote_command"><code>-remote <var>etä_komento</var></code></h3> +<p>Suorittaa komennon <var>etä_komento jo käynnissä olevassa sovelluksen prosessissa</var> (katso <a class="external" href="http://www.mozilla.org/unix/remote.html">remote control</a>).</p> +<pre class="eval">firefox -remote "openURL(www.mozilla.org, new-tab)" +</pre> +<h2 id="Miscellaneous" name="Miscellaneous">Sekalaiset</h2> +<h3 id="-tray" name="-tray"><code><strong>-tray</strong></code></h3> +<p>Käynnistää sovelluksen pienennettynä ilmaisinalueelle (system tray). Käytännöllinen automaattisen käynnistyksen yhteydessä.</p> +<h3 id="-silent" name="-silent"><code>-silent</code></h3> +<p>Ei avaa oletusikkunaa. Käytännöllinen niiden komentorivivalitsimien kanssa, jotka avaavat oman ikkunan, mutta eivät estä oletusikkunaa aukeamasta. Vain <strong>Firefox</strong>, <strong>Thunderbird3.x</strong> ja <strong>SeaMonkey2.x</strong>.</p> +<h3 id="-console" name="-console"><code>-console</code></h3> +<p>Käynnistää sovelluksen ja avaa Debugging consolen. Huomaa: Vain Windows.</p> +<div class="note"> + <p>Jos haluat konsolisanomien ilmestyvän siihen konsoliin, jota käytit ohjelman käynnistämiseen, voit käyttää <a href="https://github.com/matthewkastor/Redirector" title="https://github.com/matthewkastor/Redirector">Gecko Console Redirectoria</a>. Esikäännetyt binääritiedostot ovat saatavilla zip-pakettina: <a href="https://github.com/matthewkastor/Redirector/archive/master.zip" title="https://github.com/matthewkastor/Redirector/archive/master.zip">https://github.com/matthewkastor/Redirector/archive/master.zip</a> kansiossa <code>Redirector-master\Gecko\Console Redirector\bin\Release</code> Kopioi kaikki dll:t ja exe-tiedosto haluamaasi paikkaan. Suorita sen jälkeen <code>Console Redirector.exe /?</code></p> +</div> +<h3 id="-h_or_-help_or_-.3F" name="-h_or_-help_or_-.3F"><code>-h</code> tai <code>-help</code> tai <code>-?</code></h3> +<p>Tulostaa luettelon käytettävissä olevista komentorivivalitsimista. Huomaa, että Windowsissa tämä toimii vain edelleenohjauksen, kuten <code><span class="nowiki">|more</span></code> , kanssa ({{ Bug(355889) }}). Tämä valitsin toimii ainoastaan komentorivillä.</p> +<h3 id="-v_or_-version" name="-v_or_-version"><code>-v</code> tai <code>-version</code></h3> +<p>Tulostaa sovelluksen version. Huomaa, että Windowsissa tämää toimii vain edelleenohjauksen, kuten <code><span class="nowiki">|more</span></code> , kanssa ({{ Bug(355889) }}). Tämä valitsin toimii ainoastaan komentorivillä.</p> +<h3 id="-osint" name="-osint"><code>-osint</code></h3> +<p>Kertoo sovellukselle,että se käynnistetään tietystä käyttöjärjestelmän käyttöliittymästä (OS shell). Tätä ei tulisi määritellä, ellei kutsuja tarjoa kaikkia käyttöliittymän toiminnallisuuksia, kun sovellus käynnistetään ({{ Bug(384384) }}).</p> +<h3 id="-requestPending" name="-requestPending"><code>-requestPending</code></h3> +<p>Kertoo sovellukselle, että Windows DDE -pyyntö tulee pyytämään saman url:n avaamista, kuin mikä on määritelty komentorivillä. Tätä ei tulisi määritellä, ellei kutsuja tarjoa kaikkia käyttöliittymän toiminnallisuuksia, kun sovellus käynnistetään ({{ Bug(354005) }}).</p> +<h3 id="X11_valitsimet">X11 valitsimet</h3> +<p>Nämä valitsimet ovat käytössä ainoastaan sovelluksessa, joka on koottu ja jota ajetaan X11/X.org näyttö- ja ikkunointijärjestelmässä, joita on käytössä Linuxissa ja muissa Unix-pohjaisissa järjestelmissä.</p> +<h4 id="--displayDISPLAY">--display=DISPLAY</h4> +<p>Aseta käytettäväksi X-näyttö.</p> +<h4 id="--classWM_CLASS">--class=WM_CLASS</h4> +<p>Aseta sovelluksen luoma X11 -ikkunan WM_CLASS -resurssiluokka.</p> +<h4 id="--sync">--sync</h4> +<p>Aseta X-kutsut synkronisiksi.</p> +<h4 id="--g-fatal-warnings">--g-fatal-warnings</h4> +<p>Aseta kaikki varoitukset fataaleiksi.</p> +<h2 id="Other_options_need_to_be_documented" name="Other_options_need_to_be_documented">Muita valitsimia, jotka tarvitsevat dokumentointia</h2> +<ul> + <li><code>-print-xpcom-dir</code></li> + <li><code>-print-xpcom-dirlist</code></li> + <li><code>-kill</code></li> + <li><code>-killAll</code></li> + <li><code>-f</code></li> + <li><code>-ftimeout</code></li> + <li><code>-fwait</code></li> + <li><code>-unsetDefaultMail</code></li> + <li><code>-foreground</code></li> + <li><code>-new-instance</code></li> + <li>GTK valitsimet</li> +</ul> +<h2 id="References" name="References">Referenssit</h2> +<ul> + <li><a href="/docs/Chrome/Command_Line" title="Chrome/Command_Line">Chrome: Command Line</a></li> + <li><a class="external" href="http://www-archive.mozilla.org/quality/browser/front-end/testcases/cmd-line/">Test Documentation for Command-line Features</a> (mozilla.org)</li> + <li>{{ Source("toolkit/xre/nsAppRunner.cpp") }}</li> + <li>{{ Source("browser/components/nsBrowserContentHandler.js") }}</li> + <li>{{ Source("suite/browser/nsBrowserContentHandler.js") }}</li> + <li>{{ Source("mail/components/nsMailDefaultHandler.js") }}</li> + <li><a class="link-https" href="https://wiki.mozilla.org/Installer:Command_Line_Arguments">Installer command line options</a></li> +</ul> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Alkuperäisen dokumentitn tiedot</h2> + <ul> + <li>Tekijät: Ben Goodger, Steffen Wilberg, Seth Spitzer, Daniel Wang</li> + <li>Tekijänoikeusinformaatio: Osa tämän sisällön tekijänoikeuksista on © 1998–2007 yksittäisillä mozilla.org-avustajilla; sisältö on käytettävissä lisenssillä Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Yksityiskohdat</a>.</li> + </ul> +</div> +<p> </p> diff --git a/files/fi/mozilla/helppokäyttöisyys/index.html b/files/fi/mozilla/helppokäyttöisyys/index.html new file mode 100644 index 0000000000..33dcc87a3f --- /dev/null +++ b/files/fi/mozilla/helppokäyttöisyys/index.html @@ -0,0 +1,13 @@ +--- +title: Helppokäyttöisyys ja Mozilla +slug: Mozilla/Helppokäyttöisyys +tags: + - Finnish - Suomi + - Helppokäyttöisyys + - Mozilla + - localozation +translation_of: Mozilla/Accessibility +--- +<p><span class="seoSummary"><a href="/fi-FI/docs/Accessibility" title="/fi-FI/docs/Accessibility">Helppokäyttöisyys</a> - ajattelutapa jonka mukaan ohjelmistot (ja samankaltaiset) tulisi suunnitella käytännölliseksi sekä yksinkertaiseksi käyttää myös ihmisille joilla on invaliditeetistä tai oppimishäiriöistä johtuvia vaikeuksia ohjelmien käytössä. Mozilla pyrkii valmistamaan ohjelmistonsa mahdollisimman yksinkertaiseksi käyttää; allaolevissa dokumenteissa kuvataan erilaisia tapoja tämän päämäärän toteuttamiseksi.</span> Nämä esitelmät antavat lukijalle Mozilla-kohtaisia näkemyksiä helppokäyttöisyydestä.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/fi/mozilla/index.html b/files/fi/mozilla/index.html new file mode 100644 index 0000000000..edba954db8 --- /dev/null +++ b/files/fi/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<p>The articles below include content about downloading and building Mozilla code. In addition, you'll find helpful articles about how the code works, how to build add-ons for Mozilla applications, and the like.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/fi/mozilla/persona/browser_compatibility/index.html b/files/fi/mozilla/persona/browser_compatibility/index.html new file mode 100644 index 0000000000..f5ae812ee0 --- /dev/null +++ b/files/fi/mozilla/persona/browser_compatibility/index.html @@ -0,0 +1,80 @@ +--- +title: Selainyhteensopivuus +slug: Mozilla/Persona/Browser_compatibility +tags: + - BrowserID + - Persona + - tuetut + - tuetut selaimet +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +<h2 id="Tuetut_selaimet">Tuetut selaimet</h2> +<p>Persona kehitetään, testataan ja on tuettu seuraavilla selaimilla. Personan alustariippumattoman JavaScript-kirjaston ansiosta käyttäjien ei tarvitse asentaa lisäosia Personan käyttämiseksi.</p> +<table> + <tbody> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;">Työpöytäselaimet</th> + </tr> + <tr> + <th scope="row"><strong>Internet Explorer</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup></td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Uusin vakaa, Beta-, Aurora-, Nightly- ja laajennetun tuen versiot<br> + Edellinen vakaa versio</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Uusin vakaa versio</td> + </tr> + <tr> + <th scope="row"><strong>Safari</strong></th> + <td colspan="2" style="background-color: #8ae234;">Uusin vakaa versio</td> + </tr> + <tr> + <th scope="row"><strong>Opera</strong></th> + <td colspan="2" style="background-color: #8ae234;">Uusin vakaa versio <sup>‡</sup></td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>iOS-selaimet</strong></th> + </tr> + <tr> + <th scope="row"><strong>Mobile Safari</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x</td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Android-selaimet</strong></th> + </tr> + <tr> + <th scope="row"> + <p>Oletusselain</p> + </th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.x — 4.x</td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Uusin vakaa, Beta-, Aurora-, Nightly- ja laajennetun tuen versiot<br> + Edellinen vakaa versio</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Uusin vakaa versio</td> + </tr> + </tbody> +</table> +<p><sup>*</sup>: Windows XP. <sup>†</sup>: Windows Vista ja Windows 7. <sup>‡</sup>: Kunhan aika sallii.</p> +<h2 id="Selaimet_joita_ei_tueta">Selaimet, joita ei tueta</h2> +<ul> + <li>Internet Explorerin versiot 6.0 ja 7.0 eivät ole tuettuja. Käyttäjiä pyydetään päivittämään selaimensa</li> + <li>Google Chrome Frame ei ole tuettu ja ei myöskään toimi. Tuki saattaa tulla myöhemmin (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Issue #796</a>).</li> + <li>Muut iOS-selaimet eivät toimi. Niitä saatetaan kuitenkin tukea myöhemmin (<a href="https://github.com/mozilla/browserid/issues/1870" title="https://github.com/mozilla/browserid/issues/1870">Issue #1870</a>, <a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Issue #2034</a>).</li> +</ul> +<h2 id="Muut_selaimet">Muut selaimet</h2> +<p>Vaikka selain ei olisi virallisesti tuettu, mikä tahansa selain, joka tukee sekä {{ domxref("window.postMessage()") }} että {{ domxref("Storage", "localStorage") }} -tekniikoita pitäisi toimia. Nämä sovellusrajapinnat ovat olleet kenen tahansa saatavilla maaliskuusta 2010 lähtien.</p> +<h2 id="Tunnettuja_ongelmia">Tunnettuja ongelmia</h2> +<ul> + <li>Selaimen pitää hyväksyä kolmannen osapuolen evästeet täyden toiminnan takaamiseksi (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Issue #1352</a>).</li> + <li>Android 2.x:n käyttäjät eivät välttämättä pysty käyttämään palvelua, jos heillä ei ole käytössän oletusselainta (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Issue #1854</a>).</li> + <li>Internet Explorer 9:llä ei välttämättä pysty kirjautumaan kaikille sivustoille.</li> +</ul> diff --git a/files/fi/mozilla/persona/index.html b/files/fi/mozilla/persona/index.html new file mode 100644 index 0000000000..d240b55052 --- /dev/null +++ b/files/fi/mozilla/persona/index.html @@ -0,0 +1,141 @@ +--- +title: Persona +slug: Mozilla/Persona +translation_of: Archive/Mozilla/Persona +--- +<div class="callout-box"> + <p><strong>Pysy kosketuksessa ja hae opastusta!</strong></p> + <p>Seuraa <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">blogiamme</a>, liity <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">sähköpostituslistallemme</a>, tai löydä meidät osoitteessa <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC"> IRC:ssä</a>.</p> +</div> +<p><a href="https://login.persona.org/" title="https://login.persona.org/">Mozilla Persona</a> on eri webbiselaimissa toimiva webbikirjautumisjärjestelmä, joka on helposti käytettävä ja käyttöönotettava. Se toimii <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">kaikissa tunnetuissa selaimissa</a>, ja voit <a href="/en-US/docs/Persona/Quick_Setup" title="/en-US/docs/Persona/Quick_Setup">aloittaa tänään</a>.</p> +<p>Miksi sinun tulisi käyttää Personaa webbisivullasi?</p> +<ol> + <li><strong>Persona poistaa täysin tarpeen sivustokohtaisiin salasanoihin</strong> vapauttaen käyttäjät ja webbisivustot salasanojen luomisen, hallinnoinnin ja turvallisen tallentamisen taakasta.</li> + <li><strong>Persona on helppo käyttää.</strong> Vain kahdella napsautuksella Persona-käyttäjä voi kirjautua uudelle sivustolle kuten <a href="http://voo.st" title="http://voo.st">Voost</a> tai <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a> ohittaen tilin luomiseen liittymän hankauksen.</li> + <li><strong>Persona on helposti toteutettava</strong><strong>. </strong>Kehittäjät voivat lisätä Personan sivustolle yhtenä iltapäivänä.</li> + <li>Parasta kaikista, <strong>ei mitään sisäänlukitusta</strong>. Kehittäjät saavat vahvistetut sähköpostiosoitteet kaikista käyttäjistään, ja käyttäjät voivat käyttää sähköpostiosoitteita Personan kanssa.</li> +</ol> +<p>Plus, Personasta tulee aina parempi: sen rakenne perustuu <strong>avoimeen, hajautettuun yhteyskäytäntöön</strong> joka on suunniteltu sallimaan <strong>suoran vuorovaikutuksen selaimiin</strong> ja se on <strong>sähköpostitarjoajien aktiivisesti tukema</strong><strong>. </strong>Sivustot, jotka käyttävät Personaa tänään, kokevat automaattisesti nuo parannukset ilman, että koodia tarvitsee mitenkään vaihtaa.</p> +<div class="note"> + <strong>Huomaa:</strong> Persona on aktiivissa kehitysvaiheessa. Seuraa <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">blogiamme</a> oppiaksesi uusista ominaisuuksista, tai liity <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">postituslistallemme</a> ja tarjoa palautettasi!</div> +<h2 id="Personan_käyttäminen_webbisivustollasi">Personan käyttäminen webbisivustollasi</h2> +<div class="topicpage-table"> + <div> + <div class="section"> + <h3 id="Kuinka_aloitetaan">Kuinka aloitetaan</h3> + <dl> + <dt> + <a href="/en-US/docs/Persona/Why_Persona" title="BrowserID/Why_BrowserID">Miksi Persona?</a></dt> + <dd> + Opettele perusteet Personan käytölle sivustollasi ja millainen se on vertailtaesa muihin tunnistus- ja todennusjärjestelmiin.</dd> + <dt> + <a href="/en-US/docs/Persona/Quick_Setup" title="BrowserID/Quick setup">Pika-asennus</a></dt> + <dd> + Nopea läpikäynti näyttää kuinka Persona lisätään webbisivustollesi.</dd> + </dl> + </div> + <div class="section"> + <h3 id="Persona_API_-lähdeviite">Persona API -lähdeviite</h3> + <dl> + <dt> + <a href="/en-US/docs/DOM/navigator.id" title="navigator.id">Navigator.id API -lähdeviite</a></dt> + <dd> + Viite <code>navigator.id</code>-objektiin, jota web-kehittäjät voivat käyttää Personan integroimiseksi sivustoihinsa.</dd> + <dt> + <a href="/en-US/docs/Persona/Remote_Verification_API" title="BrowserID/Remote_Verification_API">Verification API -lähdeviite</a></dt> + <dd> + Viite etätodentamissovellusohjelmointiliittymään (API) osoitteessa <code>https://verifier.login.persona.org/verify</code>.</dd> + </dl> + </div> + </div> + <div> + <div class="section"> + <h3 id="Oppaita">Oppaita</h3> + <dl> + <dt> + <a href="/en-US/docs/Persona/Security_Considerations" title="BrowserID/Security considerations">Turvallisuusarviointeja</a></dt> + <dd> + Käytäntöjä ja tekniikoita Persona-käyttösi tekemiseksi turvalliseksi.</dd> + <dt> + <a href="/en-US/docs/Persona/Browser_compatibility" title="/Browser_compatibility">Selainyhteensopivuus</a></dt> + <dd> + Opi tarkkaan, että mitkä selaimet tukevat Personaa.</dd> + <dt> + <a href="/en-US/docs/Persona/Internationalization" title="/Internationalization">Kotoistaminen</a></dt> + <dd> + Opi kuinka Persona käsittelee eri kieliä.</dd> + </dl> + </div> + <div class="section"> + <h3 id="Resurssit">Resurssit</h3> + <dl> + <dt> + <a class="link-https" href="/en-US/docs/Persona/Libraries_and_plugins" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">Kirjastot ja lisäosat</a></dt> + <dd> + Löydä suosikkiohjelmointikielesi paikalleen pudotettavan kirjasto, webbiympäristö, blogi, tai sisältöhallintajärjestelmä.</dd> + <dt> + <a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">Persona-keittokirja</a></dt> + <dd> + Esimerkkikoodia Persona-sivustoille. Sisältää koodipätkiä ohjelmointikielisssä C# (MVC3), PHP, Node.JS, ja muissa.</dd> + <dt> + <a href="/en-US/docs/persona/branding" title="persona/branding">Tavaramerkkiresurssit</a></dt> + <dd> + Kirjautumispainikkeet ja muu grafiikka, joka auttaa esittelemään Personan käyttäjillesi.</dd> + </dl> + </div> + </div> +</div> +<div class="topicpage-table"> + <div class="section"> + <h2 id="Tietoa_tunnistustarjoajille">Tietoa tunnistustarjoajille</h2> + <p>Jos olet sähköpostipalvelutarjoaja tai toinen tunnistuspalvelutarjoaja, tarkista alla olevat linkit siitä, kuinka tulla Persona-tunnistuspalvelutarjoajaksi.</p> + <dl> + <dt> + <a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">IdP-yleiskatsaus</a></dt> + <dd> + Ylemmän tason näkymä Persona-tunnistuspalvelutarjoajiin.</dd> + <dt> + <a href="/en-US/docs/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">IdP:n toteuttaminen</a></dt> + <dd> + Yksityiskohtainen opas IdP-tarjoajaksi tulemisen teknisistä yksityiskohdista.</dd> + <dt> + <a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd> + Yleiskatsaus <code>.well-known/browserid</code>-tiedoston rakenteeseen ja käyttöön, jota tiedostoa IdP-palvelutarjoajat käyttävät mainostamaan tukeaan yhteyskäytännölle.</dd> + </dl> + </div> + <div class="section"> + <h2 id="Persona-hanke">Persona-hanke</h2> + <dl> + <dt> + <a href="/en-US/docs/Persona/Glossary" title="navigator.id">Sanasto</a></dt> + <dd> + BrowserID- ja Persona-terminologia määriteltynä.</dd> + <dt> + <a href="/en-US/docs/Persona/FAQ" title="BrowserID/FAQ">UKK</a></dt> + <dd> + Vastauksia tavallisiin kysymyksiin.</dd> + <dt> + <a href="/en-US/docs/Persona/Protocol_Overview" title="BrowserID/Protocol overview">Yleiskatsaus yhteyskäytäntöön</a></dt> + <dd> + Keskitason tekninen yleiskatsaus pohjana olevaan BrowserID-yhteyskäytäntöön.</dd> + <dt> + <a href="/en-US/docs/persona/Crypto" title="MDN">Salaus</a></dt> + <dd> + Tutustu Personan ja BrowserID:n taustalla olevaan salauskonseptiin.</dd> + <dt> + <a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">Spesifikaatio</a></dt> + <dd> + Syvät tekniset yksityiskohdat ovat täällä.</dd> + <dt> + <a href="/en-US/docs/Persona/Bootstrapping_Persona" title="Persona/Bootstrapping_Persona">Persona-sivusto</a></dt> + <dd> + Personan saamiseksi käyttöön ylläpidämme kolmea palvelua osoitteessa <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: Tunnistustarjoajan varmistus, siirrettävien {{ domxref("navigator.id") }}-sovellusohjelmointirajapintojen (API) toteutus, ja tunnistusvakuutustodentamispalvelu.</dd> + <dt> + <a href="https://github.com/mozilla/browserid">Persona-lähdekoodi</a></dt> + <dd> + Persona-sivuston koodi on GitHub-lähdekoodivarastossa. Olet tervetullut lataamaan sen!</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/fi/mozilla_developer_centerin_sisällöt/index.html b/files/fi/mozilla_developer_centerin_sisällöt/index.html new file mode 100644 index 0000000000..95ece065d8 --- /dev/null +++ b/files/fi/mozilla_developer_centerin_sisällöt/index.html @@ -0,0 +1,59 @@ +--- +title: Mozilla Developer Centerin sisällöt +slug: Mozilla_Developer_Centerin_sisällöt +tags: + - Kaikki_luokat +--- +<table class="mainpage-table"><tbody><tr><td> +<h4 id="Aiheet" name="Aiheet"> Aiheet </h4> +<ul><li> <a href="fi/Laajennukset">Laajennukset</a> +</li><li> <a href="fi/Lis%c3%a4kkeet">Lisäkkeet</a> +</li><li> <a href="fi/Teemat">Teemat (osin suomennettu/puutteellinen)</a> +</li><li> <a href="fi/Mozillan_upottaminen">Mozillan upottaminen</a> +</li></ul> +<ul><li> <a href="fi/Helppop%c3%a4%c3%a4syisyys">Helppopääsyisyys</a> +</li><li> <a href="fi/Paikallistaminen">Paikallistaminen</a> +</li><li> <a href="fi/Web_Standarddit">Web Standarddit</a> +</li><li> <a href="fi/Web_kehitys">Web kehitys</a> +</li></ul> +<ul><li> <a href="fi/Mozillan_kehitt%c3%a4minen">Mozillan kehittäminen</a> +</li><li> <a href="fi/QA">Laadun varmistus</a> +</li><li> <a href="fi/Turvallisuus">Turvallisuus</a> +</li></ul> +<h4 id="Mozilla_internals" name="Mozilla_internals"> Mozilla internals </h4> +<ul><li> <a href="fi/SpiderMonkey">SpiderMonkey: JavaScript C engine</a> +</li><li> <a href="fi/Rajapinnat">Rajapinnat</a>, <a href="fi/Funktiont">Funktiont</a>, <a href="fi/XPCOM_komponentti_listat">Komponentit</a> +</li></ul> +<h4 id="Mozilla_Developer_Center" name="Mozilla_Developer_Center"> Mozilla Developer Center </h4> +<ul><li> <a>Auta parantamaan Mozilla dokumentaatiota!</a> +</li></ul> +</td> +<td> +<h4 id="Teknologiat" name="Teknologiat"> Teknologiat </h4> +<ul><li> <a href="fi/AJAX">AJAX</a> - Asynchronous JavaScript and XML +</li><li> <a href="fi/CSS">CSS</a> - Cascading Style Sheets +</li><li> <a href="fi/DOM">DOM</a> - Document Object Model +</li><li> <a href="fi/HTML">HTML</a> - Hypertext Markup Language +</li><li> <a href="fi/JavaScript">JavaScript</a> +</li><li> <a href="fi/XML">XML</a> - Extensible Markup Language +</li><li> <a href="fi/SVG">SVG</a> - Scalable Vector Graphics +</li><li> <a href="fi/XUL">XUL</a> - XML User Interface Language +</li><li> <a href="fi/XBL">XBL</a> - Extensible Binding Language +</li><li> <a href="fi/RDF">RDF</a> - Resource Description Framework +</li><li> <a href="fi/RSS">RSS</a> - Really Simple Syndication +</li><li> <a href="fi/XForms">XForms</a> - XML Forms +</li><li> <a href="fi/XPath">XPath</a> - XML Path Language +</li><li> <a href="fi/XSLT">XSLT</a> - Extensible Stylesheet Language Transformations +</li><li> <a href="fi/XML_Web_Services">XML Web Services</a> - SOAP, XML-RPC, etc. +</li></ul> +<h4 id="Ohjelmisto_ja_komponentti_runko" name="Ohjelmisto_ja_komponentti_runko"> Ohjelmisto ja komponentti runko </h4> +<ul><li> <a href="fi/Toolkit_API">Toolkit API</a> +</li><li> <a href="fi/XULRunner">XULRunner</a> +</li><li> <a href="fi/XPCOM">XPCOM</a> - Cross-Platform Component Object Model +</li><li> <a href="fi/XPInstall">XPInstall</a> - Cross-Platform Install +</li></ul> +</td> +</tr> +</tbody></table> +<p><br> +</p> diff --git a/files/fi/skinin_luominen_firefoxiin/aloittaminen/index.html b/files/fi/skinin_luominen_firefoxiin/aloittaminen/index.html new file mode 100644 index 0000000000..cb07cb11e4 --- /dev/null +++ b/files/fi/skinin_luominen_firefoxiin/aloittaminen/index.html @@ -0,0 +1,49 @@ +--- +title: Aloittaminen +slug: Skinin_luominen_Firefoxiin/Aloittaminen +--- +<h3 id="Alkutoimet" name="Alkutoimet"> Alkutoimet </h3> +<p>Lataa uusin versio Firefoxista ja asenna se. Varmista, että laajennus DOM Inspector asentui myös. +</p> +<h4 id="Pura_teema" name="Pura_teema"> Pura teema </h4> +<p>Vaikka teoriassa voit aloittaa minkä tahansa jo tehdyn teeman kanssa, yhtäläisyyksien vuoksi kerromme kuin kaikki muokkaisivat Winstripe:ä (Firefox:in oletusteemaa). Tämä teema sijaitsee tiedostossa <tt>classic.jar</tt> Firefox:in asennushakemistossa. JAR-teidosto on todellisuudessa uudelleennimetty ZIP-tiedosto, jonka voi avata ZIP-tiedostoja käsittelevässä ohjelmassa. Jos pakkausohjelma jostain syystä ajattelee, että tiedosto ei ole oikeassa muodossa, nimeä tiedosto <tt>classic.zip</tt>:ksi ja pura tiedosto. +</p> +<h5 id="Classic.jar_sijainnit" name="Classic.jar_sijainnit"> Classic.jar sijainnit </h5> +<p><b>Linux:</b> /usr/lib/MozillaFirefox/chrome/classic.jar +</p><p><b>Windows:</b> \Program Files\Mozilla Firefox\chrome\classic.jar +</p><p><b>For Mac OS X:</b> +</p> +<ul> +<li>Mene ohjelmakansioon</li> <li>Control klikkaa ohjelmaikonia (Firefox icon), valitse Näytä paketin sisältö.</li> <li>Siirry contents/MacOS/Chrome/classic.jar</li> +</ul> +<p>Kopioi <tt>classic.jar</tt> muuhun helposti siirryttävään kansioon (<tt>classic</tt> on suositeltava) pura paketti sinne varmistaaksesi, että hakemistorakenne säilyy. +</p><p>Huomaa: Voit vaihtaa <tt>.jar</tt> tiedostopäätteen <tt>.jar.zip</tt>:ksi ja sitten purkaa tiedoston sisältö hakemistoon! +</p> +<h4 id="Hakemistot" name="Hakemistot"> Hakemistot </h4> +<p>Tiedoston <tt>classic.jar</tt> sisällä on hakemisto <tt>skin</tt> ja tiedostot <tt>preview.png</tt> ja <tt>icon.png</tt>. +</p> +<dl><dt><tt>skin</tt> +</dt><dd><tt>skin</tt> yksinkertaisesti sisältää hakemiston <tt>classic</tt>, joka sisältää kaiken hyvän tavaran. +</dd><dt><tt>classic</tt> +</dt><dd><tt>classic</tt> sisältää seuraavat hakemistot: +</dd><dt><tt>browser</tt> +</dt><dd><tt>browser</tt> sisältää kaikki työkalurivin ikonit sekä myöskin ikonit kirjanmerkkien hallitsijalle ja asetusten ikkunalle. +</dd><dt><tt>global</tt> +</dt><dd><tt>global</tt> sisältää melkein kaikki tärkeät CSS-tiedostot, jotka määrittelevät selaimen ulkoasua. Tämä on kaikkein kriittisin hakemisto teemassa. +</dd><dt><tt>mozapps</tt> +</dt><dd><tt>mozapps</tt> sisältää kaikki tyylit ja ikonit selaimen <b>periphrials?</b>, kuten laajennus hallitsija ja päivitys velho. +</dd><dt><tt>help</tt> +</dt><dd><tt>help</tt> sisältää kaikki tidostot avun hankkimis -ikkunan muotoilemiseen. +</dd><dt><tt>communicator</tt> +</dt><dd>Ei tee oikeastaan mitään ja voidaan yleisesti unohtaa. +</dd></dl> +<h4 id="Asenna_uusi_teemasi" name="Asenna_uusi_teemasi"> Asenna uusi teemasi </h4> +<p>Ennenkuin pystyt näkemään muutokset, joita teit Firefox:in teemaan (<b>since live edits are restrictively difficult to set up?</b>) sinun pitää ensin oppia uudelleenpaketoimaan perusteema, jotta se voidaan asentaa. Nimeämme teemasi "My_Theme":ksi, mutta voit nimetä sen aivan miksi tahansa. +</p> +<h5 id="V.C3.A4ltt.C3.A4m.C3.A4tt.C3.B6mien_tiedostojen_kopioiminen" name="V.C3.A4ltt.C3.A4m.C3.A4tt.C3.B6mien_tiedostojen_kopioiminen"> Välttämättömien tiedostojen kopioiminen </h5> +<h5 id="Asennustiedostojen_luominen" name="Asennustiedostojen_luominen"> Asennustiedostojen luominen </h5> +<h6 id="Contents.rdf" name="Contents.rdf"> Contents.rdf </h6> +<h6 id="install.rdf" name="install.rdf"> install.rdf </h6> +<h4 id="CSS_tiedostot" name="CSS_tiedostot"> CSS tiedostot </h4> +<h4 id="JAR-tiedoston_uudelleenpakkaaminen" name="JAR-tiedoston_uudelleenpakkaaminen"> JAR-tiedoston uudelleenpakkaaminen </h4> +<h4 id="Asennuksen_k.C3.A4ynnist.C3.A4minen_webist.C3.A4" name="Asennuksen_k.C3.A4ynnist.C3.A4minen_webist.C3.A4"> Asennuksen käynnistäminen webistä </h4> diff --git a/files/fi/skinin_luominen_firefoxiin/index.html b/files/fi/skinin_luominen_firefoxiin/index.html new file mode 100644 index 0000000000..4bc1631dee --- /dev/null +++ b/files/fi/skinin_luominen_firefoxiin/index.html @@ -0,0 +1,28 @@ +--- +title: Skinin luominen Firefoxiin +slug: Skinin_luominen_Firefoxiin +tags: + - Teemat +--- +<p><span>Edited 4.12.2006</span> +</p> +<h3 id="Johdanto"> Johdanto </h3> +<p>Jotta voi tehdä skinin Firefoxiin on kolme asiaa, jotka pitää tietää: miten muokkaat kuvia, miten purat ZIP-tiedostoja ja miten muokkaat CSS:ää. +<span><ol><li>miten muokkaat kuvia</li> <li>miten purat ZIP-tiedostoja ja</li> <li>miten muokkaat CSS:ää.</li></ol></span> +Firefox käyttää standardeja GIF-, PNG-, ja JPEG-kuvia nappuloissa ja CSS:ää muotoiltaessa kaikea muuta. +</p><p><b>Mikä on skini?</b> +</p><p>Skini ei varsinaisesti muuta käyttöliittymää, vaan se ainoastaan määrittää, että miltä käyttöliittymä näyttää. Et voi muuttaa esim. sitä, että mitä tapahtuu, kun käyttäjä klikkaa kuvaa oikealla hiiren näppäimellä, mutta voit muuttaa oikealla hiiren näppäimellä aukeavan valikon ulkonäköä. Jos haluat muuttaa Firefoxin toimintoja, sinun täytyy perehtyä cromen muuttamiseen, joka ei kuulu tämän dokumentin aiheeseen. +</p> +<h3 id="Sis.C3.A4lt.C3.B6"> Sisältö </h3> +<ul><li> <a href="fi/Skinin_luominen_Firefoxiin/Aloittaminen">Aloittaminen</a> +</li></ul> +<hr> +<div class="originaldocinfo"> +<h3 id="Alkuper.C3.A4isen_dokumentin_tietoja"> Alkuperäisen dokumentin tietoja </h3> +<ul><li> Tekijä: Neil Marshall and Tucker Lee +</li><li> Muut osalliset (ehdotukset/korjaukset): Brent Marshall, CDN (<a class=" external" href="http://themes.mozdev.org">http://themes.mozdev.org</a>), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere, Tim Regula (<a class=" external" href="http://www.igraphics.nn.cx">http://www.igraphics.nn.cx</a>) +</li><li> Tekijänoikeustiedot: Tekijänoikeus 2002-2003 Neil Marshall, lupa annettu MDC:lle liittää wikiin huhtikuussa 2005 sähköpostilla. +</li><li> Alkuperäinen sijainti: <a class=" external" href="http://www.eightlines.com/neil/mozskin">http://www.eightlines.com/neil/mozskin</a> +</li></ul> +</div> +{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa" } ) }} diff --git a/files/fi/teemat/index.html b/files/fi/teemat/index.html new file mode 100644 index 0000000000..565b10ff7f --- /dev/null +++ b/files/fi/teemat/index.html @@ -0,0 +1,81 @@ +--- +title: Teemat +slug: Teemat +tags: + - Teemat +--- +<div class="callout-box"><strong><a href="fi/Skinin_luominen_Firefoxiin">Aloitus</a></strong><br> +Johdanto teemojen kehittämiseen Firefoxille.</div> + +<div><strong>Teemat</strong> ovat nahkoja monille Mozilla ohjelmille. Teemat tarjoavat näkymän ja tunnun muuttamisen käyttöliittymässä ja personoivat sen makusi mukaan. Teema voi yksinkertaisesti muuttaa UI:n värejä tai muuttaa jokaisen osan ulkoasua.</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Dokumentaatio" name="Dokumentaatio"><a>Dokumentaatio</a></h4> + + <dl> + <dt><a href="fi/Skinin_luominen_Firefoxiin">Skinin luominen Firefoxiin</a></dt> + <dd><small>Johdanto uusien teemojen kehittämiseksi Firefoxiin.</small></dd> + </dl> + + <dl> + <dt><a href="fi/Teemojen_paketointi">Teemojen paketointi</a></dt> + <dd><small>Kuinka paketoit teemat Firefoxille ja Thunderbirdille.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=197434">Teemojen muutokset Firefox 1.0:sta 1.5:een (forum post)</a></dt> + <dd><small>A forum post at <a class="external" href="http://www.mozillazine.org">MozillaZine</a> outlining the basic theme-related changes between Firefox 1.0 and 1.5.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://kb.mozillazine.org/Dev_:_Themes">Theme Development</a></dt> + <dd><small>Syventävä artikkeli niille, jotka ovat kiinnostuneet suunnittelemaan ja kehittämään teemoja XUL-perustaisiin ohjelmiin.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html">Ensiasekeleet teemojen suunnittelussa</a></dt> + <dd><small>Jonkin verran vanhentunut artikkeli, jossa keskustellaan teemojen suunnittelusta Firefoxille.</small></dd> + </dl> + + <p><span class="alllinks"><a>Katso kaikki...</a></span></p> + </td> + <td> + <h4 id="Yhteis.C3.B6" name="Yhteis.C3.B6">Yhteisö</h4> + + <ul> + <li>Katso Mozilla foorumit...</li> + </ul> + + <p>{{ DiscussionList("dev-themes", "mozilla.dev.themes") }}</p> + + <ul> + <li><a class="link-irc" href="irc://irc.mozilla.org/#themedev">#themedev IRC kanava</a></li> + <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine teema foorumi</a></li> + </ul> + + <h4 id="Ty.C3.B6kalut" name="Ty.C3.B6kalut">Työkalut</h4> + + <ul> + <li><a href="fi/DOM_Inspector">DOM Inspector</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/63/">InspectorWidget</a></li> + <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=21">ChromeEdit extension</a></li> + </ul> + + <p><span class="alllinks"><a>Katso kaikki...</a></span></p> + + <h4 id="L.C3.A4heinen_aihe" name="L.C3.A4heinen_aihe">Läheinen aihe</h4> + + <dl> + <dd><a href="fi/CSS">CSS</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p><span class="comment">Categories</span></p> + +<p><span class="comment">Interwiki Language Links</span></p> 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 <= 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 > 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 > 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 -> 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 & 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 <input> 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 & 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><body></code> elementti</strong> edustaa HTML-asiakirjan sisältöä. Dokumentissa voi olla vain yksi <code><body></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><body></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"><html> + <head> + <title>Dokumentin otsikko</title> + </head> + <body> + <p>Tämä on kappale</p> + </body> +</html> +</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', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Muutetu listaa epäyhdenmukaisista ominaisuuksista.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</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', '<body>')}}</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><head></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"><html> + <head> + <title>Dokumentin otsikko</title> + </head> +</html> +</pre> + +<h2 id="Huomatukset">Huomatukset</h2> + +<p>Modernit, HTML5-yhteensopivat selaimet automaattisesti rakentavat <code><head></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', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ei muutosta viimeisestä snapshotista</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</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', '<head>')}}</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><head></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></body></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><title></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></title></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><title></code> elementtiä käytetään aina sivun {{HTMLElement("head")}} lohkossa.</p> + +<h2 id="Esimerkki">Esimerkki</h2> + +<pre class="brush: html"><title>Mahtava sivun otsikko</title> +</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><title>Valikko - Kiinalainen ravintola - RuokaNam: Verkko-ostoksia tänään!</title> +</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><title>2 virhettä - Tilauksesi - Kiinalainen ravintola - RuokaNam: Verkko-ostoksia tänään!</title> +</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', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</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><title> </strong>tagi voidaan kirjoittaa myös <Title>,<TITLE> 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><a></code></a>, <a href="/fi/docs/Web/HTML/Element/area"><code><area></code></a> and <a href="/fi/docs/Web/HTML/Element/link"><code><link></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><audio></code></a> and <a href="/fi/docs/Web/HTML/Element/video"><code><video></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ä <a>, <area> tai <link> -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 & 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> |