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/he/web | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/he/web')
96 files changed, 13026 insertions, 0 deletions
diff --git a/files/he/web/api/console/index.html b/files/he/web/api/console/index.html new file mode 100644 index 0000000000..61521af0f3 --- /dev/null +++ b/files/he/web/api/console/index.html @@ -0,0 +1,294 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +<div>{{APIRef("Console API")}}</div> + +<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g. the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works varies from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p> + +<p>The <code>Console</code> object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p> + +<pre class="brush: js">console.log("Failed to open the specified link")</pre> + +<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Console.assert()")}}</dt> + <dd>Log a message and stack trace to console if the first argument is <code>false</code>.</dd> + <dt>{{domxref("Console.clear()")}}</dt> + <dd>Clear the console.</dd> + <dt>{{domxref("Console.count()")}}</dt> + <dd>Log the number of times this line has been called with the given label.</dd> + <dt>{{domxref("Console.countReset()")}}</dt> + <dd>Resets the value of the counter with the given label.</dd> + <dt>{{domxref("Console.debug()")}}</dt> + <dd>Outputs a message to the console with the log level <code>"debug"</code>. + <div class="note"><strong>Note</strong>: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.</div> + </dd> + <dt>{{domxref("Console.dir()")}}</dt> + <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd> + <dt>{{domxref("Console.dirxml()")}}</dt> + <dd> + <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.</p> + </dd> + <dt>{{domxref("Console.error()")}}</dt> + <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> + <dd>An alias for <code>error()</code>.</dd> + <dt>{{domxref("Console.group()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupCollapsed()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. However, unlike <code>group()</code> this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupEnd()")}}</dt> + <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd> + <dt>{{domxref("Console.info()")}}</dt> + <dd>Informative logging of information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.log()")}}</dt> + <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> + <dd>Starts the browser's built-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd> + <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> + <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd> + <dt>{{domxref("Console.table()")}}</dt> + <dd>Displays tabular data as a table.</dd> + <dt>{{domxref("Console.time()")}}</dt> + <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd> + <dt>{{domxref("Console.timeEnd()")}}</dt> + <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since it started.</dd> + <dt>{{domxref("Console.timeLog()")}}</dt> + <dd>Logs the value of the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> to the console.</dd> + <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> + <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd> + <dt>{{domxref("Console.trace()")}}</dt> + <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd> + <dt>{{domxref("Console.warn()")}}</dt> + <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> +</dl> + +<h2 id="Usage" name="Usage">Usage</h2> + +<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3> + +<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p> + +<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.</p> + +<h4 id="Outputting_a_single_object">Outputting a single object</h4> + +<p>The simplest way to use the logging methods is to output a single object:</p> + +<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +console.log(someObject); +</pre> + +<p>The output looks something like this:</p> + +<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + +<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4> + +<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p> + +<pre class="brush: js">var car = "Dodge Charger"; +var someObject = { str: "Some text", id: 5 }; +console.info("My first car was a", car, ". The object is:", someObject);</pre> + +<p>This output will look like this:</p> + +<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) +</pre> + +<h4 id="Using_string_substitutions">Using string substitutions</h4> + +<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Substitution string</td> + <td class="header">Description</td> + </tr> + <tr> + <td>%o or %O</td> + <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td> + </tr> + <tr> + <td>%d or %i</td> + <td>Outputs an integer. Number formatting is supported, for example <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td> + </tr> + <tr> + <td>%s</td> + <td>Outputs a string.</td> + </tr> + <tr> + <td>%f</td> + <td>Outputs a floating-point value. Formatting is supported, for example <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Precision formatting doesn't work in Chrome</p> +</div> + +<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p> + +<pre>for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); +} +</pre> + +<p>The output looks like this:</p> + +<pre>[13:14:13.481] Hello, Bob. You've called me 1 times. +[13:14:13.483] Hello, Bob. You've called me 2 times. +[13:14:13.485] Hello, Bob. You've called me 3 times. +[13:14:13.487] Hello, Bob. You've called me 4 times. +[13:14:13.488] Hello, Bob. You've called me 5 times. +</pre> + +<h4 id="Styling_console_output">Styling console output</h4> + +<p>You can use the <code>%c</code> directive to apply a CSS style to console output:</p> + +<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre> + +<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div> + +<div> </div> + +<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> + +<div> </div> + +<div class="note"> +<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.</p> +</div> + +<div> </div> + +<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div> + +<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p> + +<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div> + +<p>To exit the current group, simply call <code>console.groupEnd()</code>. For example, given this code:</p> + +<pre class="brush: js">console.log("This is the outer level"); +console.group(); +console.log("Level 2"); +console.group(); +console.log("Level 3"); +console.warn("More of level 3"); +console.groupEnd(); +console.log("Back to level 2"); +console.groupEnd(); +console.debug("Back to the outer level"); +</pre> + +<p>The output looks like this:</p> + +<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> + +<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> + +<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p> + +<p>For example, given this code:</p> + +<pre class="brush: js">console.time("answer time"); +alert("Click to continue"); +console.timeLog("answer time"); +alert("Do a bunch of other stuff..."); +console.timeEnd("answer time"); +</pre> + +<p>Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:</p> + +<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p> + +<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p> + +<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div> + +<h3 id="Stack_traces">Stack traces</h3> + +<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p> + +<pre class="brush: js">function foo() { + function bar() { + console.trace(); + } + bar(); +} + +foo(); +</pre> + +<p>The output in the console looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Console")}}</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li> + <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li> + <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li> + <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li> +</ul> + +<h3 id="Other_implementations">Other implementations</h3> + +<ul> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li> +</ul> diff --git a/files/he/web/api/console/log/index.html b/files/he/web/api/console/log/index.html new file mode 100644 index 0000000000..8ea8ab6218 --- /dev/null +++ b/files/he/web/api/console/log/index.html @@ -0,0 +1,39 @@ +--- +title: Console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +<div>{{APIRef("Console API")}}</div> + +<p><strong><code>()Console.log</code></strong> - מציגה את פלט ההודעה באזור המסוף של דפדפן האינטרנט.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h2 id="מפרט">מפרט</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("Console API", "#log", "console.log()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Console.log")}}</p> diff --git a/files/he/web/api/document/index.html b/files/he/web/api/document/index.html new file mode 100644 index 0000000000..d380692a64 --- /dev/null +++ b/files/he/web/api/document/index.html @@ -0,0 +1,488 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +<p><span class="seoSummary">The <strong><code>Document</code></strong> interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>.</span> The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among <a href="/en-US/docs/Web/HTML/Element">many others</a>. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.</p> + +<p>{{inheritanceDiagram}}</p> + +<p>The <code>Document</code> interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), a larger API is available: HTML documents, served with the <code>"text/html"</code> content type, also implement the {{domxref("HTMLDocument")}} interface, whereas XML and SVG documents implement the {{domxref("XMLDocument")}} interface.</p> + +<h2 id="Properties" name="Properties">Constructor</h2> + +<dl> + <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt> + <dd>Creates a new <code>Document</code> object.</dd> +</dl> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.anchors")}} {{readonlyinline}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} or {{htmlelement("frameset")}} node of the current document.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the <span class="seoSummary">{{domxref("HTMLElement")}}</span> element.</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>Returns the document location as a string.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("Document.fonts")}}</dt> + <dd>Returns the {{domxref("FontFaceSet")}} interface of the current document.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the current document.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.policy")}} {{readonlyinline}}{{experimental_inline}}</dt> + <dd>Returns the {{domxref("Policy")}} interface which provides a simple API for introspecting the feature policies applied to a specific document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extensions_for_HTMLDocument">Extensions for HTMLDocument</h3> + +<p><em>The <code>Document</code> interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents.</em></p> + +<dl> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>Gets/sets the domain of the current document.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Sets or gets the title of the current document.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>Returns the document location as a string.</dd> +</dl> + +<h3 id="Properties_included_from_DocumentOrShadowRoot">Properties included from DocumentOrShadowRoot</h3> + +<p><em>The <code>Document</code> interface includes the following properties defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them directly on the {{domxref("Document")}} interface.</em></p> + +<dl> + <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref('Element')}} within the shadow tree that has focus.</dd> + <dt>{{domxref("Document.fullscreenElement")}} {{readonlyinline}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Represents the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("Document.onvisibilitychange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd> + <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> + +<h3 id="Deprecated_properties">Deprecated properties</h3> + +<dl> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements in the document. This is a legacy, non-standard property and should not be used.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}} {{readonlyinline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt> + <dd>Creates a {{domxref("Touch")}} object.</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>Creates a {{domxref("TouchList")}} object.</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.releaseEvents()")}}.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("Window.routeEvent()")}}.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formating command.</dd> + <dt>{{domxref("document.write","document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h3 id="Methods_included_from_DocumentOrShadowRoot">Methods included from DocumentOrShadowRoot</h3> + +<p><em>The <code>Document</code> interface includes the following methods defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.</em></p> + +<dl> + <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt> + <dd>Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd> + <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt> + <dd>Returns the topmost element at the specified coordinates.</dd> + <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> + <dd>Returns an array of all elements at the specified coordinates.</dd> + <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> + <dd>Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd> +</dl> + +<h2 id="Non-standard_extensions_non-standard_inline">Non-standard extensions {{non-standard_inline}}</h2> + +<div>{{non-standard_header}}</div> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> +</dl> + +<p>Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</p> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName("HTML Editing", "#dom-document-getselection", "Document")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("CSSOM", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Pointer Lock")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Page Visibility API")}}</td> + <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes and the <code>onvisibilitychange</code> event listener.</td> + </tr> + <tr> + <td>{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td>Adds <code>getSelection()</code>, <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition for the interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document")}}</p> + +<div>{{APIRef}}</div> diff --git a/files/he/web/api/document/write/index.html b/files/he/web/api/document/write/index.html new file mode 100644 index 0000000000..8c497d548c --- /dev/null +++ b/files/he/web/api/document/write/index.html @@ -0,0 +1,82 @@ +--- +title: 'Document.write():' +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><strong><code>()Document.write</code></strong> - כותב מחרוזת טקסט אל גוף מסמך HTML.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="brush: js">document.write(<em>markup</em>); +</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><code>markup</code></dt> + <dd>מחרוזת המכילה את הטקסט שיופיע במסמך.</dd> +</dl> + +<h3 id="דוגמה">דוגמה</h3> + +<pre class="brush: html"><html> + +<head> + <title>write example</title> + + <script> + function newContent() { + alert("load new content"); + document.open(); + document.write("<h1>Out with the old - in with the new!</h1>"); + document.close(); + } + </script> +</head> + +<body onload="newContent();"> + <p>Some original document content.</p> +</body> + +</html> + +</pre> + +<h2 id="מפרט">מפרט</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-document-write", "document.write(...)")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Document.write")}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/he/web/api/domstring/index.html b/files/he/web/api/domstring/index.html new file mode 100644 index 0000000000..210e3c86c0 --- /dev/null +++ b/files/he/web/api/domstring/index.html @@ -0,0 +1,50 @@ +--- +title: DOMString +slug: Web/API/DOMString +translation_of: Web/API/DOMString +--- +<p>{{APIRef("DOM")}}<br> + מחרוזת <strong><code>DOMString</code></strong> הינה מחרוזות מסוג UTF-16.<br> + כל מחרוזת בשפת JavaScript נחשבת למחרוזת UTF-16 ולכן, נחשבת ל-<code><strong>DOMString</strong></code> באופן אוטומטי.</p> + +<h2 id="Specification" name="Specification">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td> + <td>{{Spec2('WebIDL')}}</td> + <td>Rephrasing of the definition to remove weird edge cases.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="ראו_גם">ראו גם </h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li> + <li>{{domxref("USVString")}}</li> + <li>{{domxref("CSSOMString")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/he/web/api/element/index.html b/files/he/web/api/element/index.html new file mode 100644 index 0000000000..a0d4f8ee21 --- /dev/null +++ b/files/he/web/api/element/index.html @@ -0,0 +1,331 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web API +translation_of: Web/API/Element +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Element</code></strong> is the most general base class from which all objects in a {{DOMxRef("Document")}} inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from <code>Element</code>.</span> For example, the {{DOMxRef("HTMLElement")}} interface is the base interface for HTML elements, while the {{DOMxRef("SVGElement")}} interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.</p> + +<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement <code>Element</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p> + +<dl> + <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.</dd> + <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.</dd> + <dt>{{DOMxRef("Element.className")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the class of the element.</dd> + <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd> + <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd> + <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd> + <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd> + <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd> + <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd> + <dt>{{DOMxRef("Element.id")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd> + <dt>{{DOMxRef("Element.innerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd> + <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd> + <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>The namespace URI of the element, or <code>null</code> if it is no namespace. + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> + <dt>{{DOMxRef("Element.outerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd> + <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> + <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> + <dt>{{DOMxRef("Element.scrollLeft")}}</dt> + <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> + <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollTop")}}</dt> + <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd> + <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> + <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> + <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd> + <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> + <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd> + <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> + <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd> + <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> + +<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> +</div> + +<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3> + +<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p> + +<dl> + <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> + <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Element.onfullscreenchange")}}</dt> + <dd>An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is backgrounded.</dd> + <dt>{{domxref("Element.onfullscreenerror")}}</dt> + <dd>An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.</dd> +</dl> + +<h4 id="Obsolete_event_handlers">Obsolete event handlers</h4> + +<dl> + <dt>{{DOMxRef("Element.onwheel")}}</dt> + <dd>Returns the event handling code for the {{Event("wheel")}} event. <strong>This is now implemented on {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p> + +<dl> + <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{DOMxRef("Element.attachShadow()")}}</dt> + <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> + <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> + <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> + <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd> + <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd> + <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd> + <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>Returns an array of Animation objects currently active on the element.</dd> + <dt>{{DOMxRef("Element.getAttribute()")}}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> + <dd>Returns an array of attribute names from the current element.</dd> + <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> + <dd>Returns the size of an element and its position relative to the viewport.</dd> + <dt>{{DOMxRef("Element.getClientRects()")}}</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd> + <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> + <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> + <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd> + <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> + <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> + <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{DOMxRef("Element.querySelector()")}}</dt> + <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> + <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> + <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd> + <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{domxref("Element.scroll()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{domxref("Element.scrollBy()")}}</dt> + <dd>Scrolls an element by the given amount.</dd> + <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{domxref("Element.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{DOMxRef("Element.setAttribute()")}}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> + <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd> + <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Added the <code>getAnimations()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Added the <code>requestPointerLock()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Added the <code>requestFullscreen()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> + Added the following method: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br> + Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br> + Removed the <code>schemaTypeInfo</code> property.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element")}}</p> diff --git a/files/he/web/api/geolocation/index.html b/files/he/web/api/geolocation/index.html new file mode 100644 index 0000000000..e69c21503d --- /dev/null +++ b/files/he/web/api/geolocation/index.html @@ -0,0 +1,109 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Geolocation +--- +<div> + {{APIRef}}</div> +<p>The <code><strong>Geolocation</strong></code> interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app offer customized results based on the user's location.</p> +<p>An object with this interface is obtained using the {{domxref("NavigatorGeolocation.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p> +<div class="note"> + <p><strong>Note:</strong> For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.</p> +</div> +<h2 id="Properties">Properties</h2> +<p><em>The <code>Geolocation</code> interface neither implements, nor inherit any property.</em></p> +<h2 id="Methods">Methods</h2> +<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p> +<dl> + <dt> + {{domxref("Geolocation.getCurrentPosition()")}}</dt> + <dd> + Determines the device's current location and gives back a {{domxref("Position")}} object with the data.</dd> + <dt> + {{domxref("Geolocation.watchPosition()")}}</dt> + <dd> + Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd> + <dt> + {{domxref("Geolocation.clearWatch()")}}</dt> + <dd> + Removes the particular handler previously installed using <code>watchPosition()</code>.</dd> +</dl> +<h2 id="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>5</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> +</ul> diff --git a/files/he/web/api/geolocation/ממשק_שירותי_מיקום/index.html b/files/he/web/api/geolocation/ממשק_שירותי_מיקום/index.html new file mode 100644 index 0000000000..f87dbb0f0b --- /dev/null +++ b/files/he/web/api/geolocation/ממשק_שירותי_מיקום/index.html @@ -0,0 +1,250 @@ +--- +title: ממשק שירותי מיקום +slug: Web/API/Geolocation/ממשק_שירותי_מיקום +translation_of: Web/API/Geolocation_API +--- +<p style="direction: rtl;">ממשק שירותי המיקום, geolocation API, מאפשר למשתמש לשתף את המיקום שלו עם אפליקציות ברשת. כדי להגן על הפרטיות, המשתמש נדרש להסכים לשתף את שירותי המיקום שלו.</p> +<p style="direction: rtl;"><span style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">אובייקט ה- geolocation </span></p> +<p style="direction: rtl;">ממשק שירותי המיקום נגיש באמצעות אובייקט:<span style="line-height: 1.5;">{{domxref("window.navigator.geolocation","navigator.geolocation")}} .</span></p> +<p style="direction: rtl;">אם האובייקט קיים, ממשק שירותי המיקום נתמך: ניתן לבדוק אם ממשק שירותי המיקום נתמך באמצעות: </p> +<pre class="brush: js">if ("geolocation" in navigator) { + /* הממשק נתמך*/ +} else { + /* הממשק אינו נתמך */ +}הערה +</pre> +<div class="note"> + <p style="direction: rtl;"><strong>הערה:</strong> מגרסה מס' 24 של FireFox ומטה, הפקודה geolocation" in navigator" מחזירה true אפילו אם הממשק אינו נתמך. באג זה תוקן ב<a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">גרסה 25 של FireFox</a> על מנת לעמוד בתקן. ({{bug(884921)}}).</p> +</div> +<h3 id="קבלת_המיקום_הנוכחי" style="direction: rtl;">קבלת המיקום הנוכחי</h3> +<p dir="rtl">כדי לקבל את נתוני המיקום הנוכחי של המשתמש, ניתן לקרוא לפונקציה: <span style="line-height: 1.5;"> {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. הפונקציה יוצרת קריאה אסינכרונית על מנת לאחזר את המיקום של המשתמש ובודקת את החומרה על מנת לקבל את המיקום העדכני ביותר. כאשר נתוני המיקום חוזרים כתוצאה מהקריאה, פונקציית המטרה (באנגלית: callback) נקראת. אפשר להעביר לקריאה פרמטר נוסף, פרמטר שני: פונקציית מטרה לטיפול במיקרה של שגיאה. אפשר להעביר פרמטר שלישי לקריאה: אובייקט options שבו אפשר להגדיר מהו הוותק המכסימלי לערכי המיקום המוחזרים, משך הזמן המכסימלי להמתנה עד שנתוני המיקום יתקבלו ורמת הדיוק של נתוני המיקום. </span></p> +<div class="note"> + <p style="direction: rtl;"><strong>הערה</strong>: כברירת מחדל, הפונקציה<span style="line-height: 1.5;">, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} מנסה להחזיר את נתוני המיקום במהירות האפשרית, אך ברמת דיוק מינימלית. צורה זו שימושית אם רוצים לקבל את הנתונים במהירות הגבוהה האפשרית תוך התפשרות על רמת הדיוק. במכשירים עם מנגנון GPS משך הזמן לקבלת נתונים יכול לקחת דקה ויותר, לכן הפונקציה </span><span style="line-height: 1.5;"> {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} יכולה לקבל בחזרה נתונים שיש בהם מידה מסוימת של שגיאה (אם המיקום חושב על בסיס כתובת IP על בסיס מיקום נקודת wifi).</span></p> +</div> +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> +<p style="direction: rtl;">הקוד בדוגמא שלעיל יגרום לפונקצייה, ()do_something, להתבצע כאשר נתוני המיקום חזרו.</p> +<p> </p> +<p style="direction: rtl;"><span style="font-size: 1.714285714285714rem; letter-spacing: -0.5px; line-height: 24px;">מעקב אחר המיקום הנוכחי</span></p> +<p style="direction: rtl;"><span style="line-height: 1.5;">אם נתוני המיקום משתנים (בגלל שהדפדפן נמצא בתנועה, או אם הגיעו נתוני מיקום מדוייקים יותר), אפשר להגדיר פונקציית מטרה (באנגלית: callback), המקבלת נתוני מיקום מעודכנים יותר. עושים זאת באמצעות הפונקציה: </span><span style="line-height: 1.5;">{{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} שיש לה את אותם פרמטרים כמו הפונקציה: </span><span style="line-height: 1.5;"> {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. פונקציית המטרה מתבצעת מס' כלשהו של פעמים ומאפשרת לדפדפן לעדכן את המיקום של המשתמש תוך כדי תנועה, או לעדכן את מיקומו בנתונים מעודכנים יותר שהגיעו על ידי טכניקות זיהוי מיקום מדוייקות יותר. ניתן להגדיר פונקציית מטרה נוספת למקרה של שגיאה שתיקרא בכל פעם שתתרחש שגיאה כפי שקורה במיקרה של: </span><span style="line-height: 1.5;"> {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</span></p> +<div class="note"> + <p style="direction: rtl;"><strong>הערה</strong>: ניתן להשתמש בפונקציה: <span style="line-height: 1.5;">{{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} מבלי צורך לקרוא לפני כן לפונקציה: {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} .</span></p> +</div> +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> +<p style="direction: rtl;">הפונקציה <span style="line-height: 1.5;">{{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} מחזירה id שמזהה את הפונקציה שעוקבת אחר המיקום. ניתן לאחר מכן להשתמש בו כדי לקרוא לפונקציה </span><span style="line-height: 1.5;"> {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} על מנת להפסיק את פעולת המעקב אחרי תנועת המשתמש.</span></p> +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> +<h3 id="כיול_התוצאות" style="direction: rtl;">כיול התוצאות</h3> +<p style="direction: rtl;">הן הפונקציה {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} והן הפונקציה {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} מקבלות פרמטר פונקציית מטרה למקרה הצלחה בקבלת נתונים, מקבלות פרמטר אופציונאלי למקרה של שגיאה בקבלת נתוני מיקום ופרמטר אופציונאלי שלישי: אובייקט <span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">PositionOptions</code><span style="line-height: 1.5;">.</span></p> +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> +<p style="direction: rtl;">קריאה ל: {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} יכולה להיראות כך:</p> +<pre class="brush: js">function geo_success(position) { + do_something(position.coords.latitude, position.coords.longitude); +} + +function geo_error() { + alert("Sorry, no position available."); +} + +var geo_options = { + enableHighAccuracy: true, + maximumAge : 30000, + timeout : 27000 +}; + +var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre> +<p><a id="fck_paste_padding">A demo of watchPosition in use: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br> + <a id="fck_paste_padding"></a></p> +<h2 id="נתוני_המיקום" style="direction: rtl;">נתוני המיקום</h2> +<p style="direction: rtl;">המיקום של המשתמש הוא אובייקט <code>Position</code> שמכיל בתוכו אובייקט <code>Coordinates</code>.</p> +<p><span style="line-height: 1.5;">{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</span></p> +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p> +<h2 id="טיפול_בשגיאות" style="direction: rtl;">טיפול בשגיאות</h2> +<p style="direction: rtl;"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">פונקציית המטרה לטיפול בשגיאות נגישה גם בקריאה לפונקציה ()</span><code><span style="font-size: 14px; line-height: 1.5;"><font face="Courier New, Andale Mono, monospace">getCurrentPosition</font></span></code><span style="line-height: 1.5;"><code> </code>וגם בקריאה ל ()<code>watchPosition</code><strong><code>, </code></strong></span>ומקבלת כפרמטר ראשון אובייקט <code>PositionError</code>. </p> +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p> +<h2 id="דוגמא_שלמה_לממשק_שירותי_מיקום" style="direction: rtl;">דוגמא שלמה לממשק שירותי מיקום</h2> +<div class="hidden"> + <pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +p { margin : 0; } +</pre> +</div> +<h3 id="HTML" style="direction: rtl;">HTML: </h3> +<pre class="brush: html;"><p><button onclick="geoFindMe()">Show my location</button></p> +<div id="out"></div> +</pre> +<h3 id="JavaScript" style="direction: rtl;">JavaScript:</h3> +<pre class="brush: js;">function geoFindMe() { + var output = document.getElementById("out"); + + if (!navigator.geolocation){ + output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; + return; + } + + function success(position) { + var latitude = position.coords.latitude; + var longitude = position.coords.longitude; + + output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; + + var img = new Image(); + img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; + + output.appendChild(img); + }; + + function error() { + output.innerHTML = "Unable to retrieve your location"; + }; + + output.innerHTML = "<p>Locating…</p>"; + + navigator.geolocation.getCurrentPosition(success, error); +} +</pre> +<h3 id="תוצאות_של_הדוגמא_לעיל" style="direction: rtl;">תוצאות של הדוגמא לעיל:</h3> +<p>{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}</p> +<h2 id="הצגת_הודעה_לבקשת_רשות" style="direction: rtl;">הצגת הודעה לבקשת רשות</h2> +<p style="direction: rtl;">כל תוסף המשתייך ל addons.mozilla.org המשתמש בממשק שירותי המיקום חייב לקבל אישור מהמשתמש לגשת לממשק על ידי בקשת רשות מפורשת. הפונקציה הבאה תבקש אישור באופן שזהה לבקשת האישור המוצגת לדפים ברשת. הבחירה של המשתמש תישמר בהעדפות באמצעות פרמטר <code>pref </code>או הוא מאופשר. הפונקציה המוצבעת על ידי פרמטר <code>callback </code>תיקרא עם פרמטר בוליאני המציין את בחירת המשתמש. אם הערך <code>true </code>יש לתוסף הרשאה לגשת לנתוני המיקום. </p> +<pre class="brush: js">function prompt(window, pref, message, callback) { + let branch = Components.classes["@mozilla.org/preferences-service;1"] + .getService(Components.interfaces.nsIPrefBranch); + + if (branch.getPrefType(pref) === branch.PREF_STRING) { + switch (branch.getCharPref(pref)) { + case "always": + return callback(true); + case "never": + return callback(false); + } + } + + let done = false; + + function remember(value, result) { + return function() { + done = true; + branch.setCharPref(pref, value); + callback(result); + } + } + + let self = window.PopupNotifications.show( + window.gBrowser.selectedBrowser, + "geolocation", + message, + "geo-notification-icon", + { + label: "Share Location", + accessKey: "S", + callback: function(notification) { + done = true; + callback(true); + } + }, [ + { + label: "Always Share", + accessKey: "A", + callback: remember("always", true) + }, + { + label: "Never Share", + accessKey: "N", + callback: remember("never", false) + } + ], { + eventCallback: function(event) { + if (event === "dismissed") { + if (!done) callback(false); + done = true; + window.PopupNotifications.remove(self); + } + }, + persistWhileVisible: true + }); +} + +prompt(window, + "extensions.foo-addon.allowGeolocation", + "Foo Add-on wants to know your location.", + function callback(allowed) { alert(allowed); }); +</pre> +<h2 id="תאימות_דפדפנים">תאימות דפדפנים</h2> +<div> + {{ CompatibilityTable() }}</div> +<div> + </div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>5</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatGeckoMobile("4")}}</td> + <td>1.0.1</td> + <td>{{CompatUnknown()}}</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="הערות_לגבי_Gecko" style="direction: rtl;">הערות לגבי Gecko</h3> +<p style="direction: rtl;">דפדפן FireFox תומך בקבלת נתוני המיקום בהתבסס על מידע WiFi באמצעות שירותי המיקום של גוגל. בטרנזאקציה שבין FireFox ל Google, המידע שמועבר כולל מידע על נקודת הגישה ל WiFi, כולל access token (שדומה לcookie בעלת תוקף למשך שבועיים) וכולל את כתובת ה IP של המשתמש. למידע נוסף יש התעדכן ב<a href="http://www.mozilla.com/en-US/legal/privacy/">תנאי הפרטיות</a> של Mozilla וב<a href="http://www.google.com/privacy-lsf.html">תנאי הפרטיות</a> של גוגל המפרטים באיזה אופן נתונים אלה ניתנים לשימוש. </p> +<p style="direction: rtl;">FireFox גרסת 3.6 (Gecko 1.9.2) הוסיף תמיכה לשימוש בשירות GPSD (GPS daemon) בשביל שירותי מיקום עבור Linux. </p> +<p style="direction: rtl;"><span style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">לעיון נוסף</span></p> +<ul> + <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li> + <li><a href="/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map">צייר את עצמך על המפה</a></li> + <li><a href="http://www.w3.org/TR/geolocation-API/">ממשק שירותי המיקום ב:w3.org</a></li> + <li><a href="/en-US/demos/tag/tech:geolocation">דוגמאות לשימוש במשק נתוני המיקום</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks blog)</li> +</ul> diff --git a/files/he/web/api/index.html b/files/he/web/api/index.html new file mode 100644 index 0000000000..83cde65af8 --- /dev/null +++ b/files/he/web/api/index.html @@ -0,0 +1,38 @@ +--- +title: Web API Interfaces +slug: Web/API +tags: + - API + - Apps + - JavaScript + - Landing + - Reference + - Web + - WebAPI +translation_of: Web/API +--- +<p dir="rtl">כשאתה כותב קוד עבור ה-Web, יש הרבה Web APIs זמינים. להלן רשימה של כל ה-APIs והממשקים (טיפוסי עצמים) בהם תוכל להשתמש בעת פיתוח אפליקציית ה-Web או האתר שלך.</p> + +<div dir="rtl">בדרך כלל משתמשים ב-Web APIs עם JavaScript, אם כי זה לא תמיד חייב להיות כך.</div> + +<div dir="rtl"></div> + +<h2 dir="rtl" id="מפרטים">מפרטים</h2> + +<p dir="rtl">זו רשימת כל ה-APIs הזמינים.</p> + +<p dir="rtl">{{ListGroups}}</p> + +<h2 dir="rtl" id="ממשקים">ממשקים</h2> + +<p dir="rtl">זו רשימת כל הממשקים (זאת אומרת, טיפוסים של עצמים) הזמינים.</p> + +<p dir="rtl">{{APIListAlpha}}</p> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + + + +<ul dir="rtl"> + <li><a href="/he/docs/Web/Events">התייחסות לאירועי Web API</a></li> +</ul> diff --git a/files/he/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/he/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html new file mode 100644 index 0000000000..094ee01378 --- /dev/null +++ b/files/he/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -0,0 +1,141 @@ +--- +title: מגבלות האחסנה של הדפדפן וקריטריונים לפינוי +slug: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +tags: + - Database + - IndexedDB + - LRU + - אחסנה + - בדיס נתונים + - מגבלה + - פינוי + - צד הלקוח +translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +--- +<div>{{DefaultAPISidebar("IndexedDB")}}</div> + +<div>קיימות מספר טכנולוגיות רשת המאחסנות נתונים מסוג זה או אחר בצד הלקוח (כלומר, על הדיסק המקומי שלך). התהליך בו הדפדפן מחשב כמה מקום להקצות לאחסנת מידע רשת ומה למחוק כאשר מגיעים לגבול אינו פשוט, ונבדל בין דפדפנים.</div> + +<div>מאמר זה מתאר איך דפדפנים מכריעים איזה תוכן מקומי לטהר, ומתי בסדר לשחרר חלל אחסנה מקומי.</div> + +<p class="summary"></p> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: המידע שלהלן אמור להיות מדוייק במידה מספקת עבור רוב הדפדפנים המודרניים, אך פרטי דפדפן נקראים כאשר ידועים. אופרה וכרום צריכים לפעול באותה דרך בכל המקרים, <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (תצוגת צד שרת, שעדיין מבוסס על תגובה מהירה) אינו מאחסן כל נתונים שהם בצד הלדוח.</p> +</div> + +<h2 id="אלו_טכנולוגיות_משתמשות_באחסנת_הנתונים_של_הדפדפן">אלו טכנולוגיות משתמשות באחסנת הנתונים של הדפדפן?</h2> + +<p>בפיירפוקס, הטכנולוגיות הבאות עושות שימוש באחסנת הנתונים של הדפדפן לאחסן נתונים כאשר יש צורך. הגדרנו עבורם את המושג "לקוחות מכסה" בהקשר זה:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li> + <li>שמירת <a href="http://asmjs.org/">asm.js</a> במטמון</li> + <li><a href="/en-US/docs/Web/API/Cache">Cache API</a></li> + <li>עוגיות</li> +</ul> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: בפיירפוקס, <a href="/en-US/docs/Web/API/Web_Storage_API">אחסנת הרשת</a> בקרוב תתחיל להשתמש גם היא באותם כלי ניהול שטחי אחסון , כמתואר במסמך זה.</p> +</div> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: במצב גלישה פרטית, רוב אחסנת המידע אינה נתמכת. נתוני אחסון מקומיים ועוגיות עדיין מאוחסנים, אך הם ארעיים - הנתונים נמחקים כאשר סוגרים את חלון אך הם ארעיים — הנתונים נמחקים עם סגירת חלון הגלישה הפרטית האחרון.</p> +</div> + +<p>"זמן הגישה האחרון" של מקורות מתעדכן כאשר כל אחד מאלה מופעל/מושבת — פינוי מקורות ימח' נתונים עבור כל לקוחות המכסה.</p> + +<p>בכרום/אופרה, ממשק פיתוח היישומים של ניהול המכסות מטפל בניהול עבור <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, ו-<a href="/en-US/docs/Web/API/File_System_API">File System API</a>.</p> + +<h2 id="טיפוסים_שונים_של_אחסנת_נתונים">טיפוסים שונים של אחסנת נתונים</h2> + +<p>גם באותו הדפדפן, שימוש באותה שיטת אחסון, קיינות מחלקות שונות של אחסנת נתונים להבין. פרק זה ידון במפר מהם שייתכן ויימצאו בדפדפנים שונים.</p> + +<p>אחסנה מופיעה במספר טיפוסים:</p> + +<ul> + <li>קבועה : אלה הנתונים שבכוונתנו לשמור בהישג יד לטווח רחוק. הם יפונו אך ורק על פי בחירת המשתמש/ת (לדוגמה, בפיירפוקס תוכלו לבחור למחוק את כל הנתונים המאוחסנים ממקורות נבחרים על ידי גישה ל"העדפות" ושימוש באפשרויות תחת <em>"פרטיות ואבטחה-> עוגיות ונתוני אתרים"</em>).</li> + <li>זמנית: אלו נתונים שאינם צריכים להישמר לזמן רב כל כך. הם יפונו תחת מדיניות השימוש המאוחר ביותר ({{anch("LRU policy")}}) כאשר כמות הנתונים תגיע ל- {{anch("מגבלות האחסנה")}}.</li> +</ul> + +<p>בפיירפוקס, כשאשר נעשה שימוש באחסנה קבועה,, ניתן למשתמש/ת חלון ממשק משתמש קופץ להתריע לו/ה כי הנתונים יישמרו, ובחלון תישאל השאלה אם המשתמש/ת מסכים/ה לכך. אחסנת נתונים זמנית אינה מעוררת כל פנייה למשתמש/ת.</p> + +<p>כברירת מחדל האחסנה היא זמנית; מפתחים יכולים לבחור להשתמש באחסנה קבועה לאתרים שלהם באמצעות השיטה {{domxref("StorageManager.persist()")}} הזמינה ב-<a href="/en-US/docs/Web/API/Storage_API">Storage API</a>.</p> + +<h2 id="היכן_מאוחסנים_הנתונים">היכן מאוחסנים הנתונים?</h2> + +<p>כל טיפוס אחסנה מייצג מאגר נפרד. להלן המיפוי האקטואלי ל,תיקיות תחת פרופיל הפיירפוקס של המשתמש/ת (דפדפנים אחרים עשויים להיות מעט שונים):</p> + +<ul> + <li><code><profile>/storage</code> — התיקייה הראשית של הרמה הגבוהה ביותר לאחסון מתוחזקת על ידי מנהל המכסות (ראו להלן)</li> + <li><code><profile>/storage/permanent</code> — תיקיית מאגר הנתונים הקבועים</li> + <li><code><profile>/storage/temporary</code> — תיקיית מאגר הנתונים הזמניים</li> + <li><code><profile>/storage/default</code> — מאגר ברירת המחדל של הנתונים</li> +</ul> + +<div> +<div class="note"> +<p><strong>לתשומת לבך</strong>: אחרי שהוצג ה <a href="/en-US/docs/Web/API/Storage_API">Storage API</a>, התיקייה "permanent" יכולה להיחשב מיושנת; התיקייה "permanent" מאחסנת רק את בסיסי הנתונים מהטיפוס הקבוע IndexedDB. לא משנה אם מצב התיבה הוא "best-effort" או "persistent" — נתונים נשמרים תחת <profile>/storage/default.</p> +</div> +</div> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: בפיירפוקס , ניתן למצוא את תיקיית הפרופיל שלך על ידי הכנסת <code>about:support</code> בשורת ה- URL , ולחיצה על הכפתור פתיחת ספרייה (למשל <em>Show ב- Finder</em> על Mac OS X) על יד הכותרת <em>Profile Folder</em> .</p> +</div> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: אם תחפשו במידע השמור בתיקיית הפרופיל , ייתכן שתמצאו תיקייה רביעית:: <code>persistent</code>. בעיקרות, שמה של התיקייה <code>persistent</code> שונה ל-<code>permanent</code> בשלב מסויים בעבר כדי ששדרוגים/מעברים יהיו פשוטים לביצוע.</p> +</div> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: אל למשתמשים להוסיף תיקיות וקבצים משלהם תחת <code><profile>/storage</code>. זה יגרום לאתחולי אחסנה להיכשל; לדוגמא, {{domxref("IDBFactory.open()", "open()")}} יגרום לאירוע שגיאה.</p> +</div> + +<h2 id="מגבלות_האחסנה">מגבלות האחסנה</h2> + +<p>שטח האחסנה המירבי של הדפדפן הוא דינמי — הוא מבוסס על גודל הדיסק הקשיח. <strong>הגבול הגלובלי</strong> מחושב כ-50% מהשטח הפנוי על הדיסק. בפיירפוקס, כלי פנימי של הדפדפן הקרוי Quota Manager כוקב אחרי גודל חלל הדיסק שכל מקור מנצל עד תום, ומוחק נתונים אם יש צורך בכך.</p> + +<p>כך שאם נפח הדיסק הקשיח שלך הוא 500 ג"ב, אזי שטח האחסון לדפדפן הינו 250 ג"ב. במקרה של חריגה, מופעל תהליך בשם <strong>origin eviction</strong>, המוחק את כל שווי הנתונים של המקור עד שכמות הנתונים המאוחסנת חוזרת אל מתחת לגבול. אין כל אפקט של קיצוץ הבא למחוק חלקים של מקורות — מחיקת בסיס נתונים של מקור עלולה ליצור בעיות של חוסר עקביות.</p> + +<p>קיים גם גבול הקרוי <strong>group limit</strong> — הוא מוגדר כ- 20% מהגבול הגלובלי, אך יש לו מינימום של 10 מ"ב ומקסימום של 2 ג"ב. כל מקור הוא חלק מקבוצה (קבוצת מקורות). קיימת קבוצה לכל דומיין eTLD+1. לדוגמה:</p> + +<ul> + <li><code>mozilla.org</code> — group1, origin1</li> + <li><code>www.mozilla.org</code> — group1, origin2</li> + <li><code>joe.blogs.mozilla.org</code> — group1, origin3</li> + <li><code>firefox.com</code> — group2, origin4</li> +</ul> + +<p>בקבוצה זו, <code>mozilla.org</code>, <code>www.mozilla.org</code>, ו-<code>joe.blogs.mozilla.org</code> יכולים במצטבר להשתמש במקסימום 20% מהגבול הגלובלי. <code>ל- firefox.com</code> יש מקסימום בנפרד של 20%.</p> + +<p>שני הגבולות מגיבים בצורה שונה כשמגיעים לגבול:</p> + +<ul> + <li>לגבול הקבוצתי קוראים גם "גבול קשה": הוא אינו גורם לפינוי מקורות.</li> + <li>הגבול הגלובלי הוא "גבול רך" מכיוון שאין סיכוי ששטח כלשהו ישוחרר והפעולה יכולה להימשך,</li> +</ul> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: הגבול הקבוצתי אינו יכול להיות יותר מהגבול הגלובלי, , למרות מינימום הגבול הקבוצתי הנזכר לעיל . אם הינך במצב של מעט זיכרון באמת כשנניח שהגבול הגלובלי הוא, 8 מ"ב, אז גם הגבול הקבוצתי יהיה 8 מ"ב.</p> +</div> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: כאשר חורגים מהגבול הקבוצתי, או אם פינוי המקור אינו יכול לשחרר מספיק שטח, הדפדפן יצא עם החריגה <code>QuotaExceededError</code>.</p> +</div> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: בכרום מכסת האחסנה הרכה והקשה השתנתה מאז <strong>M66</strong>. מידע נוסף ניתן למצוא <a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68">כאן.</a></p> +</div> + +<h2 id="מדיניותLRU">מדיניותLRU</h2> + +<p>כאשר שטח הדיסק מתמלא עד תום, מנהל המכסות מתחיל לנקות נתונים בהתבסס על מדיניות LRU — המקור בו נעשה שימוש רחוק ביותר מלאחרונה ימחק קודם, ואחר כך זה הבא אחריו, עד שהדפדפן כבר אינו חורג מהגבול.</p> + +<p>אנו עוקבים אחרי "זמן הגישה האחרון" עבור כל מקור באמצעות אחסנה זמנית. כאשר מושג הגבול הגלובלי עבור אחסנה זמנית (עוד אודות הגבול מאוחר יותר), אנו מנסים למצוא את כל המקורות שלא היו בשימוש (iכלומר אלה ללא לשוניות.ישומים פתוחים הממשיכים לשמור מאגרי מידע פתוחים). אלה ממויינים בשלב זה על פי "זמן הגישה האחרון". המקור שהיה בשימוש הכי רחוק מלאחרונה נמחקים בשלב זה עד שיש מספיק מקום להגשים את הבקשה שגרמה לפינוי המקור.</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, by<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> A detailed analysis of client-side storage on mobile browsers.</li> + <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API: Fast Facts</a>, by<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> A look at the Quota Management API in Chrome/Blink (which should include Opera, too).</li> +</ul> diff --git a/files/he/web/api/indexeddb_api/index.html b/files/he/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..957b6f96c5 --- /dev/null +++ b/files/he/web/api/indexeddb_api/index.html @@ -0,0 +1,165 @@ +--- +title: IndexedDB API +slug: Web/API/IndexedDB_API +tags: + - API + - Advanced + - Database + - IndexedDB + - Landing + - NeedsTranslation + - Reference + - Storage + - TopicStub +translation_of: Web/API/IndexedDB_API +--- +<div>{{DefaultAPISidebar("IndexedDB")}}</div> + +<p>IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution. This is the main landing page for MDN's IndexedDB coverage — here we provide links to the full API reference and usage guides, browser support details, and some explanation of key concepts.</p> + +<p>{{AvailableInWorkers}}</p> + +<div class="note"> +<p><strong>Note</strong>: IndexedDB API is powerful, but may seem too complicated for simple cases. If you'd prefer a simple API, try libraries such as <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="https://dexie.org/">dexie.js</a>, <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, <a href="https://pouchdb.com/">PouchDB</a>, <a href="https://www.npmjs.com/package/idb">idb</a>, <a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>, <a href="https://jsstore.net/">JsStore</a> and <a href="https://github.com/google/lovefield">lovefield</a> that make IndexedDB more programmer-friendly.</p> +</div> + +<h2 id="Key_concepts_and_usage">Key concepts and usage</h2> + +<p>IndexedDB is a transactional database system, like an SQL-based RDBMS. However, unlike SQL-based RDBMSes, which use fixed-column tables, IndexedDB is a JavaScript-based object-oriented database. IndexedDB lets you store and retrieve objects that are indexed with a <strong>key</strong>; any objects supported by the <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone algorithm</a> can be stored. You need to specify the database schema, open a connection to your database, and then retrieve and update data within a series of <strong>transactions</strong>.</p> + +<ul> + <li>Read more about the <a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Concepts behind IndexedDB</a>.</li> + <li>Learn to use IndexedDB asynchronously from first principles with our <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a> guide.</li> + <li>Combine IndexedDB for storing data offline with Service Workers for storing assets offline, as outlined in <a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Making PWAs work offline with Service workers</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Like most web storage solutions, IndexedDB follows a <a class="external" href="https://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. So while you can access stored data within a domain, you cannot access data across different domains.</p> +</div> + +<h3 id="Synchronous_and_asynchronous">Synchronous and asynchronous</h3> + +<p>Operations performed using IndexedDB are done asynchronously, so as not to block applications. IndexedDB originally included both synchronous and asynchronous APIs. The synchronous API was intended for use only with <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> but was removed from the spec because it was unclear whether it was needed. However, the synchronous API may be reintroduced if there is enough demand from web developers.</p> + +<h3 id="Storage_limits_and_eviction_criteria">Storage limits and eviction criteria</h3> + +<p>There are a number of web technologies that store data of one kind or another on the client side (i.e. on your local disk). IndexedDB is most commonly talked about. The process by which the browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between browsers. <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a> attempts to explain how this works, at least in the case of Firefox.</p> + +<h2 id="Interfaces">Interfaces</h2> + +<p>To get access to a database, call <a href="/en-US/docs/Web/API/IDBFactory.open"><code>open()</code></a> on the <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> attribute of a <a href="/en-US/docs/DOM/window">window</a> object. This method returns an {{domxref("IDBRequest")}} object; asynchronous operations communicate to the calling application by firing events on {{domxref("IDBRequest")}} objects.</p> + +<h3 id="Connecting_to_a_database">Connecting to a database</h3> + +<dl> + <dt>{{domxref("IDBEnvironment")}}</dt> + <dd>Provides access to IndexedDB functionality. It is implemented by the {{domxref("window")}} and {{domxref("worker")}} objects. This interface isn't part of the 2.0 specification.</dd> + <dt>{{domxref("IDBFactory")}}</dt> + <dd>Provides access to a database. This is the interface implemented by the global object {{domxref("WindowOrWorkerGlobalScope/indexedDB", "indexedDB")}} and is therefore the entry point for the API.</dd> + <dt>{{domxref("IDBOpenDBRequest")}}</dt> + <dd>Represents a request to open a database.</dd> + <dt>{{domxref("IDBDatabase")}}</dt> + <dd>Represents a connection to a database. It's the only way to get a transaction on the database.</dd> +</dl> + +<h3 id="Retrieving_and_modifying_data">Retrieving and modifying data</h3> + +<dl> + <dt>{{domxref("IDBTransaction")}}</dt> + <dd>Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or readwrite) that you want.</dd> + <dt>{{domxref("IDBRequest")}}</dt> + <dd>Generic interface that handles database requests and provides access to results.</dd> + <dt>{{domxref("IDBObjectStore")}}</dt> + <dd>Represents an object store that allows access to a set of data in an IndexedDB database, looked up via primary key.</dd> + <dt>{{domxref("IDBIndex")}}</dt> + <dd>Also allows access to a subset of data in an IndexedDB database, but uses an index to retrieve the record(s) rather than the primary key. This is sometimes faster than using {{domxref("IDBObjectStore")}}.</dd> + <dt>{{domxref("IDBCursor")}}</dt> + <dd>Iterates over object stores and indexes.</dd> + <dt>{{domxref("IDBCursorWithValue")}}</dt> + <dd>Iterates over object stores and indexes and returns the cursor's current value.</dd> + <dt>{{domxref("IDBKeyRange")}}</dt> + <dd>Defines a key range that can be used to retrieve data from a database in a certain range.</dd> + <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt> + <dd>Defines a key range that can be used to retrieve data from a database in a certain range, sorted according to the rules of the locale specified for a certain index (see <a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.). This interface isn't part of the 2.0 specification.</dd> +</dl> + +<h3 id="Custom_event_interfaces">Custom event interfaces</h3> + +<p>This specification fires events with the following custom interface:</p> + +<dl> + <dt>{{domxref("IDBVersionChangeEvent")}}</dt> + <dd>The <code>IDBVersionChangeEvent</code> interface indicates that the version of the database has changed, as the result of an {{domxref("IDBOpenDBRequest.onupgradeneeded")}} event handler function.</dd> +</dl> + +<h3 id="Obsolete_interfaces">Obsolete interfaces</h3> + +<p>An early version of the specification also defined the following, now removed, interfaces. They are still documented in case you need to update previously written code:</p> + +<dl> + <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt> + <dd>Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.</dd> + <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt> + <dd>Represents exception conditions that can be encountered while performing database operations.</dd> + <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBTransaction")}}.</dd> + <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBObjectStore")}}.</dd> + <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBIndex")}}.</dd> + <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBFactory")}}.</dd> + <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBEnvironment")}}.</dd> + <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBDatabase")}}.</dd> + <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt> + <dd>Sync version of {{domxref("IDBCursor")}}.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<ul> + <li><a class="external" href="https://marco-c.github.io/eLibri/">eLibri:</a> A powerful library and eBook reader application, written by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby.</li> + <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">view example live</a>): The reference application for the examples in the reference docs.</li> + <li><a class="external" href="https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("IndexedDB 2")}}</td> + <td>{{Spec2("IndexedDB 2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('IndexedDB')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.</li> + <li><a class="external" href="https://www.dexie.org/">Dexie.js</a>: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.</li> + <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: A MongoDB-like interface for IndexedDB that supports most of the familiar filtering, projection, sorting, updating and aggregation features of MongoDB.</li> + <li><a href="https://jsstore.net/">JsStore</a>: An IndexedDB wrapper with SQL like syntax.</li> + <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: A client-side in-memory mongodb backed by localstorage with server sync over http. MiniMongo is used by MeteorJS.</li> + <li><a href="https://pouchdb.com">PouchDB</a>: A client-side implementation of CouchDB in the browser using IndexedDB</li> + <li><a href="https://www.npmjs.com/package/idb">idb</a>: A tiny (~1.15k) library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.</li> + <li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: A super-simple-small (~600B) promise-based keyval store implemented with IndexedDB</li> + <li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> A small (~2kB) promise based library for client side key-value storage. Works with IndexedDB, localStorage, WebSQL, Cookies. Can automatically use supported storage available based on priority.</li> + <li><a href="https://github.com/google/lovefield">lovefield</a>: <span class="mr-2 text-gray-dark">Lovefield is a relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use.</span></li> +</ul> diff --git a/files/he/web/api/storage/clear/index.html b/files/he/web/api/storage/clear/index.html new file mode 100644 index 0000000000..f93b7cf4a4 --- /dev/null +++ b/files/he/web/api/storage/clear/index.html @@ -0,0 +1,52 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +translation_of: Web/API/Storage/clear +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>פונקציית <strong><code>()clear</code></strong> מאפשרת לנקות את כל המפתחות מהאחסון המקומי.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="brush: js"><em>storage</em>.clear();</pre> + +<h3 id="ערך_חוזר">ערך חוזר</h3> + +<p>undefined.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p><font><font>הפונקציה הבאה יוצרת שלושה פריטים באחסון המקומי, ולאחר מכן מוחקת אותם.</font></font></p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'miGato.png'); + + localStorage.clear(); +} +</pre> + +<h2 id="מפרט">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Storage.clear")}}</p> diff --git a/files/he/web/api/storage/getitem/index.html b/files/he/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..d18fcf9d3d --- /dev/null +++ b/files/he/web/api/storage/getitem/index.html @@ -0,0 +1,75 @@ +--- +title: localStorage.getItem() +slug: Web/API/Storage/getItem +translation_of: Web/API/Storage/getItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p> </p> + +<p>פונקציית <strong><code>()getItem</code></strong> מאפשרת לאחזר נתונים מהאחסון המקומי באמצעות שם המפתח.<br> + במידה והמפתח שרוצים לאחזר אינו קיים באחסון המקומי, יוחזר הערך null.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">var <em>aValue</em> = localStorage.getItem(<em>keyName</em>); +</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><em><code>keyName</code></em></dt> + <dd>שם המפתח אותו רוצים לאחזר.</dd> +</dl> + +<h3 id="ערך_חוזר">ערך חוזר</h3> + +<p>במידה והמפתח קיים באחסון המקומי הוא יחזיר את ערכו. במידה והמפתח אינו קיים יוחזר הערך null.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p>הפונקציה הבאה מאחזרת שלושה פריטי נתונים מהאחסון המקומי ולאחר מכן משתמשת בהם כדי להגדיר גיליונות סגנון מדורגים.</p> + +<pre class="brush: js">function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + currentColor = document.getElementById('bgcolor').value; + currentFont = document.getElementById('font').value; + currentImage = document.getElementById('image').value; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<h2 id="מפרט">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Storage.getItem")}}</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="https://developer.mozilla.org/he/docs/Web/API/Storage/setItem">()Storage.setItem </a></li> + <li><a href="/he/docs/Web/API/Storage/removeItem">()Storage.removeItem</a></li> +</ul> diff --git a/files/he/web/api/storage/index.html b/files/he/web/api/storage/index.html new file mode 100644 index 0000000000..b89a1ef6a2 --- /dev/null +++ b/files/he/web/api/storage/index.html @@ -0,0 +1,107 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Interface + - NeedsTranslation + - Reference + - Storage + - TopicStub + - Web Storage + - data +translation_of: Web/API/Storage +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>The <code>Storage</code> interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.</p> + +<p>To manipulate, for instance, the session storage for a domain, a call to the {{domxref("Window.sessionStorage")}} is made; whereas for local storage the call is made to {{domxref("Window.localStorage")}}.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> + <dd>Returns an integer representing the number of data items stored in the <code>Storage</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Storage.key()")}}</dt> + <dd>When passed a number n, this method will return the name of the nth key in the storage.</dd> +</dl> + +<dl> + <dt>{{domxref("Storage.getItem()")}}</dt> + <dd>When passed a key name, will return that key's value.</dd> + <dt>{{domxref("Storage.setItem()")}}</dt> + <dd>When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.</dd> + <dt>{{domxref("Storage.removeItem()")}}</dt> + <dd>When passed a key name, will remove that key from the storage.</dd> + <dt>{{domxref("Storage.clear()")}}</dt> + <dd>When invoked, will empty all keys out of the storage.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Here we access a <code>Storage</code> object by calling <code>localStorage</code>. We first test whether the local storage contains data items using <code>!localStorage.getItem('bgcolor')</code>. If it does, we run a function called <code>setStyles()</code> that grabs the data items using {{domxref("Storage.getItem()")}} and uses those values to update page styles. If it doesn't, we run another function, <code>populateStorage()</code>, which uses {{domxref("Storage.setItem()")}} to set the item values, then runs <code>setStyles()</code>.</p> + +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { + populateStorage(); +} +setStyles(); + +function populateStorage() { + localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); + localStorage.setItem('font', document.getElementById('font').value); + localStorage.setItem('image', document.getElementById('image').value); +} + +function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Note</strong>: To see this running as a complete working example, see our <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Storage")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li><a href="/en-US/docs/Web/API/Window/localStorage">Window.localStorage</a></li> +</ul> diff --git a/files/he/web/api/storage/key/index.html b/files/he/web/api/storage/key/index.html new file mode 100644 index 0000000000..9dfce0e52b --- /dev/null +++ b/files/he/web/api/storage/key/index.html @@ -0,0 +1,55 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +translation_of: Web/API/Storage/key +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>פונקציית <strong><code>()key</code></strong> מאפשרת לאחזר את שם המפתח באמצעות אינדקס.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>index</em>);</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><em>index</em></dt> + <dd>מספר שלם המייצג את מיקום המפתח שברצוננו לאחזר.</dd> +</dl> + +<h3 id="ערך_חוזר">ערך חוזר</h3> + +<p>במידה והמפתח קיים באחסון המקומי הוא יחזיר את שמו. במידה והמפתח אינו קיים יוחזר הערך null.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p>הפונקציה הבאה חוזרת על פריטי האחסון המקומיים ומקבלת את הערך שהוגדר עבור כל מפתח:</p> + +<pre class="brush: js">for(var i =0; i < localStorage.length; i++){ + console.log(localStorage.getItem(localStorage.key(i))); +} +</pre> + +<h2 id="מפרט">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Storage.key")}}</p> diff --git a/files/he/web/api/storage/length/index.html b/files/he/web/api/storage/length/index.html new file mode 100644 index 0000000000..6939e0bd1f --- /dev/null +++ b/files/he/web/api/storage/length/index.html @@ -0,0 +1,51 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +translation_of: Web/API/Storage/length +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>המאפיין <strong><code>length</code></strong> מאפשר לאחזר את מספר כל הפריטים שנמצאים באחסון המקומי ולהציגם באמצעות מספר שלם.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">var <em>aLength</em> = <em>Storage</em>.length;</pre> + +<h3 id="ערך_חוזר">ערך חוזר</h3> + +<p>מספר שלם.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p>הפונקציה הבאה מוסיפה שלושה פריטים לאחסון המקומי ולאחר מכן מחזירה את מספר כל הפריטים שנמצאים באחסון המקומי:</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'yellow'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'cats.png'); + + localStorage.length; // should return 3 +}</pre> + +<h2 id="מפרט">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Storage.length")}}</p> diff --git a/files/he/web/api/storage/removeitem/index.html b/files/he/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..5760eae6b3 --- /dev/null +++ b/files/he/web/api/storage/removeitem/index.html @@ -0,0 +1,66 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +translation_of: Web/API/Storage/removeItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>פונקציית <strong><code>()removeItem</code></strong> מאפשרת לאחזר נתונים מהאחסון המקומי באמצעות שם המפתח.<br> + ובמידה ושם המפתח לא קיים באחסון המקומי לא יבוצעו שינויים.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox"><em>storage</em>.removeItem(<em>keyName</em>);</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><em><u>keyName</u></em></dt> + <dd>שם המפתח אותו רוצים למחוק.</dd> +</dl> + +<h3 id="ערך_חוזר">ערך חוזר</h3> + +<p>חלל ריק.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p>הפונקציה הבאה יוצרת שלושה פריטים בתוך האחסון המקומי ולאחר מכן מסירה את פריט התמונה מהאחסון המקומי.</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); + + localStorage.removeItem('image'); +}</pre> + +<h2 id="מפרט">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Storage.removeItem")}}</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="https://developer.mozilla.org/he/docs/Web/API/Storage/setItem">()Storage.setItem </a></li> + <li><a href="/he/docs/Web/API/Storage/getItem">()Storage.getItem</a></li> +</ul> diff --git a/files/he/web/api/storage/setitem/index.html b/files/he/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..84225ee467 --- /dev/null +++ b/files/he/web/api/storage/setitem/index.html @@ -0,0 +1,69 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +translation_of: Web/API/Storage/setItem +--- +<p>{{APIRef("Web Storage API")}}<br> + פונקציית <strong><code>()setItem</code></strong> מאפשרת להוסיף נתונים אל האחסון המקומי באמצעות שני פרמטרים: שם מפתח וערך שאותם תיצור או תעדכן במידה וקיימים.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox"><em>storage</em>.setItem(<em>keyName</em>, <em>keyValue</em>);</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><code>keyName</code></dt> + <dd>מכיל את שמו של המפתח אותו יש ליצור או לעדכן.</dd> + <dt><code>keyValue</code></dt> + <dd>מכיל את שם הערך שיתווסף למפתח אותו אנו יוצרים או מעדכנים.</dd> +</dl> + +<h3 id="ערך_חוזר">ערך חוזר</h3> + +<p><code>undefined</code>.</p> + +<h3 id="החרגות">החרגות</h3> + +<p>במידה והאחסון מלא המערכות עשויה לנקות נתונים מהאחסון המקומי.<br> + בגרסה הניידת של דפדפן Safari, במידה והמשתמש נכנס אל מצב פרטי המערכת אינה שומרת נתונים באחסון המקומי ומסירה אותם באופן אוטומטי בשל מגבלת גודל של 0 בתים.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p>הפונקציה הבאה יוצרת שלושה פריטי נתונים בתוך האחסון המקומי.</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); +}</pre> + +<h2 id="מפרט">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Storage.setItem")}}</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="/he/docs/Web/API/Storage/getItem">()Storage.getItem</a></li> + <li><a href="/he/docs/Web/API/Storage/removeItem">()Storage.removeItem</a></li> +</ul> diff --git a/files/he/web/api/web_storage_api/index.html b/files/he/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..51a64e09b3 --- /dev/null +++ b/files/he/web/api/web_storage_api/index.html @@ -0,0 +1,111 @@ +--- +title: ממשק פיתוח היישומים Web Storage +slug: Web/API/Web_Storage_API +translation_of: Web/API/Web_Storage_API +--- +<div style="direction: ltr !important;">{{DefaultAPISidebar("Web Storage API")}}</div> + +<p>The <strong>Web Storage API</strong> provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using {{glossary("cookie", "cookies")}}.</p> + +<h2 id="Web_Storage_concepts_and_usage">Web Storage concepts and usage</h2> + +<p>The two mechanisms within Web Storage are as follows:</p> + +<ul> + <li><code>sessionStorage</code> maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores) + + <ul> + <li>Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.</li> + <li>Data is never transferred to the server.</li> + <li>Storage limit is larger than a cookie (at most 5MB).</li> + </ul> + </li> + <li><code>localStorage</code> does the same thing, but persists even when the browser is closed and reopened. + <ul> + <li>Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.</li> + <li>Storage limit is the maximum amongst the three.</li> + </ul> + </li> +</ul> + +<p>These mechanisms are available via the {{domxref("Window.sessionStorage")}} and {{domxref("Window.localStorage")}} properties (to be more precise, in supporting browsers the <code>Window</code> object implements the <code>WindowLocalStorage</code> and <code>WindowSessionStorage</code> objects, which the <code>localStorage</code> and <code>sessionStorage</code> properties hang off) — invoking one of these will create an instance of the {{domxref("Storage")}} object, through which data items can be set, retrieved and removed. A different Storage object is used for the <code>sessionStorage</code> and <code>localStorage</code> for each origin — they function and are controlled separately.</p> + +<div class="note"> +<p><strong>Note</strong>: From Firefox 45 onwards, when the browser crashes/restarts, the amount of data saved per origin is limited to 10MB. This has been done to avoid memory issues caused by excessive usage of web storage.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Access to Web Storage from third-party IFrames is denied if the user has <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">disabled third-party cookies</a> (Firefox implements this behaviour from <a href="/en-US/docs/Mozilla/Firefox/Releases/43">version 43</a> onwards.)</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Web Storage is not the same as <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces to SQLite) or the <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (an <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> storage utility for use by extensions).</p> +</div> + +<h2 id="Web_Storage_interfaces">Web Storage interfaces</h2> + +<dl> + <dt>{{domxref("Storage")}}</dt> + <dd>Allows you to set, retrieve and remove data for a specific domain and storage type (session or local.)</dd> + <dt>{{domxref("Window")}}</dt> + <dd>The Web Storage API extends the {{domxref("Window")}} object with two new properties — {{domxref("Window.sessionStorage")}} and {{domxref("Window.localStorage")}} — which provide access to the current domain's session and local {{domxref("Storage")}} objects respectively, and a {{domxref("Window.onstorage")}} event handler that fires when a storage area changes (e.g. a new item is stored.)</dd> + <dt>{{domxref("StorageEvent")}}</dt> + <dd>The <code title="event-storage">storage</code> event is fired on a document's <code>Window</code> object when a storage area changes.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>To illustrate some typical web storage usage, we have created a simple example, imaginatively called <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. The <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> provides controls that can be used to customize the colour, font and decorative image. When you choose different options, the page is instantly updated; in addition your choices are stored in <code>localStorage</code>, so that when you leave the page then load it again later on your choices are remembered.</p> + +<p>In addition, we have provided an <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as the {{domxref("StorageEvent")}} is fired.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Window.localStorage"><code>Window.localStorage</code></h3> + +<div> + + +<p>{{Compat("api.Window.localStorage")}}</p> + +<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Window.sessionStorage")}}</p> +</div> +</div> + +<h2 id="Private_Browsing_Incognito_modes">Private Browsing / Incognito modes</h2> + +<p>Most modern browsers support a privacy option called 'Incognito', 'Private Browsing' or something similar that doesn't store data like history and cookies. This is fundamentally incompatible with Web Storage for obvious reasons. As such, browser vendors are experimenting with different scenarios for how to deal with this incompatibility.</p> + +<p>Most browsers have opted for a strategy where storage APIs are still available and seemingly fully functional, with the one big difference that all stored data is wiped after the browser is closed. For these browsers there are still different interpretations of what should be done with existing stored data (from a regular browsing session). Should it be available to read when in Private mode? Then there are some browsers, most notably Safari, that have opted for a solution where storage is available, but is empty and has a quota of 0 bytes assigned, effectively making it impossible to write data to it.</p> + +<p>Developers should be aware of these different implementations and take them into account when developing websites depending on Web Storage APIs. For more information please have a look at <a href="https://blog.whatwg.org/this-week-in-html-5-episode-30">this WHATWG blog post</a> that specifically deals with this topic.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a></li> + <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li> +</ul> diff --git a/files/he/web/api/window/alert/index.html b/files/he/web/api/window/alert/index.html new file mode 100644 index 0000000000..0346b5f73a --- /dev/null +++ b/files/he/web/api/window/alert/index.html @@ -0,0 +1,70 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +tags: + - אזהרה + - חלון הודעה + - פופ-אפ +translation_of: Web/API/Window/alert +--- +<p>{{ APIRef }}</p> + +<p><strong><code>Window.alert()</code></strong> - מציגה הודעת אזהרה עם תוכן וכפתור לאישור וסגירה.</p> + +<h2 id="Syntax" name="Syntax">תחביר</h2> + +<pre class="syntaxbox">window.alert(<em>message</em>);</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>מחרוזת שתופיעה כגוף ההודעה בתיבת הדו-שיח של ההתראה.</dd> +</dl> + +<h2 id="Example" name="Example">דוגמאות</h2> + +<pre class="brush: js">window.alert("Hello world!"); +alert("Hello world!");</pre> + +<p>שתי הדוגמאות מייצרות את ההודעה הבאה:</p> + +<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p> + +<h2 id="Notes" name="Notes">הערות</h2> + +<p> </p> + +<p>תפקידן של תיבות ההתראה הינן להצגת הודעות שאינן דורשות תגובה מצד המשתמש, מלבד היכרות וקריאת ההודעה.</p> + +<p> </p> + +<h2 id="Specification" name="Specification">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Window.alert")}}</p> + +<h2 id="See_also" name="See_also">ראה גם</h2> + +<ul> + <li>{{domxref("window.confirm","confirm")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> +</ul> diff --git a/files/he/web/api/window/confirm/index.html b/files/he/web/api/window/confirm/index.html new file mode 100644 index 0000000000..54ab3e903a --- /dev/null +++ b/files/he/web/api/window/confirm/index.html @@ -0,0 +1,70 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - אישור הודעה + - דפדפן + - הודעה + - חלון התראה + - פופ-אפ +translation_of: Web/API/Window/confirm +--- +<div>{{ApiRef("Window")}}</div> + +<div><code><strong>Window.confirm()</strong></code> - מציגה תיבת דו-שיח עם תוכן וכפתורי אישור וביטול.</div> + +<h2 id="Syntax" name="Syntax">תחביר</h2> + +<pre><em>result</em> = window.confirm(<em>message</em>); +</pre> + +<ul> + <li><code>message</code> - מחרוזת שתופיע בגוף ההודעה.</li> + <li><code>result</code> - ערך בוליאני בו מצוינת בחירת המשתמש (אישור או ביטול).</li> +</ul> + +<h2 id="Example" name="Example">דוגמאות</h2> + +<pre>if (window.confirm("Do you really want to leave?")) { + window.open("exit.html", "Thanks for Visiting!"); +} +</pre> + +<p>הדוגמה תציג את ההודעה הבאה:</p> + +<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br> + </p> + +<h2 id="Notes" name="Notes">הערות</h2> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span> תיבות דו-שיח מונעות מהמשתמש גישה לממשק התוכנית עד אשר היא תיסגר.</p> + +<h2 id="Specification" name="Specification">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Window.confirm")}}</p> + +<h2 id="See_also" name="See_also">ראה גם</h2> + +<ul> + <li>{{domxref("window.alert","alert")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> +</ul> diff --git a/files/he/web/api/window/index.html b/files/he/web/api/window/index.html new file mode 100644 index 0000000000..70b807464b --- /dev/null +++ b/files/he/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/he/web/api/window/localstorage/index.html b/files/he/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..1f423a8ef1 --- /dev/null +++ b/files/he/web/api/window/localstorage/index.html @@ -0,0 +1,82 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>התכונה לקריאה בלבד <span class="seoSummary"> <strong><code>localStorage</code></strong> מאפשרת לך לגשת לאובייקט מסוג {{DOMxRef("Storage")}} עבור המקור של {{DOMxRef("Document")}}; הנתונים המאוחסנים</span><span class="seoSummary">נשמרים בכל מפגשי הדפדפן.</span> <code>localStorage</code> דומה ל-{{DOMxRef("Window.sessionStorage", "sessionStorage")}}, פרט לכך שבעוד תוקפם של הנתונים הנשמרים ב- <code>localStorage</code> אינו פג, נתונים הנשמרים ב-,<code>sessionStorage</code> נמחקים עם תום המפגש של הדף — כלומר, כשהדף נסגר.</p> + +<p>יש לציין כי נתונים הנשמרים ב-<code>localStorage</code> או ב-<code>sessionStorage</code> הם מפורטים בפרוטוקול הדף.</p> + +<p>המפתחות והערכים יביו <strong>תמיד מחרוזות</strong> (לתשומת לבך, בדומה לאובייקטים, מפתחות מטיפוס מספר שלם יומרו אוטומטית למחרוזות).</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox"><em>myStorage</em> = <em>window</em>.localStorage;</pre> + +<h3 id="ערך">ערך</h3> + +<p>אובייקט מסוג {{DOMxRef("Storage")}} שניתן להשתמש בו לגישה לשטח האיחסון המקומי של המקור הנוכחי.</p> + +<h3 id="חריגות">חריגות</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>הבקשה מפרה החלטות מדיניות, או שהמקור אינו <a href="/en-US/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">a valid scheme/host/port tuple</a> (זה יכול לקרות אם המקור משתמש בסכמת (t <code>file:</code> או <code>data:</code>, למשל). לדוגמא, ייתכן שלמשתמש דפדפן המוגדר כך שישלול הרשאה לשמור נתונים כבלתי משתנים עבור מקור מסויים.</dd> +</dl> + +<h2 id="דוגמא">דוגמא</h2> + +<p>קטע הקוד הבא ניגש לאובייקט ה-{{DOMxRef("Storage")}} המקומי של המתחם הנוכחי , ומוסיף לו נתון באמצעות {{DOMxRef("Storage.setItem()")}}.</p> + +<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre> + +<p>התחביר לקריאת נתון ה-<code>localStorage</code> הוא כדלקמן:</p> + +<pre class="brush: js">var cat = localStorage.getItem('myCat');</pre> + +<p> התחביר למחיקת נתון ה-<code>localStorage</code> הוא כדלקמן:</p> + +<pre class="brush: js">localStorage.removeItem('myCat');</pre> + +<p>התחביר למחיקת כל הנתונים ב-<code>localStorage</code> הוא כדלקמן:</p> + +<pre class="brush: js">// Clear all items +localStorage.clear(); +</pre> + +<div class="note"> +<p><strong>לתשומת לבך</strong>: נא לעיין במאמר <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> כדי לצפות בדוגמא השלמה.</p> +</div> + +<h2 id="מפרטים">מפרטים</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">מפרט</th> + <th scope="col">מצב</th> + <th scope="col">הערה</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפנים">תאימות דפדפנים</h2> + +<div class="hidden">טבלת התאימות בדף זה נוצרה מנתונים המסודרים במבנה. אם תרצו לתרום לנתונים, אנא שלפו מ- <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> pull request ושלחו לנו בקשת משיכה.</div> + +<p>{{Compat("api.Window.localStorage")}}</p> + +<h2 id="לעיון_נוסף">לעיון נוסף</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Local_storage">Local storage with Window.localStorage</a></li> + <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{DOMxRef("Window.sessionStorage")}}</span></li> +</ul> diff --git a/files/he/web/api/window/prompt/index.html b/files/he/web/api/window/prompt/index.html new file mode 100644 index 0000000000..a57610aa13 --- /dev/null +++ b/files/he/web/api/window/prompt/index.html @@ -0,0 +1,90 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +tags: + - דו-שיח + - הודעה + - פופ-אפ +translation_of: Web/API/Window/prompt +--- +<div>{{ApiRef("Window")}}</div> + +<p><strong><code>Window.prompt()</code></strong> - מציגה תיבת דו-שיח עם תוכן, כפתורי אישור וביטול ומאפשרת למשתמש להזין טקסט ומספרים.</p> + +<h2 id="Syntax" name="Syntax">תחביר</h2> + +<pre class="syntaxbox"><em>result</em> = window.prompt(<em>message</em>); +</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>מחרוזת שתופיע בגוף ההודעה.</dd> +</dl> + +<h2 id="Example" name="Example">דוגמאות</h2> + +<pre class="brush: js">let sign = prompt("What's your sign?"); + +if (sign.toLowerCase() == "scorpio") { + alert("Wow! I'm a Scorpio too!"); +} + +// there are many ways to use the prompt feature +sign = window.prompt(); // open the blank prompt window +sign = prompt(); // open the blank prompt window +sign = window.prompt('Are you feeling lucky'); // open the window with Text "Are you feeling lucky" +sign = window.prompt('Are you feeling lucky', 'sure'); // open the window with Text "Are you feeling lucky" and default value "sure"</pre> + +<p> </p> + +<p>כאשר המשתמש לוחץ על לחצן האישור, הטקסט שהוזן בשדה הקלט מוחזר. במידה והמשתמש לוחץ על אישור מבלי להזין טקסט, מחרוזת ריקה מוחזרת. במידה והמשתמש לוחץ על לחצן ביטול, פונקציה זו מחזירה null.</p> + +<p>ההודעה הנ"ל מופיעה כדלקמן (בדפדפן Chrome במערכת הפעלה OS X):</p> + +<p> </p> + +<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p> + +<h2 id="Notes" name="Notes">הערות</h2> + +<p> </p> + +<p>תיבת הדו-שיח מכילה תיבת טקסט בת שורה אחת, לחצני ביטול ואישור ומחזירה את הטקסט שהמשתמש הזין בתיבת הטקסט. תיבות דו-שיח מונעות מהמשתמש גישה לממשק התוכנית עד אשר היא תיסגר.</p> + +<p>יש לשים לב שהערך המחוזר מהשתמש יהיה מחרוזת. במידה והתשובה שלו צריכה להיות מספר, יש להמיר את הערך למספר.</p> + +<p> </p> + +<pre class="brush: js">const aNumber = Number(window.prompt("Type a number", ""));</pre> + +<h2 id="Specification" name="Specification">מפרט</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">תאימות דפדפן</h2> + + + +<p>{{Compat("api.Window.prompt")}}</p> + +<h2 id="See_also" name="See_also">ראה גם</h2> + +<ul> + <li>{{domxref("window.alert", "alert")}}</li> + <li>{{domxref("window.confirm", "confirm")}}</li> +</ul> diff --git a/files/he/web/api/xmlhttprequest/index.html b/files/he/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..8a5c739854 --- /dev/null +++ b/files/he/web/api/xmlhttprequest/index.html @@ -0,0 +1,172 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - Communication + - HTTP + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web + - XHR + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +<div>{{APIRef("XMLHttpRequest")}}</div> + +<p><span class="seoSummary">Use <code>XMLHttpRequest</code> (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.</span> <code>XMLHttpRequest</code> is used heavily in <a href="/en-US/docs/AJAX">Ajax</a> programming.</p> + +<p>{{InheritanceDiagram(650, 150)}}</p> + +<p>Despite its name, <code>XMLHttpRequest</code> can be used to retrieve any type of data, not just XML, and it supports protocols other than <a href="/en-US/docs/Web/HTTP">HTTP</a> (including <code>file</code> and <code>ftp</code>).</p> + +<p>If your communication needs to involve receiving event data or message data from a server, consider using <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a> through the {{domxref("EventSource")}} interface. For full-duplex communication, <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> may be a better choice.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> + <dd>The constructor initializes an XMLHttpRequest. It must be called before any other method calls.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> + <dd>An {{domxref("EventHandler")}} that is called whenever the <code>readyState</code> attribute changes.</dd> + <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> + <dd>Returns an <code>unsigned short</code>, the state of the request.</dd> + <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> + <dd>Returns an {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript object, or a {{domxref("DOMString")}}, depending on the value of {{domxref("XMLHttpRequest.responseType")}}. that contains the response entity body.</dd> + <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("DOMString")}} that contains the response to the request as text, or <code>null</code> if the request was unsuccessful or has not yet been sent.</dd> + <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> + <dd>Is an enumerated value that defines the response type.</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> + <dd>Returns the serialized URL of the response or the empty string if the URL is null.</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("Document")}} containing the response to the request, or <code>null</code> if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML.</dd> + <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> + <dd>Returns an <code>unsigned short</code> with the status of the response of the request.</dd> + <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the response string returned by the HTTP server. Unlike {{domxref("XMLHTTPRequest.status")}}, this includes the entire text of the response message ("<code>200 OK</code>", for example).</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> According to the HTTP/2 specification (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.</p> +</div> + +<dl> + <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> + <dd>Is an <code>unsigned long</code> representing the number of milliseconds a request can take before automatically being terminated.</dd> + <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} that is called whenever the request times out. {{gecko_minversion_inline("12.0")}}</dd> + <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> + <dd>Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.</dd> + <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> + <dd>Is a {{domxref("Boolean")}} that indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers.</dd> +</dl> + +<h3 id="Non-standard_properties">Non-standard properties</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> + <dd>Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.</dd> + <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> + <dd>Is a boolean. If true, the request will be sent without cookie and authentication headers.</dd> + <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> + <dd>Is a boolean. If true, the same origin policy will not be enforced on the request.</dd> + <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> + <dd>Is a boolean. It indicates whether or not the object represents a background service request.</dd> + <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> + <dd>Is an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. The response to the request, as a JavaScript typed array.</dd> + <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> + <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, or <code>responseText</code> from progress events instead.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p><code>onreadystatechange</code> as a property of the <code>XMLHttpRequest</code> instance is supported in all browsers.</p> + +<p>Since then, a number of additional event handlers have been implemented in various browsers (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). See <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<p>More recent browsers, including Firefox, also support listening to the <code>XMLHttpRequest</code> events via standard <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> APIs in addition to setting <code>on*</code> properties to a handler function.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.abort()")}}</dt> + <dd>Aborts the request if it has already been sent.</dd> + <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> + <dd>Returns all the response headers, separated by <a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>, as a string, or <code>null</code> if no response has been received.</dd> + <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> + <dd>Returns the string containing the text of the specified header, or <code>null</code> if either the response has not yet been received or the header doesn't exist in the response.</dd> + <dt>{{domxref("XMLHttpRequest.open()")}}</dt> + <dd>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> instead.</dd> + <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> + <dd>Overrides the MIME type returned by the server.</dd> + <dt>{{domxref("XMLHttpRequest.send()")}}</dt> + <dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd> + <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> + <dd>Sets the value of an HTTP request header. You must call <code>setRequestHeader()</code>after <a href="#open"><code>open()</code></a>, but before <code>send()</code>.</dd> +</dl> + +<h3 id="Non-standard_methods">Non-standard methods</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.init()")}}</dt> + <dd>Initializes the object for use from C++ code.</dd> +</dl> + +<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div> + +<dl> + <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> + <dd>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for <code>open()</code>.</dd> + <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> + <dd>A variant of the <code>send()</code> method that sends binary data.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Live standard, latest version</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.XMLHttpRequest")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("XMLSerializer")}}: Serializing a DOM tree into XML</li> + <li>MDN tutorials covering <code>XMLHttpRequest</code>: + <ul> + <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + </ul> + </li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> +</ul> diff --git a/files/he/web/css/index.html b/files/he/web/css/index.html new file mode 100644 index 0000000000..55679b0c8b --- /dev/null +++ b/files/he/web/css/index.html @@ -0,0 +1,97 @@ +--- +title: 'CSS: גיליונות סגנון מדורגים' +slug: Web/CSS +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) is a <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> language used to describe the presentation of a document written in <a href="/en-US/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> or <a href="/en-US/docs/XML_introduction">XML</a> (including XML dialects such as <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a> or {{Glossary("XHTML", "", 1)}}). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.</p> + +<p>CSS is one of the core languages of the <strong>open Web</strong> and is standardized across Web browsers according to the <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Developed in levels, CSS1 is now obsolete, CSS2.1 is a recommendation, and <a href="/en-US/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, now split into smaller modules, is progressing on the standardization track.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS Introduction</span> + + <p>If you're new to web development, be sure to read our <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> article to learn what CSS is and how to use it.</p> + </li> + <li><span>CSS Tutorials</span> + <p>Our <a href="/en-US/docs/Learn/CSS">CSS learning area</a> contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals.</p> + </li> + <li><span>CSS Reference</span> + <p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutorials">Tutorials</h2> + +<p>Our <a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> features multiple modules that teach CSS from the ground up — no previous knowledge required.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>This module starts with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>This module discusses text styling fundamentals, including setting fonts, boldness, italics, line and letter spacing, text drop shadows, and other text properties. This module finishes with applying custom fonts to your page, and styling lists and links.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>This module looks at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model, then look at controlling box layouts by setting margins, borders, and padding, custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and newfangled layout tools like flexbox.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Reference">Reference</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li> + <li>CSS key concepts: + <ul> + <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS units and values</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li> + <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li> + <li><a href="/en-US/docs/Web/CSS/animation">Animation</a></li> + </ul> + </li> +</ul> + +<h2 class="Tools" id="Cookbook">Cookbook</h2> + +<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p> + +<h2 class="Tools" id="Tools_for_CSS_development">Tools for CSS development</h2> + +<ul> + <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li> + <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li> + <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li> +</ul> + +<h2 id="Meta_bugs">Meta bugs</h2> + +<ul> + <li>Firefox: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li> + <li>Web languages to which CSS is often applied: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, and <a href="/en-US/docs/XML_introduction">XML</a>.</li> + <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Mozilla/Add-ons">extensions</a> and <a href="/en-US/docs/Mozilla/Add-ons/Themes">themes</a>.</li> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla mailing list</a></li> + <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">Stack Overflow questions about CSS</a></li> +</ul> diff --git a/files/he/web/css/position/index.html b/files/he/web/css/position/index.html new file mode 100644 index 0000000000..0abe4c2b87 --- /dev/null +++ b/files/he/web/css/position/index.html @@ -0,0 +1,274 @@ +--- +title: 'position: מיקומים' +slug: Web/CSS/position +tags: + - Position + - css positions + - מיקום + - מיקומים ב-CSS +translation_of: Web/CSS/position +--- +<div>{{CSSRef}}</div> + +<div>מיקומים הינם חוקי CSS המאפשרים לסדר אלמנטים שונים ולשלוט באופן התצוגה שלהם באמצעות מאפיינים שונים:</div> + +<div>{{Cssxref("top")}} ,{{Cssxref("right")}}, {{Cssxref("bottom")}} {{Cssxref("left")}}</div> + +<div> </div> + +<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div> + + + +<dl> + <dd> + <h3 id="סוגי_מיקומים">סוגי מיקומים</h3> + </dd> + <dd> + <p>אלמנט ממוקם הוא אלמנט שערכו המחושב הוא ערך יחסי (<code>relative</code>), מוחלט (<code>absolute</code>), קבוע (<code>fixed</code>) או דביק (<code>sticky</code>) וכל דבר שאינו סטטי (<code>static</code>).</p> + </dd> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<dl> + <dt id="static"><code>static</code></dt> + <dd>זהו מאפיין ברירת המחדל הממקם את האלמנט בהתאם לכללים הסטנדרטים של הדף, כמו כן למאפיין {{cssxref("z-index")}} אין השפעה על סדר הדף.</dd> + <dt id="relative"><code>relative</code></dt> + <dd>האלמנט ממוקם בהתאם לזרימה הרגילה של המסמך ולאחר מכן מזיז את עצמו באמצעות הערכים <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>. הזזתו אינה משפיע על מיקומם של מרכיבים אחרים ולכן, המרחב שניתן עבור האלמנט בפריסת הדף זהה לזה של המיקום הסטטי.</dd> + <dt id="absolute"><code>absolute</code></dt> + <dd>האלמנט מוסר מהזרימה הרגילה של המסמך, לא נוצר מרווח יחודי עבור האלמנט אותו הוא מייצג. האלמנט ממוקם ביחס לאלמנט <code>relative</code> הקרוב ביותר אליו, במידה ואין כזה הוא ימוקם באופן יחסי לאלמנט האב הראשון של המסמך. ניתן להזיז אותו באמצעות הערכים <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>.</dd> + <dt id="fixed"><code>fixed</code></dt> + <dd>האלמנט מוסר מהזרימה הרגילה של המסמך, לא נוצר מרווח יחודי עבור האלמנט אותו הוא מייצג. האלמנט ימוקם באופן קבוע ויחסי לאלמנט האב הראשון של המסמך. ניתן להזיז אותו באמצעות הערכים <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>.</dd> + <dt id="sticky"><code>sticky</code></dt> + <dd>האלמנט ממוקם בהתאם לזרימה הרגילה של המסמך ולאחר מכן מזיז את עצמו ביחס לאלמנט האב הקרוב ביותר אליו. ניתן להזיז אותו באמצעות הערכים top, right, bottom, left והתזוזה שלו אינה משפיעה על המיקום של שאר האלמנטים. כאשר משתמשים בתכונה זו יש לשים לב שבעת הגלילה האלמנט יסתיר אלמנטים אחרים שנמצאים מתחתיו.</dd> +</dl> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="Relative_positioning" name="Relative_positioning">מיקום אלמנט באמצעות Relative </h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: relative; + top: 20px; + left: 20px; + background: blue; +} +</pre> + +<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p> + +<h3 id="Absolute_positioning" name="Absolute_positioning">מיקום אלמנט באמצעות Absolute</h3> + +<pre class="brush: html"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> + +<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> + +<p> </p> + +<h3 id="Fixed_positioning" name="Fixed_positioning">מיקום אלמנט באמצעות Fixed</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="outer"> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <div class="box" id="one">One</div> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.box { + width: 100px; + height: 100px; + background: red; + color: white; +} + +#one { + position: fixed; + top: 80px; + left: 10px; + background: blue; +} + +.outer { + width: 500px; + height: 300px; + overflow: scroll; + padding-left: 150px; +} +</pre> + +<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p> + +<h3 id="Sticky_positioning" name="Sticky_positioning">מיקום אלמנט באמצעות Sticky </h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><dl> + <div> + <dt>A</dt> + <dd>Andrew W.K.</dd> + <dd>Apparat</dd> + <dd>Arcade Fire</dd> + <dd>At The Drive-In</dd> + <dd>Aziz Ansari</dd> + </div> + <div> + <dt>C</dt> + <dd>Chromeo</dd> + <dd>Common</dd> + <dd>Converge</dd> + <dd>Crystal Castles</dd> + <dd>Cursive</dd> + </div> + <div> + <dt>E</dt> + <dd>Explosions In The Sky</dd> + </div> + <div> + <dt>T</dt> + <dd>Ted Leo &amp; The Pharmacists</dd> + <dd>T-Pain</dd> + <dd>Thrice</dd> + <dd>TV On The Radio</dd> + <dd>Two Gallants</dd> + </div> +</dl> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">* { + box-sizing: border-box; +} + +dl > div { + background: #FFF; + padding: 24px 0 0 0; +} + +dt { + background: #B8C1C8; + border-bottom: 1px solid #989EA4; + border-top: 1px solid #717D85; + color: #FFF; + font: bold 18px/21px Helvetica, Arial, sans-serif; + margin: 0; + padding: 2px 0 0 12px; + position: -webkit-sticky; + position: sticky; + top: -1px; +} + +dd { + font: bold 20px/45px Helvetica, Arial, sans-serif; + margin: 0; + padding: 0 0 0 12px; + white-space: nowrap; +} + +dd + dd { + border-top: 1px solid #CCC; +} +</pre> + +<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p> + +<h2 id="Specifications" name="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('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td>Adds <code>sticky</code> property value.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">תאימות לדפדפן</h2> + + + +<p>{{Compat("css.properties.position")}}</p> diff --git a/files/he/web/guide/html/html5/index.html b/files/he/web/guide/html/html5/index.html new file mode 100644 index 0000000000..80107c9424 --- /dev/null +++ b/files/he/web/guide/html/html5/index.html @@ -0,0 +1,177 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - Guide + - HELP + - HTML + - HTML5 + - NeedsTranslation + - Overview + - TopicStub + - Web + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> is the latest evolution of the standard that defines <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>The term represents two different concepts:</p> + +<ul> + <li><span class="seoSummary">It is a new version of the <em>language</em> HTML, with new elements, attributes, and behaviors,</span></li> + <li><span class="seoSummary">and a larger set of <strong>technologies</strong> that allows more diverse and powerful Web sites and applications.</span> This set is sometimes called <em>HTML5 & friends</em> and often shortened to just <em>HTML5</em>.</li> +</ul> + +<p>Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.</p> + +<ul> + <li><em>Semantics</em>: allowing you to describe more precisely what your content is.</li> + <li><em>Connectivity</em>: allowing you to communicate with the server in new and innovative ways.</li> + <li><em>Offline & Storage</em>: allowing webpages to store data on the client-side locally and operate offline more efficiently.</li> + <li><em>Multimedia</em>: making video and audio first-class citizens in the Open Web.</li> + <li><em>2D/3D Graphics & Effects</em>: allowing a much more diverse range of presentation options.</li> + <li><em>Performance & Integration</em>: providing greater speed optimization and better usage of computer hardware.</li> + <li><em>Device Access</em>: allowing for the usage of various input and output devices.</li> + <li><em>Styling</em>: letting authors write more sophisticated themes.</li> +</ul> + +<div class="cleared row topicpage-table"> +<h2 id="Semantics" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantics</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt> + <dd>A look at the new outlining and sectioning elements in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Forms in HTML5</a></dt> + <dd>A look at improvements to web forms in HTML5: the constraint validation API, several new attributes, new values for the {{HTMLElement("input")}} attribute {{htmlattrxref("type", "input")}} and the new {{HTMLElement("output")}} element.</dd> + <dt>New semantic elements</dt> + <dd>Beside sections, media and forms elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the amount of <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd> + <dt>Improvement in {{HTMLElement("iframe")}}</dt> + <dd>Using the {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Allows directly embedding mathematical formulas.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt> + <dd>This article introduces how to indicate to the browser that you are using HTML5 in your web design or web application.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt> + <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> +</dl> + +<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> +</dl> + +<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & storage</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</a></dt> + <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt> + <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt>Track and WebVTT</dt> + <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> +</dl> + +<h2 id="3D_graphics_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics & effects</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> + <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code><canvas></code> elements</a></dt> + <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> + <br> + <br> + +</dl> + +<div class="section"> +<h2 id="Performance_integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance & integration</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt> + <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> +</dl> + +<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Device access</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> + <dd>Let browsers locate the position of the user using geolocation.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="Styling" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/he/web/guide/index.html b/files/he/web/guide/index.html new file mode 100644 index 0000000000..e6e9e81592 --- /dev/null +++ b/files/he/web/guide/index.html @@ -0,0 +1,62 @@ +--- +title: מדריך למפתח אינטרנט +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p dir="rtl"><strong>מאמרים אלה מספקים עזרה לגבי שימוש בטכנלוגיות אינטרנט ו- API מסוימים.</strong></p> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/he/docs/Learn/HTML">אזור לימוד HTML</a></dt> + <dd class="landingPageList"><strong>HTML (שפת תגיות לתמליל-על או HyperText Markup Language)</strong> הינה שפת הליבה של כמעט כל תוכן הרשת. מרבית הדברים על המסך בדפדפן שלך מתוארים בבסיסם על-ידי שימוש ב- HTML.</dd> + <dt class="landingPageList"><a href="/he/docs/Learn/CSS">אזור לימוד CSS</a></dt> + <dd class="landingPageList"><strong>CSS (גליונות סגנון מדורגים, או Cascading Style Sheets stylesheet)</strong> הינה שפה המשמשת להגדיר תצוגת מסמך HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/Web/Guide/Events">מדריך אירועים (Events) למפתח</a></dt> + <dd class="landingPageList">אירועים (Events) מתייחסים לשני דברים:<br> + תבנית עיצוב המשמשת לטיפול אסינכרוני במקרים שונים המתרחשים במהלך חיי עמוד האינטרנט;<br> + והשיום (naming), אפיון והשימוש במספר גדול של מקרים מסוגים שונים.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/Guide/AJAX">AJAX</a></dt> + <dd class="landingPageList">AJAX הוא מונח המגדיר קבוצת טכנולוגיות המאפשרות לאפליקציות רשת לבצע עדכונים מהירים ומצטברים לממשק המשתמש ללא טעינה מחדש של כל העמוד. דבר זה הופך את האפליקציה למהירה ותגובתית יותר לפעולות המשתמש.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/Web/Guide/Graphics">גרפיקה ברשת</a></dt> + <dd class="landingPageList">אתרי אינטרנט ואפליקציות מודרניות זקוקים לעתים להציג גרפיקה עם רמות תחכום שונות.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/Web/Guide/API">מדריך ל- API ברשת</a></dt> + <dd class="landingPageList">רשימה של כל ה- API האינטרנטיים, ומה הם עושים.</dd> + <dt><a href="https://developer.mozilla.org/he/docs/JavaScript" title="/he/docs/JavaScript">ג'אווה-סקריפט (JavaScript)</a></dt> + <dd>JavaScript היא שפת תסריט (סקריפטינג) חזקה, המשמשת ליצירת אפליקציות באינטרנט.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/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/he/docs/Web/Guide/Mobile">פיתוח אינטרנט למובייל</a></dt> + <dd class="landingPageList">This article 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/he/Apps/Progressive#Core_PWA_guides">אפליקציות אינטרנט מתקדמות (PWA)</a></dt> + <dd class="landingPageList">Progressive web apps (PWAs) 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 guides tells you all you need to know about PWAs.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/Web/Guide/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/he/docs/Web/Guide/Parsing_and_serializing_XML">ניתוח וסריאליזציה של XML</a></dt> + <dd class="landingPageList">פלטפורמת הרשת מספקת שיטות שונות לניתוח וסריאליזציה (סדרות) של XML, כל אחת מהן עם יתרונותיה וחסרונותיה.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/Web/Guide/WOFF">פורמט גופן אינטרנט פתוח (WOFF, Web Open Font Format)</a></dt> + <dd class="landingPageList">WOFF (Web Open Font Format) הוא תצורת קובץ גופן (פונט) זמינה לשימוש ברשת בחינם.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/Web/Guide/Using_FormData_Objects">שימוש באובייקט FormData</a></dt> + <dd class="landingPageList">אובייקט <code><a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData">FormData</a></code> מאפשר להדר אוסף של זוגות מפתח/ערך (key/value), כדי לשלוח בקשת <code>XMLHttpRequest</code>. הוא מיועד בעיקר לשלוחת פרטי טופס, אבל ניתן להשתמש בו באופן נפרד מטפסים, כדי לשלוח מידע. התשדורת נעשית באותה תצורה כמו שמתודת <code style="display: inline-block; direction: ltr;">submit()</code> שולחת טופס שהקידוד שלו הוא "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/he/docs/Glossary">מילון מלים</a></dt> + <dd class="landingPageList">מגדיר מספר מונחים טכניים הקשורים לרשת ולאינטרנט.</dd> +</dl> +</div> +</div> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul dir="rtl"> + <li><a href="/he/docs/Web/Reference" title="/he/docs/Web/Reference">הפניות לפיתוח אינטרנט</a></li> +</ul> diff --git a/files/he/web/guide/localizations_and_character_encodings/index.html b/files/he/web/guide/localizations_and_character_encodings/index.html new file mode 100644 index 0000000000..7ab8aa2ba4 --- /dev/null +++ b/files/he/web/guide/localizations_and_character_encodings/index.html @@ -0,0 +1,62 @@ +--- +title: התאמות למיקומים וקידוד תווים +slug: Web/Guide/Localizations_and_character_encodings +tags: + - HTML + - התאמה למיקום + - צורך בעבודת markup + - קידוד תווים +translation_of: Web/Guide/Localizations_and_character_encodings +--- +<p>דפדפנים מעבדים טקסט כיוניקוד בתוכם. אולם, דרך לייצג תווים במונחים של בייטים (קידוד תווים) משמשת להעברת טקסט על גבי הרשת לדפדפן. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">מפרט ה-HTML ממליץ</a> על שימוש בקידוד UTF-8 (היכול לייצג את כל היוניקוד) ובלי קשר לקידוד שבשימוש מצריך כי בתוכן שברשת יוצהר באיזה קידוד השתמשו.</p> + +<p>המאפיין {{htmlattrxref("charset", "meta")}} של אלמנט ה-{{HTMLElement("meta")}} משמש לציין את קידוד התווים של הדף.</p> + +<p>כדי לציין כי הדף משתמש, לדוגמאף בקידוד תווים UTF-8 (על פי ההמלצה), יש פשוט למקם את השורה הבאה בבלוק ה-{{HTMLElement("head")}}:</p> + +<pre class="brush: html"><meta charset="utf-8"> +</pre> + +<h2 id="פרטים_וקרבי_הדפדפן">פרטים וקרבי הדפדפן</h2> + +<p>כשהקידוד מוצהר בתוכן הרשת כמתחייב ממפרט ה-HTML, פיירפוקס ישתמש בקידוד זה כדי להפוך את הבעעטם לייצוג הפנימי. לרוע המזל, שימוש ב-UTF-8 והצהרה כי UTF-8 הוא הקידוד שבשימוש לא היו תמיד הדרך הנפוצה להציע תוכן ברשת. בשנות ה-1990, היה נפוץ להשאיר את הקידוד לא מוצהר ולהשתמש בקידוד האופייני לאזור שלא היה מסוגל לייצג את כל היוניקוד.</p> + +<p>פיירפוקס זקוק לקידוד לעת-מצוא שישמש לתוכן לא-תואם במתכונת הישנה שאינו מצהיר על קידודו. עבור רוב המיקומים, הקידוד לעת-מצוא הוא windows-1252 (הקרוי לעתים קרובות ISO-8859-1), שהוא הקידוד המתקבל כפלט מרוב אפילקציות ה-Windows בשנות ה-1990 וקבוצת על של הקידוד המתקבל כקלט מרוב יישומי היוניקס בשנות ה-1990 כפי שהתפרש באמריקה ובמערב אירופה. אולם, קיימים מיקומים שבהם פרסום ברשת היה נפוץ כבר בשנות ה-1990 שקידוד windows-1252 לא התאים לשפה המקומית. במיקומים האלה תוכן במתכונת הישנה שאינו מצהיר את קידודו בופן טיפוסי מקודד באמצעות שיטת קידוד ישנה שאינה windows-1252. על מנת לעבוד עם תוכן המופיע במתכונת הישנה, חלק ממיקומי פיירפוקס זקוקים לקידוד לעת-מצוא שאינו windows-1252.</p> + +<p>לרוע המזל, משמעות הדבר היא כי פונקציונליות פיירפוקס החשופה לרשת נבדלת במיקום וקשה לקרוא תוכן שנכתב במתכונת הישנה בכל המיקומים עם קידודים שונים לעת-מצוא. כדי להימנע היתקלות בבעיות במיקומים בהם פרסומים ברשת באו אחרי אימוץ UTF-8, מיקומים שאין בהם קידוד במתכונת הישנה שצצה מהפרקטיקות של שנות ה-1990, צריכים להשאיר את הקידוד לשעת-מצוא להיות windows-1252 כדי להקל על קריאת תוכן בעל מיקומים שונים ממיקומים שבהם הקידוד לעת מצוא הוא windows-1252. תוכן מקודד UTF-8 בשפת המקום, הנכתב כחדש, מצופה להצהיר על קידודו, שבמקרה זה הקידוד לעת-מצוא אינו חלק מעיבוד התוכן.</p> + +<p>בנוסף, קיים מספר קטן של מיקומים בהם בשנות ה-1990 לא היה קידוד ברור מאליו האופייני לאזור, והזיהוי הראשוני מבין הקידודים בתמכונת הישנה הוצג לראשונה לדפדפני הרשת. לדבר הייתה השפעה בכך שהמחברים ברשת היו תלויים בנוכחותו של זיהוי ראשוני, ולכן לפיירפוקס עדיין יש זיהוי ראשוני במיקומים אלה.</p> + +<h2 id="מציאת_שמות_קידוד_קאנוניים">מציאת שמות קידוד קאנוניים</h2> + +<p>הטקסט שלהלן מתייחס לשמות קאנוניים של קידודים. השמות הקאנוניים הם הערכים מימין לשימן השוויון ב-<a href="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties" title="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties">unixcharset.properties</a>.</p> + +<h2 id="ציון_הקידוד_לעת_מצוא">ציון הקידוד לעת מצוא</h2> + +<p><strong>מאז פיירפוקס 28, עבר זמנו של קטע זה, משום שההעדפה <code>intl.charset.default</code> אינה קיימת עוד. ההתאמה בין המיקומים לקידודים לעת מצוא כעת בנויה לתוך Gecko עצמו.</strong></p> + +<p> הקידודים לעת מצוא מצויינים על ידי ההעדפה<code>intl.charset.default</code> ב- <code>intl.properties</code>. הן אמורות להיות מוגדרות כשמות הקאנוניים של הקידודים על פי המתכונת הישנה שהכי צפוי שמשתמשי ההתאמות למיקומים יפגשו בעת גלישה בתכנים במתכונת הישנה ברשת שאינם מצייתים לכללים ואינם מצהירים על קידודם. יש לשים לב לכך שקידודים לעת מצוא כפי שהם מוגדרים על ידי המשפט הקודם לא בהכרח צריכים להיות מסוגלים לייצג את התווים הדרושים עבור שפת המיקום!</p> + +<p>הקידוד לעת מצוא צריך להישאר מוגדר כ-windows-1252 עבור מיקומים מערב אירופאיים, מיקומים צפון-, מרכז- ודרום אמריקאיים, מיקומים אפריקאיים, מיקומים מקכז אסיאניים ומיקומים אוקיאניים. טיפוסית המיקום צריך להיות מוגדר אחרת מ-windows-1252 עבור מיקומים מזרח אירופאיים, מיקומים מזרח תיכוניים ומיקומים צזרח אסיאניים.</p> + +<p>על מנת להימנע מבעיות של יוצרי תוכן ברשת היוצרים תוכן מקודד UTF-8 בלי להצהיר כי UTF-8 הוא הקידוד שבשימוש ועל מנת להעלות למקסימום את היכולת של משתמשים לקרוא תוכן בעל מספר מיקומים, אין להגדיר את הקידוד לעת מצוא ל-UTF-8 לכל מיקום מוגדר כחדש. יש לשים לב שפיירפוקס כבר אינו שולח כותרת HTTP בשם <code>Accept-Charset</code>, כך שאין צורך לקחת בחשבון מה יפורסם ב-<code>Accept-Charset</code> כאשר מגדירים קידוד לעת מצוא.</p> + +<p>למיקומים בהם הקידוד לעת מצוא הוא כעת ISO-8859-1, הקידוד חייב להשתנות ל-windows-1252. ISO-8859-1 is decoded באותה דרך בדיוק כמו windows-1252, אך פיירפוקס עובר לטפל ב- windows-1252 כמו בתווית המועדפת עבור קידוד זה בהתאם ל- <a href="http://encoding.spec.whatwg.org/" title="http://encoding.spec.whatwg.org/">Encoding Standard</a>.</p> + +<p>עבור מיקומים שבהם ל- Internet Explorer נתח שוק יותר גדול מזה של Firefox, הקידוד לעת מצוא צריך באופן טיפוסי להיות מוגדר לאותו ערך כמו ב-Internet Explorer. .ניתן לראות את הקידוד לעת מצוא שיש לדפדפן מסויים על ידי טעינת <a href="http://hsivonen.iki.fi/test/moz/check-charset.htm" title="http://hsivonen.iki.fi/test/moz/check-charset.htm">test page</a>. (יש לדאוג להשתמש בהתקנת דפדפן שנותרה לה הגדרות ברירת מחדל כשחוקרים זאת!)</p> + +<p>עבור מיקומים שבהם ל- Firefox מתח שוק גדול יותר מזה של Internet Explorer, סביר להניח כי הטוב ביותר הוא לא לשנות את הקידוד לעת מצוא אפילו אם אינו תואם את ההדרכה שניתנה לעיל . (לדוגמא, קידוד פיירפוקס עבור המיקומים הפולני, ההונגרי והצ'כי סביר שיהיה צריך להמשיך להיות ISO-8859-2 למרות של-IE הגדרת מיקום לעת-מצוא שונה.)</p> + +<p>כאשר בספק יש להשתמש ב-windows-1252 כקידוד לעת-מצוא.</p> + +<h2 id="ציון_אופן_הזיהוי_ההתחלתי">ציון אופן הזיהוי ההתחלתי</h2> + +<p>אופן הזיהוי ההתחלתי מצויין בהעדפה <code>intl.charset.detector</code> ב- <code>intl.properties</code>. הגדרה זו חייבת לישאר ריקה לכל המיקומים שאינם הרוסי, האוקראיני והיפני. . באף מצב אין לציין את הגלאי "universal". הוא אינו אוניברסלי למרות שמו!</p> + +<h2 id="חריגים_עבור_שפות_מיעוט">חריגים עבור שפות מיעוט</h2> + +<p>אם ההתאמה למיקומים היא עבור שפת מיעוט והמשתמש הטיפוסי יודע לקרוא את שפת הרוב של האזור והשתמשים קוראים תוכן אינטרנטי בשפת הרוב של האזר לעתים קרובות מואוד, יהא זה הולם לציין את הקידוד לעת מצוא ואת הזיהוי הראשוני להיות זהה לזה של ההתאמה למיקום עבור שפת הרוב של האזור, לדוגמא, עבור הגדרת מיקום של שפת מיעוט ברוסיה, יהא הולם להעתיק רת הגדרות המיקום הרוסיות.</p> + +<h2 id="הפיכת_מספר_קידודים_לניתנים_לבחירה_בקלות_מתוך_תפריט_קידודי_תווים">הפיכת מספר קידודים לניתנים לבחירה בקלות מתוך תפריט קידודי תווים</h2> + +<p>ההעדפה <code>intl.charsetmenu.browser.static</code> ב- <code>intl.properties</code> הופכת מספר קידודי תווים לזמינים בקלות רבה יותר בתפריט קידודי תווים בדפדפן. על הערך להיות רשימה מופרדת ע"י פסיקים של שמות קידודים קאנוניים. על הרשימה לכלול לפחות את הקידודים לעת מצוא, את windows-1252 ואת UTF-8. למיקומים שבהם יש יותר מקידוד אחד מהדור הישן, על כל הקידודים האלה להיכלל. לדוגמא, הקידוד לעת מצוא עבור יפני הוא Shift_JIS, אבל יש עוד קידודים מהדור הישן : ISO-2022-JP ו- EUC-JP. לכן, יהיה הגיוני אם הרשימה תהיה Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8.</p> diff --git a/files/he/web/guide/performance/index.html b/files/he/web/guide/performance/index.html new file mode 100644 index 0000000000..6c363e0a0c --- /dev/null +++ b/files/he/web/guide/performance/index.html @@ -0,0 +1,23 @@ +--- +title: אופטימיזציה וביצועים +slug: Web/Guide/Performance +tags: + - אופטימיזציה + - אינטרנט + - ביצועים + - נחיתה + - רשת +translation_of: Web/Guide/Performance +--- +<p dir="rtl">בעת בניית אתרים ואפליקציות אינטרנט מודרניים, חשוב לגרום לתוכן שלך לתפקד היטב. כלומר לגרום לו להיות מהיר ויעיל. דבר זה מאפשר לתפקד באופן אפקטיבי הן למשתמשי מערכת מחשבים נייחים חזקים, והן למכשירים ניידים פחות חזקיפ. קיימים מספר כלים זמינים לבדיקצת ביצועים של אתר או בלוג. הכלים הראויים ביותר לציון רשומים להלן.</p> + +<ul dir="rtl"> + <li><a href="https://developers.google.com/speed/pagespeed/insights/" rel="resources">Google PageSpeed Insights</a></li> + <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></li> + <li><a href="https://www.webpagetest.org/">WebPageTest</a></li> + <li>כלי פיתוח של דפדפנים</li> +</ul> + +<p dir="rtl">המשאבים לעיל כוללים גם את שיטות העבודה המומלצות לשיפור ביצועים. חשוב לתת עדיפות לביצועים, תוך התחשבות בביצועי הרשת במהלך הפיתוח, כדי שמשתמשים יזכו לחווית המשתמש הטובה ביותר.</p> + +<p dir="rtl">{{LandingPageListSubpages}}</p> diff --git a/files/he/web/html/element/a/index.html b/files/he/web/html/element/a/index.html new file mode 100644 index 0000000000..de79afa3e5 --- /dev/null +++ b/files/he/web/html/element/a/index.html @@ -0,0 +1,90 @@ +--- +title: '<a>: תגית קישור' +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +<p>{{HTMLRef}}</p> + +<p dir="rtl">תגית <strong><code><a></code></strong> מוסיפה קישור טקסט/תמונה במסמך ה-HTML. זוהי תגית מסוג Inline המסמנת את האלמנט עצמו בלבד.</p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/tabbed/a.html", "tabbed-standard")}}</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות Inline.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td>טקסטים, תמונות ומספרים + <p> </p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשית להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<p dir="rtl">href - משמש להוספת כתובת קישור.<br> + target - קובע היכן יפתח הקישור (עמוד הנוכחי, כרטיסייה חדשה וכו').<br> + id - מזהה המשמש לקישור פנימי בין עמודים.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_1_-_קישור_סטנדרטי">דוגמא 1 - קישור סטנדרטי</h2> + + <pre><!-- anchor linking to external file --> +<a href="https://www.mozilla.com/"> +External Link +</a> +</pre> + </dt> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_2_-_קישור_למזהה_פנימי_בעמוד">דוגמא 2 - קישור למזהה פנימי בעמוד</h2> + + <pre><!-- links to element on this page with id="attr-href" --> +<a href="#attr-href"> +Description of Same-Page Links +</a> + +</pre> + </dt> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_3_-_תמונה_לחיצה">דוגמא 3 - תמונה לחיצה</h2> + + <pre><a href="https://developer.mozilla.org/en-US/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a> +</pre> + </dt> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_4_-_קישור_לדואל">דוגמא 4 - קישור לדוא"ל</h2> + + <pre><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("img")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/he/web/html/element/address/index.html b/files/he/web/html/element/address/index.html new file mode 100644 index 0000000000..d7997e2296 --- /dev/null +++ b/files/he/web/html/element/address/index.html @@ -0,0 +1,77 @@ +--- +title: '<address>: תגית לסימון כתובת' +slug: Web/HTML/Element/address +tags: + - Address + - HTML + - כתובת +translation_of: Web/HTML/Element/address +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><address></code></strong> נועדה כדי להציג מידע ליצירת קשר אודות אדם יחיד או ארגון.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><hgroup><br> + <h1-h6><br> + <article><br> + <aside><br> + <section><br> + <nav><br> + <header><br> + <footer></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><address> + You can contact author at <a href="http://www.somedomain.com/contact"> + www.somedomain.com</a>.<br> + If you see any bugs, please <a href="mailto:webmaster@somedomain.com"> + contact webmaster</a>.<br> + You may also want to visit us:<br> + Mozilla Foundation<br> + 331 E Evelyn Ave<br> + Mountain View, CA 94041<br> + USA +</address> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("nav")}} </li> + <li>{{HTMLElement("article")}} </li> + <li>{{HTMLElement("aside")}} </li> + <li>{{HTMLElement("h1")}} </li> + <li>{{HTMLElement("hgroup")}}</li> +</ul> diff --git a/files/he/web/html/element/applet/index.html b/files/he/web/html/element/applet/index.html new file mode 100644 index 0000000000..5c85cfaa83 --- /dev/null +++ b/files/he/web/html/element/applet/index.html @@ -0,0 +1,37 @@ +--- +title: '<applet>: הטמעה של ישומון ג''אווה בעמוד' +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><applet></code></strong> מטמיעה יישומון Java במסמך ה-HTML. אלמנט זה הוצא משימוש לטובת {{HTMLElement ("object")}}.</p> + +<p dir="rtl"><strong>* זוהי תגית ישנה ואינה חלק משפת HTML גרסה 5, השימוש ביישומוני Java בדפדפני אינטרנט הופסק.</strong></p> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<ul> + <li>{{htmlattrdef("align")}} - מציינת את שם העמודה מאובייקט מקור הנתונים.</li> + <li>{{htmlattrdef("alt")}} - תכונה זו משמשת למיקום היישומון בדף ביחס לתוכן.</li> + <li>{{htmlattrdef("code")}} - תכונה זו מציינת את כתובת האתר של קובץ היישומון.</li> +</ul> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + <param name="difficulty" value="easy"> + <b>Sorry, you need Java to play this game.</b> +</applet> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("embed")}}</li> +</ul> diff --git a/files/he/web/html/element/article/index.html b/files/he/web/html/element/article/index.html new file mode 100644 index 0000000000..f58e278fc5 --- /dev/null +++ b/files/he/web/html/element/article/index.html @@ -0,0 +1,102 @@ +--- +title: '<article>: תגית לסימון אזור תוכן' +slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><article></code></strong> הינה עצמאית ומגדירה אזור תוכן במסמך ה-HTML.<br> + התוכן שיוזן בין התגיות עשוי להיות כתבה, מאמר, תגובה או הודעה.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr>.</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("section")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Dinos were great!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Way too scary for me.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-16 19:00">May 16</time> + by Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>I agree, dinos are my favorite.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-17 19:00">May 17</time> + by Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posted on + <time datetime="2015-05-15 19:00">May 15</time> + by Staff. + </p> + </footer> +</article> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="הערות">הערות</h2> + +<ul dir="rtl"> + <li>כותרת (<h1> - <h6>) משמשת לרוב כילד של האלמנט <article>.</li> + <li>ניתן להשתמש באלמנט <article> כפוסט או תגובה כהתייחסות לפוסט החיצוני.</li> + <li>ניתן להוסיף את פרטי המחבר באמצעות אלמנט <address>.</li> + <li>ניתן להוסיף תאריך ואת שעת הפרסום התוכן באמצעות מאפיין datetime של אלמנט <time>.</li> +</ul> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("nav")}} </li> + <li>{{HTMLElement("address")}} </li> + <li>{{HTMLElement("aside")}} </li> + <li>{{HTMLElement("h1")}} </li> + <li>{{HTMLElement("hgroup")}}</li> +</ul> diff --git a/files/he/web/html/element/aside/index.html b/files/he/web/html/element/aside/index.html new file mode 100644 index 0000000000..ae470009c2 --- /dev/null +++ b/files/he/web/html/element/aside/index.html @@ -0,0 +1,75 @@ +--- +title: '<aside>: תגית לסימון תפריט צד' +slug: Web/HTML/Element/aside +tags: + - ארגון טקסט + - תפריט צד +translation_of: Web/HTML/Element/aside +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><aside></code></strong> מייצגת את התפריט / האזור הצדדי במסמך ה-HTML. תחת תגית זו נהוג להוסיף פרסומות, ציטוטים מטקסטים, תוספים, ורכיבי תוכן (ווידג'טים) המציגים מידע בצורה נגישה וישירה.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.<br> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><article> + <p> + The Disney movie <cite>The Little Mermaid</cite> was + first released to theatres in 1989. + </p> + <aside> + <p> + The movie earned $87 million during its initial release. + </p> + </aside> + <p> + More info about the movie... + </p> +</article> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("div")}}</li> +</ul> diff --git a/files/he/web/html/element/b/index.html b/files/he/web/html/element/b/index.html new file mode 100644 index 0000000000..4ea004c0c6 --- /dev/null +++ b/files/he/web/html/element/b/index.html @@ -0,0 +1,68 @@ +--- +title: '<b>: תגית להדגשת טקסט' +slug: Web/HTML/Element/b +translation_of: Web/HTML/Element/b +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><b></code></strong> מציגה טקסט באופן מודגש, כיום מומלץ להשתמש בתגית <strong><code><string></code></strong> כדי לציין שהטקסט בעל חשיבות. בנוסף ניתן להשתמש בגיליונות סגנון מדורגים (CSS) באמצעות <a href="https://developer.mozilla.org/he/docs/Web/CSS/font-weight">font-weight</a>.</p> + +<p dir="rtl">{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות מסוג Inline.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><code><abbr></code>, <code><audio></code>, <code><b></code>, <code><bdo></code>, <code><br></code>, <code><button></code>, <code><canvas></code>, <code><cite></code>, <code><code></code>, <code><command></code>, <code><data></code>, <code><datalist></code>, <code><dfn></code>, <code><em></code>, <code><embed></code>, <code><i></code>, <code><iframe></code>, <code><img></code>, <code><input></code>, <code><kbd></code>, <code><keygen></code>, <code><label></code>, <code><mark></code>, <code><math></code>, <code><meter></code>, <code><noscript></code>, <code><object></code>, <code><output></code>, <code><progress></code>, <code><q></code>, <code><ruby></code>, <code><samp></code>, <code><script></code>, <code><select></code>, <code><small></code>, <code><span></code>, <code><strong></code>, <code><sub></code>, <code><sup></code>, <code><svg></code>, <code><textarea></code>, <code><time></code>, <code><var></code>, <code><video></code>, <code><wbr></code></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><p> + This article describes several <b class="keywords">text-level</b> elements. + It explains their usage in an <b class="keywords">HTML</b> document. +</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="הערות">הערות</h2> + +<p dir="rtl"><u>מה ההבדל בין תגית <strong><code><strong></code></strong> לתגית <strong><code><b></code></strong>?</u><br> + שתיהן מדגישות את הטקסט בתוך התגית, אך משמעותה של תגית <b> היא השפעה על העיצוב בלבד. מאידך, כאשר גולשים אל אתר מותאם ולוחצים על הקראה, הדפדפן רואה את תגית <strong> ויודע שיש צורך לקרוא את הטקסט ולהדגיש את הנמצא תחתיה.</p> + +<p dir="rtl">תגיות נוספות המשמשות להדגשת טקסט: {{HTMLElement("em")}}, {{HTMLElement("mark")}}. </p> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("em")}}</li> + <li>{{HTMLElement("strong")}}</li> + <li>{{HTMLElement("small")}}</li> + <li>{{HTMLElement("cite")}}</li> + <li>{{HTMLElement("q")}}</li> + <li>{{HTMLElement("dfn")}}</li> +</ul> diff --git a/files/he/web/html/element/bdi/index.html b/files/he/web/html/element/bdi/index.html new file mode 100644 index 0000000000..603ab6f015 --- /dev/null +++ b/files/he/web/html/element/bdi/index.html @@ -0,0 +1,60 @@ +--- +title: '<bdi>: תגית לבידוד טקסט בפורמט שונה' +slug: Web/HTML/Element/bdi +translation_of: Web/HTML/Element/bdi +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><bdi></code></strong> משמשת לציון קטע טקסט העשוי להיות מוצג בפורמט אחר או בסדר הפוך מאשר הטקסט שמסביבו.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות מסוג Inline</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr></td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <p dir="rtl">בדוגמה שלהלן, סדר מחרוזת המילים בערבית יהיה מימין לשמאל.</p> + + <pre><p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> +is automatically displayed right-to-left.</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("bdi")}}</li> + <li>{{HTMLElement("p")}}</li> +</ul> diff --git a/files/he/web/html/element/br/index.html b/files/he/web/html/element/br/index.html new file mode 100644 index 0000000000..abdd8960e3 --- /dev/null +++ b/files/he/web/html/element/br/index.html @@ -0,0 +1,62 @@ +--- +title: '<br>: תגית להורדת שורה' +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<p>{{HTMLRef}}</p> + +<p dir="rtl">תגית <strong><code><br></code></strong> מבצעת הורדת שורה במסמך ה-HTML. תגית זו שימושית לרוב בכתיבת טקסט שבו חלוקת הרווחים משפיעה על הבנתו: שיר, סיפור קצר או כתובת.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות תוכן.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>לא נהוג לסגור תגית זו אך במסמכי XHTML נהוג לכתוב אותה באופן הבא: <strong><code></ br></code></strong></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre>Mozilla +<br> +331 E. Evelyn Avenue +<br> +Mountain View, CA +<br> +94041 +<br> +USA +<br> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("p")}}</li> +</ul> diff --git a/files/he/web/html/element/canvas/index.html b/files/he/web/html/element/canvas/index.html new file mode 100644 index 0000000000..eaac2dff23 --- /dev/null +++ b/files/he/web/html/element/canvas/index.html @@ -0,0 +1,70 @@ +--- +title: '<canvas>: תגית ליצירת צורות דו מימדיות' +slug: Web/HTML/Element/canvas +translation_of: Web/HTML/Element/canvas +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><canvas></code></strong> מאפשרת ליצור צורות דו מימדיות ולהטמיע אותן במסמך ה-HTML. <br> + אלמנט זה יוצר אזור מלבני בו ניתן לצייר באמצעות קוד.</p> + +<div> </div> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>סקריפטים והטמעת תכנים</td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> <br> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<p dir="rtl">{{htmlattrdef("height")}} - תכונה להגדרת גובה.</p> + +<p dir="rtl">{{htmlattrdef("width")}} - תכונה להגדרת רוחב.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_כותרת_ופסקה">דוגמא - כותרת ופסקה</h2> + + <pre><canvas id="canvas" width="300" height="300"> + An alternative text describing what your canvas displays. +</canvas></pre> + + <h4 dir="rtl" id="דדגכ">דדגכ</h4> + + <pre><script> +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100); +</script></pre> + </dt> +</dl> + +<h2 dir="rtl" id="הערות">הערות</h2> + +<p dir="rtl">* מומלץ להזין תוכן בין התגיות על מנת שזה יופיע במידה והדפדפן אינו תומך ב-Canvas.<br> + * חובה להוסיף תג סגירה <canvas/>.<br> + </p> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li dir="rtl"><a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">הקדמה ל-Canvas באתר Apple</a></li> + <li dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">מדריך למשתמש ב-Canvas</a></li> + <li dir="rtl"><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">ריכוז תגיות ותכונות של Canvas</a></li> +</ul> diff --git a/files/he/web/html/element/center/index.html b/files/he/web/html/element/center/index.html new file mode 100644 index 0000000000..ed7838fe73 --- /dev/null +++ b/files/he/web/html/element/center/index.html @@ -0,0 +1,104 @@ +--- +title: '<center>: תגית למרכוז טקסט' +slug: Web/HTML/Element/center +translation_of: Web/HTML/Element/center +--- +<div> </div> + +<div> +<p>{{HTMLRef}}</p> + +<p dir="rtl">תגית <strong><code><center></code></strong> מאגדת בתוכה מספר כותרות <strong><code><h1></code></strong> עד <strong><code><h6></code></strong> ונועדה כדי ליצור כותרות משנה.</p> + +<p dir="rtl">* <u><strong>תגית זו אינה חלק מתקן HTML5.</strong></u></p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/tabbed/center.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תוכן.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td>{{HTMLElement("h1")}}<br> + {{HTMLElement("h2")}}<br> + {{HTMLElement("h3")}}<br> + {{HTMLElement("h4")}}<br> + {{HTMLElement("h5")}}<br> + {{HTMLElement("h6")}}</td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_מרכוז_טקסט_באמצעות_HTML">דוגמא - מרכוז טקסט באמצעות HTML</h2> + + <pre><center>This text will be centered. +<p>So will this paragraph.</p></center></pre> + </dt> +</dl> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_מרכוז_טקסט_באמצעות_CSS">דוגמא - מרכוז טקסט באמצעות CSS</h2> + + <pre><div style="text-align:center">This text will be centered. +<p>So will this paragraph.</p></div></pre> + </dt> +</dl> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_2_-_מרכוז_טקסט_באמצעות_CSS">דוגמא 2 - מרכוז טקסט באמצעות CSS</h2> + + <pre><p style="text-align:center">This line will be centered.<br> +And so will this line.</p></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> +</div> + +<div> </div> + +<div> </div> + +<div>{{obsolete_header()}}</div> + +<p><span class="seoSummary">The obsolete <strong>HTML Center Element</strong> (<strong><code><center></code></strong>) is a <a href="/en-US/docs/HTML/Block-level_elements" title="HTML/Block-level_elements">block-level element</a> that displays its block-level or inline contents centered horizontally within its containing element.</span> The container is usually, but isn't required to be, {{HTMLElement("body")}}.</p> + +<p>This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> {{Cssxref("text-align")}} property, which can be applied to the {{HTMLElement("div")}} element or to an individual {{HTMLElement("p")}}. For centering blocks, use other CSS properties like {{Cssxref("margin-left")}} and {{Cssxref("margin-right")}} and set them to <code>auto</code> (or set {{Cssxref("margin")}} to <code>0 auto</code>).</p> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the {{domxref("HTMLElement")}} interface.</p> + +<div class="note"> +<p><strong>Implementation note:</strong> up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</p> +</div> + +<h2 id="Example_1" name="Example_1">Note</h2> + +<p>Applying {{Cssxref("text-align")}}<code>:center</code> to a {{HTMLElement("div")}} or {{HTMLElement("p")}} element centers the <em>contents</em> of those elements while leaving their overall dimensions unchanged.</p> diff --git a/files/he/web/html/element/cite/index.html b/files/he/web/html/element/cite/index.html new file mode 100644 index 0000000000..f511031edf --- /dev/null +++ b/files/he/web/html/element/cite/index.html @@ -0,0 +1,52 @@ +--- +title: '<cite>: תגית ציטוט' +slug: Web/HTML/Element/cite +translation_of: Web/HTML/Element/cite +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><cite></code></strong> מגדירה ציטוט וביצוע הפניה לתוכן ממנו נלקחו הנתונים.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות Inline.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr></td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + </dt> + <dt dir="rtl"> + <pre><p>More information can be found in <cite>[ISO-0000]</cite>.</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("q")}}</li> + <li>{{HTMLElement("blockquote")}}</li> +</ul> diff --git a/files/he/web/html/element/del/index.html b/files/he/web/html/element/del/index.html new file mode 100644 index 0000000000..e024873f58 --- /dev/null +++ b/files/he/web/html/element/del/index.html @@ -0,0 +1,64 @@ +--- +title: '<del>: תגית לסימון טקסט המיועד למחיקה' +slug: Web/HTML/Element/del +translation_of: Web/HTML/Element/del +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><del></code></strong> מציגה טקסט מחוק המסומן בקו בפסקה או בחלק ממאמר.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לסימון שינויים</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>טקסט ומספרים</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr></td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<ul> + <li>{{htmlattrdef("cite")}} - תכונה המסבירה את מהות השינוי.</li> + <li>{{htmlattrdef("datetime")}} - תכונה זו מציינת את השעה והתאריך של השינוי וחייבת להיות מחרוזת תאריך חוקית.</li> +</ul> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><p><del>This text has been deleted</del>, +here is the rest of the paragraph.</p> +<del><p>This paragraph has been deleted.</p></del> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("strong")}}</li> + <li>{{HTMLElement("ins")}}</li> +</ul> diff --git a/files/he/web/html/element/em/index.html b/files/he/web/html/element/em/index.html new file mode 100644 index 0000000000..469e73abe7 --- /dev/null +++ b/files/he/web/html/element/em/index.html @@ -0,0 +1,64 @@ +--- +title: '<em>: תגית להדגשת טקסט' +slug: Web/HTML/Element/em +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><em></code></strong> מציגה פסקת טקסט באופן מודגש.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות מסוג Inline.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><code><abbr></code>, <code><audio></code>, <code><b></code>, <code><bdo></code>, <code><br></code>, <code><button></code>, <code><canvas></code>, <code><cite></code>, <code><code></code>, <code><command></code>, <code><data></code>, <code><datalist></code>, <code><dfn></code>, <code><em></code>, <code><embed></code>, <code><i></code>, <code><iframe></code>, <code><img></code>, <code><input></code>, <code><kbd></code>, <code><keygen></code>, <code><label></code>, <code><mark></code>, <code><math></code>, <code><meter></code>, <code><noscript></code>, <code><object></code>, <code><output></code>, <code><progress></code>, <code><q></code>, <code><ruby></code>, <code><samp></code>, <code><script></code>, <code><select></code>, <code><small></code>, <code><span></code>, <code><strong></code>, <code><sub></code>, <code><sup></code>, <code><svg></code>, <code><textarea></code>, <code><time></code>, <code><var></code>, <code><video></code>, <code><wbr></code></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">אלמנט זה כולל את <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a> בלבד.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_שימוש_בסיסי_בתגית">דוגמא - שימוש בסיסי בתגית</h2> + + <pre><p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> +</pre> + + <h2 dir="rtl" id="דוגמא_-_שימוש_בתגית_לצורך_תוית_אזהרה">דוגמא - שימוש בתגית לצורך תוית אזהרה</h2> + + <pre><p><strong>Important:</strong> Before proceeding, make sure you add plenty of butter.</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="הערות">הערות</h2> + +<p><u>מה ההבדל בין תגית <strong><code><strong></code></strong> לתגית <strong><code><b></code></strong>?</u><br> + שתיהן מדגישות את הטקסט בתוך התגית, אך משמעותה של תגית <b> היא השפעה על העיצוב בלבד. מאידך, כאשר גולשים אל אתר מותאם ולוחצים על הקראה, הדפדפן רואה את תגית <strong> ויודע שיש צורך לקרוא את הטקסט ולהדגיש את הנמצא תחתיה.</p> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("strong")}}</li> + <li>{{HTMLElement("b")}}</li> + <li>{{cssxref("font-weight")}}</li> +</ul> diff --git a/files/he/web/html/element/figcaption/index.html b/files/he/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..08024d0505 --- /dev/null +++ b/files/he/web/html/element/figcaption/index.html @@ -0,0 +1,67 @@ +--- +title: '<figcaption>: כותרת לאלמנט Figure' +slug: Web/HTML/Element/figcaption +translation_of: Web/HTML/Element/figcaption +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><figcaption></code></strong> היא תגית המייצגת כותרת או טקסט לאלמנט האב שלו תגית <a href="/he/docs/Web/HTML/Element/figure"><figure></a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות להזנת תוכן.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>טקסט ומספרים.</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך חייבת להיות כפופה אל תגית {{HTMLElement("figure")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_תמונה">דוגמא - תמונה</h2> + + + <figure> + <pre class="brush: html"><!-- Image with a caption --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> + <figcaption>MDN Logo</figcaption> +</figure> +</pre> + + <p> </p> + </figure> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("figure")}}</li> +</ul> diff --git a/files/he/web/html/element/figure/index.html b/files/he/web/html/element/figure/index.html new file mode 100644 index 0000000000..6235c3c3b3 --- /dev/null +++ b/files/he/web/html/element/figure/index.html @@ -0,0 +1,112 @@ +--- +title: '<figure>: תגית לעטיפת תמונה או גרף' +slug: Web/HTML/Element/figure +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><figure></code></strong> היא תגית עצמאית העוטפת תמונה או גרף במסמך ה-HTML ומאפשרת להוסיף להם כותרת באמצעות תגית משלימה <a href="/he/docs/Web/HTML/Element/figcaption"><figcaption></a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות להזנת תוכן.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><figcaption>,<img>,<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_תמונה">דוגמא - תמונה</h2> + + + <figure> + <pre class="brush: html"><!-- Just an image --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> +</figure> + +<!-- Image with a caption --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> + <figcaption>MDN Logo</figcaption> +</figure> + +</pre> + + <h2 dir="rtl" id="דוגמא_-_קטע_קוד">דוגמא - קטע קוד</h2> + + + <figure> + <pre class="brush: html"><figure> + <figcaption>Get browser details using <code>navigator</code>.</figcaption> + <pre> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName; + txt+= "Browser Name: " + navigator.appName; + txt+= "Browser Version: " + navigator.appVersion ; + txt+= "Cookies Enabled: " + navigator.cookieEnabled; + txt+= "Platform: " + navigator.platform; + txt+= "User-agent header: " + navigator.userAgent; +}</pre> +</figure> +</pre> + </figure> + + <h2 dir="rtl" id="דוגמא_-_שיר">דוגמא - שיר</h2> + + + <figure> + <pre class="brush: html"><figure> + <p style="white-space:pre"> +Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, +Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: +Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire.</p> + <figcaption><cite>Venus and Adonis</cite>, + by William Shakespeare</figcaption> +</figure></pre> + </figure> + + <p> </p> + </figure> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("figcaption")}}</li> +</ul> diff --git a/files/he/web/html/element/font/index.html b/files/he/web/html/element/font/index.html new file mode 100644 index 0000000000..307a527f49 --- /dev/null +++ b/files/he/web/html/element/font/index.html @@ -0,0 +1,38 @@ +--- +title: '<font>: תגית להגדרת גופן, צבע וגודל הטקסט' +slug: Web/HTML/Element/font +translation_of: Web/HTML/Element/font +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><font></code></strong> מגדירה את שם הפונט, צבע וגודל הטקסט במסמך ה-HTML.</p> + +<p dir="rtl"><strong>* זוהי תגית ישנה ואינה חלק משפת HTML גרסה 5, אלמנט זה עשוי לעבוד בכמה דפדפנים אך יתכן שלא יתמך בעתיד. יש להימנע משימוש בתגית זו.</strong></p> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<ul> + <li>{{htmlattrdef("color")}} - תכונה זו קובעת את צבע הטקסט באמצעות שם הצבע או בפורמט הקסדצימלי #RRGGBB.</li> + <li>{{htmlattrdef("face")}} - תכונה זו קובעת את הגופן בו הטקסט יוצג. </li> + <li>{{htmlattrdef("size")}} - תכונה זו מציינת את גודל הגופן כערך מספרי או יחסי. הערכים המספריים נעים בין 1 ל-7 כאשר 1 הוא הקטן ביותר ו-3 ברירת המחדל.</li> +</ul> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><body> +<font size="5" color="red">Please Write Your Text Here!</font> +</body> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("body")}}</li> +</ul> diff --git a/files/he/web/html/element/footer/index.html b/files/he/web/html/element/footer/index.html new file mode 100644 index 0000000000..1080feba84 --- /dev/null +++ b/files/he/web/html/element/footer/index.html @@ -0,0 +1,62 @@ +--- +title: '<footer>: תגית לסימון תפריט תחתון' +slug: Web/HTML/Element/footer +translation_of: Web/HTML/Element/footer +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><footer></code></strong> מייצגת את התפריט / האזור התחתון במסמך ה-HTML. תחת תגית זו נהוג לכתוב זכויות יוצרים, קישורים, תנאי שימוש, טופס צור קשר, הרשמה לעדכונים ועוד.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.<br> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><footer> + Some copyright info or perhaps some author + info for an &lt;article&gt;? +</footer> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("div")}}</li> +</ul> diff --git a/files/he/web/html/element/head/index.html b/files/he/web/html/element/head/index.html new file mode 100644 index 0000000000..852c3fc249 --- /dev/null +++ b/files/he/web/html/element/head/index.html @@ -0,0 +1,68 @@ +--- +title: '<head>: תגית המציינת את ראש המסמך' +slug: Web/HTML/Element/head +tags: + - HTML + - כותרת + - מטא-דטה + - סקריפטים + - עיצוב + - תגיות +translation_of: Web/HTML/Element/head +--- +<p>{{HTMLRef}}</p> + +<p dir="rtl">תגית <strong><code><head></code></strong> מספקת מידע כללי על מסמך ה-HTML כגון: כותרת, מטא-דאטה, קישורים <strong><a href="https://developer.mozilla.org/he/docs/Web/JavaScript">לסקריפטים (JavaScript)</a></strong> ו<strong><a href="https://developer.mozilla.org/he/docs/Web/CSS">גליונות סגנון מדורגים (CSS)</a></strong>.</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>ללא.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>{{HTMLElement("title")}}<br> + {{HTMLElement("link")}}<br> + {{HTMLElement("meta")}}<br> + {{HTMLElement("style")}}<br> + {{HTMLElement("script")}}</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>כפיפות לתגית {{HTMLElement("html")}} כילד ראשון.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><html> + <head> + <title>Document title</title> + </head> +</html></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("script")}}</li> +</ul> diff --git a/files/he/web/html/element/header/index.html b/files/he/web/html/element/header/index.html new file mode 100644 index 0000000000..b67364287c --- /dev/null +++ b/files/he/web/html/element/header/index.html @@ -0,0 +1,72 @@ +--- +title: '<header>: תגית לסימון החלק העליון של המסמך' +slug: Web/HTML/Element/header +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><header></code></strong> מייצגת את החלק העליון של מסמך ה-HTML. <br> + אזור זה משמש ככותרת עבור <strong><code><section></code></strong> או בעבור כל הדף.<br> + מלבד כותרת אזור זה מכיל תוכן עניינים, תיבת חיפוש, לוגו של חברה ועוד.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr><br> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_כותרת_של_דף">דוגמא - כותרת של דף</h2> + + <pre><header> + <h1>Main Page Title</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header></pre> + + <h2 dir="rtl" id="דוגמא_-_כותרת_של_מאמר">דוגמא - כותרת של מאמר</h2> + + <pre><article> + <header> + <h2>The Planet Earth</h2> + <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p> + </header> + <p>We live on a planet that's blue and green, with so many things still unseen.</p> + <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p> +</article></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("section")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("div")}}</li> +</ul> diff --git a/files/he/web/html/element/heading_elements/index.html b/files/he/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..6a8de4b0dd --- /dev/null +++ b/files/he/web/html/element/heading_elements/index.html @@ -0,0 +1,77 @@ +--- +title: '<h1>–<h6>: תגית כותרת' +slug: Web/HTML/Element/Heading_Elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגיות <strong><code><h1>-<h6></code></strong> מגדירות כותרת בגדלים שונים במסמך ה-HTML.<br> + תגית <strong><code><h1></code></strong> היא הגדולה ביותר ותגית <strong><code><h6></code></strong> היא הקטנה ביותר.</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> </p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></p> + + <p>לעיתים תהיה כפופה באופן ישיר לאלמנט {{HTMLElement("hgroup")}} </p> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_כותרות_בכל_הגדלים">דוגמא - כותרות בכל הגדלים</h2> + + <pre><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6></pre> + + <h2 dir="rtl" id="דוגמא_-_כותרות_ופסקה">דוגמא - כותרות ופסקה</h2> + + <pre><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("section")}}</li> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> +</ul> diff --git a/files/he/web/html/element/hgroup/index.html b/files/he/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..bd21a55ff9 --- /dev/null +++ b/files/he/web/html/element/hgroup/index.html @@ -0,0 +1,69 @@ +--- +title: '<hgroup>: תגית לאיגוד כותרות' +slug: Web/HTML/Element/hgroup +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><hgroup></code></strong> מאגדת בתוכה מספר כותרות <strong><code><h1></code></strong> עד <strong><code><h6></code></strong> ונועדה כדי ליצור כותרות משנה.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> + + + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td>{{HTMLElement("h1")}}<br> + {{HTMLElement("h2")}}<br> + {{HTMLElement("h3")}}<br> + {{HTMLElement("h4")}}<br> + {{HTMLElement("h5")}}<br> + {{HTMLElement("h6")}}</td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> +</hgroup></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("h1")}}</li> + <li>{{HTMLElement("h2")}}</li> + <li>{{HTMLElement("h3")}}</li> + <li>{{HTMLElement("h4")}}</li> + <li>{{HTMLElement("h5")}}</li> + <li>{{HTMLElement("h6")}}</li> + <li>{{HTMLElement("p")}}</li> +</ul> + +<p> </p> diff --git a/files/he/web/html/element/hr/index.html b/files/he/web/html/element/hr/index.html new file mode 100644 index 0000000000..357a5c36c2 --- /dev/null +++ b/files/he/web/html/element/hr/index.html @@ -0,0 +1,74 @@ +--- +title: '<hr>: תגית קו אופקי' +slug: Web/HTML/Element/hr +translation_of: Web/HTML/Element/hr +--- +<p>{{HTMLRef}}</p> + +<p dir="rtl">תגית <strong><code><hr></code></strong> מוסיפה קו אופקי המפריד בין פסקאות טקסט במסמך ה-HTML. זוהי תגית בלוק החוסמת את כל השורה.</p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-standard")}}</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות בלוק.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>תגית זו מוסיפה קו בלבד.</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשית להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLHRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><p> + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. +</p> + +<hr> + +<p> + This is the second paragraph. + This is the second paragraph. + This is the second paragraph. + This is the second paragraph. +</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("br")}}</li> + <li>{{HTMLElement("a")}}</li> +</ul> + +<p> </p> diff --git a/files/he/web/html/element/html/index.html b/files/he/web/html/element/html/index.html new file mode 100644 index 0000000000..73afff129c --- /dev/null +++ b/files/he/web/html/element/html/index.html @@ -0,0 +1,59 @@ +--- +title: '<html>: תגית ראשית' +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - תג עליון + - תגיות +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p dir="rtl">תגית <strong><code><html></code></strong> נחשבת לתגית העליונה ביותר של מסמך ה-HTML ולכן היא מכונה לעיתים תגית השורש (Root). כל שאר התגיות יהיו כפופות לתגית זו.</p> + +<table class="properties"> + <tbody> + <tr> + <th>קטגוריה</th> + <td>ללא.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td>תגית {{HTMLElement("head")}}, ולאחר מכן תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>זוהי תגית השורש ולכן אין מעליה תגיות הורים.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd dir="rtl">מציין את ה-URI, נתיב בו נמצאים משאבים לשמירה במטמון באופן מקומי.</dd> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><!DOCTYPE html> +<html lang="en"> + <head>...</head> + <body>...</body> +</html></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{MathMLElement("math")}}</li> + <li>{{SVGElement("svg")}}</li> +</ul> diff --git a/files/he/web/html/element/index.html b/files/he/web/html/element/index.html new file mode 100644 index 0000000000..90dbee4532 --- /dev/null +++ b/files/he/web/html/element/index.html @@ -0,0 +1,105 @@ +--- +title: תגיות בשפת HTML +slug: Web/HTML/Element +tags: + - Element + - Elements + - HTML + - HTML5 + - 'HTML:Element Reference' + - inline + - אינליין + - אלמנטים + - בלוק + - טבלאות + - טפסים + - פיתוח אתרים + - רכיבי אינטרנט + - תגיות + - תגיות שורש + - תוכן + - תפריט צד +translation_of: Web/HTML/Element +--- +<p>{{HTMLSidebar("Elements")}}</p> + +<p dir="rtl">כדי להפוך ידע זה לשימושי ככל האפשר, אנו מעמידים לרשות המשתמש רשימה של <a href="https://developer.mozilla.org/he/docs/Glossary/Element">אלמנטים</a> בשפת HTML, רשימת <a href="https://developer.mozilla.org/he/docs/Glossary/Tag">התגיות</a> מסודרת לפי נושאים כדי לסייע למשתמש למצוא את דרכו בקלות ולאתר את המידע לו הוא זקוק. למידע נוסף והיכרות ראשונה עם שפת HTML למשתמשים מתחילים, בקר ב<a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%9E%D7%91%D7%95%D7%90_%D7%9C%D7%A9%D7%A4%D7%AA_HTML">מבוא לשפת HTML</a>.</p> + +<h2 dir="rtl" id="תגיות_שורש">תגיות שורש</h2> + +<p dir="rtl">{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 dir="rtl" id="מטא-דאטה_ונתונים_אודות_המסמך">מטא-דאטה ונתונים אודות המסמך</h2> + +<p dir="rtl">מטא-דאטה מכילים מידע על הדף: גיליונות סגנון מדורגים, סקריפטים ומידע המסייע <a href="https://developer.mozilla.org/he/docs/Glossary/Search_engine">למנועי החיפוש</a>, דפדפנים ועוד. ניתן להגדיר עיצובים וסקריפטים בדף עצמו או בקישור לקובץ נפרד המכיל את המידע.</p> + +<p dir="rtl">{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 dir="rtl" id="תגיות_לסימון_גוף_המסמך">תגיות לסימון גוף המסמך</h2> + +<p dir="rtl">{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 dir="rtl" id="תגיות_לארגון_תוכן">תגיות לארגון תוכן</h2> + +<p dir="rtl">תגיות המאפשרות לארגן ולחלק את המסמך בצורה נוחה והגיונית: כותרת עליונה ותחתונה, תוכן, מאמרים, תפריט ועוד.</p> + +<p dir="rtl">{{HTMLRefTable("HTML Sections")}}</p> + +<h2 dir="rtl" id="תגיות_להזנת_תוכן">תגיות להזנת תוכן</h2> + +<p dir="rtl">תגיות להזנת תוכן ימוקמו תחת התגית <body> ויסייעו בקידום האתר (SEO) ובבניית אתר מותאם, כמו כן מסייעות בסידור וארגון של מקטעי תוכן הנמצאים בגוף המסמך.</p> + +<p dir="rtl">{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 dir="rtl" id="תגיות_מסוג_Inline">תגיות מסוג Inline</h2> + +<p dir="rtl">אלמנטים מסוג Inline מאפשרים למקם אותם באותה השורה עם אלמנטים נוספים, מכיוון שהם לא תופסים 100% מרוחב השורה, אלא רק את הרוחב המדויק.</p> + +<p dir="rtl">{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 dir="rtl" id="תמונות_ומולטימדיה">תמונות ומולטימדיה</h2> + +<p dir="rtl">שילוב קובצי מולטימדיה כגון: תמונות, סירטונים, מוסיקה ועוד.</p> + +<p dir="rtl">{{HTMLRefTable("multimedia")}}</p> + +<h2 dir="rtl" id="הטמעת_תכנים">הטמעת תכנים</h2> + +<p dir="rtl">שפת HTML מאפשרת הטמעה של אובייקטים חיצוניים בתוך המסמך.</p> + +<p dir="rtl">{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 dir="rtl" id="סקריפטים">סקריפטים</h2> + +<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript</p> + +<p>Certain elements support this capability</p> + +<p dir="rtl">{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 dir="rtl" id="תגיות_לסימון_שינויים">תגיות לסימון שינויים</h2> + +<p dir="rtl">תגיות אלה מאפשרות להציג שינויי טקסט.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 dir="rtl" id="טבלאות">טבלאות</h2> + +<p dir="rtl">בניה והצגת נתונים באמצעות טבלאות.<br> + {{HTMLRefTable("HTML tabular data")}}</p> + +<h2 dir="rtl" id="טפסים">טפסים</h2> + +<p dir="rtl">אלמנטים אלה הם דרך לקבלת קלט מהמשתמש.<br> + לדוגמא: המשתמש ממלא טופס צור קשר ושולח אותו לאתר האינטרנט או היישום.<br> + למידע נוסף בקר <a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%98%D7%A4%D7%A1%D7%99%D7%9D">במדריך הטפסים</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 dir="rtl" id="תגיות_אינטראקטיביות">תגיות אינטראקטיביות</h2> + +<p dir="rtl">{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 dir="rtl" id="רכיבי_אינטרנט">רכיבי אינטרנט</h2> + +<p dir="rtl">{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> diff --git a/files/he/web/html/element/ins/index.html b/files/he/web/html/element/ins/index.html new file mode 100644 index 0000000000..b59cc0ce4d --- /dev/null +++ b/files/he/web/html/element/ins/index.html @@ -0,0 +1,58 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +translation_of: Web/HTML/Element/ins +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><ins></code></strong> מציגה פסקה / קטע טקסט חדש שהוכנס למסמך. </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לסימון שינויים</td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr></td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<p dir="rtl">{{htmlattrdef("cite")}} - תכונה זו מציגה את המקור או הסיבה לביצוע השינוי.</p> + +<p dir="rtl">datetime - תכונה זו מציגה את התאריך והשעה וחייבת להיות לפי הפורמטים הבאים:<br> + * שעון 24 שעות.<br> + * תאריך מדוייק על פי הלוח השנה הגרגוריאני.<br> + * פרק זמן חוקי.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><ins>This text has been inserted</ins> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("del")}}</li> + <li>{{HTMLElement("time")}}</li> +</ul> diff --git a/files/he/web/html/element/main/index.html b/files/he/web/html/element/main/index.html new file mode 100644 index 0000000000..f21bf19e29 --- /dev/null +++ b/files/he/web/html/element/main/index.html @@ -0,0 +1,77 @@ +--- +title: '<main>: תגית לציון תוכן המאמר' +slug: Web/HTML/Element/main +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><main></code></strong> מייצגת את התוכן הראשי במסמך ה-HTML. </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/main.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><!-- other content --> + +<main> + <h1>Apples</h1> + <p>The apple is the pomaceous fruit of the apple tree.</p> + + <article> + <h2>Red Delicious</h2> + <p>These bright red apples are the most common found in many + supermarkets.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>These juicy, green apples make a great filling for + apple pies.</p> + <p>... </p> + <p>... </p> + </article> +</main> + +<!-- other content --> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("footer")}}</li> +</ul> diff --git a/files/he/web/html/element/mark/index.html b/files/he/web/html/element/mark/index.html new file mode 100644 index 0000000000..bc770a767a --- /dev/null +++ b/files/he/web/html/element/mark/index.html @@ -0,0 +1,86 @@ +--- +title: '<mark>: תגית לסימון טקסט' +slug: Web/HTML/Element/mark +tags: + - HTML + - אלמנט + - הדגשה + - טקסט + - מרקר + - סימון +translation_of: Web/HTML/Element/mark +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><mark></code></strong> משמשת לסימון קטע בתוך טקסט אותו אנו מעוניינים להדגיש.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות מסוג Inline</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>טקסט, סקריפטים, מספרים, נוסחאות, כותרות, טבלאות, טפסים.</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_סימון_טקסט_חשוב">דוגמא - סימון טקסט חשוב</h2> + + <pre><blockquote> + It is a period of civil war. Rebel spaceships, striking from a + hidden base, have won their first victory against the evil + Galactic Empire. During the battle, <mark>Rebel spies managed + to steal secret plans</mark> to the Empire’s ultimate weapon, + the DEATH STAR, an armored space station with enough power to + destroy an entire planet. +</blockquote> +</pre> + </dt> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_סימון_תוצאת_חיפוש_בתוך_טקסט">דוגמא - סימון תוצאת חיפוש בתוך טקסט</h2> + + <pre><p>It is a dark time for the Rebellion. Although the Death +Star has been destroyed, <mark class="match">Imperial</mark> +troops have driven the Rebel forces from their hidden base and +pursued them across the galaxy.</p> + +<p>Evading the dreaded <mark class="match">Imperial</mark> +Starfleet, a group of freedom fighters led by Luke Skywalker +has established a new secret base on the remote ice world of +Hoth.</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("blockquote")}}</li> + <li>{{HTMLElement("b")}}</li> + <li>{{HTMLElement("hr")}}</li> +</ul> diff --git a/files/he/web/html/element/nav/index.html b/files/he/web/html/element/nav/index.html new file mode 100644 index 0000000000..0c0be9d414 --- /dev/null +++ b/files/he/web/html/element/nav/index.html @@ -0,0 +1,70 @@ +--- +title: '<nav>: תגית לסימון תפריט קישורים' +slug: Web/HTML/Element/nav +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><nav></code></strong> משמשת להגדרת התפריט במסמך ה-HTML.<br> + תחת אלמנט זה ניתן להציג קישורים לדפי אחרים או קישורים פנימיים בתוך הדף.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.<br> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <p dir="rtl">בדוגמה שלהלן מוצגת רשימה של קישורים.<br> + באמצעות CSS ניתן להציגה כסרגל צד, סרגל ניווט או תפריט נפתח.</p> + + <pre><nav class="menu"> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> +</nav> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("footer")}}</li> +</ul> diff --git a/files/he/web/html/element/p/index.html b/files/he/web/html/element/p/index.html new file mode 100644 index 0000000000..6f694e9c8e --- /dev/null +++ b/files/he/web/html/element/p/index.html @@ -0,0 +1,74 @@ +--- +title: '<p>: תגית פסקה' +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - Tags + - פסקה + - תגיות +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><p></code></strong> מציגה פסקת טקסט במסמך ה-HTML. זוהי תגית בלוק החוסמת את כל השורה.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות בלוק.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>טקסט, סקריפטים, קנבס, קובצי שמע וסרטונים, מספרים, נוסחאות, כותרות, טבלאות, טפסים.</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><p> + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. +</p> +<p> + This is the second paragraph. + This is the second paragraph. + This is the second paragraph. + This is the second paragraph. +</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/he/web/html/element/section/index.html b/files/he/web/html/element/section/index.html new file mode 100644 index 0000000000..592b45e0dd --- /dev/null +++ b/files/he/web/html/element/section/index.html @@ -0,0 +1,67 @@ +--- +title: '<section>: תגית לסימון איזור כללי' +slug: Web/HTML/Element/section +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><section></code></strong> מייצגת חלק כללי במסמך ה-HTML. <br> + אזור זה מורכב מכותרת ותוכן ומשמשת להגדרת פרק בספר, אזור חדשות וכו'.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות לארגון תוכן</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr><br> + </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_כותרת_ופסקה">דוגמא - כותרת ופסקה</h2> + + <pre><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section></pre> + + <h2 dir="rtl" id="דוגמא_-_כותרת_ותמונה">דוגמא - כותרת ותמונה</h2> + + <pre><section> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</section></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("div")}}</li> +</ul> diff --git a/files/he/web/html/element/strong/index.html b/files/he/web/html/element/strong/index.html new file mode 100644 index 0000000000..f64389d290 --- /dev/null +++ b/files/he/web/html/element/strong/index.html @@ -0,0 +1,69 @@ +--- +title: '<strong>: תגית להדגשת טקסט' +slug: Web/HTML/Element/strong +tags: + - HTML + - הדגשה + - טקסט מודגש + - מודגש +translation_of: Web/HTML/Element/strong +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><strong></code></strong> מציגה פסקת טקסט באופן מודגש.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות מסוג Inline.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><code><abbr></code>, <code><audio></code>, <code><b></code>, <code><bdo></code>, <code><br></code>, <code><button></code>, <code><canvas></code>, <code><cite></code>, <code><code></code>, <code><command></code>, <code><data></code>, <code><datalist></code>, <code><dfn></code>, <code><em></code>, <code><embed></code>, <code><i></code>, <code><iframe></code>, <code><img></code>, <code><input></code>, <code><kbd></code>, <code><keygen></code>, <code><label></code>, <code><mark></code>, <code><math></code>, <code><meter></code>, <code><noscript></code>, <code><object></code>, <code><output></code>, <code><progress></code>, <code><q></code>, <code><ruby></code>, <code><samp></code>, <code><script></code>, <code><select></code>, <code><small></code>, <code><span></code>, <code><strong></code>, <code><sub></code>, <code><sup></code>, <code><svg></code>, <code><textarea></code>, <code><time></code>, <code><var></code>, <code><video></code>, <code><wbr></code></p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_שימוש_בסיסי_בתגית">דוגמא - שימוש בסיסי בתגית</h2> + + <pre><p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> +</pre> + + <h2 dir="rtl" id="דוגמא_-_שימוש_בתגית_לצורך_תוית_אזהרה">דוגמא - שימוש בתגית לצורך תוית אזהרה</h2> + + <pre><p><strong>Important:</strong> Before proceeding, make sure you add plenty of butter.</p> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="הערות">הערות</h2> + +<p><u>מה ההבדל בין תגית <strong><code><strong></code></strong> לתגית <strong><code><b></code></strong>?</u><br> + שתיהן מדגישות את הטקסט בתוך התגית, אך משמעותה של תגית <b> היא השפעה על העיצוב בלבד. מאידך, כאשר גולשים אל אתר מותאם ולוחצים על הקראה, הדפדפן רואה את תגית <strong> ויודע שיש צורך לקרוא את הטקסט ולהדגיש את הנמצא תחתיה.</p> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("em")}}</li> + <li>{{HTMLElement("b")}}</li> + <li>{{cssxref("font-weight")}}</li> +</ul> diff --git a/files/he/web/html/element/table/index.html b/files/he/web/html/element/table/index.html new file mode 100644 index 0000000000..2c4ee267a3 --- /dev/null +++ b/files/he/web/html/element/table/index.html @@ -0,0 +1,162 @@ +--- +title: '<table>: תגית ליצירת טבלה' +slug: Web/HTML/Element/table +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><table></code></strong> מציגה נתונים טבלאיים - כלומר, מידע המוצג בטבלה דו-מימדית המורכבת משורות ועמודות של תאים המכילים נתונים שונים.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/table.html", "tabbed-taller")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>טבלאות</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p>{{HTMLElement("caption")}}<br> + {{HTMLElement("colgroup")}}<br> + {{HTMLElement("thead")}}<br> + {{HTMLElement("tbody")}}<br> + {{HTMLElement("tr")}}<br> + {{HTMLElement("tfoot")}}</p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>תגית זו מורשת להופיע בגוף המסמך אך אינה חייבת להיות כפופה בצורה ישירה אל תגית {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_טבלה_בסיסית">דוגמא - טבלה בסיסית</h2> + + <pre><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table></pre> + + <h2 dir="rtl" id="דוגמא_-_טבלה_מורחבת">דוגמא - טבלה מורחבת</h2> + + <pre><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington, D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col style="background-color: #0f0"> + <col span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + </dt> +</dl> + +<h2 dir="rtl" id="הערות">הערות</h2> + +<p><u>מה ההבדל בין תגית <strong><code><strong></code></strong> לתגית <strong><code><b></code></strong>?</u><br> + שתיהן מדגישות את הטקסט בתוך התגית, אך משמעותה של תגית <b> היא השפעה על העיצוב בלבד. מאידך, כאשר גולשים אל אתר מותאם ולוחצים על הקראה, הדפדפן רואה את תגית <strong> ויודע שיש צורך לקרוא את הטקסט ולהדגיש את הנמצא תחתיה.</p> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("thead")}}</li> + <li>{{HTMLElement("tbody")}}</li> + <li>{{cssxref("tfoot")}}</li> +</ul> diff --git a/files/he/web/html/element/time/index.html b/files/he/web/html/element/time/index.html new file mode 100644 index 0000000000..8e00e97810 --- /dev/null +++ b/files/he/web/html/element/time/index.html @@ -0,0 +1,93 @@ +--- +title: '<time>: תגית להגדרת תאריך לתוכן שנכתב' +slug: Web/HTML/Element/time +translation_of: Web/HTML/Element/time +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><time></code></strong> משמשת להגדרת תאריך / שעה לתוכן שנכתב.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-standard")}}</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>תגיות מסוג Inline.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td> + <p><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> </p> + </td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td><abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> </td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<p dir="rtl">{{htmlattrdef("datetime")}} - תכונה זו מציגה את התאריך והשעה וחייבת להיות לפי הפורמטים הבאים:<br> + * שעון 24 שעות.<br> + * תאריך מדוייק על פי הלוח השנה הגרגוריאני.<br> + * פרק זמן חוקי.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>כתיבת תאריך מלא:</strong><br> + 2011-11-18</td> + <td><strong>כתיבת חודש:</strong><br> + 2011-11</td> + <td><strong>כתיבת שנה:</strong><br> + 2011</td> + </tr> + <tr> + <td><strong>כתיבת שעה:</strong><br> + 14:54<br> + 14:54:39<br> + 14:54:39.929</td> + <td><strong>כתיבת שבועות ושנה:</strong><br> + 2011-W47</td> + <td><strong>כתיבת חודש ויום בלבד:</strong><br> + 11-18</td> + </tr> + <tr> + <td><strong>תאריך ושעה גלובלים:</strong><br> + 2011-11-18 14:54:39.929-0400</td> + <td><strong>תאריך ושעה מקומיים:</strong><br> + 2011-11-18 14:54:39.929<br> + </td> + <td> </td> + </tr> + </tbody> +</table> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא_-_שימוש_בתגית_עם_פרק_זמן_פשוט">דוגמא - שימוש בתגית עם פרק זמן פשוט</h2> + + <pre><p>The concert starts at <time>20:00</time>.</p> +</pre> + + <h2 dir="rtl" id="דוגמא_-_שימוש_בתגית_עם_datatime">דוגמא - שימוש בתגית עם datatime</h2> + + <pre><p>The concert took place on <time + datetime="2001-05-15T19:00">May 15</time>.</p></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("data")}}</li> +</ul> diff --git a/files/he/web/html/element/title/index.html b/files/he/web/html/element/title/index.html new file mode 100644 index 0000000000..0a7eac882f --- /dev/null +++ b/files/he/web/html/element/title/index.html @@ -0,0 +1,61 @@ +--- +title: '<title>: תגית כותרת' +slug: Web/HTML/Element/title +tags: + - HTML + - כותרת + - ראש המסמך + - תגיות +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">תגית <strong><code><title></code></strong> מגדירה את כותרת מסמך ה-HTML. הכותרת מופיעה בשורת הכותרת של הדפדפן או בשם הכרטיסיה. תג זה מכיל טקסט ומספרים בלבד.</p> + +<table> + <tbody> + <tr> + <th>קטגוריה</th> + <td>מטא-דאטה ונתונים אודות המסמך.</td> + </tr> + <tr> + <th>תוכן מורשה</th> + <td>טקסט ומספרים בלבד.</td> + </tr> + <tr> + <th>תגיות הורים מורשות</th> + <td>כפיפות לתגית {{HTMLElement("head")}}.</td> + </tr> + <tr> + <th scope="row">ממשק DOM</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תארים">תארים</h2> + +<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p> + +<dl> + <dt dir="rtl"> + <h2 dir="rtl" id="דוגמא">דוגמא</h2> + + <pre><html> + <head> + <title>Document title</title> + </head> +</html></pre> + </dt> +</dl> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("script")}}</li> +</ul> + + +<p> </p> diff --git a/files/he/web/html/index.html b/files/he/web/html/index.html new file mode 100644 index 0000000000..4b91892492 --- /dev/null +++ b/files/he/web/html/index.html @@ -0,0 +1,108 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - Landing +translation_of: Web/HTML +--- +<div dir="rtl">{{HTMLSidebar}}</div> + +<p class="summary" dir="rtl"><span class="seoSummary"><strong>HTML</strong> (שפת תגיות לתמליל-על / HyperText Markup Language)</span> הינה אבן הבניין הבסיסית ביותר של האינטרנט. היא מגדירה את המשמעות והמבנה של תוכן האתר. מלבד HTML קיימות טכנולוגיות אחרות המשמשות לתאר את התצוגה / המראה (<a href="/he/docs/Web/CSS">CSS</a>) או את הפונקציונליות / ההתנהגות (<a href="/he/docs/Web/JavaScript">JavaScript</a>) של האתר.</p> + +<div class="callout-box" dir="rtl" style="float: left;"> +<p><a href="/he/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="default internal" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p> +</div> + +<p dir="rtl"><strong>HyperText Markup Language (HTML)</strong> הינה שפה המשמשת ליצירת דפי אינטרנט ומסמכים אחרים הניתנים לצפייה בדפדפן אינטרנט.<br> + HTML הוא תקן בינלאומי המוגדר על ידי ה־<a class="external" href="http://www.w3.org/" title="http://www.w3.org/">World Wide Web Consortium</a>. הגרסה הנוכחית של התקן היא <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">גרסה 5</a> שהושקה בחודש אוקטובר 2014.</p> + +<p dir="rtl">ניתן להעשיר את דפי ה-HTML באמצעות <strong>גיליונות סגנון מדורגים</strong> <strong>(CSS)</strong> איתם ניתן לעצב את דפי האינטרנט והמסמכים שנבנו.<br> + בנוסף, ניתן להטמיע תסריטים בדף באמצעות שפת <strong>ג'אווה</strong> <strong>סקריפט (JavasScript)</strong> הנחשבת לשפת תכנות דינמית מונחית־עצמים.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid" dir="rtl"> + <li><span>מבוא ל- HTML</span> + + <p>אם פיתוח אתרים חדש לך, חשוב לקרוא את <a href="/he/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML למתחילים</a> כדי ללמוד מהי HTML וכיצד להשתמש בה.</p> + </li> + <li><span>הדרכות HTML</span> + <p>מאמרים לגבי אופן השימוש ב- HTML, בנוסף להדרכות ודוגמאות מלאות, אפשר למצוא ב<a href="/he/docs/Learn/HTML">אזור הלמידה של HTML</a>.</p> + </li> + <li><span>מקורות HTML</span> + <p>באזור ה<a href="/he/docs/Web/HTML/Reference">מקורות HTML</a> הנרחב ניתן למצוא פרטים לגבי כל אלמנט ותכונה ב- HTML.</p> + </li> +</ul> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Tools" id="הדרכות_למתחילים">הדרכות למתחילים</h2> + +<p>ב<a href="/he/docs/Learn/HTML">אזור הלמידה של HTML</a> קיימים מודולים רבים שמלמדים HTML מהבסיס — ללא צורך בידע קודם.</p> + +<dl> + <dt><a href="/he/docs/Learn/HTML/Introduction_to_HTML">מבוא ל- HTML</a></dt> + <dd>מודול זה מכין את הקרקע, ומרגיל אותך למושגים ותחביר חשובים, כמו מבט על החלת HTML על טקסט, כיצד ליצור היפר-קישורים, וכיצד להשתמש ב- HTML כדי לבנות עמוד אינטרנט.</dd> + <dt><a href="/he/docs/Learn/HTML/Multimedia_and_embedding">מולטימדיה והטמעה</a></dt> + <dd>מודול זה חוקר כיצד להשתמש ב- HTML כך שיכלול מולטימדיה בעמודי האינטרנט, כולל הדרכים השונות להצגת תמונות, וכיצד להטמיע וידאו, שמע ואפילו אתרים אחרים.</dd> + <dt><a href="/he/docs/Learn/HTML/Tables">טבלאות HTML</a></dt> + <dd>הצגת מידע טבלאי באינטרנט בצורה מובנת, קריאה ונגישה יכולה להיות אתגר רציני. מודול זה עובר על הבסיס של סימון טבלאות, בנוסף למאפיינים נוספים כמו כיתובים וסיכומים.</dd> + <dt><a href="/he/docs/Learn/HTML/Forms">טפסים ב- HTML</a></dt> + <dd>טפסים הינם חלק חשוב מאוד ברשת — הם מספקים את מרבית הפונקציונליות הדרושה לעבודה אינטראקטיבית, למשל רישום וכניסה, שליחת משוב, קניית מוצרים ועוד. מודול זה עובר על הבסיס ליצירת חלקי צד-לקוח / משתמש-קצה של טפסים.</dd> + <dt><a href="/he/docs/Learn/HTML/Howto">שימוש ב- HTML לפתרון בעיות נפוצות</a></dt> + <dd>מספק קישורים לאזורים בתוכן, המסבירים כיצד להשתמש ב- HTML כדי לפתור בעיות נפוצות בעת יצירת עמוד אינטרנט: עבודה עם כותרות, הוספת תמונות או וידאו, הדגשת תוכן, יצירת טופס בסיסי, וכו'.</dd> +</dl> + +<h2 id="נושאים_מתקדמים">נושאים מתקדמים</h2> + +<dl> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/CORS_enabled_image">תמונה תומכת CORS</a></dt> + <dd class="landingPageList">תכונת {{htmlattrxref("crossorigin", "img")}}, בשילוב עם {{glossary("CORS")}} header מתאים, מאפשר לאחזר תמונות המוגדרות עם אלמנט {{HTMLElement("img")}} ממקורות זרים ולשמש באלמנט {{HTMLElement("canvas")}} כאילו הן שייכות למקור הנוכחי.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/CORS_settings_attributes">תכונות להגדרת CORS</a></dt> + <dd class="landingPageList">לאלמנטים מסוימים של HTML המספקים תמיכה ל- <a href="/he/docs/HTTP/Access_control_CORS">CORS</a>, כמו {{HTMLElement("img")}} או {{HTMLElement("video")}}, יש תכונת <code>crossorigin</code> (שדה <code>crossOrigin</code>), המאפשר להגדיר בקשות CORS למידע המאוחזר על-ידי האלמנט.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Focus_management_in_HTML">ניהול פוקוס ב- HTML</a></dt> + <dd class="landingPageList">תכונת <code><a href="/he/docs/Web/API/Document/activeElement">activeElement</a></code> ומתודת <code><a dir="ltr" href="/he/docs/Web/API/Document/hasFocus">hasFocus()</a></code> של ה- DOM עוזרות לעקוב ולנהל את האינטראקציות של המשתמשים עם האלמנטים בעמוד.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Using_the_application_cache">שימוש במטמון (cache) של האפליקציה</a></dt> + <dd class="landingPageList">הטמנה (caching) של האפליקציה מאפשר לאפליקציות מבוססות רשת לרוץ באופן לא מקוון. ניתן להשתמש בממשק ה- <strong>Application Cache</strong> (או <em>AppCache</em>) כדי לציין משאבים שהדפדפן צריך להטמין כדי שיהיו זמינים למשתמש באופן לא מקוון. אפליקציות מוטמנות נטענות ועובדות בצורה נכונה, אפילו אם משתמשים לוחצים על רענון כשהם במצב לא מקוון.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/he/docs/Web/HTML/Preloading_content">טעינה מראש של תוכן באמצעות rel="preload"</a></dt> + <dd class="landingPageList">ערך ה- <code>preload</code> של תכונת {{htmlattrxref("rel", "link")}} באלמנט {{htmlelement("link")}} מאפשרת לכתוב בקשות אחזור הצהרתיות באלמנט {{htmlelement("head")}}, ובכך לציין משאבים שהעמוד יזדקק להם זמן קצר לאחר הטעינה, ואותם נרצה להתחיל לטעון מראש בשלב מוקדם של טעינת העמוד - זאת לפני שתהליך הרנדור העיקרי יתחיל לעבוד. דבר זה יבטיח שהם יהיו זמינים מוקדם יותר, ולא סביר שיתקעו את הרנדור הראשוני, ובכך ישפר את הביצועים. מאמר זה מספק מדריך בסיסי לאופן הפעולה של <code>preload</code>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="הפניות_חיצוניות">הפניות חיצוניות</h2> + +<dl> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Reference">הפניות לגבי HTML</a></dt> + <dd class="landingPageList">HTML מורכב מ<strong>אלמנטים</strong>, אותם ניתן לשנות באמצעות מספר <strong>תכונות (attributes)</strong>. מסמכי HTML מחוברים אחד לשני על-ידי <a href="/he/docs/Web/HTML/Link_types">קישורים / לינקים</a>.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Element">הפניות לגבי אלמנטים של HTML</a></dt> + <dd class="landingPageList">ניתן לעיין ברשימת ה{{glossary("Element", "אלמנטים")}} המלאה של {{glossary("HTML")}}.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Attributes">הפניות לגבי תכונות HTML</a></dt> + <dd class="landingPageList">לאלמנטים ב- HTML יש <strong>תכונות (attributes)</strong>. אלו הן ערכים נוספים שמגדירים את האלמנטים או מכווננים את ההתנהגות שלהם במגוון דרכים.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Global_attributes">תכונות גלובליות</a></dt> + <dd class="landingPageList">ניתן לציין תכונות גלובליות בכל ה<a href="/he/docs/Web/HTML/Element">אלמנטים של HTML</a>, <em>אפילו כאלה שלא כלולים בסטנדרט</em>. משמעות הדבר שכל אלמנט לא סטנדרטי עדיין חייב לתמוך בתכונות אלו, אפילו שאלמנטים אלה הופכים את המסמך לחסר תאימות ל- HTML5.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Inline_elements">אלמנטי שורה(Inline)</a> ו<a href="/he/docs/Web/HTML/Block-level_elements">אלמנטי בלוק (Block-Level)</a></dt> + <dd class="landingPageList">אלמנטים של HTML הם בדרך-כלל שורה (inline) או בלוק (block-level). אלמנט שורה תופס רק המקום התחום בין התגיות המגדירות אותו. אלמנט בלוק תופס את כל המקום של ההורה שלו (container), ובכך יוצר "בלוק".</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Link_types">סוגי קישורים</a></dt> + <dd class="landingPageList">ניתן להשתמש במגוון סוגי קישורים כדי לבסס ולהגדיר יחסים בין שני מסמכים. אלמנטים של ק סוגי הקישורים אותם ניתן לקבוע כוללים את {{HTMLElement("a")}}, {{HTMLElement("area")}} ו- {{HTMLElement("link")}}.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Supported_media_formats">תצורות מדיה הנתמכות על-ידי אלמנטי שמע ווידאו ב- HTML</a></dt> + <dd class="landingPageList">אלמנטי {{HTMLElement("audio")}} ו- {{HTMLElement("video")}} מאפשרים לך להפעיל מדיית שמע ווידאו. אלמנטים אלה מספקים חלופה ברמת דפדפן ליכולות דומות המצויות ב- Adobe Flash ותוספים אחרים.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Kinds_of_HTML_content">סוגי תוכן של HTML</a></dt> + <dd class="landingPageList">HTML מורכב ממספר סוגים של תוכן, וניתן להשתמש בכל אחד בהקשרים מסוימים וחסומים לשימוש באחרים. באופן דומה לכל אחד יש אוסף קטגוריות תוכן אחרות שהם יכולים להכיל ואלמנטים בהם ניתן להשתמש או לא. זהו מדריך לקטגוריות אלו.</dd> + <dt class="landingPageList"><a href="/he/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">מצב Quirks ומצב Standards</a></dt> + <dd class="landingPageList">מידע הסטורי על מצב quirks ומצב standards.</dd> +</dl> + +<h2 class="landingPageList" id="נושאים_קשורים">נושאים קשורים</h2> + +<dl> + <dt><a href="/he/docs/Web/HTML/Applying_color">הוספת צבע לאלמנטים של HTML ב- CSS</a></dt> + <dd>מאמר זה סוקר את רוב הדרכים להוספת צבע לתוכן HTML על-ידי CSS. כמו כן הוא מפרט אילו חלקים ניתן לצבוע במסמך HTML, ובאילו מאפייני CSS להשתמש לשם כך. הוא כולל דוגמאות, קישורים לכלי בניית פלטה ועוד.</dd> +</dl> +</div> +</div> +</section> + +<p dir="rtl"><span class="alllinks"><a href="/he/docs/tag/HTML">כל הקישורים...</a></span></p> + +<p dir="rtl"></p> diff --git a/files/he/web/http/index.html b/files/he/web/http/index.html new file mode 100644 index 0000000000..f1bd5752c5 --- /dev/null +++ b/files/he/web/http/index.html @@ -0,0 +1,91 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - CORS + - HTTP + - Hypertext + - NeedsTranslation + - Reference + - TCP/IP + - TopicStub + - Web + - Web Development + - 'l10n:priority' +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is an <a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable <a href="https://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>, that is, a protocol that doesn't lose messages silently like UDP does. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> — the reliable update of UDP — is a suitable alternative.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorials">Tutorials</h2> + +<p>Learn how to use HTTP with guides and tutorials.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd>How cookies work is defined by <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> + <dd>A collection of tips to help operational teams with creating secure web applications.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> + <dd>Shows and explains the flow of a usual HTTP session.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<p>Browse through detailed HTTP reference documentation.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers">IANA registry</a>, whose original content was defined in <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers">registry of proposed new HTTP message headers</a>.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> + <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> + <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> + <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> +</dl> + +<h2 id="Tools_resources">Tools & resources</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools to check your cache-related headers</dd> + <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> + <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> +</dl> +</div> +</div> diff --git a/files/he/web/http/status/403/index.html b/files/he/web/http/status/403/index.html new file mode 100644 index 0000000000..a927dfe905 --- /dev/null +++ b/files/he/web/http/status/403/index.html @@ -0,0 +1,55 @@ +--- +title: 403 Forbidden +slug: Web/HTTP/Status/403 +tags: + - סטטוס HTTP + - סטטוס תגובה + - קוד סטטוס + - תקלות צד לקוח +translation_of: Web/HTTP/Status/403 +--- +<div>{{HTTPSidebar}}</div> + +<p>קוד סטטוס שגיאה בתגובת HTTP <strong><code>403 Forbidden</code></strong> מציין שהשרת הבין את הבקשה אך מסרב לאשר אותה. (403 - נדחה. או "נאסר")</p> + +<p>סטטוס תגובה זה דומה לסטטוס {{HTTPStatus("401")}}, אך במקרה זה, אימות מחדש לא ישפיע. הגישה אסורה לצמיתות וקשורה ללוגיקת היישום, כגון אין מספיק זכויות למשאב.</p> + +<h2 id="סטטוס">סטטוס</h2> + +<pre class="syntaxbox notranslate">403 Forbidden</pre> + +<h2 id="תגובה_לדוגמא">תגובה לדוגמא</h2> + +<pre class="notranslate">HTTP/1.1 403 Forbidden +Date: Wed, 21 Oct 2015 07:28:00 GMT +</pre> + +<h2 id="פרטים_טכניים">פרטים טכניים</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td> + <td>HTTP/1.1: Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפנים">תאימות דפדפנים</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("http.status.403")}}</p> + +<h2 id="ראה_עוד">ראה עוד</h2> + +<ul> + <li>{{HTTPStatus("401")}}</li> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a> - רשימת כל הסטטוסים של תגובות HTTP התקניים</li> +</ul> diff --git a/files/he/web/http/status/index.html b/files/he/web/http/status/index.html new file mode 100644 index 0000000000..f11dea5fcb --- /dev/null +++ b/files/he/web/http/status/index.html @@ -0,0 +1,197 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary">HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: </span></p> + +<ol> + <li class="summary"><span class="tlid-translation translation" lang="iw"><span title="">תגובות מידע</span></span><span class="seoSummary"> (<code>100</code>–<code>199</code>),</span></li> + <li class="summary"><span class="seoSummary">תגובות הצלחה(<code>200</code>–<code>299</code>),</span></li> + <li class="summary"><span class="tlid-translation translation" lang="iw"><span title="">הפניות</span></span><span class="seoSummary"> (<code>300</code>–<code>399</code>),</span></li> + <li class="summary"><span class="tlid-translation translation" lang="iw"><span title="">שגיאות לקוח</span></span><span class="seoSummary"> (<code>400</code>–<code>499</code>),</span></li> + <li class="summary"><span class="tlid-translation translation" lang="iw"><span title="">שגיאות שרת </span></span><span class="seoSummary">(<code>500</code>–<code>599</code>).</span></li> +</ol> + +<p class="summary"><span class="tlid-translation translation" lang="iw"><span title="">קודי הסטטוס שלהלן מוגדרים על ידי</span></span> <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>. <span class="tlid-translation translation" lang="iw"><span title="">אתה יכול למצוא מפרט מעודכן ב-</span></span> <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a>. </p> + +<div class="blockIndicator note"> +<p class="summary"><span class="tlid-translation translation" lang="iw"><span title="">אם אתה מקבל תגובה שאינה מופיעה ברשימה זו, אז התגובה לא סטנדרטית, ויתכן שהיא מותאמת אישית לתוכנת השרת.</span></span></p> +</div> + +<h2 id="תגובות_מידע"><span class="tlid-translation translation" lang="iw"><span title="">תגובות מידע</span></span></h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>קוד זה נשלח לאחר שהשרת קיבל את החלק הראשוני של הבקשה מהלקוח, והוא נועד ליידע את הלקוח שהשרת מוכן לקבל את המשך ההודעה. קוד 100 משמש בעיקר במצב של חיבור קבוע שדרכו עוברות מספר בקשות.</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">קוד זה נשלח בתגובה לכותרת בקשת {{HTTPHeader ("שדרוג")}} מהלקוח, ומציין את הפרוטוקול שאליו עובר השרת.</span></span></dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">קוד זה מציין כי השרת קיבל את הבקשה ומעבד אותה, אך טרם התקבלה תגובה.</span></span></dd> + <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">קוד מצב זה מיועד בעיקר לשימוש בכותרת {{HTTPHeader ("קישור")}}, ומאפשר לסוכן המשתמש להתחיל לטעון מראש משאבים בזמן שהשרת מכין תגובה.</span></span></dd> +</dl> + +<h2 id="Successful_responses">Successful responses</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">הבקשה הצליחה.</span> <span title="">משמעות ההצלחה תלויה בשיטת HTTP:</span></span></dd> +</dl> + +<ul> + <li><code>GET</code>: <span class="tlid-translation translation" lang="iw"><span title="">המשאב הובא ומועבר בגוף ההודעות.</span></span></li> + <li><code>HEAD</code>: <span class="tlid-translation translation" lang="iw"><span title="">כותרות הישות נמצאות בגוף ההודעות.</span></span></li> + <li><code>PUT</code> or <code>POST</code>: <span class="tlid-translation translation" lang="iw"><span title="">המשאב המתאר את תוצאת הפעולה מועבר בגוף ההודעות.</span></span></li> + <li><code>TRACE</code>: <span class="tlid-translation translation" lang="iw"><span title="">גוף ההודעה מכיל את הודעת הבקשה כפי שהתקבלה על ידי השרת</span></span></li> +</ul> + +<dl> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">הבקשה הצליחה ונוצר משאב חדש כתוצאה מכך.</span> <span title="">זו בדרך כלל התגובה שנשלחה לאחר בקשות POST, או כמה בקשות PUT.</span></span></dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">הבקשה התקבלה אך טרם נענתה.</span> <span title="">זה לא מחויב, מכיוון שאין דרך ב- HTTP לשלוח מאוחר יותר תגובה אסינכרונית המציינת את תוצאות הבקשה.</span> <span title="">זה מיועד למקרים בהם תהליך או שרת אחר מטפל בבקשה, או לעיבוד אצווה.</span></span></dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">פירושו של קוד תגובה זה הוא שמטא-המידע המוחזר אינו זהה בדיוק לזמין בשרת המקור, אלא נאסף מעותק מקומי או מעותק של צד שלישי.</span> <span title="">זה משמש בעיקר למראות או לגיבויים של משאב אחר.</span> <span title="">פרט למקרה הספציפי, עדיפה התגובה "200 אישור" על פני סטטוס זה.</span></span></dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">אין תוכן לשלוח לבקשה זו, אך הכותרות עשויות להיות מועילות.</span> <span title="">המשתמש-סוכן עשוי לעדכן את הכותרות המטמון שלו עבור משאב זה באמצעות החדשות.</span></span></dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd><span class="tlid-translation translation" lang="iw"><span title="">מאפשר לסוכן המשתמש לאפס את המסמך ששלח בקשה זו.</span></span></dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used when the {{HTTPHeader("Range")}} header is sent from the client to request only part of a resource.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>Conveys information about multiple resources, for situations where multiple status codes might be appropriate.</dd> + <dt>{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})</dt> + <dd>Used inside a <code><dav:propstat></code> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> + <dd>The server has fulfilled a <code>GET</code> request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> +</dl> + +<h2 id="Redirection_messages">Redirection messages</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>The request has more than one possible response. The user-agent or user should choose one of them. (There is no standardized way of choosing one of the responses, but HTML links to the possibilities are recommended so the user can pick.)</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>The URL of the requested resource has been changed permanently. The new URL is given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that the URI of requested resource has been changed <em>temporarily</em>. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>The server sent this response to direct the client to get the requested resource at another URI with a GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>Defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd> + <dt><code>306 unused</code></dt> + <dd>This response code is no longer used; it is just reserved. It was used in a previous version of the HTTP/1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>The server sends this response to direct the client to get the requested resource at another URI with same method that was used in the prior request. This has the same semantics as the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="Client_error_responses">Client error responses</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>The server could not understand the request due to invalid syntax.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> + <dt>{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}</dt> + <dd>This response code is reserved for future use. The initial aim for creating this code was using it for digital payment systems, however this status code is used very rarely and no standard convention exists.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401, the client's identity is known to the server.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurrence on the web.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content that conforms to the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response is sent when a request conflicts with the current state of the server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response is sent when the requested content has been permanently deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>The resource that is being accessed is locked.</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request failed due to failure of a previous request.</dd> + <dt>{{HTTPStatus(425, "425 Too Early")}}</dt> + <dd>Indicates that the server is unwilling to risk processing a request that might be replayed.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. This response is intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>The server is unwilling to process the request because its header fields are too large. The request may be resubmitted after reducing the size of the request header fields.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user-agent requested a resource that cannot legally be provided, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Server_error_responses">Server error responses</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})</dt> + <dd>The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfil it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.status")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="https://kinsta.com/blog/http-status-codes/">A Complete Guide and List of HTTP Status Codes</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +</ul> diff --git a/files/he/web/hypertext_markup_language/index.html b/files/he/web/hypertext_markup_language/index.html new file mode 100644 index 0000000000..13d1acabd9 --- /dev/null +++ b/files/he/web/hypertext_markup_language/index.html @@ -0,0 +1,90 @@ +--- +title: Hypertext Markup Language +slug: Web/Hypertext_Markup_Language +--- +<div> +<p><a href="/he/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p> + +<p dir="rtl"><strong>HyperText Markup Language (HTML)</strong> הינה שפה המשמשת ליצירת דפי אינטרנט ומסמכים אחרים הניתנים לצפייה בדפדפן אינטרנט.<br> + HTML הוא תקן בינלאומי המוגדר על ידי ה־<a href="http://www.w3.org/" title="http://www.w3.org/">World Wide Web Consortium</a>. הגרסה הנוכחית של התקן היא <a href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">גרסה 5</a> שהושקה בחודש אוקטובר 2014.</p> + +<p dir="rtl">ניתן להעשיר את דפי ה-HTML באמצעות <strong>גיליונות סגנון מדורגים</strong> <strong>(CSS)</strong> איתם ניתן לעצב את דפי האינטרנט והמסמכים שנבנו.<br> + בנוסף, ניתן להטמיע תסריטים בדף באמצעות שפת <strong>ג'אווה</strong> <strong>סקריפט (JavasScript)</strong> הנחשבת לשפת תכנות דינמית מונחית־עצמים.</p> + +<table dir="rtl"> + <tbody> + <tr> + <td> + <p dir="rtl"> </p> + + <h3 dir="rtl" id="היכרות_ראשונית">היכרות ראשונית</h3> + + <dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%9E%D7%91%D7%95%D7%90_%D7%9C%D7%A9%D7%A4%D7%AA_HTML">מבוא לשפת HTML</a></dt> + <dd dir="rtl">היכרות ראשונה עם שפת HTML למשתמשים מתחילים.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Web/HTML/Element">רשימת תגיות של שפת HTML</a></dt> + <dd dir="rtl">מאגר תגיות בהן ניתן לבצע שימוש.</dd> + </dl> + + <dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%94%D7%98%D7%9E%D7%A2%D7%AA_%D7%9E%D7%95%D7%9C%D7%98%D7%99%D7%9E%D7%93%D7%99%D7%94">הטמעת מולטימדיה </a></dt> + <dd dir="rtl">כיצד לשלב תמונות, סירטונים וקובצי קול בדף האינטרנט.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%98%D7%91%D7%9C%D7%90%D7%95%D7%AA">טבלאות</a></dt> + <dd dir="rtl">בניה והצגת נתונים באמצעות טבלאות בדף אינטרנט.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%98%D7%A4%D7%A1%D7%99%D7%9D">טפסים</a></dt> + <dd dir="rtl">טפסים הם נדבך חשוב בדף האינטרנט ומשמשים ליצירת קשר ראשוני עם הלקוחות באמצעות טפסים ליצירת קשר, קניה ומכירה של מוצרים וליצירת משתמשים חדשים.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%A4%D7%AA%D7%A8%D7%95%D7%9F_%D7%91%D7%A2%D7%99%D7%95%D7%AA">פתרון בעיות נפוצות </a></dt> + <dd dir="rtl">מאגר שאלות ותשובות המספקות מענה לבעיות נפוצות בכתיבת מסמכים בשפת HTML.</dd> + <dt dir="rtl"> </dt> + </dl> + + <h3 dir="rtl" id="מידע_למתקדמים">מידע למתקדמים</h3> + + <dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Web/HTML/Cross-Origin_Resource_Sharing">Cross-Origin Resource Sharing</a></dt> + <dd dir="rtl">היכרות ראשונה עם שפת CROS.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%9B%D7%95%D7%A0%D7%95%D7%AA_%D7%95%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%A9%D7%9C_CORS">תכונות ותארים של CORS </a></dt> + <dd dir="rtl">באילו אלמנטים ותגיות ניתן להשתמש.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%98%D7%A2%D7%99%D7%A0%D7%AA_%D7%AA%D7%9B%D7%A0%D7%99%D7%9D_%D7%9E%D7%95%D7%A7%D7%93%D7%9E%D7%AA">טעינת תכנים מוקדמת </a></dt> + <dd dir="rtl">טעינת תכנים מראש באמצעות rel="preload".</dd> + </dl> + </td> + <td dir="rtl"> + <h3 dir="rtl" id="עזרים">עזרים</h3> + + <dl> + <dt dir="rtl"><a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">FireBug</a></dt> + <dd dir="rtl">תוסף לדפדפן האינטרנט המסייע באיתור באגים באתרי אינטרנט.</dd> + <dt dir="rtl"><a href="https://prettydiff.com/?html">Prettydiff</a></dt> + <dd dir="rtl">כלי להשוואת קוד ואיתור שגיאות.</dd> + <dt dir="rtl"><a href="https://validator.w3.org/">Markup Validation</a></dt> + <dd dir="rtl">כלי להשוואת קוד ואיתור שגיאות.</dd> + <dt dir="rtl"> </dt> + </dl> + + <dl> + </dl> + + <h3 dir="rtl" id="קהילה">קהילה</h3> + + <dl> + <dt dir="rtl"><a href="https://www.w3schools.com/">W3schools</a></dt> + <dd dir="rtl">אתר המכיל מדריכים ותרגולים בנושאים שונים.</dd> + <dt dir="rtl"><a href="https://stackoverflow.com/questions/tagged/html"> Stackoverflow - HTML</a></dt> + <dd dir="rtl">שאלות ותשובות בנושאי חומרה ותוכנה.</dd> + <dt dir="rtl"> </dt> + </dl> + + <h3 dir="rtl" id="נושאים_קשורים">נושאים קשורים</h3> + + <dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Learn/HTML/%D7%9E%D7%91%D7%95%D7%90_%D7%9C%D7%A9%D7%A4%D7%AA_HTML">CSS - גיליונות סגנון מדורגים</a></dt> + <dd dir="rtl">שפה השמשת להפרדה בין תוכן ומבנה הדף לבין עיצובו.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/he/docs/Web/JavaScript">JS - ג'אווה סקריפט</a></dt> + <dd dir="rtl">שפת תכנות מונחית עצמים המיועדת לשימוש באתרים ואפליקציות אינטרנט.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +</div> diff --git a/files/he/web/index.html b/files/he/web/index.html new file mode 100644 index 0000000000..d09e56dbf4 --- /dev/null +++ b/files/he/web/index.html @@ -0,0 +1,121 @@ +--- +title: טכנולוגיות אינטרנט +slug: Web +tags: + - אינטרנט + - היסטוריה + - עמוד נחיתה + - פיתוח אינטרנט +translation_of: Web +--- +<p dir="rtl">האופי הפתוח של הרשת העולמית חושף אפשרויות מדהימות לאנשים שרוצים ליצור אתרים או אפליקציות מקוונות. כדי לנצל את יכולות הרשת באופן מרבי, עליך לדעת כיצד להשתמש בהם. חקור את הקישורים למטה כדי ללמוד עוד אודות טכנולוגיות רשת שונות.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" dir="rtl" id="טכנולוגיות_לפיתוח_אינטרנטי">טכנולוגיות לפיתוח אינטרנטי</h2> + +<h3 dir="rtl" id="מידע_בסיסי">מידע בסיסי</h3> + +<dl dir="rtl"> + <dt><a href="/he/docs/Web/HTML">HTML</a></dt> + <dd><strong>שפת סימני עריכה לתמליל-על (HyperText Markup Language)</strong> הינה שפה המשמשת לתאר וליצור <em>תוכן</em> של דפי אינטרנט ומסמכים אחרים הניתנים לצפייה בדפדפן אינטרנט.</dd> + <dt><a href="/he/docs/Web/CSS">CSS</a></dt> + <dd><strong><strong>גיליונות סגנון מדורגים (Cascading Style Sheets)</strong></strong> משמשים לתאר את <em>מראה</em> או <em>תצוגת</em> התוכן בדף האינטרנט.</dd> + <dt><strong><a href="/he/docs/Web/HTTP">HTTP</a></strong></dt> + <dd><strong><strong>פרוטוקול תעבורת </strong>תמליל-על<strong> (HyperText Transfer Protocol)</strong></strong> משמש להעביר HTML ומסמכי היפר-מדיה ברשת.</dd> +</dl> + +<h3 dir="rtl" id="סקריפטים"><strong>סקריפטים</strong></h3> + +<dl dir="rtl"> + <dt><strong><a href="/he/docs/Web/JavaScript">JavaScript</a></strong></dt> + <dd><strong>JavaScript</strong> הינה שפת תכנות שרצה בדפדפן שלך. ניתן להשתמש בה להוספת אינטראקטיביות ודינמיות לאתר או אפליקציה שלך.</dd> + <dd>לאור כניסתו של <a href="/he/docs/Glossary/Node.js">Node.js</a>, ניתן להריץ על השרת.</dd> + <dt><strong><a href="/he/docs/Web/Reference/API">Web APIs</a></strong></dt> + <dd><strong>ממשקי תכנות אפליקציות רשת (Web Application Programming Interfaces)</strong> משמשים לבצע משימות, כמו שינוי ה- DOM, הפעלת שמע או וידאו,או יצירת גרפיקה בתלת-מימד. + <ul dir="rtl"> + <li><a href="/he/docs/Web/API">אינדקס ממשקי ה- API ברשת</a> מפרט את טיפוסי האובייקטים בהם ניתן להשתמש בפיתוח בסביבת הרשת.</li> + <li><a href="/he/docs/WebAPI">עמוד ה- WebAPI</a> מפרט ממשקי תקשורת, חומרה ואחרים בהם ניתן להשתמש באפליקציות רשת.</li> + <li><a href="/he/docs/Web/Events">אינדקס ה- Events</a> מפרט את האירועים בהם ניתן להשתמש כדי לעקוב ולהגיב לדברים מעניינים שקרו בעמוד או באפליקציה.</li> + </ul> + </dd> + <dt><a href="/he/docs/Web/Web_components">Web Components (רכיבי Web)</a></dt> + <dd>רכיבי Web הינם אוסף טכנולוגיות המאפשר ליצור אלמנטים בהתאמה אישית הניתנים לשימוש חוזר — כאשר הפונקציונליות שלהם מבודדת משאר הקוד — ולהשמיש אותם באפליקציות הרשת שלך.</dd> +</dl> + +<h3 dir="rtl" id="גרפיקה"><strong>גרפיקה</strong></h3> + +<dl dir="rtl"> + <dt><a href="/he/docs/Web/HTML/Canvas">קנבס (Canvas)</a></dt> + <dd>אלמנט {{HTMLElement("canvas")}} מספק API ליצירת גרפיקות תלת-מימד באמצעות שימוש ב- TextScript.</dd> + <dt><a href="/he/docs/Web/SVG">SVG</a></dt> + <dd><strong>Scalable Vector Graphics (גרפיקה וקטורית ברת-מידות SVG)</strong> מאפשרת להשתמש בקווים, עקובומות וצורות גאומטריות אחרות ליצירת גרפיקה. באמצעות וקטורים, ניתן ליצור תמונות שמותאמות באופן נקי לכל גודל.</dd> + <dt><a href="/he/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd><strong>WebGL</strong> הינו JavaScript API המאפשר לצייר גרפיקות דו-מימד או תלת-מימד, באמצעות אלמנט {{HTMLElement("canvas")}}. טכנולוגיה זו מאפשר להשתמש ב- OpenGL ES בתשתית רשת.</dd> +</dl> + +<h3 dir="rtl" id="שמע_ומולטימדיה"><strong>שמע ומולטימדיה</strong></h3> + +<dl dir="rtl"> + <dt><a href="/he/docs/Web/Media">טכנולוגיות מדיה ברשת</a></dt> + <dd>רשימה של API הקשורים למדיה, עם קישורים לתיעוד הדרוש לכל אחד.</dd> + <dt><a class="new" href="/he/docs/Web/Media/Overview" rel="nofollow">סקירה של טכנולוגית מדיה ברשת</a></dt> + <dd>מבט כללי על טכנולוגיות רשת פתוחות ו- API המספקים תמיכה לשמע ווידאו. אם אינך בטוח באיזה API להשתמש, זה המקום להתחיל ממנו.</dd> + <dt><a href="/he/docs/Web/API/Media_Streams_API">API ללכידת מדיה וזרמים (streams)</a></dt> + <dd>אינדקס ל- API שמאפשר להזרים (סטרימינג), להקליט ולתמרן מדיה באופן מקומי וברשת. כולל שימוש במצלמות ומיקרופונים מקומיים ללכידת וידאו, שמע וסטילס.</dd> + <dt><a href="/he/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">שימוש בשמע ווידאו עם HTML</a></dt> + <dd>הטמעת וידאו ו/או שמע בעמוד רשת ושליטה בפלייבק שלו.</dd> + <dt><a href="/he/docs/Web/API/WebRTC_API">WebRTC</a></dt> + <dd>RTC הוא קיצור ל- Real-Time Communications (תקשורת בזמן-אמת), טכנולוגיה שמאפשרת להזרים שמע / וידאו ולשתף מידע בין משתמשי דפדפנים (עמיתים - peers).</dd> +</dl> + +<h3 dir="rtl" id="אחר"><strong>אחר</strong></h3> + +<dl dir="rtl"> + <dt><a href="/he/docs/Web/MathML">MathML</a></dt> + <dd><strong>Mathematical Markup Language (שפת סימני עריכה מתמטית - MathML)</strong> מאפשרת להציג משוואות ותחביר מתמטיות.</dd> + <dt><a href="/he/docs/Web/XSLT">XSLT</a></dt> + <dd><strong>Extensible Stylesheet Language Transformations (טרנספורמציית שפת עיצוב ברת-הרחבה - XSLT)</strong> מאפשרת להמיר מסמכי XML לתוכן HTML קריא יותר.</dd> + <dt><a href="/he/docs/Web/EXSLT">EXSLT</a></dt> + <dd>פונקציות נוספות המספקות אפשרויות נוספות ל- XSLT.</dd> + <dt><a href="/he/docs/Web/XPath">XPath</a></dt> + <dd><strong>XPath</strong> מאפשר לבחור צמתים במסמך, על-ידי שימוש בתחביר חזק יותר מזה של <a href="/he/docs/Web/CSS/CSS_Selectors">CSS selectors</a>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" dir="rtl" id="אזור_הלמידה"><strong>אזור הלמידה</strong></h2> + +<dl dir="rtl"> + <dt><a href="/he/docs/Learn">לימוד פיתוח ברשת</a></dt> + <dd>אוסף מאמרים המספק למתחילים כל מה שצריך כדי להתחיל לתכנת אתרים פשוטים.</dd> + <dt><a href="/he/docs/Web/Apps/Progressive">אפליקציות רשת מתקדמות (Progressive web apps)</a></dt> + <dd>אפליקציות רשת מתקדמות (PWA - Progressive Web Apps) משתמשות ב- Web API מודרניים ביחד עם אסטרטגיית שיפור מתקדמת ליצירת אפליקציות רשת מרובות-פלטפורמות. אפליקציות אלו עובדות בכל מקום, ומספקות מספר אפשרויות עם אותם יתרונות של חווית משתמש כמו אפליקציות native. אוסף מסמכים ומדריכים זה יראו את כל מה שיש לדעת לגבי PWA.</dd> +</dl> + +<h2 dir="rtl" id="נושאים_נוספים"><strong>נושאים נוספים</strong></h2> + +<dl dir="rtl"> + <dt><strong><a href="/he/docs/Web/Apps">פיתוח אפליקציות רשת</a></strong></dt> + <dd>אוסף מאמרים זה מסביר את הטכניקות המשמשות בפיתוח אפליקציות רשת לסביבת מכשירים ניידים (מובייל) ונייחים (מחשבים).</dd> + <dt><strong><a href="/he/docs/Web/Accessibility">נגישות</a></strong></dt> + <dd>אתרים נגישים מאפשרים לאנשים רבים ככל האפשר להשתמש ברשת, לרבות בעל מוגבלויות ראייה, שמיעה ואחרות. אוסף מאמרים זה מספק מידע לגבי פיתוח רשת נגיש.</dd> +</dl> + +<dl dir="rtl"> + <dt><a href="/he/docs/Web/Performance">ביצועים ברשת</a></dt> + <dd>ביצועים ברשת הינה אמנות הווידוא שאפליקציות רשת ייטענו מהר ויגיבו לפעולות משתמש, בלי קשר לרוחב הפס, גודל המסך, רשת, או יכולות המכשיר.</dd> +</dl> + +<dl dir="rtl"> + <dt><a href="/he/docs/Web/Localization">לוקליזציה (L10n) וגלובליזציה / אינטרנשיונליזציה (I18n)</a></dt> + <dd>הרשת היא קהילה גלובלית. חשוב לוודא שהאתר שלך יהיה חלק ממנה, באמצעות הקפדה על מתן תוכן האתר בשפה ופריסה המצופים על-ידי משתמשי היעד שלך.</dd> + <dt><a href="/he/docs/Web/Security">אבטחה</a></dt> + <dd>אל תיתן לאתר או לאפליקציה שלך להדליף מידע פרטי לחבר'ה הרעים. תוכל להשתמש באוסף מאמרים זה כדי לוודא שהפרוייקטים שלך מאובטחים.</dd> + <dt><a href="/he/docs/WebAssembly">WebAssembly</a></dt> + <dd>WebAssembly הינה שפה חדשה שניתן להריץ בדפדפנים חדישים — זוהי שפת-סף דמוית-אסמפלי עם פורמט בינארי קומפקטי בעל ביצועים כמעט ברמת native, ומספק לשפות כמו <span dir="ltr">C / C++</span> קומפילצית-יעד, כך שהן יכולות לרוץ ברשת.</dd> +</dl> +</div> +</div> + +<p dir="rtl"><strong><span class="alllinks"><a href="/he/docs/tag/Web">כל הנושאים...</a></span></strong></p> diff --git a/files/he/web/javascript/guide/index.html b/files/he/web/javascript/guide/index.html new file mode 100644 index 0000000000..eb87ff0421 --- /dev/null +++ b/files/he/web/javascript/guide/index.html @@ -0,0 +1,125 @@ +--- +title: JavaScript Guide +slug: Web/JavaScript/Guide +tags: + - Guide + - JavaScript + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">The JavaScript Guide shows you how to use <a href="/en-US/docs/Web/JavaScript">JavaScript</a> and gives an overview of the language. If you want to get started with JavaScript or programming in general, consult the articles in the <a href="/en-US/Learn">learning area</a>. If you need exhaustive information about a language feature, have a look at the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p> + +<h2 id="Chapters">Chapters</h2> + +<p>This Guide is divided into several chapters:</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">About JavaScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Template strings</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a><br> + </p></li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/he/web/javascript/index.html b/files/he/web/javascript/index.html new file mode 100644 index 0000000000..039763f2e9 --- /dev/null +++ b/files/he/web/javascript/index.html @@ -0,0 +1,97 @@ +--- +title: JavaScript +slug: Web/JavaScript +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary" dir="rtl"><strong>JavaScript</strong> היא שפת תכנות מונחית עצמים, קלת משקל ומבוססת-מפרש (ולעתים עוברת הידור-בו-ברגע (JIT)), המיועדת לשימוש באתרים ואפליקציות אינטרנט, כמו כן ניתן להשתמש בה גם בסביבות רבות שאינן דפדפן האינטרנט (<a href="/he/JavaScript/אודות_JavaScript" title="he/JavaScript/אודות JavaScript">אודות JavaScript</a>). למרות שהיא ידועה בעיקר בשל היותה שפת-תסריט ליצירת אינטראקציה עם דפי אינטרנט, נעשה בה שימוש רב גם בסביבות הרצה רבות שאינן תלויות-דפדפן. כך למשל היא משמשת כשפת-תסריט בסביבת Node.js, בממשק בסיסי הנתונים CouchDB של אפאצ'י, וכן בתוכנת אקרובט של חברת Adobe. ג'אווה סקריפט היא שפה מבוססת-אבטיפוס, מרובת פרדיגמות, בעלת טיפוסיות דינמית, תומכת בסגנונות תכנות מונחה-עצמים, תכנות אימפרטיבי ותכנות דקלרטיבי (כגון תכנות פונקציונאלי, למשל). קרא עוד על ג'אווה סקריפט.</p> + +<p class="summary" dir="rtl">מאמר זה מוקדש לתיאור שפת ג'אווה סקריפט עצמה, ולא לחלקיה השונים הייחודיים לתכנות דפי אינטרנט, או לשאר הסביבות המשתמשות בשפה זו. עבור מידע עבור ממשקי התכנות (APIs) השונים המיועדים עבור דפי אינטרנט, עיין בחלק Web API ובחלק DOM.</p> + +<p class="summary" dir="rtl">התקן עבור ג'אווה סקריפט נקרא ECMAScript. נכון ל2012, כל הדפדפנים המודרניים מספקים תמיכה מלאה בתקן ECMAScript 5.1. דפדפנים ישנים יותר, תומכים לכל הפחות בתקן ECMAScript 3. ב17 ביוני 2015, ארגון ECMA International פרסם את הגרסה השישית של ECMAScript, הנקראת באופן רשמי ECMAScript 2015, וקודם לכן נקראה בשם ECMAScript 6 או ES6. מאז, תקני ECMAScript מתעדכנים במחזורי עדכון שנתיים. המסמכים הבאים המתארים את השפה, מתארים את גרסת הטיוטה האחרונה, שהיא כרגע ECMAScript 2019.</p> + +<p class="summary" dir="rtl">אין לבלבל בין JavaScript לבין שפת התכנות Java. שתיהן "Java" וגם "JavaScript" הן סימני מסחר, או סימני מסחר רשומים על שם חברת Oracle בארצות הברית או במדינות אחרות. בכל מקרה, לשתי שפות התכנות הללו יש תחביר, סמנטיקה ושימושים שונים מאוד.</p> + +<p dir="rtl">שפת התכנות Javascript פותחה בשנת 1995 והיא אינה קשורה כלל אל שפת התכנות Java. לשפה קיימת גרסה תקנית של השפה הקרויה ECMAScript ונכון לשנת 2012, רוב הדפדפנים תומכים בגרסת ECMAScript 5.1.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 dir="rtl" id="מדריכים">מדריכים</h2> + +<p dir="rtl">למד כיצד לתכנת באמצעות Javascript.</p> + +<h3 dir="rtl" id="היכרות_ראשונית">היכרות ראשונית</h3> + +<dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">מדריך Javascript</a></dt> + <dd dir="rtl">היכרות ראשונה עם שפת Javascript למשתמשים מתחילים.</dd> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">סקירה כללית של מאפייני השפה </a></dt> + <dd dir="rtl">שפת Javascript בדפדפן האינטרנט</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">מבוא לתכנות מונחה עצמים </a></dt> + <dd dir="rtl">מבוא והכרת מושגים של תכנות מונחה עצמים בשפת Javascript.</dd> +</dl> + +<h3 dir="rtl" id="מתחילים">מתחילים</h3> + +<dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">מבוא לשפת Javascript </a></dt> + <dd dir="rtl">סקירה עבור משתמשים בעלי היכרות עם JavaScript.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">מבנה נתונים </a></dt> + <dd dir="rtl">סקירה כללית של מבני נתונים הזמינים ב- JavaScript.</dd> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">השוואות בין משתנים </a></dt> + <dd dir="rtl">Javascript מספקת 2 אפשרויות להשוואת נתונים: השוואה רופפת באמצעות ==. והשוואה קפדנית באמצעות ===.</dd> +</dl> + +<h3 dir="rtl" id="מתקדמים">מתקדמים</h3> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ירושות</a></dt> + <dd dir="rtl">סקירה על ירושות בשפת Javascript.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">מערכים</a></dt> + <dd dir="rtl">מערכים מודפסים וגישה לנתונים.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">ניהול זיכרון</a></dt> + <dd dir="rtl">מחזור זכרון בשפת Javascript.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt dir="rtl"> + <h2 id="אזכורים">אזכורים</h2> + </dt> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">אובייקטים סטנדרטים</a></dt> + <dd dir="rtl">הכר את האובייקטים המובנים: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array global object is a constructor for arrays, which are high-level, list-like objects."><code>Array</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC."><code>Date</code></a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" title="The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base objects for user-defined exceptions. See below for standard built-in error types.">Error</a>,</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own."><code>JSON</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object."><code>Math</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value."><code>Map</code></a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap" title="The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values."><code>WeakMap</code></a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet" title="The WeakSet object lets you store weakly held objects in a collection.">WeakSet</a>.</code></dd> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/Reference/Operators">ביטויים ואופרטורים </a></dt> + <dd dir="rtl">למד אודות האופרטורים:<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>.</dd> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/Reference/Statements">הצהרות</a> <a href="/en-US/docs/Web/JavaScript/Reference/Statements">ולולאות</a></dt> + <dd dir="rtl">למד אודות משתנים ולולאות: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do-while</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for-in</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try-catch</a></code> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if-else</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a>.</code></dd> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/Reference/Functions">פונקציות</a></dt> + <dd dir="rtl">למד כיצד לעבוד עם פונקציות כדי לפתח יישומים.</dd> +</dl> + +<h2 dir="rtl" id="כלים_ועזרים">כלים ועזרים</h2> + +<p dir="rtl">כלים שימושיים לבדיקה ואיתור שגיאות בקוד ה-JavaScript שלך.</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Tools">כלי Firefox למפתחים</a></dt> + <dd dir="rtl">Scratchpad, Web Console, JavaScript Profiler, Debugger ועוד.</dd> + <dt dir="rtl"><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> + <dd dir="rtl">עריכה, בדיקת שגיאות ומעקב אחר CSS, HTML ו-JavaScript בזמן אמת ובכל עמוד אינטרנט.</dd> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd dir="rtl">כלי זה בודק קטעי קוד במהירות וללא צורך בטעינת העמוד מחדש.</dd> + <dt dir="rtl"><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd dir="rtl">הוספת TogetherJS לאתר מאפשרת למשתמשים לעזור זה לזה בזמן אמת וכך שיתוף הפעולה נעשה קל. </dd> +</dl> + +<dl> + <dt dir="rtl"><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd dir="rtl">אתר שיתופי המאפשר למשתמשים בו להיעזר באחרים ולקבל תשובות אודות בעיות קוד שונות. </dd> + <dt dir="rtl"><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">גרסאות Javascript, עדכונים והערות </a><br> + https://esdiscuss.org<br> + https://wiki.mozilla.org/JavaScript<br> + https://twitter.com/SpiderMonkeyJS</dt> +</dl> +</div> +</div> diff --git a/files/he/web/javascript/reference/errors/index.html b/files/he/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/he/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/he/web/javascript/reference/functions/default_parameters/index.html b/files/he/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..2d4215bcad --- /dev/null +++ b/files/he/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,216 @@ +--- +title: Default parameters +slug: Web/JavaScript/Reference/Functions/Default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<div dir="rtl"><strong>הצבת פרמטר ברירת מחדל לפונקציה </strong>מאפשר רישום של ערך ראשוני בזמן הגדרת הפונקציה, כך שאם לא מועבר ערך בקריאה (הפעלה) של הפונקציה, או שמעבירים <code>undefined</code> כערך, הערך הראשוני שהוגדר כברירת מחדל ישמש בתור הפרמטר של הפונקציה.</div> + +<p> </p> + +<h2 dir="rtl" id="שימוש_בשפה"><strong>שימוש בשפה</strong></h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { + <em>statements</em> +} +</pre> + +<h2 dir="rtl" id="תיאור_שימושיות"><strong>תיאור שימושיות</strong></h2> + +<p dir="rtl">הערך ראשוני של פרמטר בפונקציה ב JavaScript שווה ל <code>undefined</code>. אומנם ישנם מקרים בהם זה יכול להיות נוח להציב ערך שונה כערך ראשוני לפרמטר של הפונקציה, כך שהערך יוגדר מראש ביצירת הפונקציה. ופה אנחנו נעזרים בהצבת פרמטר ברירת מחדל לפונקציה.</p> + +<p dir="rtl">האסטרטגיה הכללית שהשתמשו בה לפני פרמטר ברירת המחדל, היתה בדיקה שנכללה בתוך גוף הפונקציה ובדקה אם הפרמטר מכיל ערך או שהוא אינו מוגדר, ולא נעשה בו שימוש בקריאה לפונקציה. בדוגמא שלפנינו אם לא נעביר ערך ל <code>b</code> בקריאה לפונקציה (בהפעלה שלה, בכל הפעלה לש פונקציה אנחנו קוראים לה מהזיכרון), היא תקבל ערך לא מוגדר (<code>undefined</code>) וכאשר תיקראו לפונקציה <code>multiply</code> כדי לחשב את <code>a*b</code> התוצאה תהיה <code>NaN</code>. לשם כך השורה השניה בפונקציה בודקת אם קיים בפרמטר <code>b</code> ערך השונה מ <code>undefined</code> ואם לא נעשה שימוש בפרמטר <code>b</code> בקריאה לפונקציה אז מציבים בו ערך ראשוני של 1:</p> + +<pre class="brush: js">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<p dir="rtl">בעזרת הצבה של פרמטר ברירת מחדל לפונקציה הניתן לשימוש מגרסה ES2015 הבדיקה בגוף הפונקציה כבר לא נחוצה. עכשיו אפשר פשוט להציב ערך ראשוני כערך ברירת מחדל בהגדרה של הפונקציה והפרמטרים שלה:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<h2 dir="rtl" id="דוגמאות"><strong>דוגמאות</strong></h2> + +<h3 dir="rtl" id="קריאה_לפונקציה_עם_ערך_של_undefined_מול_ערכים_שליליים_שונים.">קריאה לפונקציה עם ערך של <code>undefined</code> מול ערכים שליליים שונים.</h3> + +<p dir="rtl">בהפעלה השניה של הפונקציה בדוגמה <code>test</code> אנחנו מעבירים באופן מכוון ערך של <code>undefined</code> והפרמטר <code>num</code> עדיין מקבל את ערך ברירת המחדל שהגדרנו בעת יצירת הפונקציה <code>(num = 1)</code>. ניתן לראות בקריאות הבאות לפונקציה, כי אך ורק <code>undefined</code> זוכה להחלפה בערך ברירת המחדל ולא שום סוג של ערך שלילי אחר ( <code>num === fale!!</code> ).</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num); +} + +test(); // 'number' (num is set to 1) +test(undefined); // 'number' (num is set to 1 too) + +// test with other falsy values: +test(''); // 'string' (num is set to '') +test(null); // 'object' (num is set to null) +</pre> + +<h3 id="Evaluated_at_call_time">Evaluated at call time</h3> + +<p>The default argument gets evaluated at call time, so unlike e.g. in Python, a new object is created each time the function is called.</p> + +<pre class="brush: js">function append(value, array = []) { + array.push(value); + return array; +} + +append(1); //[1] +append(2); //[2], not [1, 2] + +</pre> + +<p>This even applies to functions and variables:</p> + +<pre class="brush: js">function callSomething(thing = something()) { + return thing; +} + +function something() { + return 'sth'; +} + +callSomething(); //sth</pre> + +<h3 id="Default_parameters_are_available_to_later_default_parameters">Default parameters are available to later default parameters</h3> + +<p>Parameters already encountered are available to later default parameters:</p> + +<pre class="brush: js">function singularAutoPlural(singular, plural = singular + 's', + rallyingCry = plural + ' ATTACK!!!') { + return [singular, plural, rallyingCry]; +} + +//["Gecko","Geckos", "Geckos ATTACK!!!"] +singularAutoPlural('Gecko'); + +//["Fox","Foxes", "Foxes ATTACK!!!"] +singularAutoPlural('Fox', 'Foxes'); + +//["Deer", "Deer", "Deer ... change."] +singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \ + petition the government for positive change.') +</pre> + +<p>This functionality is approximated in a straight forward fashion and demonstrates how many edge cases are handled.</p> + +<pre class="brush: js">function go() { + return ':P'; +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g]; +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="Functions_defined_inside_function_body">Functions defined inside function body</h3> + +<p>Introduced in Gecko 33 {{geckoRelease(33)}}. Functions declared in the function body cannot be referred inside default parameters and throw a {{jsxref("ReferenceError")}} (currently a {{jsxref("TypeError")}} in SpiderMonkey, see {{bug(1022967)}}). Default parameters are always executed first, function declarations inside the function body evaluate afterwards.</p> + +<pre class="brush: js">// Doesn't work! Throws ReferenceError. +function f(a = go()) { + function go() { return ':P'; } +} +</pre> + +<h3 id="Parameters_without_defaults_after_default_parameters">Parameters without defaults after default parameters</h3> + +<p>Prior to Gecko 26 {{geckoRelease(26)}}, the following code resulted in a {{jsxref("SyntaxError")}}. This has been fixed in {{bug(777060)}} and works as expected in later versions. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.</p> + +<pre class="brush: js">function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +</pre> + +<h3 id="Destructured_parameter_with_default_value_assignment">Destructured parameter with default value assignment</h3> + +<p>You can use default value assignment with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> notation:</p> + +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> diff --git a/files/he/web/javascript/reference/functions/index.html b/files/he/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..a58e629441 --- /dev/null +++ b/files/he/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* Pass object reference to the function */ + myFunc(mycar); + + /* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ + console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefit of creating a named function expression is that in case we encounted an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <strong>IIFE (<em>Immediately Invokable Function Expression</em>)</strong>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/array/from/index.html b/files/he/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..1ab52ffa12 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,243 @@ +--- +title: ()Array.from +slug: Web/JavaScript/Reference/Global_Objects/Array/from +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>מתודת ה-</div> + +<div dir="ltr"><code><strong>Array.from()</strong></code><strong> </strong></div> + +<div>יוצרת מערך חדש שהוא העתק בעומק אחד (לא יכלול את האובייקטים אליהם יש הפניות מאיברים במערך הנתון) של המערך או אובייקט איטרבילי המועבר כפרמטר.</div> + +<div dir="rtl"></div> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">Array.from(arrayLike[, mapFn[, thisArg]]) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>An array-like or iterable object to convert to an array.</dd> + <dt><code>mapFn</code> {{Optional_inline}}</dt> + <dd>Map function to call on every element of the array.</dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Value to use as <code>this</code> when executing <code>mapFn</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A new {{jsxref("Array")}} instance.</p> + +<h2 id="Description">Description</h2> + +<p><code>Array.from()</code> lets you create <code>Array</code>s from:</p> + +<ul> + <li>array-like objects (objects with a <code>length</code> property and indexed elements) or</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (objects where you can get its elements, such as {{jsxref("Map")}} and {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> has an optional parameter <code>mapFn</code>, which allows you to execute a {{jsxref("Array.prototype.map", "map")}} function on each element of the array (or subclass object) that is being created. More clearly,<code> Array.from(obj, mapFn, thisArg)</code> has the same result as <code>Array.from(obj).map(mapFn, thisArg)</code>, except that it does not create an intermediate array. This is especially important for certain array subclasses, like <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>, since the intermediate array would necessarily have values truncated to fit into the appropriate type.</p> + +<p>The <code>length</code> property of the <code>from()</code> method is 1.</p> + +<p>In ES2015, the class syntax allows for sub-classing of both built-in and user defined classes; as a result, static methods such as <code>Array.from</code> are "inherited" by subclasses of <code>Array</code> and create new instances of the subclass, not <code>Array</code>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Array_from_a_String">Array from a <code>String</code></h3> + +<pre class="brush: js">Array.from('foo'); +// [ "f", "o", "o" ]</pre> + +<h3 id="Array_from_a_Set">Array from a <code>Set</code></h3> + +<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']); +Array.from(set); +// [ "foo", "bar", "baz" ]</pre> + +<h3 id="Array_from_a_Map">Array from a <code>Map</code></h3> + +<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(map); +// [[1, 2], [2, 4], [4, 8]] + +const mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="Array_from_an_Array-like_object_(arguments)">Array from an Array-like object (arguments)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [ 1, 2, 3 ]</pre> + +<h3 id="Using_arrow_functions_and_Array.from">Using arrow functions and <code>Array.from</code></h3> + +<pre class="brush: js">// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +// Since the array is initialized with `undefined` on each position, +// the value of `v` below will be `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h3 id="Sequence_generator_(range)">Sequence generator (range)</h3> + +<pre class="brush: js">// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc) +const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); + +// Generate numbers range 0..4 +range(0, 4, 1); +// [0, 1, 2, 3, 4] + +// Generate numbers range 1..10 with step of 2 +range(1, 10, 2); +// [1, 3, 5, 7, 9] + +// Generate the alphabet using Array.from making use of it being ordered as a sequence +range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)); +// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> was added to the ECMA-262 standard in the 6th edition (ES2015); as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>Array.from</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 6th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callback.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}. In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - not null or undefined'); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method + // of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</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('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/array/includes/index.html b/files/he/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..0cc6181f0d --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,169 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - ג'אווה סקריפט + - מערך + - פוליפיל + - פרוטוטייפ +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div dir="rtl">{{JSRef}}</div> + +<div dir="rtl">שיטת <code><strong>includes()</strong></code> קובעת אם מערך מכיל אלמנט מסויים, מחזיר true או false בהתאם.</div> + +<div dir="rtl"> </div> + +<h2 dir="rtl" id="תחביר">תחביר</h2> + +<pre class="syntaxbox">var <var>boolean</var> = <var>array</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</pre> + +<h3 dir="rtl" id="פרמטרים">פרמטרים</h3> + +<dl> + <dt dir="rtl"><code>searchElement</code></dt> + <dd dir="rtl">האלמנט אותו מחפשים</dd> + <dt dir="rtl"><code>fromIndex</code></dt> + <dd dir="rtl">אופציונלי. המיקום במערך בו להתחיל את החיפוש אחר searchElement. ערך שלילי יתחיל את החיפוש מהערך האחרון (array.length) + fromIndex בסדר עולה. ברירת מחדל 0.</dd> +</dl> + +<h3 dir="rtl" id="ערך_מוחזר_(Return)">ערך מוחזר (Return)</h3> + +<p dir="rtl">{{jsxref("Boolean")}}.</p> + +<h2 dir="rtl" id="דוגמאות">דוגמאות</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h2 dir="rtl" id="פוליפיל_-_Polyfill">פוליפיל - Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.includes) { + Array.prototype.includes = function(searchElement /*, fromIndex*/) { + 'use strict'; + if (this == null) { + throw new TypeError('Array.prototype.includes called on null or undefined'); + } + + var O = Object(this); + var len = parseInt(O.length, 10) || 0; + if (len === 0) { + return false; + } + var n = parseInt(arguments[1], 10) || 0; + var k; + if (n >= 0) { + k = n; + } else { + k = len + n; + if (k < 0) {k = 0;} + } + var currentElement; + while (k < len) { + currentElement = O[k]; + if (searchElement === currentElement || + (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN + return true; + } + k++; + } + return false; + }; +} +</pre> + +<h2 dir="rtl" id="מפרט">מפרט</h2> + +<table class="standard-table" dir="rtl" style="height: 185px; width: 490px;"> + <tbody> + <tr> + <th scope="col"><span style="display: none;"> </span><span style="display: none;"> </span>מפרט</th> + <th scope="col">סטטוס</th> + <th scope="col">הערה</th> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>הגדרה ראשונית</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תאימות_דפדפנים">תאימות דפדפנים</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>מאפיין</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>תמיכה בסיסית</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>43</td> + <td>{{CompatNo}}</td> + <td>14279+</td> + <td>34</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>מאפיין</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>תמיכה בסיסית</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>43</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="ראה_עוד">ראה עוד</h2> + +<ul dir="rtl"> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/array/index.html b/files/he/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..4dac733b4a --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,485 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - דוגמא + - מערך +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<p dir="rtl">האובייקט <strong>מערך(</strong>Array<strong>)</strong> בג'אווה סקריפט הוא אובייקט גלובלי אשר משמש לבניית מערכים שהם אובייקטים דמויי רשימה .</p> + +<p dir="rtl"><strong>צור מערך</strong></p> + +<pre class="brush: js notranslate" dir="rtl">var fruits = ["Apple", "Banana"]; + +console.log(fruits.length); +// 2 +</pre> + +<p dir="rtl"><strong>קבל גישה לאיבר(ע"י האינדקס שלו) במערך</strong></p> + +<pre class="brush: js notranslate">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p dir="rtl"><strong>השתמש בלולאה על המערך </strong></p> + +<pre class="brush: js notranslate" dir="rtl">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p dir="rtl"><strong>הוסף איבר לסוף המערך</strong></p> + +<pre class="brush: js notranslate">var newLength = fruits.push("Orange"); +// ["Apple", "Banana", "Orange"] +</pre> + +<p dir="rtl"><strong>הסר את האיבר האחרון במערך</strong></p> + +<pre class="brush: js notranslate">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p dir="rtl"><strong>הסר איבר הראשון מערך</strong></p> + +<pre class="brush: js notranslate">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p dir="rtl"><strong>הוסף איבר לראשית המערך</strong></p> + +<pre class="brush: js notranslate">var newLength = fruits.unshift("Strawberry") // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p dir="rtl"><strong>מצא את האינדקס של איבר במערך</strong></p> + +<pre class="brush: js notranslate">fruits.push("Mango"); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf("Banana"); +// 1 +</pre> + +<p dir="rtl"><strong>הסר איבר על ידי האינדקס(מיקום) שלו</strong></p> + +<pre class="brush: js notranslate">var removedItem = fruits.splice(pos, 1); // this is how to remove an item +// ["Strawberry", "Mango"] +</pre> + +<p dir="rtl"><strong>צור עותק של המערך</strong></p> + +<pre class="brush: js notranslate">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox notranslate"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> constructor and that argument is a number (see the arrayLength parameter below).Note that this special case only applies to JavaScript arrays created with the <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), this returns a new JavaScript array with length set to that number. If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.</p> + +<p>Some people think that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> + +<h3 dir="rtl" id="גישה_לאלמנטים_שבמערך">גישה לאלמנטים שבמערך</h3> + +<p dir="rtl">מערכים ב - JavaScript מסודרים לפי מספרים מאפס ומעלה: מספרו של האיבר הראשון במערך הוא 0 ומספרו של האיבר האחרון במערך שווה לכמות האיברים במערך (אורכו של המערך - Array.length) פחות 1.</p> + +<pre class="brush: js notranslate">var arr = ['this is the first element', 'this is the second element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the second element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:</p> + +<pre class="brush: js notranslate">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js notranslate">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js notranslate">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is for this reason that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js notranslate">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js notranslate">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js notranslate">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js notranslate">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js notranslate">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js notranslate">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js notranslate">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p> +</div> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js notranslate">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js notranslate">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards (though the ES2015 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> + +<pre class="brush: js notranslate">// Assumes Array extras already present (one may use polyfills for these as well) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function(methodName) { + // return typeof Array[methodName] === 'function' + // }); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'find', 'findIndex', 'entries', 'keys', + 'values', 'copyWithin', 'includes' + ], + methodCount = methods.length, + assignArrayGeneric = function(methodName) { + if (!Array[methodName]) { + var method = Array.prototype[methodName]; + if (typeof method === 'function') { + Array[methodName] = function() { + return method.call.apply(method, arguments); + }; + } + } + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js notranslate">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js notranslate">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval notranslate">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/array/unshift/index.html b/files/he/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..9febfb5ad4 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,94 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div dir="rtl">{{JSRef}}</div> + +<div dir="rtl">המתודה ()<code><strong>unshift</strong></code> מוסיפה אלמנט אחד או יותר לתחילת מערך ומחזירה את גודלו החדש של המערך. </div> + +<div dir="rtl">{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 dir="rtl" id="פרמטרים">פרמטרים</h3> + +<dl> + <dt dir="rtl"><code>element<em>N</em></code></dt> + <dd dir="rtl">אלמנטים להוספה לתחילת המערך.</dd> +</dl> + +<h3 dir="rtl" id="ערך_מוחזר">ערך מוחזר</h3> + +<p dir="rtl">את ערך השדה {{jsxref("Array.length", "length")}} החדש של המערך עליו הופעלה המתודה.</p> + +<h2 dir="rtl" id="תאור">תאור</h2> + +<p dir="rtl">המתודה <code>unshift</code> מכניסה את ערכי האלמנטים שקיבלה כפרמטר לתחילת אובייקט המערך. </p> + +<p dir="rtl"><code>unshift</code> is intentionally generic; this method can be {{jsxref("Function.call", "called", "", 1)}} or {{jsxref("Function.apply", "applied", "", 1)}} to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/index.html b/files/he/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..f215b83a20 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/index.html @@ -0,0 +1,183 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Objects + - אובייקטים + - סקריפט + - פונקציות +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<div class="onlyinclude"> +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong> (but only if ECMAScript 5 strict mode is not used; in that case it returns {{jsxref("undefined")}}). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_by_category">Standard objects by category</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} {{experimental_inline}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{jsxref("Map")}} {{experimental_inline}}</li> + <li>{{jsxref("Set")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakMap")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakSet")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Vector_collections">Vector collections</h3> + +<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{jsxref("Promise")}} {{experimental_inline}}</li> + <li>{{jsxref("Generator")}} {{experimental_inline}}</li> + <li>{{jsxref("GeneratorFunction")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}} {{experimental_inline}}</li> + <li>{{jsxref("Proxy")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Non-standard_objects">Non-standard objects</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> + +<p> </p> diff --git a/files/he/web/javascript/reference/global_objects/object/assign/index.html b/files/he/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..72d2b16579 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,272 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<p>{{JSRef}}</p> + +<p dir="rtl">מתודת <span class="seoSummary"><strong><code>Object.assign</code> מעתיקה אובייקט על שלל </strong>{{jsxref("Object/propertyIsEnumerable", "מאפייניו", "", 1)} {{jsxref("Object/hasOwnProperty", "הקיימים", "", 1)}} לאובייקט אחר וממזגת אותם ביחד. המתודה מחזירה את האובייקט שאליו העתקנו את התכונות החדשות. </span></p> + +<div dir="rtl">תחביר</div> + +<pre class="syntaxbox notranslate">Object.assign(<var>target</var>, ...<var>sources</var>)</pre> + +<h3 dir="rtl" id="פרמטרים">פרמטרים</h3> + +<dl> + <dt dir="rtl"><code><var>target - אובייקט היעד</var></code></dt> + <dd dir="rtl">אובייקט היעד- האובייקט שאליו אנחנו מעתיקים את כל המאפיינים של האובייקט המקורי, כאשר הוא מחזיר את האובייקט אחרי המיזוג.</dd> + <dt dir="rtl"><code><var>sources - אובייקט המקור</var></code></dt> + <dd></dd> +</dl> + +<dl> + <dd dir="rtl">אובייקט המקור - האובייקט מכיל את המאפיינים שאנחנו רוצים להעתיק לאובייקט נוסף. </dd> +</dl> + +<h3 dir="rtl" id="Return_value_-_הנתון_התוצאה">Return value - הנתון התוצאה</h3> + +<p dir="rtl">The target object - האובייקט שאליו העתקנו את התכונות של האובייקט המקורי.</p> + +<h2 dir="rtl" id="תיאור">תיאור</h2> + +<p dir="rtl">מאפיינים באובייקט היעד ישוכתבו או ידרסו ע"י המאפיינים של אובייקט המקור אם הם חולקים את אותו ה-{{jsxref("Object/keys", "key", "", 1)}}. מאפיינים חדשים שיוגדו על מאפיינים משותפים (properties) בהמשך ידרסו גם באובייקט היעד וגם באופייקט המקור.</p> + +<p dir="rtl"></p> + +<p>The <code>Object.assign()</code> method only copies <em>enumerable</em> and <em>own</em> properties from a source object to a target object. It uses <code>[[Get]]</code> on the source and <code>[[Set]]</code> on the target, so it will invoke <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getters</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a>. Therefore it <em>assigns</em> properties, versus copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters.</p> + +<p>For copying property definitions (including their enumerability) into prototypes, use {{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.defineProperty()")}} instead.</p> + +<p>Both {{jsxref("String")}} and {{jsxref("Symbol")}} properties are copied.</p> + +<p>In case of an error, for example if a property is non-writable, a {{jsxref("TypeError")}} is raised, and the <code><var>target</var></code> object is changed if any properties are added before the error is raised.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <code>Object.assign()</code> does not throw on {{jsxref("null")}} or {{jsxref("undefined")}} sources.</p> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This <a href="/en-US/docs/Glossary/Polyfill">polyfill</a> doesn't support symbol properties, since ES5 doesn't have symbols anyway:</p> + +<pre class="brush: js notranslate">if (typeof Object.assign !== 'function') { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target === null || target === undefined) { + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource !== null && nextSource !== undefined) { + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); +} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Cloning_an_object">Cloning an object</h3> + +<pre class="brush: js notranslate">const obj = { a: 1 }; +const copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Deep_Clone" name="Deep_Clone">Warning for Deep Clone</h3> + +<p>For deep cloning, we need to use alternatives, because <code>Object.assign()</code> copies property values.</p> + +<p>If the source value is a reference to an object, it only copies the reference value.</p> + +<pre class="brush: js notranslate">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}} + + // Deep Clone + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}} +} + +test();</pre> + +<h3 id="Merging_objects">Merging objects</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { b: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.</pre> + +<h3 id="Merging_objects_with_same_properties">Merging objects with same properties</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1, b: 1, c: 1 }; +const o2 = { b: 2, c: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>The properties are overwritten by other objects that have the same properties later in the parameters order.</p> + +<h3 id="Copying_symbol-typed_properties">Copying symbol-typed properties</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { [Symbol('foo')]: 2 }; + +const obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +</pre> + +<h3 id="Properties_on_the_prototype_chain_and_non-enumerable_properties_cannot_be_copied">Properties on the prototype chain and non-enumerable properties cannot be copied</h3> + +<pre class="brush: js notranslate">const obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain. + bar: { + value: 2 // bar is a non-enumerable property. + }, + baz: { + value: 3, + enumerable: true // baz is an own enumerable property. + } +}); + +const copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +</pre> + +<h3 id="Primitives_will_be_wrapped_to_objects">Primitives will be wrapped to objects</h3> + +<pre class="brush: js notranslate">const v1 = 'abc'; +const v2 = true; +const v3 = 10; +const v4 = Symbol('foo'); + +const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Primitives will be wrapped, null and undefined will be ignored. +// Note, only string wrappers can have own enumerable properties. +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="Exceptions_will_interrupt_the_ongoing_copying_task">Exceptions will interrupt the ongoing copying task</h3> + +<pre class="brush: js notranslate">const target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // target.foo is a read-only property + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// The Exception is thrown when assigning target.foo + +console.log(target.bar); // 2, the first source was copied successfully. +console.log(target.foo2); // 3, the first property of the second source was copied successfully. +console.log(target.foo); // 1, exception is thrown here. +console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied. +console.log(target.baz); // undefined, the third source will not be copied either. +</pre> + +<h3 id="Copying_accessors">Copying accessors</h3> + +<pre class="brush: js notranslate">const obj = { + foo: 1, + get bar() { + return 2; + } +}; + +let copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 } +// The value of copy.bar is obj.bar's getter's return value. + +// This is an assign function that copies full descriptors +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + + // By default, Object.assign copies enumerable Symbols, too + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Object.assign")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">Spread in object literals</a></li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/object/index.html b/files/he/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..9feed92ddc --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,184 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Object</strong></code> constructor creates an object wrapper.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">// Object initialiser or literal +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Called as a constructor +new Object([<var>value</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.</dd> + <dt><code>value</code></dt> + <dd>Any value.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>Object</code> constructor creates an object wrapper for the given value. If the value is {{jsxref("null")}} or {{jsxref("undefined")}}, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.</p> + +<p>When called in a non-constructor context, <code>Object</code> behaves identically to <code>new Object()</code>.</p> + +<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Properties_of_the_Object_constructor">Properties of the <code>Object</code> constructor</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Has a value of 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Allows the addition of properties to all objects of type Object.</dd> +</dl> + +<h2 id="Methods_of_the_Object_constructor">Methods of the <code>Object</code> constructor</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Copies the values of all enumerable own properties from one or more source objects to a target object.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Creates a new object with the specified prototype object and properties.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Adds the named property described by a given descriptor to an object.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Adds the named properties described by the given descriptors to an object.</dd> + <dt>{{jsxref("Object.entries()")}}</dt> + <dd>Returns an array containing all of the <code>[key, value]</code> pairs of a given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Freezes an object: other code can't delete or change any properties.</dd> + <dt>{{jsxref("Object.fromEntries()")}}</dt> + <dd>Returns a new object from an iterable of key-value pairs (reverses {{jsxref("Object.entries")}}).</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Returns a property descriptor for a named property on an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt> + <dd>Returns an object containing all own property descriptors for an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Returns an array of all symbol properties found directly upon a given object.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Returns the prototype of the specified object.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Determines if extending of an object is allowed.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Determines if an object was frozen.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Determines if an object is sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Prevents any extensions of an object.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Prevents other code from deleting properties of an object.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property).</dd> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>Returns an array containing the values that correspond to all of a given object's <strong>own</strong> enumerable string properties.</dd> +</dl> + +<h2 id="Object_instances_and_Object_prototype_object"><code>Object</code> instances and <code>Object</code> prototype object</h2> + +<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Deleting_a_property_from_an_object">Deleting a property from an object</h2> + +<p>There isn't any method in an Object itself to delete its own properties (e.g. like <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a></code>). To do so one has to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>The following examples store {{jsxref("Boolean")}} objects in <code>o</code>:</p> + +<pre class="brush: js">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/promise/index.html b/files/he/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..1f1c71827c --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,244 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Promise</code></strong> object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.</p> + +<div class="note"> +<p><strong>Note:</strong> This article describes the <code>Promise</code> constructor and the methods and properties of such objects. To learn about the way promises work and how you can use them, we advise you to read <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a> first. The constructor is primarily used to wrap functions that do not already support promises.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="תחביר">תחביר</h2> + +<pre class="brush: js">new Promise( /* executor */ function(resolve, reject) { ... } );</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt>executor</dt> + <dd>A function that is passed with the arguments <code>resolve</code> and <code>reject</code>. The <code>executor</code> function is executed immediately by the Promise implementation, passing <code>resolve</code> and <code>reject</code> functions (the executor is called before the <code>Promise</code> constructor even returns the created object). The <code>resolve</code> and <code>reject</code> functions, when called, resolve or reject the promise, respectively. The executor normally initiates some asynchronous work, and then, once that completes, either calls the <code>resolve</code> function to resolve the promise or else rejects it if an error occurred. If an error is thrown in the executor function, the promise is rejected. The return value of the executor is ignored.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>A <code><strong>Promise</strong></code> is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a <em>promise</em> to supply the value at some point in the future.</p> + +<p>A <code>Promise</code> is in one of these states:</p> + +<ul> + <li><em>pending</em>: initial state, neither fulfilled nor rejected.</li> + <li><em>fulfilled</em>: meaning that the operation completed successfully.</li> + <li><em>rejected</em>: meaning that the operation failed.</li> +</ul> + +<p>A pending promise can either be <em>fulfilled</em> with a value, or <em>rejected</em> with a reason (error). When either of these options happens, the associated handlers queued up by a promise's <code>then</code> method are called. (If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.)</p> + +<p>As the <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> and <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> methods return promises, they can be chained.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15911/promises.png" style="height: 297px; width: 801px;"></p> + +<div class="note"> +<p><strong>Not to be confused with:</strong> Several other languages have mechanisms for lazy evaluation and deferring a computation, which they also call "promises", e.g. Scheme. Promises in JavaScript represent processes which are already happening, which can be chained with callback functions. If you are looking to lazily evaluate an expression, consider the <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a> with no arguments: <code>f = () => <em>expression</em></code> to create the lazily-evaluated expression, and <code>f()</code> to evaluate.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: A promise is said to be <em>settled</em> if it is either fulfilled or rejected, but not pending. You will also hear the term <em>resolved</em> used with promises — this means that the promise is settled or “locked in” to match the state of another promise. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> contains more details about promise terminology.</p> +</div> + +<h2 id="מאפיינים">מאפיינים</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Length property whose value is always 1 (number of constructor arguments).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Represents the prototype for the <code>Promise</code> constructor.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Returns a promise that either fulfills when all of the promises in the iterable argument have fulfilled or rejects as soon as one of the promises in the iterable argument rejects. If the returned promise fulfills, it is fulfilled with an array of the values from the fulfilled promises in the same order as defined in the iterable. If the returned promise rejects, it is rejected with the reason from the first promise in the iterable that rejected. This method can be useful for aggregating results of multiple promises.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Returns a promise that fulfills or rejects as soon as one of the promises in the iterable fulfills or rejects, with the value or reason from that promise.</dd> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Returns a <code>Promise</code> object that is rejected with the given reason.</dd> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Returns a <code>Promise</code> object that is resolved with the given value. If the value is a thenable (i.e. has a <code>then</code> method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you don't know if a value is a promise or not, {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.</dd> +</dl> + +<h2 id="Promise_prototype">Promise prototype</h2> + +<h3 id="Properties">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Methods_2">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Creating_a_Promise">Creating a Promise</h2> + +<p>A <code>Promise</code> object is created using the <code>new </code>keyword and its constructor. This constructor takes as its argument a function, called the "executor function". This function should take two functions as parameters. The first of these functions (<code>resolve</code>) is called when the asynchronous task completes successfully and returns the results of the task as a value. The second (<code>reject</code>) is called when the task fails, and returns the reason for failure, which is typically an error object.</p> + +<pre class="brush: js">const myFirstPromise = new Promise((resolve, reject) => { + // do something asynchronous which eventually calls either: + // + // resolve(someValue); // fulfilled + // or + // reject("failure reason"); // rejected +}); +</pre> + +<p>To provide a function with promise functionality, simply have it return a promise:</p> + +<pre class="brush: js">function myAsyncFunction(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open("GET", url); + xhr.onload = () => resolve(xhr.responseText); + xhr.onerror = () => reject(xhr.statusText); + xhr.send(); + }); +}</pre> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="דוגמה_בסיסית">דוגמה בסיסית</h3> + +<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) => { + // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed. + // In this example, we use setTimeout(...) to simulate async code. + // In reality, you will probably be using something like XHR or an HTML5 API. + setTimeout(function(){ + resolve("Success!"); // Yay! Everything went well! + }, 250); +}); + +myFirstPromise.then((successMessage) => { + // successMessage is whatever we passed in the resolve(...) function above. + // It doesn't have to be a string, but if it is only a succeed message, it probably will be. + console.log("Yay! " + successMessage); +}); +</pre> + +<h3 id="דוגמה_מתקדמת">דוגמה מתקדמת</h3> + +<pre class="brush: html hidden"><button id="btn">Make a promise!</button> +<div id="log"></div> +</pre> + +<p>This small example shows the mechanism of a <code>Promise</code>. The <code>testPromise()</code> method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will be fulfilled, using {{domxref("window.setTimeout()")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p> + +<p>The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise.</p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + let thisPromiseCount = ++promiseCount; + + let log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) + let p1 = new Promise( + // The executor function is called with the ability to resolve or + // reject the promise + (resolve, reject) => { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // We define what to do when the promise is resolved with the then() call, + // and what to do when the promise is rejected with the catch() call + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }).catch( + // Log the rejection reason + (reason) => { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +}</pre> + +<pre class="brush:js hidden">if ("Promise" in window) { + let btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +} +</pre> + +<p>This example is started by clicking the button. You need a browser that supports <code>Promise</code>. By clicking the button several times in a short amount of time, you'll even see the different promises being fulfilled one after another.</p> + +<p>{{EmbedLiveSample("Advanced_Example", "500", "200")}}</p> + +<h2 id="טעינת_תמונה_באמצעות_XHR">טעינת תמונה באמצעות XHR</h2> + +<p>Another simple example using <code>Promise</code> and {{domxref("XMLHttpRequest")}} to load an image is available at the MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> repository. You can also <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Each step is commented and allows you to follow the Promise and XHR architecture closely.</p> + +<h2 id="מפרט">מפרט</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('ES2015', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise")}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/string/index.html b/files/he/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..8b8911749e --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,314 @@ +--- +title: 'String: מחרוזת' +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Reference + - String + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>String</code></strong> global object is a constructor for strings or a sequence of characters.</p> + +<h2 id="תחביר">תחביר</h2> + +<p>String literals take the forms:</p> + +<pre class="syntaxbox">'string text' +"string text" +"中文 español Deutsch English देवनागरी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> + +<p>Strings can also be created using the <code>String</code> global object directly:</p> + +<pre class="syntaxbox">String(thing)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>Anything to be converted to a string.</dd> +</dl> + +<h3 id="Template_literals">Template literals</h3> + +<p>Starting with ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>:</p> + +<pre class="syntaxbox">`hello world` +`hello! + world!` +`hello ${who}` +escape `<a>${who}</a>`</pre> + +<dl> +</dl> + +<h3 id="Escape_notation">Escape notation</h3> + +<p>Besides regular, printable characters, special characters can be encoded using escape notation:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Code</th> + <th scope="col">Output</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\XXX</code></td> + <td>an octal Latin-1 character.</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>new line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>vertical tab</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>the Latin-1 character</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings; therefore, the escape sequences above work in strings created with either single or double quotes.</p> +</div> + +<dl> +</dl> + +<h3 id="Long_literal_strings">Long literal strings</h3> + +<p>Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.</p> + +<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs " + + "to wrap across multiple lines because " + + "otherwise my code is unreadable."; +</pre> + +<p>Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs \ +to wrap across multiple lines because \ +otherwise my code is unreadable."; +</pre> + +<p>Both of these result in identical strings being created.</p> + +<h2 id="תיאור">תיאור</h2> + +<p>Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p> + +<h3 id="Character_access">Character access</h3> + +<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // returns "a" +</pre> + +<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p> + +<pre class="brush: js">return 'cat'[1]; // returns "a" +</pre> + +<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p> + +<h3 id="Comparing_strings">Comparing strings</h3> + +<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // true + console.log(a + ' is less than ' + b); +} else if (a > b) { + console.log(a + ' is greater than ' + b); +} else { + console.log(a + ' and ' + b + ' are equal.'); +} +</pre> + +<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> + +<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> + +<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> + +<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Logs "string" +console.log(typeof s_obj); // Logs "object" +</pre> + +<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive +var s2 = new String('2 + 2'); // creates a String object +console.log(eval(s1)); // returns the number 4 +console.log(eval(s2)); // returns the string "2 + 2" +</pre> + +<p>For these reasons, the code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally, authors need not worry about the distinction.</p> + +<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 +</pre> + +<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> + +<h2 id="מאפיינים">מאפיינים</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Allows the addition of properties to a <code>String</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Returns a string created by using the specified sequence of Unicode values.</dd> + <dt>{{jsxref("String.fromCodePoint()")}}</dt> + <dd>Returns a string created by using the specified sequence of code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Returns a string created from a raw template string.</dd> +</dl> + +<h2 id="String_generic_methods"><code>String</code> generic methods</h2> + +<div class="warning"> +<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>.</p> +</div> + +<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p> + +<pre class="brush: js">var num = "15"; +console.log(num.replace("5", "2")); +</pre> + +<p>For migrating away from String generics, see also <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_string_generics">Warning: String.x is deprecated; use String.prototype.x instead</a>.</p> + +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p> + +<h2 id="String_instances"><code>String</code> instances</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="String_conversion">String conversion</h3> + +<p>It's possible to use <code>String</code> as a more reliable {{jsxref("String.prototype.toString()", "toString()")}} alternative, as it works when used on {{jsxref("null")}}, {{jsxref("undefined")}}, and on {{jsxref("Symbol", "symbols")}}. For example:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</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("javascript.builtins.String",2)}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/he/web/javascript/reference/index.html b/files/he/web/javascript/reference/index.html new file mode 100644 index 0000000000..1f46b431e0 --- /dev/null +++ b/files/he/web/javascript/reference/index.html @@ -0,0 +1,58 @@ +--- +title: JavaScript reference +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference +--- +<div dir="rtl">{{JsSidebar}}</div> + +<div dir="rtl">הדף הנ"ל משמש כמאגר של עובדות ורפרנסים לנושאים מרכזיים בשפת התכנות ג'אווה סקריפט. קרא עוד על <a href="/en-US/docs/Web/JavaScript/Reference/About">עמוד זה</a><strong>.</strong></div> + +<div dir="rtl"> </div> + +<h2 dir="rtl" id="אובייקטים_גלובאלים">אובייקטים גלובאלים</h2> + +<p dir="rtl">פרק זה הוא תיעוד של כלל האובייקטים שמובנים כסטנדרט בג'אווה סקריפט, יחד עם המתודות (methods) והתכונות (properties) שלהם.</p> + +<div dir="rtl">{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<h2 dir="rtl" id="הצהרות">הצהרות</h2> + +<p dir="rtl">פרק זה הוא תיעוד של כלל <a href="/en-US/docs/Web/JavaScript/Reference/Statements">ההצהרות והמשפטים* בג'אווה סקריפט</a>.</p> + +<p dir="rtl">* התרגום של statement ו declaration לעברית הוא "הצהרה".<br> + כאן הכוונה להצהרה ( declaration ), לדוגמא - var a = 123.<br> + ומשפט (statement), לדוגמא - משפטי if.</p> + +<div dir="rtl">{{page('/he/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 dir="rtl" id="ביטויים_ואופרטורים">ביטויים ואופרטורים</h2> + +<p dir="rtl">פרק זה הוא תיעוד של כלל <a href="/en-US/docs/Web/JavaScript/Reference/Operators">הביטויים והאופרטורים בג'אווה סקריפט</a>.</p> + +<div dir="rtl">{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 dir="rtl" id="פונקציות">פונקציות</h2> + +<p dir="rtl">פרק זה הוא תיעוד של מהלך העבודה עם <a href="/en-US/docs/Web/JavaScript/Reference/Functions">פונקציות בג'אווה סקריפט</a> בפיתוח תוכנות.</p> + +<ul dir="rtl"> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">ארגומנטים</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">פונקציות חץ</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">פרמטרים ברירת מחדל</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">פרמטרי רסט</a>*</li> +</ul> + +<p dir="rtl">* סביר שיש תרגום טוב יותר למונח rest parameters./</p> + +<h2 dir="rtl" id="רפרנסים_נוספים">רפרנסים נוספים</h2> + +<ul dir="rtl"> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">דקדוק לקסיקלי</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">סוגי ומבני נתונים </a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">מצב קפדני (strict mode)</a></li> + <li><a href="/he/docs//en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">פיצ'רים שהוצאו משימוש</a></li> +</ul> diff --git a/files/he/web/javascript/reference/operators/destructuring_assignment/index.html b/files/he/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..07b2957fe2 --- /dev/null +++ b/files/he/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,416 @@ +--- +title: השמה מפורקת +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div style="direction: rtl;">{{jsSidebar("Operators")}}</div> + +<p style="direction: rtl;">תחביר <strong>השמה מפורקת </strong>הוא ביטוי JavaScript המאפשר לחלץ נתונים ממערכים או אובייקטים לערכים מפורשים, בעזרת שימוש בתחביר שמשקף את מבנה המערך או האובייקט המילולי.</p> + +<h2 id="תחביר" style="direction: rtl;">תחביר</h2> + +<pre class="brush:js">var a, b, rest; +[a, b] = [1, 2] +console.log(a); // 1 +console.log(b); // 2 + +[a, b, ...rest] = [1, 2, 3, 4, 5] +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // [3, 4, 5] + +({a, b} = {a: 1, b :2}); +console.log(a); // 1 console.log(b); // 2 + +({a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4}); //ES2016 +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // {c: 3, d: 4} +</pre> + +<div class="note"> +<p style="direction: rtl;">{a, b} = {a:1, b:2} הוא לא תחביר עצמאי תקף, כי {a, b} בצד השמאלי נחשב כבלוק ולא כאובייקט מילולי.</p> + +<p dir="rtl">עם זאת, ({a, b} = {a:1, b:2}) תקף, כמו גם {var {a, b} = {a:1, b:2.</p> +</div> + +<h2 id="תאור" style="direction: rtl;">תאור</h2> + +<div style="direction: rtl;"><span style="line-height: 1.5;">ביטויים ליטרלים של אובייקטים או מערכים מספקים דרך פשוטה ליצירה של חבילת נתונים <em>לפי דרישה</em>. לאחר יצירת חבילות נתונים אלה, ניתן להשתמש בהם בכל דרך שתרצה. ניתן אפילו להחזיר אותם מפונקציות.</span></div> + +<pre class="brush: js">var x = [10, 20, 30, 40, 50];</pre> + +<p style="direction: rtl;">השמה מפורקת משתמשת בתחביר דומה, אך צד שמאל של ההשמה מציין אילו ערכים לפרוק ממשתנה המקור.</p> + +<pre class="brush: js" style="direction: rtl;">var x = [10, 20, 30, 40, 50]; +var [y, x] = x; +console.log(y); // 10 +console.log(z); // 20 +</pre> + +<p style="direction: rtl;">דבר אחד שימושי במיוחד שאתה יכול לעשות עם השמה מפורקת הוא לקרוא מבנה שלם בהשמה אחת, אם כי יש עוד מספר דברים מעניינים שאתה יכול לעשות איתם, כפי שמוצג בדוגמאות הבאות.</p> + +<p style="direction: rtl;">יכולת זו דומה לתכונות קיימות בשפות כמו פרל ופייתון.</p> + +<h2 id="פירוק_מערך" style="direction: rtl;">פירוק מערך</h2> + +<h3 id="דוגמה_פשוטה" style="direction: rtl;">דוגמה פשוטה</h3> + +<pre class="brush: js">var foo = ["one", "two", "three"]; + +// without destructuring +var one = foo[0]; +var two = foo[1]; +var three = foo[2]; + +// with destructuring +var [one, two, three] = foo;</pre> + +<h3 id="השמה_ללא_הצהרה" style="direction: rtl;">השמה ללא הצהרה</h3> + +<p style="direction: rtl;">השמה מפורקת יכולה להתבצע ללא הצהרה בעת ההשמה.</p> + +<pre class="brush:js">var a, b; + +[a, b] = [1, 2];</pre> + +<h3 id="החלפת_משתנים" style="direction: rtl;">החלפת משתנים</h3> + +<p style="direction: rtl;">לאחר ביצוע הקוד הזה, b הוא 1 וa הוא 3. ללא השמה מפורקת, החלפת שני ערכים דורשת שימוש במשתנה זמני (או, בכמה שפות נמוכות, טריק ההחלפת XOR).</p> + +<pre class="brush:js">var a = 1; +var b = 3; + +[a, b] = [b, a];</pre> + +<h3 id="החזרה_מרובת_ערכים" style="direction: rtl;">החזרה מרובת ערכים</h3> + +<p style="direction: rtl;">תודה להשמה מפורקת פונקציות יכולות להחזיר ערכים מרובים. למרות שתמיד היה ניתן להחזיר מערך מפונקציה, זה עדיין מספק מידה נוספת של גמישות.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} +</pre> + +<p style="direction: rtl;">כפי שניתן לראות, החזרת תוצאות נעשית באמצעות סימון כמו מערך, עם כל הערכים בתוך סוגריים. אתה יכול להחזיר מספר בלתי מוגבל של תוצאות בדרך זו. בדוגמא זו, ()f מחזירה את הערכים [1, 2] כפלט שלה.</p> + +<pre class="brush:js">var a, b; +[a, b] = f(); +console.log("A is " + a + " B is " + b); +</pre> + +<p style="direction: rtl;">ההצהרה ()a, b] = f] מקצה את התוצאות של הפונקציה למשתנים בסוגריים, בהתאמה: a הוא 1 ו- b מוגדר 2.</p> + +<p style="direction: rtl;">גם אתה יכול לקבל את ערכי החזרה כמערך:</p> + +<pre class="brush:js">var a = f(); +console.log("A is " + a); +</pre> + +<p style="direction: rtl;">במקרה זה, a הוא מערך המכיל את הערכים 1 ו-2.</p> + +<h3 id="התעלמות_ממספר_ערכי_החזר" style="direction: rtl;">התעלמות ממספר ערכי החזר</h3> + +<p style="direction: rtl;">אתה יכול להתעלם מערכי החזר שאתה לא מעוניין בהם:</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log("A is " + a + " B is " + b); +</pre> + +<p style="direction: rtl;">לאחר הרצת קוד זה, a הוא 1 ו- b הוא 3. הערך 2 נדחה. אתה יכול להתעלם מכל ערכי ההחזר בדרך זו. לדוגמה:</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="משיכת_ערכים_מתוצאה_של_regular_expression" style="direction: rtl;">משיכת ערכים מתוצאה של regular expression</h3> + +<p dir="rtl">כאשר המתודה <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec</a> </code>של regular expression מוצאת התאמה, היא מחזירה מערך המכיל במיקום הראשון את כל ההתאמה של המחרוזת ולאחר מכן את כל החלקים של המחרוזת שתאמה כל קבוצה בסוגריים בregular expression. השמה מפורקת מאפשרת לך למשוך את החלקים מתוך מערך זה בקלות, תוך התעלמות מההתאמה המלאה אם היא לא נחוצה.</p> + +<pre class="brush:js">var url = "https://developer.mozilla.org/en-US/Web/JavaScript"; + +var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); +var [, protocol, fullhost, fullpath] = parsedURL; + +console.log(protocol); // logs "https" +</pre> + +<h2 id="פירוק_אובייקט" style="direction: rtl;">פירוק אובייקט</h2> + +<h3 id="דוגמה_פשוטה_2" style="direction: rtl;">דוגמה פשוטה</h3> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true + +// Assign new variable names +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true </pre> + +<h3 id="השמה_ללא_הצהרה_2" style="direction: rtl;">השמה ללא הצהרה</h3> + +<p style="direction: rtl;">השמה מפורקת יכולה להתבצע ללא הצהרה בעת ההשמה.</p> + +<pre class="brush:js">var a, b; + +({a, b} = {a:1, b:2});</pre> + +<div class="note"> +<p>The <code>( .. )</code> around the assignment statement is required syntax when using object literal destructuring assignment without a declaration.</p> +</div> + +<h3 id="ברירות_המחדל_של_ארגומנטים_מפונקציה">ברירות המחדל של ארגומנטים מפונקציה</h3> + +<h4 id="גרסת_ES5">גרסת ES5</h4> + +<pre class="brush: js">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // now finally do some chart drawing +} + +drawES5Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="גרסת_ES2015">גרסת ES2015</h4> + +<pre class="brush: js">function drawES2015Chart({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {}) +{ + console.log(size, cords, radius); + // do some chart drawing +} + +drawES2015Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<div class="note"> +<p>In Firefox, default values for destructuring assignments are not yet implemented: var { x = 3 } = {} and var [foo = "bar"] = []. See {{bug(932080)}} for destructured default values in functions.</p> +</div> + +<h3 id="Module_(non-ES2015)_loading">Module (non-ES2015) loading</h3> + +<p>Destructuring can help to load specific subsets of a non-ES2015 module like here in the <a href="/en-US/Add-ons/SDK">Add-on SDK</a>:</p> + +<pre class="brush: js">const { Loader, main } = require('toolkit/loader'); +</pre> + +<h3 id="Nested_object_and_array_destructuring">Nested object and array destructuring</h3> + +<pre class="brush:js">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="For_of_iteration_and_destructuring">For of iteration and destructuring</h3> + +<pre class="brush: js">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Pulling_fields_from_objects_passed_as_function_parameter">Pulling fields from objects passed as function parameter</h3> + +<pre class="brush:js">function userId({id}) { + return id; +} + +function whois({displayName: displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>This pulls the <code>id</code>, <code>displayName</code> and <code>firstName</code> from the user object and prints them.</p> + +<h3 id="Computed_object_property_names_and_destructuring">Computed object property names and destructuring</h3> + +<p>Computed property names, like on <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>, can be used with destructuring.</p> + +<pre class="brush: js">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Firefox provided a non-standard language extension in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> for destructuring. This extension has been removed in Gecko 40 {{geckoRelease(40)}}. See {{bug(1083498)}}.</li> + <li>Starting with Gecko 41 {{geckoRelease(41)}} and to comply with the ES2015 specification, parenthesized destructuring patterns, like <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 }</code>, are now considered invalid and will throw a {{jsxref("SyntaxError")}}. See <a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">Jeff Walden's blog post</a> and {{bug(1146136)}} for more details.</li> +</ul> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul dir="rtl"> + <li><a href="/he/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">אופרטורי השמה</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/he/web/javascript/reference/operators/index.html b/files/he/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..08b776e8d8 --- /dev/null +++ b/files/he/web/javascript/reference/operators/index.html @@ -0,0 +1,289 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Expressions_and_operators_by_category">Expressions and operators by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Primary_expressions">Primary expressions</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to the function's execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline}} <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In constructors, <code>new.target</code> refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<dl> + <dt>{{experimental_inline}} {{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Exponentiation operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/he/web/javascript/reference/operators/operator_precedence/index.html b/files/he/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..2f22b36031 --- /dev/null +++ b/files/he/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,330 @@ +--- +title: Operator precedence +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div dir="rtl">{{jsSidebar("Operators")}}</div> + +<p style="direction: rtl;">קדימות אופרטורים קובעת את הסדר שבו מעריכים את תוצאות האופרטורים. אופרטורים בעלי קדימות גבוהה יותר יוערכו ראשונים.</p> + +<p style="direction: rtl;">דוגמא נפוצה:</p> + +<pre class="brush: js">3 + 4 * 5 // מחזיר 23 +</pre> + +<p style="direction: rtl;">לאופרטור הכפל ("*") יש קדימות גבוהה יותר מאשר לאופרטור החיבור ("<code>+</code>") ולכן יוערך ראשון.</p> + +<h2 id="אסוציטיביות" style="direction: rtl;">אסוציטיביות</h2> + +<p dir="rtl">אסוציטיביות קובעת את הסדר שבו מעריכים אופרטורים בעלי קדימות זהה. למשל, חשבו על הביטוי הבא:</p> + +<pre class="syntaxbox" dir="rtl">a OP b OP c +</pre> + +<p dir="rtl">אסוציטיביות שמאלית (משמאל לימין) פירושה שמעריכים (a OP b) OP c , ואסוציטיביות ימנית (מימין לשמאל) פירושה שמעריכים <code>a OP (b OP c)</code>. לאופרטורי השמה יש אסוציטיביות ימנית, אז אפשר לכתוב:</p> + +<pre class="brush: js" dir="rtl">a = b = 5; +</pre> + +<p dir="rtl">ולצפות ש-a ו-b יקבלו את הערך 5. זאת משום שאופרטור ההשמה מחזיר את הערך שהושם. תחילה, הערך 5 מושם ל-b. אחר כך הערך של b מושם ל-a.</p> + +<h2 dir="rtl" id="טבלה">טבלה</h2> + +<p dir="rtl">הטבלה הבאה ממויינת לפי קדימות מהגבוה (19) לנמוך (0).</p> + +<table class="fullwidth-table" dir="rtl" style="text-align: right;"> + <tbody> + <tr> + <th dir="ltr">אופרטור</th> + <th dir="ltr">אסוציטיביות</th> + <th dir="ltr">סוג האופרטור</th> + <th dir="ltr">קדימות</th> + </tr> + <tr> + <td dir="ltr"><code>( … )</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Grouping">Grouping</a></td> + <td dir="ltr">19</td> + </tr> + <tr> + <td dir="ltr"><code>… . …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Member Access</a></td> + <td dir="ltr" rowspan="3">18</td> + </tr> + <tr> + <td dir="ltr"><code>… [ … ]</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Computed Member Access</a></td> + </tr> + <tr> + <td dir="ltr"><code>new … ( … )</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (עם רשימת ארכומנטים)</td> + </tr> + <tr> + <td dir="ltr"><code>… ( <var>… </var>)</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Function Call</a></td> + <td dir="ltr" rowspan="2">17</td> + </tr> + <tr> + <td dir="ltr"><code>new …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (without argument list)</td> + </tr> + <tr> + <td dir="ltr"><code>… ++</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postfix Increment</a></td> + <td dir="ltr" rowspan="2">16</td> + </tr> + <tr> + <td dir="ltr"><code>… --</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postfix Decrement</a></td> + </tr> + <tr> + <td dir="ltr"><code>! …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">Logical NOT</a></td> + <td dir="ltr" rowspan="9">15</td> + </tr> + <tr> + <td dir="ltr"><code>~ …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise NOT</a></td> + </tr> + <tr> + <td dir="ltr"><code>+ …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Plus</a></td> + </tr> + <tr> + <td dir="ltr"><code>- …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Negation</a></td> + </tr> + <tr> + <td dir="ltr"><code>++ …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Increment</a></td> + </tr> + <tr> + <td dir="ltr"><code>-- …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Decrement</a></td> + </tr> + <tr> + <td dir="ltr"><code>typeof …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> + </tr> + <tr> + <td dir="ltr"><code>void …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> + </tr> + <tr> + <td dir="ltr"><code>delete …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> + </tr> + <tr> + <td dir="ltr"><code>… ** …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Exponentiation</a></td> + <td dir="ltr" rowspan="4">14</td> + </tr> + <tr> + <td dir="ltr"><code>… * …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Multiplication</a></td> + </tr> + <tr> + <td dir="ltr"><code>… / …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Division</a></td> + </tr> + <tr> + <td dir="ltr"><code>… % …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Remainder</a></td> + </tr> + <tr> + <td dir="ltr"><code>… + …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Addition</a></td> + <td dir="ltr" rowspan="2">13</td> + </tr> + <tr> + <td dir="ltr"><code>… - …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Subtraction</a></td> + </tr> + <tr> + <td dir="ltr"><code>… << …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Left Shift</a></td> + <td dir="ltr" rowspan="3">12</td> + </tr> + <tr> + <td dir="ltr"><code>… >> …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Right Shift</a></td> + </tr> + <tr> + <td dir="ltr"><code>… >>> …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Unsigned Right Shift</a></td> + </tr> + <tr> + <td dir="ltr"><code>… < …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Less Than</a></td> + <td dir="ltr" rowspan="6">11</td> + </tr> + <tr> + <td dir="ltr"><code>… <= …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Less Than Or Equal</a></td> + </tr> + <tr> + <td dir="ltr"><code>… > …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Greater Than</a></td> + </tr> + <tr> + <td dir="ltr"><code>… >= …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Greater Than Or Equal</a></td> + </tr> + <tr> + <td dir="ltr"><code>… in …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> + </tr> + <tr> + <td dir="ltr"><code>… instanceof …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> + </tr> + <tr> + <td dir="ltr"><code>… == …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Equality</a></td> + <td dir="ltr" rowspan="4">10</td> + </tr> + <tr> + <td dir="ltr"><code>… != …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Inequality</a></td> + </tr> + <tr> + <td dir="ltr"><code>… === …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Strict Equality</a></td> + </tr> + <tr> + <td dir="ltr"><code>… !== …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Strict Inequality</a></td> + </tr> + <tr> + <td dir="ltr"><code>… & …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise AND</a></td> + <td dir="ltr">9</td> + </tr> + <tr> + <td dir="ltr"><code>… ^ …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise XOR</a></td> + <td dir="ltr">8</td> + </tr> + <tr> + <td dir="ltr"><code>… | …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise OR</a></td> + <td dir="ltr">7</td> + </tr> + <tr> + <td dir="ltr"><code>… && …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">Logical AND</a></td> + <td dir="ltr">6</td> + </tr> + <tr> + <td dir="ltr"><code>… || …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">Logical OR</a></td> + <td dir="ltr">5</td> + </tr> + <tr> + <td dir="ltr"><code>… ? … : …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Conditional</a></td> + <td dir="ltr">4</td> + </tr> + <tr> + <td dir="ltr"><code>… = …</code></td> + <td dir="ltr" rowspan="13">ימנית</td> + <td dir="ltr" rowspan="13"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Assignment</a></td> + <td dir="ltr" rowspan="13">3</td> + </tr> + <tr> + <td dir="ltr"><code>… += …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… -= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… **= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… *= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… /= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… %= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… <<= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… >>= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… >>>= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… &= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… ^= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… |= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>yield …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> + <td dir="ltr">2</td> + </tr> + <tr> + <td dir="ltr"><code>...</code> …</td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Spread</a></td> + <td dir="ltr">1</td> + </tr> + <tr> + <td dir="ltr"><code>… , …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a></td> + <td dir="ltr">0</td> + </tr> + </tbody> +</table> diff --git a/files/he/web/javascript/reference/statements/const/index.html b/files/he/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..98de11967b --- /dev/null +++ b/files/he/web/javascript/reference/statements/const/index.html @@ -0,0 +1,133 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - const + - מה זה const + - משתנים +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>מילת ההצהרה <strong><code>const</code></strong> משמשת להכזרה על משתנה קבוע שאין אפשרות לשנות את הערך שלו.<br> + </div> + +<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> + + + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>שם המשתנה.</dd> + <dt><code>valueN</code></dt> + <dd>הערך של המשתנה.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>בשפת ג'אווה סקריפט אנו משתמשים במשתנים על מנת להחזיק ערכים שונים.<br> + הצהרה על משתנה באמצעות <strong><code>const</code></strong> הופכת אותו לקבוע ולא ניתן לשנות את הערך שלו.<br> + הקצאת ערך למשתנה ללא הצהרה מראש הופכת אותו למשתנה גלובלי, אך בשונה מהצהרה באמצעות <strong><code>var</code></strong> הוא אינו כפוף לאובייקט האב <strong><code>window</code></strong>.<br> + חשוב לציין שהצהרה באמצעות const לא מבצעת <a href="/he/docs/">Hoisting</a>.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p>הדוגמה הבאה ממחישה כיצד מתנהגים משתנים קבועים.</p> + +<pre class="brush:js">// NOTE: Constants can be declared with uppercase or lowercase, but a common +// convention is to use all-uppercase letters. + +// define MY_FAV as a constant and give it the value 7 +const MY_FAV = 7; + +// this will throw an error - Uncaught TypeError: Assignment to constant variable. +MY_FAV = 20; + +// MY_FAV is 7 +console.log('my favorite number is: ' + MY_FAV); + +// trying to redeclare a constant throws an error - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared +const MY_FAV = 20; + +// the name MY_FAV is reserved for constant above, so this will fail too +var MY_FAV = 20; + +// this throws an error too +let MY_FAV = 20; + +// it's important to note the nature of block scoping +if (MY_FAV === 7) { + // this is fine and creates a block scoped MY_FAV variable + // (works equally well with let to declare a block scoped non const variable) + let MY_FAV = 20; + + // MY_FAV is now 20 + console.log('my favorite number is ' + MY_FAV); + + // this gets hoisted into the global context and throws an error + var MY_FAV = 20; +} + +// MY_FAV is still 7 +console.log('my favorite number is ' + MY_FAV); + +// throws an error - Uncaught SyntaxError: Missing initializer in const declaration +const FOO; + +// const also works on objects +const MY_OBJECT = {'key': 'value'}; + +// Attempting to overwrite the object throws an error - Uncaught TypeError: Assignment to constant variable. +MY_OBJECT = {'OTHER_KEY': 'value'}; + +// However, object keys are not protected, +// so the following statement is executed without problem +MY_OBJECT.key = 'otherValue'; // Use Object.freeze() to make object immutable + +// The same applies to arrays +const MY_ARRAY = []; +// It's possible to push items into the array +MY_ARRAY.push('A'); // ["A"] +// However, assigning a new array to the variable throws an error - Uncaught TypeError: Assignment to constant variable. +MY_ARRAY = ['B'];</pre> + +<h2 id="מפרט">מפרט</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('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>No changes.</td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("javascript.statements.const")}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/for...of/index.html b/files/he/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..86edb2f69e --- /dev/null +++ b/files/he/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,269 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<div> </div> + +<div>הצהרת <strong><code>for...of </code></strong>יוצרת לולאה ע"ג<code> </code><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable objects</a> (שכולל {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> object וכן הלאה..),</div> + +<div>invoking a custom iteration hook with statements to be executed for the value of each distinct property.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>בכל איטרציה, ערך ה property הנוכחי של <em>iterable </em>מוקצה ל <em>variable</em></dd> + <dt>iterable</dt> + <dd>אובייקט עם properties ברי איטרציה</dd> +</dl> + +<h3 id="לדוגמא"><span style="font-size: 14px; letter-spacing: normal;">לדוגמא:</span></h3> + +<h3 id="איטרציה_עג_jsxref(Array)">איטרציה ע"ג {{jsxref("Array")}}</h3> + +<pre class="brush:js">let iterable = [10, 20, 30]; + +for (let value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30 +</pre> + +<p>אפשר להשתמש ג"כ ב <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> </code>במקום <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> </code>באם אתה לא משנה את ערך המשתנה בתוך הבלוק.</p> + +<p> </p> + +<p>איטרציה ע"ג {{jsxref("String")}}</p> + +<pre class="brush:js">let iterable = "boo"; + +for (let value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o" +</pre> + +<h3 id="Iterating_over_a_jsxref(TypedArray)">Iterating over a {{jsxref("TypedArray")}}</h3> + +<pre class="brush:js">let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255 +</pre> + +<h3 id="Iterating_over_a_jsxref(Map)">Iterating over a {{jsxref("Map")}}</h3> + +<pre class="brush:js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// [a, 1] +// [b, 2] +// [c, 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Iterating_over_a_jsxref(Set)">Iterating over a {{jsxref("Set")}}</h3> + +<pre class="brush:js">let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Iterating_over_a_DOM_collection">Iterating over a DOM collection</h3> + +<p>Iterating over DOM collections like {{domxref("NodeList")}}: the following example adds a <code>read</code> class to paragraphs that are direct descendants of an article:</p> + +<pre class="brush:js">// Note: This will only work in platforms that have +// implemented NodeList.prototype[Symbol.iterator] +let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +} +</pre> + +<h3 id="Iterating_over_generators">Iterating over generators</h3> + +<p>You can also iterate over <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">generators</a>:</p> + +<pre class="brush:js">function* fibonacci() { // a generator function + let [prev, curr] = [1, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // truncate the sequence at 1000 + if (n >= 1000) { + break; + } +} +</pre> + +<h3 id="Iterating_over_other_iterable_objects">Iterating over other iterable objects</h3> + +<p>You can also iterate over an object that explicitly implements <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a> protocol:</p> + +<pre class="brush:js">var iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (var value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2 +</pre> + +<h3 id="Difference_between_for...of_and_for...in">Difference between <code>for...of</code> and <code>for...in</code></h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> loop will iterate over all enumerable properties of an object.</p> + +<p>The <code>for...of</code> syntax is specific to <strong>collections</strong>, rather than all objects. It will iterate in this manner over the elements of any collection that has a <code>[Symbol.iterator]</code> property.</p> + +<p>The following example shows the difference between a <code>for...of</code> loop and a <code>for...in</code> loop.</p> + +<pre class="brush:js">Object.prototype.objCustom = function () {}; +Array.prototype.arrCustom = function () {}; + +let iterable = [3, 5, 7]; +iterable.foo = "hello"; + +for (let i in iterable) { + console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i of iterable) { + console.log(i); // logs 3, 5, 7 +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(38)}} <a href="#Chrome_note_1">[1]</a><br> + {{CompatChrome(51)}} <a href="#Chrome_note_3">[3]</a></td> + <td>{{CompatGeckoDesktop("13")}} <a href="#Gecko_note_2">[2]</a></td> + <td>12</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>5.1</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{CompatGeckoMobile("13")}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p><a name="Chrome_note_1">[1]</a> From Chrome 29 to Chrome 37 this feature was available behind a preference. In chrome://flags/#enable-javascript-harmony, activate the entry “Enable Experimental JavaScript”.</p> + +<p><a name="Gecko_note_2">[2]</a> Prior Firefox 51, using the <code>for...of</code> loop construct with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> keyword threw a {{jsxref("SyntaxError")}} ("missing = in const declaration"). This has been fixed ({{bug(1101653)}}).</p> + +<p><a name="Chrome_note_3">[3]</a> Support for iteration of objects was added in Chrome 51.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach">Map.prototype.forEach()</a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/for_each...in/index.html b/files/he/web/javascript/reference/statements/for_each...in/index.html new file mode 100644 index 0000000000..b45c6f5ab7 --- /dev/null +++ b/files/he/web/javascript/reference/statements/for_each...in/index.html @@ -0,0 +1,128 @@ +--- +title: for each...in +slug: Web/JavaScript/Reference/Statements/for_each...in +translation_of: Archive/Web/JavaScript/for_each...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<div class="warning"> +<p style="direction: rtl;">טענת "<code>for each...in" </code>הוצאה משימוש בסטנדרט (ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>. התמיכה ב-E4X אמנם הוסרה, אך טענת ה"<code>for each...in" </code>לא תבוטל ולא תוסר מטעמי תאימות לגרסאות קודמות. עם זאת, מומלץ להשתמש בטענת "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a>" במקום. (ע"ע {{ bug("791343")}} ). </p> +</div> + +<p style="direction: rtl;">טענה מסוג:</p> + +<p style="direction: rtl;"><code><strong>for each...in</strong></code></p> + +<p style="direction: rtl;">("עבור כל... ב...")</p> + +<p style="direction: rtl;">חגה סביב כל הערכים של כל "פריטי הרכוש" (properties) של משתנה נתון. עבור כל אחד מפריטי הרכוש תבוצע טענה מוגדרת.</p> + +<h2 id="תחביר" style="direction: rtl;">תחביר</h2> + +<pre class="syntaxbox"><code>for each (<em>variable</em> in <em>object</em>) { + <em>statement</em> +}</code></pre> + +<dl> + <dt style="direction: rtl;"><code>variable</code></dt> + <dd style="direction: rtl;">המשתנה שיחוג סביב הערכים של פרטי הרכוש. ניתן (אך לא חובה) להצהיר על משתנה זה עם מילת המפתח var. המשתנה הזה הוא פנימי לפונקציה, ולא ללולאה עצמה.</dd> +</dl> + +<dl> + <dt style="direction: rtl;"><code>object</code></dt> + <dd style="direction: rtl;">האובייקט שסביב פריטי הרכוש שלו יש לחוג. </dd> +</dl> + +<dl> + <dt style="direction: rtl;"><code>statement</code></dt> + <dd style="direction: rtl;">טענה שיש לבצע עבור כל אחד מפריטי הרכוש. על מנת לבצע יותר מטענה אחת בתוך הלולאה, יש להשתמש בטענת בלוק (<code>{ ... }</code>) כדי לקבץ את הטענות הללו יחדיו.</dd> +</dl> + +<h2 id="תיאור" style="direction: rtl;">תיאור</h2> + +<p style="direction: rtl;"> </p> + +<p>Some built-in properties are not iterated over. These include all built-in methods of objects, e.g. <code>String</code>'s <code>indexf</code></p> + +<p>method. However, all user-defined properties are iterated over.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_for_each...in">Using <code>for each...in</code></h3> + +<p><strong>Warning:</strong> Never use a loop like this on arrays. Only use it on objects. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> for more details.</p> + +<p>The following snippet iterates over an object's properties, calculating their sum:</p> + +<pre class="brush:js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (var item in obj) { + sum += item; +} + +console.log(sum); // logs "26", which is 5+13+8</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of a current ECMA-262 specification. Implemented in JavaScript 1.6 and deprecated.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">for...in</a></code> - a similar statement that iterates over the property <em>names</em>.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> - a similar statement that iterates over the property <em>values</em> but can only be used for iteratable types, so not for generic objects</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for" title="JavaScript/Reference/Statements/for">for</a></code></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/function_star_/index.html b/files/he/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..a72a927859 --- /dev/null +++ b/files/he/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,212 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p> </p> + +<p>הצהרת <code><strong>function*</strong></code> (מילת <code>function</code> ולאחריה כוכבית) מגדירה <em>פונקצית גנרטור</em>, אשר מחזירה אובייקט {{jsxref("Global_Objects/Generator","Generator")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div> + + + +<div class="noinclude"> +<p>ניתן גם להגדיר פונקציות גנרטור על-ידי שימוש בבנאי {{jsxref("GeneratorFunction")}}, או בתחביר של ביטוי פונקציה.</p> +</div> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>שם הפונקציה.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>השם של פרמטר רשמי של הפונקציה.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>הפקודות המרכיבות את גוף הפונקציה.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>גנרטורים הינם פונקציות שניתן לצאת מהן ולאחר מכן להיכנס אליהן מחדש. ההקשר שלהם (קשירת המשתנים) יישמר לאורך הכניסות מחדש.<br> + <br> + גנרטורים ב- JavaScript -- במיוחד בשילוב עם Promises -- הינם כלי חזר מאוד לתכנות אסינכרוני, כיוון שהם מתווכים -- ואפילו מחסלים לחלוטין -- את הבעיות עם קריאות חוזרות, כגון <a href="http://callbackhell.com/">Callback Hell</a> ו- <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">Inversion of Control</a>.<br> + תבנית זו הינה הבסיס לפונקציות <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code>.</p> + +<p>קריאה לפונקצית גנרטור לא מריצה את גוף הפונקציה מיידית; במקום זאת, מוחזר אובייקט <a href="/he/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">איטרטור</a> לפונקציה. כאשר המתודה <code>()next</code> של האיטרטור נקראת, גוף הפונקציה רץ עד לביטוי ה-{{jsxref("Operators/yield", "yield")}} הראשון, אשר מציין את הערך שיוחזר לאיטרטור, או העברה לפונקציה יוצרת אחרת על-ידי שימוש {{jsxref("Operators/yield*", "*yield")}}. מתודת ה- <code>()next</code> מחזירה אובייקט עם שדה <code>value</code>, המכיל את הערך המיוצר ושדה <code>done</code> בכעל ערך בוליאני, המציין האם הגנרטור יצר את הערך האחרון. קריאה למתודת <code>()next</code> עם ארגומנט תמשיך את ריצת פונקציית הגנרטור, תוך החלפת ביטוי ה- <code>yield</code> בו הריצה הופסקה עם הארגומנט מתוך <code>()next</code>.</p> + +<p>פקודת <code>return</code> בתוך גנרטור, כאשר הוא רץ, תגרום לגנרטור לסיים (כלומר שדה ה- <code>done</code> המוחזר יהיה בעל <code>true</code>). אם ערך מוחזר, הוא יהיה בשדה <code>value</code> של האובייקט המוחזר על-ידי הגנרטור.<br> + בדומה לפקודת ה- <code>return</code>, שגיאה שתיזרק בתוך הגנרטור תביא לסיום הגנרטור -- אלא אם היא תיתפס בגוף הגנרטור.<br> + כאשר גנרטור מסתיים, קריאות נוספות ל- <code>()next</code> לא יגרמו לריצה כלשהי של קוד הגנרטור. הן רק יחזירו אובייקט בצורה זו: <code>{value: undefined, done: true}</code>.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="דוגמה_פשוטה">דוגמה פשוטה</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while (index < index+1) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // 3 +// ...</pre> + +<h3 id="דוגמה_עם_*yield">דוגמה עם *yield</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i) { + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="העברת_ארגומנטים_לגנרטורים">העברת ארגומנטים לגנרטורים</h3> + +<pre class="brush: js">function* logGenerator() { + console.log(0); + console.log(1, yield); + console.log(2, yield); + console.log(3, yield); +} + +var gen = logGenerator(); + +// <span dir="rtl">הקריאה הראשונה ל- next מתבצעת מתחילת הפונקציה</span> +// <span dir="rtl">עד שהיא מגיעה לפקודת yield הראשונה</span> +gen.next(); // 0 +gen.next('pretzel'); // 1 pretzel +gen.next('california'); // 2 california +gen.next('mayonnaise'); // 3 mayonnaise +</pre> + +<h3 id="פקודת_return_בתוך_גנרטור">פקודת return בתוך גנרטור</h3> + +<pre class="brush: js">function* yieldAndReturn() { + yield "Y"; + return "R"; + yield "unreachable"; +} + +var gen = yieldAndReturn() +console.log(gen.next()); // { value: "Y", done: false } +console.log(gen.next()); // { value: "R", done: true } +console.log(gen.next()); // { value: undefined, done: true } +</pre> + +<h3 id="לא_ניתן_ליצור_אובייקט_גנרטור">לא ניתן ליצור אובייקט גנרטור</h3> + +<pre class="brush: js">function* f() {} +var obj = new f; // throws "TypeError: f is not a constructor +</pre> + +<h3 id="גנרטורים_המוגדרים_בתוך_ביטוי">גנרטורים המוגדרים בתוך ביטוי</h3> + +<pre class="brush: js">const foo = function* () { + yield 10; + yield 20; +}; + +const bar = foo(); +console.log(bar.next()); // {value: 10, done: false}</pre> + +<h2 id="מפרטים">מפרטים</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('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>הגדרה ראשונית.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>שונה, כך תהיה מלכודת שבגנרטורים לא [[Construct]] ויזרקו שגיאה בשימוש עם <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_לדפדפנים">תאימות לדפדפנים</h2> + +<div> + + +<p>{{Compat("javascript.statements.generator_function")}}</p> +</div> + +<h2 id="הערות_ספציפיות_ל-_Firefox">הערות ספציפיות ל- Firefox</h2> + +<h4 id="גנרטורים_ואיטרטורים_ב-_Firefox_לפני_גרסה_26">גנרטורים ואיטרטורים ב- Firefox לפני גרסה 26</h4> + +<p>גרסאות Firefox ישנות יותר מממשות הגדרת גנרטורים ישנה יותר. בגרסה הקודמת גנרטורים הוגדרו על-ידי שימוש במילת <code>function</code> רגילה (ללא כוכבית), בין היתר. ראה <a href="/he/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">פונקציה יוצרת מסורתית </a>למידע נוסף.</p> + +<h4 id="אובייקט_IteratorResult_מוחזר_במקום_זריקת_שגיאה">אובייקט <code>IteratorResult</code> מוחזר במקום זריקת שגיאה</h4> + +<p>החל מ- Gecko 29 {{geckoRelease(29)}}, הפונקציה היוצרת המלאה כבר אינה זורקת {{jsxref("TypeError")}} "generator has already finished". במקום זאת, היא מחזירה אובייקט <code>IteratorResult</code> כדוגמת <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>אובייקט {{jsxref("GeneratorFunction")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "*yield")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Other web resources: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://github.com/mozilla/task.js">Task.js</a></li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Iterating generators asynchronously</a></li> + </ul> + </li> +</ul> diff --git a/files/he/web/javascript/reference/statements/index.html b/files/he/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..2869ba1ce5 --- /dev/null +++ b/files/he/web/javascript/reference/statements/index.html @@ -0,0 +1,148 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div dir="rtl">{{jsSidebar("Statements")}}</div> + +<div dir="rtl">יישומי ג'אווה סקריפט מורכבים ממשפטים בעלי תחביר מתאים (syntax).</div> + +<div dir="rtl">משפט אחד יכול להתפרס על גבי מספר שורות.</div> + +<div dir="rtl">מספר משפטים יכולים להופיע על גבי שורה אחת אם בין משפט למשפט מפריד הסמן ";".</div> + +<div dir="rtl">משפט הוא לא מילת מפתח אלא כמה מילות מפתח המאורגנות יחד.</div> + +<div dir="rtl"> </div> + +<h2 dir="rtl" id="משפטים_והצהרות_לפי_קטגוריה">משפטים והצהרות לפי קטגוריה</h2> + +<p dir="rtl"><em>לרשימה אלפבתית ראה סרגל בצד שמאל</em></p> + +<h3 dir="rtl" id="זרימת_תהליך">זרימת תהליך</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/block", "Block")}}</dt> + <dd dir="rtl">משפט בלוק נועד לסידור של 0 או יותר משפטים יחד.<br> + בלוק תחום בין שני סוגריים מסולסלים.</dd> + <dt dir="rtl">{{jsxref("Statements/break", "break")}}</dt> + <dd dir="rtl">משפט break עוצר את הלולאה, משפט switch או משפט סיווג (label statement) ומעביר את ריצת התוכנה למשפט שמגיע אחרי המשפט שנעצר.</dd> + <dt dir="rtl">{{jsxref("Statements/continue", "continue")}}</dt> + <dd dir="rtl">משפט continue עוצר את האיטרציה הנוכחית\מסווגת של הלולאה הנוכחית וממשיך לאיטרציה הבאה בלולאה.</dd> + <dt dir="rtl">{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd dir="rtl">משפט empty נועד לשימוש כמשפט ריק במקומות בהם התחביר של ג'אווה סקריפט מצפה למשפט.</dd> + <dt dir="rtl">{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd dir="rtl">משפטי if else מריצים משפטים בהתאם לתנאים מסויימים. אם תנאי מסויים לא מתקיים, יכול לרוץ משפט אחר.</dd> + <dt dir="rtl">{{jsxref("Statements/switch", "switch")}}</dt> + <dd dir="rtl">משפט switch מכיל ביטוי מסויים שבהתאם לערך שלו נבחרת פסקת case והמשפטים שבה מורצים.</dd> + <dt dir="rtl">{{jsxref("Statements/throw", "throw")}}</dt> + <dd dir="rtl">משפט throw זורק שגיאה מותאמת אישית.</dd> + <dt dir="rtl">{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd dir="rtl">משפט try/catch מנסה להריץ בלוק מסויים, ומגדיר תגובה במקרה שנזרקת שגיאה.</dd> +</dl> + +<h3 dir="rtl" id="הצהרות"> הצהרות</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/var", "var")}}</dt> + <dd dir="rtl">המילה var מצהירה על משתנה חדש ומאפשרת לתת לו ערך ראשוני.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd dir="rtl">המילה let מצהירה על משתנה חדש ומקומי לבלוק שבו הוצהר (בניגוד ל var שנמצא בתחום הגלובאלי (global scope), אפשר לתת ערך ראשוני בזמן ההצהרה.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd dir="rtl">המילה const מצהירה על קבוע (constant) לקריאה בלבד.</dd> +</dl> + +<h3 dir="rtl" id="פונקציות_ומחלקות">פונקציות ומחלקות</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/function", "function")}}</dt> + <dd dir="rtl">המילה function מצהירה על פונקציה עם הפרמטרים שצויינו.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd dir="rtl">פונקציות מחוללות המאפשרות כתיבה פשוטה יותר של איטרטורים.</dd> + <dt dir="rtl">{{jsxref("Statements/return", "return")}}</dt> + <dd dir="rtl">המילה return מציינת את הערך שהפונקציה מחזירה.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> + <dd dir="rtl">המילה class מגדירה מחלקה.</dd> +</dl> + +<h3 dir="rtl" id="Iterations">Iterations</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd dir="rtl">משפט do...while יוצר לולאה שמריצה משפט מסויים עד שהתנאי שבה הופך לשלילי. <br> + בהרצה הראשונה המשפט מורץ בלי קשר לערך התנאי ורק לאחר מכן נבדק לפני כל הרצה מחדש. </dd> + <dt dir="rtl">{{jsxref("Statements/for", "for")}}</dt> + <dd dir="rtl">משפט for יוצר לולאה שמורכבת משלושה ביטויים (אופציונאליים) התחומים בסוגריים ומופרדים ע"י סמן ";", שלאחריהם מורצים המשפטים שבתוך הלולאה.</dd> + <dt dir="rtl">{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd dir="rtl">משפט for each...in עובר על כל הערכים של התכונות באובייקט מסויים ומריץ על כל אחת את המשפט שנמצא בלולאה.</dd> + <dt dir="rtl">{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd dir="rtl">משפט for...in עובר על כל התכונות של אובייקט מסויים, בסדר שרירותי.<br> + על תכונה יכולים לרוץ משפטים.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd dir="rtl">משפט for...of עובר על אובייקטים הנתנים לאיטרציה (מערכים, אובייקטים, איטרטורים ומחוללים) ויוצר איטרציה מותאמת לכל אחד מהאובייקטים שבה יכולים לרוץ משפטים מסויימים על הערך של כל תכונה באובייקט.</dd> + <dt dir="rtl">{{jsxref("Statements/while", "while")}}</dt> + <dd dir="rtl">משפט while יוצר לולאה שמריצה משפט מסויים כל עוד התנאי שבה חיובי. <br> + התנאי מורץ לפני כל הרצה.</dd> +</dl> + +<h3 dir="rtl" id="Others">Others</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd dir="rtl">Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd dir="rtl">Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd dir="rtl">Used to import functions exported from an external module, another script.</dd> + <dt dir="rtl">{{jsxref("Statements/label", "label")}}</dt> + <dd dir="rtl">Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt dir="rtl">{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd dir="rtl">Extends the scope chain for a statement.</dd> +</dl> + +<h2 dir="rtl" id="Specifications">Specifications</h2> + +<table class="standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="See_also">See also</h2> + +<ul> + <li dir="rtl"><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/return/index.html b/files/he/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..dea3cb868f --- /dev/null +++ b/files/he/web/javascript/reference/statements/return/index.html @@ -0,0 +1,151 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>הצהרה באמצעות <strong><code>return</code></strong> מתבצעת בעת סיום הפונקציה, גורמת לעצירתה ומציינת ערך שיש להחזיר למבקש הפונקציה.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> + + + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">return [[expression]]; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>הביטוי שערכו יוחזר. במידה והביטוי לא הוזכר, הערך <strong><code>undefined</code></strong> יוחזר במקומו.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>השימוש בהצהרה <strong><code>return</code></strong> בגוף הפונקציה, יפסיק את תהליך הריצה שלה.<br> + לדוגמה, לפונקציה <code>()square</code> ארגומנט בשם x, כאשר x יהיה מספר הפונקציה תחזיר את הערך של הארגומנט כפול עצמו.</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +var demo = square(3); +// demo will equal 9 +</pre> + +<p>במידה וארגומנט חסר, הערך שיוחזר יהיה <strong><code>undefined</code></strong>. <br> + הצהרות ה-<strong><code>return</code></strong> הבאות מפסיקות את הריצה של הפונקציה:</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="הוספת_נקודה_פסיק_באופן_אוטומטי">הוספת נקודה פסיק באופן אוטומטי</h3> + +<p>להצהרה באמצעות <strong><code>return</code></strong> מתווספת באופן אוטומטי נקודה פסיק (ASI).<br> + אין לקשר בין שורת ההצהרה של <strong><code>return</code></strong> לביטוי .</p> + +<pre class="brush: js">return +a + b; +</pre> + +<pre class="brush: js">return; +a + b; +</pre> + +<p>כדי להימנע ממצב של הוספת נקודה פסיק באופן אוטומטי, יש להוסיף סוגריים באופן הבא:</p> + +<pre class="brush: js">return ( + a + b +); +</pre> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="עצירת_הפונקציה">עצירת הפונקציה</h3> + +<p>הפונקציה נעצרת מיד בעת הקריאה ל-<strong><code>return</code></strong>.</p> + +<pre class="brush: js">function counter() { + for (var count = 1; ; count++) { // infinite loop + console.log(count + 'A'); // until 5 + if (count === 5) { + return; + } + console.log(count + 'B'); // until 4 + } + console.log(count + 'C'); // never appears +} + +counter(); + +// Output: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="החזרת_פונקציה">החזרת פונקציה</h3> + +<p>ראו את המאמר הבא בנושא <a href="/en-US/docs/Web/JavaScript/Closures">Closures</a>.</p> + +<pre class="brush: js">function magic() { + return function calc(x) { return x * 42; }; +} + +var answer = magic(); +answer(1337); // 56154 +</pre> + +<h2 id="מפרט">מפרט</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("javascript.statements.return")}}</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Closures">Closures</a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/var/index.html b/files/he/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..64020dee3e --- /dev/null +++ b/files/he/web/javascript/reference/statements/var/index.html @@ -0,0 +1,171 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - hoisted + - הכרזה + - משתנה +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>מילת ההצהרה <strong><code>var</code></strong> משמשת להכזרה על משתנה.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div> + + + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1] [</em>, <em>varname2 [</em>= <em>value2] </em><em>... [</em>, <em>varnameN [</em>= <em>valueN]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>שם המשתנה.</dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd> הערך של המשתנה.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>בשפת ג'אווה סקריפט אנו משתמשים במשתנים על מנת להחזיק ערכים שונים.<br> + הקצאת ערך למשתנה ללא הצהרה מראש הופכת אותו למשתנה כגלובלי.<br> + ניתן להשתמש במשתנה לפני שהוכרז, השימוש יעשה באמצעות Hoisting.</p> + +<p><strong>מהם ההבדלים בין משתנים מוצהרים לאלה שאינם?</strong><br> + 1. ראשית, משתנים מוצהרים יעשו רק את הפעולה שלשמה נוצרו, לעומת משתנים לא מוצהרים הנחשבים גלובלים.</p> + +<pre class="brush: js">function x() { + y = 1; // Throws a ReferenceError in strict mode + var z = 2; +} + +x(); + +console.log(y); // logs "1" +console.log(z); // Throws a ReferenceError: z is not defined outside x +</pre> + +<p>2. משתנים מוצהרים מוכרזים לפני ביצוע קוד כלשהו לעומת זאת משתנים לא מוצהרים אינם קיימים עד שהקוד שמכריז עליהם מתבצע.</p> + +<pre class="brush: js">console.log(a); // Throws a ReferenceError. +console.log('still going...'); // Never executes.</pre> + +<pre class="brush: js">var a; +console.log(a); // logs "undefined" or "" depending on browser. +console.log('still going...'); // logs "still going...".</pre> + +<p>בשל שני ההבדלים הללו, אי הכרזה על משתנים עשויה להוביל לשגיאות בלתי צפויות.<br> + לכן, מומלץ תמיד להכריז על משתנים, גם אם הם נמצאים בפונקציה.</p> + +<h3 id="var_hoisting">var hoisting</h3> + +<p>זוהי התנהגות ברירת המחדל של השפה, שתפקידה להעביר את כל ההצהרות לחלק העליון של הסקריפט או הפונקציה ולכן משמעות הדבר היא שניתן להשתמש במשתנה לפני שהוכרז.</p> + +<pre class="brush: js">bla = 2; +var bla; +// ... + +// is implicitly understood as: + +var bla; +bla = 2; +</pre> + +<p>מומלץ להצהיר על משתנים בחלקו העליון של הסקריפט או הפונקציה וכך יהיה ברור אילו משתנים שייכים לפונקציה באופן מקומי ואילו גלובלים.</p> + +<p>חשוב לזכור ששימוש ב-Hoisting ישפיע על הצהרת המשתנה אך לא על אתחול הערך:</p> + +<pre class="brush: js">function do_something() { + console.log(bar); // undefined + var bar = 111; + console.log(bar); // 111 +} + +// is implicitly understood as: +function do_something() { + var bar; + console.log(bar); // undefined + bar = 111; + console.log(bar); // 111 +} +</pre> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="הכרזה_אחת_של_שני_משתנים">הכרזה אחת של שני משתנים</h3> + +<pre class="brush: js" dir="rtl">var a = 0, b = 0; +</pre> + +<h3 id="הקצאת_שני_משתנים_עם_ערך_מחרוזת_יחיד">הקצאת שני משתנים עם ערך מחרוזת יחיד</h3> + +<pre class="brush: js">var a = 'A'; +var b = a; + +// Equivalent to: + +var a, b = a = 'A'; +</pre> + +<h3 id="משתנה_מקומי_וגלובלי">משתנה מקומי וגלובלי</h3> + +<pre class="brush: js">var x = 0; + +function f() { + var x = y = 1; // x is declared locally. y is not! +} +f(); + +console.log(x, y); // Throws a ReferenceError in strict mode (y is not defined). 0, 1 otherwise. +// In non-strict mode: +// x is the global one as expected +// y leaked outside of the function, though!</pre> + +<h2 id="מפרט">מפרט</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("javascript.statements.var")}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> +</ul> |