1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
---
title: Огляд технологій JavaScript
slug: Web/JavaScript/JavaScript_technologies_overview
translation_of: Web/JavaScript/JavaScript_technologies_overview
original_slug: Web/JavaScript/oglyad_tehnologiy_JavaScript
---
<div>{{JsSidebar("Introductory")}}</div>
<h2 id="Introduction">Introduction</h2>
<p>Whereas <a href="/en-US/docs/Web/HTML">HTML</a> defines a webpage's structure and content and <a href="/en-US/docs/Web/CSS">CSS</a> sets the formatting and appearance, <a href="/en-US/docs/Web/JavaScript">JavaScript</a> adds interactivity to a webpage and creates rich web applications.</p>
<p>However, the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the <a href="/en-US/docs/Web/Reference/API">Web APIs</a>, including the DOM (Document Object Model).</p>
<h2 id="JavaScript_the_core_language_(ECMAScript)">JavaScript, the core language (ECMAScript)</h2>
<p>The core language of JavaScript is standardized by the ECMA TC39 committee as a language named <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>.</p>
<p>This core language is also used in non-browser environments, for example in <a href="http://nodejs.org/">node.js</a>.</p>
<h3 id="What_falls_under_the_ECMAScript_scope">What falls under the ECMAScript scope?</h3>
<p>Among other things, ECMAScript defines:</p>
<ul>
<li>Language syntax (parsing rules, keywords, control flow, object literal initialization...)</li>
<li>Error handling mechanisms (throw, try/catch, ability to create user-defined Error types)</li>
<li>Types (boolean, number, string, function, object...)</li>
<li>The global object. In a browser, this global object is the window object, but ECMAScript only defines the APIs not specific to browsers, e.g. <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li>
<li>A prototype-based inheritance mechanism</li>
<li>Built-in objects and functions (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li>
<li>Strict mode</li>
</ul>
<h3 id="Browser_support">Browser support</h3>
<p>As of October 2016, the current versions of the major Web browsers implement <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> and <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, but older versions (still in use) implement ECMAScript 5 only.</p>
<h3 id="Future">Future</h3>
<p>The major 6th Edition of ECMAScript was officially approved and published as a standard on June 17, 2015 by the ECMA General Assembly. Since then ECMAScript Editions are published on a yearly basis.</p>
<h3 id="Internationalization_API">Internationalization API</h3>
<p>The <a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript Internationalization API Specification</a> is an addition to the ECMAScript Language Specification, also standardized by Ecma TC39. The internationalization API provides collation (string comparison), number formatting, and date-and-time formatting for JavaScript applications, letting the applications choose the language and tailor the functionality to their needs. The initial standard was approved in December 2012; the status of implementations in browsers is tracked in the documentation of the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. The Internationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.</p>
<h2 id="DOM_APIs">DOM APIs</h2>
<h3 id="WebIDL">WebIDL</h3>
<p>The <a href="http://www.w3.org/TR/WebIDL/">WebIDL specification</a> provides the glue between the DOM technologies and ECMAScript.</p>
<h3 id="The_Core_of_the_DOM">The Core of the DOM</h3>
<p>The Document Object Model (DOM) is a cross-platform, <strong>language-independent convention</strong> for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the <strong>DOM tree</strong> may be addressed and manipulated by using methods on the objects. The {{glossary("W3C")}} standardizes the Core Document Object Model, which defines language-agnostic interfaces that abstract HTML and XML documents as objects, and also defines mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find:</p>
<ul>
<li>The document structure, a tree model, and the DOM Event architecture in <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li>
<li>A less rigorous definition of the DOM Event Architecture, as well as specific events in <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li>
<li>Other things such as <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> and <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
</ul>
<p>From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".</p>
<h3 id="HTML_DOM">HTML DOM</h3>
<p><a href="http://www.whatwg.org/html">HTML</a>, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the <em>meaning</em> of elements. The HTML DOM includes such things as the <code>className</code> property on HTML elements, or APIs such as {{ domxref("document.body") }}.</p>
<p>The HTML specification also defines restrictions on documents; for example, it requires all children of a <code>ul</code> element, which represents an unordered list, to be <code>li</code> elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.</p>
<p>Looking for the <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, and the other DOM elements? Read the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p>
<h2 id="Other_notable_APIs">Other notable APIs</h2>
<ul>
<li>The <code>setTimeout</code> and <code>setInterval</code> functions were first specified on the <code><a href="http://www.whatwg.org/html/#window">Window</a></code> interface in HTML Standard.</li>
<li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> makes it possible to send asynchronous HTTP requests.</li>
<li>The <a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> abstract CSS rules as objects.</li>
<li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>allows parallel computation.</li>
<li><a href="http://www.whatwg.org/C/#network">WebSockets</a> allows low-level bidirectional communication.</li>
<li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> is a drawing API for {{htmlelement("canvas")}}.</li>
</ul>
<h3 id="Browser_support_2">Browser support</h3>
<p>As every web developer has experienced, <a href="http://ejohn.org/blog/the-dom-is-a-mess/">the DOM is a mess</a>. Browser support uniformity varies a lot from feature to feature, mainly because many important DOM features have very unclear, specifications (if any), and different web browsers add incompatible features for overlapping use cases (like the Internet Explorer event model). As of June 2011, the W3C and particularly the WHATWG are defining older features in detail to improve interoperability, and browsers in turn can improve their implementations based on these specifications.</p>
<p>One common, though perhaps not the most reliable, approach to cross-browser compatibility is to use JavaScript libraries, which abstract DOM features and keep their APIs working the same in different browsers. Some of the most widely used frameworks are <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, and <a href="http://developer.yahoo.com/yui/">YUI</a>.</p>
|
