What is JavaScript

<h1 id="what-is-javascript">What is JavaScript</h1> JavaScript is a programming language initially designed to interact with elements of web pages. In web browsers, JavaScript consists of three main parts: <ul> <li>ECMAScript provides the core functionality.</li> <li>The <a href="https://www.javascripttutorial.net/javascript-dom/">Document Object Model (DOM)</a> provides interfaces for interacting with elements on web pages</li> <li>The <a href="https://www.javascripttutorial.net/javascript-bom/">Browser Object Model (BOM)</a> provides the browser API for interacting with the web browser.</li> </ul> JavaScript allows you to add interactivity to a web page. Typically, you use JavaScript with HTML and CSS to enhance a web page’s functionality, such as <a href="https://www.javascripttutorial.net/javascript-dom/javascript-form-validation/">validating forms</a>, creating interactive maps, and displaying animated charts. When a web page is loaded, i.e., after HTML and CSS have been downloaded, the JavaScript engine in the web browser executes the JavaScript code. The JavaScript code then modifies the HTML and CSS to update the user interface dynamically. The JavaScript engine is a program that executes JavaScript code. In the beginning, JavaScript engines were implemented as interpreters. However, modern JavaScript engines are typically implemented as just-in-time compilers that compile JavaScript code to bytecode for improved performance. <h2 id="client-side-vs-server-side-javascript">Client-side vs. Server-side JavaScript</h2> When JavaScript is used on a web page, it is executed in web browsers. In this case, JavaScript works as a client-side language. JavaScript can run on both web browsers and servers. A popular JavaScript server-side environment is <a href="https://www.javascripttutorial.net/nodejs-tutorial/">Node.js</a>. Unlike client-side JavaScript, server-side JavaScript executes on the server that allows you to access databases, file systems, etc. <h2 id="javascript-history">JavaScript History</h2> In 1995, JavaScript was created by a Netscape developer named <a href="https://en.wikipedia.org/wiki/Brendan_Eich">Brendan Eich</a>. First, its name was Mocha. And then, its name was changed to LiveScript. Netscape decided to change LiveScript to JavaScript to leverage Java’s fame, which was popular. The decision was made just before Netscape released its web browser product Netscape Navigator 2. As a result, JavaScript entered version 1.0. Netscape released JavaScript 1.1 in Netscape Navigator 3. In the meantime, Microsoft introduced a web browser product called the <a href="https://en.wikipedia.org/wiki/Internet_Explorer">Internet Explorer</a> 3 (IE 3), which competed with Netscape. However, IE came with its own JavaScript implementation called <a href="https://en.wikipedia.org/wiki/JScript">JScript</a>. Microsoft used the name JScript to avoid possible license issues with Netscape. Hence, two different JavaScript versions were in the market: <ul> <li>JavaScript in Netscape Navigator</li> <li>JScript in Internet Explorer.</li> </ul> JavaScript had no standards that governed its syntax and features. And the community decided that it was time to standardize the language. In 1997, JavaScript 1.1 was submitted to the <a href="https://www.ecma-international.org/">European Computer Manufacturers Association</a> (ECMA) as a proposal. <a href="https://www.ecma-international.org/memento/tc39-m.htm">Technical Committee #39</a> (TC39) was assigned to standardize the language to make it a general-purpose, cross-platform, and vendor-neutral scripting language. TC39 came up with ECMA-262, a standard for defining a new scripting language named ECMAScript (often pronounced Ek-ma-script). After that, the International Organization for Standardization and International Electrotechnical Commissions (ISO/IEC) adopted ECMAScript (ISO/IEC-16262). <h2 id="javascript-overview">JavaScript overview</h2> To <a href="https://www.javascripttutorial.net/javascript-variables/">define a variable</a> in JavaScript, you use <code>var</code> keyword. For example: <pre><code class="hljs language-js">var x = 10; var y = 20;Code language: JavaScript (javascript) </code></pre> ES6 added a new way to declare a variable with the <code>let</code> keyword: <pre><code class="hljs language-js">let x = 10; let y = 20;Code language: JavaScript (javascript) </code></pre> There are differences between <a href="https://www.javascripttutorial.net/es6/difference-between-var-and-let/"><code>var</code> and <code>let</code></a>. And it’s a good practice to use the <code>let</code> keyword to declare variables. To declare a <a href="https://www.javascripttutorial.net/javascript-function/">function</a>, you use the <code>function</code> keyword. The following example defines a function that calculates the sum of two arguments: <pre><code class="hljs language-js">function add( a, b ) { return a + b; }Code language: JavaScript (javascript) </code></pre> To call the <code>add()</code> function, you use the following syntax: <pre><code class="hljs language-js">let result = add(x, y);Code language: JavaScript (javascript) </code></pre> To log the result into the console window of the web browser, you use the <code>console.log()</code> : <pre><code class="hljs language-js">console.log(result); Code language: JavaScript (javascript) </code></pre> Now, you should see <code>30</code> in the console window. JavaScript provides you with condition statements such as <a href="https://www.javascripttutorial.net/javascript-if-else/"><code>if-else</code></a> and <a href="https://www.javascripttutorial.net/javascript-switch-case/"><code>switch</code></a> statements. For example: <pre><code class="hljs language-js">let a = 20, b = 30; function divide(a, b) { if(b == 0) { throw 'Division by zero'; } return a / b; }Code language: JavaScript (javascript) </code></pre> In the <code>divide()</code> function, we check whether the de-numerator (b) is zero. If yes, we <a href="https://www.javascripttutorial.net/javascript-try-catch/">throw an exception</a>. Otherwise, we return the result of a / b. To declare an <a href="https://www.javascripttutorial.net/javascript-array/">array</a>, you use the following syntax: <pre><code class="hljs language-js">let items = [];Code language: JavaScript (javascript) </code></pre> To declare an array with some initial elements, you specify the elements in the square brackets: <pre><code class="hljs language-js">let items = [1, 2, 3];Code language: JavaScript (javascript) </code></pre> You can access the number of elements in the <code>items</code> array through its <code>length</code> property: <pre><code class="hljs language-js">console.log(items.length); // 3Code language: JavaScript (javascript) </code></pre> To iterate over the elements of the <code>items</code> array, you use the <a href="https://www.javascripttutorial.net/javascript-for-loop/"><code>for</code></a> loop statement as follows: <pre><code class="hljs language-js">for(let i = 0; i < items.length; i++) { console.log(items[i]); }Code language: JavaScript (javascript) </code></pre> Or use the <code>for...of</code> loop in <a href="https://www.javascripttutorial.net/es6/">ES6</a>: <pre><code class="hljs language-js">for(let item of items) { console.log(item); }Code language: JavaScript (javascript) </code></pre> JavaScript is an evolving language. It has many other features that you’ll learn in the following tutorials. In this tutorial, you learned what JavaScript is and the overview of the JavaScript language.

About Me

Top References

Top Tutorials

NOTE: