<h1 id="javascript-hello-world-example">JavaScript Hello World Example</h1>
<p><strong>Summary</strong>: This tutorial helps you get started with JavaScript by showing you how to embed JavaScript code into an HTML page.</p>
<p>To insert JavaScript into an HTML page, you use the <code><script></code> element. There are two ways to use the <code><script></code> element in an HTML page:</p>
<ul>
<li>Embed JavaScript code directly into the HTML page.</li>
<li>Reference an external JavaScript code file.</li>
</ul>
<h2 id="embed-javascript-code-in-an-html-page">Embed JavaScript code in an HTML page</h2>
<p>Placing JavaScript code inside the <code><script></code> element directly is not recommended and should be used only for proof of concept or testing purposes.</p>
<p>The JavaScript code in the <code><script></code> element is interpreted from top to bottom. For example:</p>
<pre><code class="hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>JavaScript Hello World Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
<span class="hljs-title function_">alert</span>(<span class="hljs-string">'Hello, World!'</span>);
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>Code language: HTML, XML (xml)
</code></pre>
<p>In the <code><script></code> element, we use the <code>alert()</code> function to display the <code>Hello, World!</code> message.</p>
<h2 id="include-an-external-javascript-file">Include an external JavaScript file</h2>
<p>To include a JavaScript from an external file:</p>
<ul>
<li>First, create a file whose extension is <code>.js</code> e.g., <code>app.js</code> and place it in the <code>js</code> subfolder. Note that placing the JavaScript file in the <code>js </code>folder is not required however it is a good practice.</li>
<li>Then, use the URL to the JavasScript source code file in the <code>src</code> attribute of the <code><script></code> element.</li>
</ul>
<p>The following shows the contents of the app.js file:</p>
<pre><code>alert('Hello, World!');Code language: JavaScript (javascript)
</code></pre>
<p>And the following shows the <code>helloworld.html</code> file:</p>
<pre><code class="hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>JavaScript Hello World Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/app.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>Code language: HTML, XML (xml)
</code></pre>
<p>If you launch the <code>helloworld.html</code> file in the web browser, you will see an alert that displays the <code>Hello, World!</code> message.</p>
<p>Note that you can load a JavaScript file from a remote server. This allows you to serve up JavaScript from various domains e.g., content delivery network (CDN) to speed up the page.</p>
<p>When you have multiple JavaScript files on a page, the JavaScript engine interprets the files in the order that they appear. For example:</p>
<pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/service.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/app.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>Code language: HTML, XML (xml)
</code></pre>
<p>In this example, JavaScript engine will interpret the <code>service.js</code> and the <code>app.js</code> files in sequence. It completes interpreting the <code>service.js</code> file first before interpreting the <code>app.js</code> file.</p>
<p>For the page that includes many external JavaScript files, the blank page is shown during the page rendering phase.</p>
<p>To avoid this, you include the JavaScript file just before the <code></body></code> tag as shown in this example:</p>
<pre><code class="hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>JavaScript Hello World Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-comment"><!-- end of page content here--></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/service.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/app.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>Code language: HTML, XML (xml)
</code></pre>
<h2 id="the-async-and-defer-attributes">The async and defer attributes</h2>
<p>To change how the browser load and execute JavaScript files, you use one of two attributes of the <code><script></code> element <code>async</code> and <code>defer</code>.</p>
<p>These attributes take effect only on the external script files. The <code>async</code> attribute instructs the web browser to execute the JavaScript file asynchronously. The <code>async</code> attribute does not guarantee the script files to execute in the order that they appear. For example:</p>
<pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"service.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"app.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>Code language: HTML, XML (xml)
</code></pre>
<p>The <code>app.js</code> file might execute before the <code>service.js</code> file. Therefore, you must ensure that there is no dependency between them.</p>
<p>The <code>defer</code> attribute requests the web browser to execute the script file after the HTML document has been parsed.</p>
<pre><code class="hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>JavaScript defer demonstration<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"defer-script.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>Code language: HTML, XML (xml)
</code></pre>
<p>Even though we place the <code><script></code> element in the <code><head></code> section, the script will wait for the browser to receive the closing tag <code><html></code> to start executing.</p>
<h2 id="summary">Summary</h2>
<ul>
<li>Use <code><script></code> element to include a JavaScript file in a HTML page.</li>
<li>The <code>async</code> attribute of the <code><script></code> element instructs the web browser to fetch the JavaScript file in parallel and then parse and execute as soon as the JavaScript file is available.</li>
<li>The <code>defer</code> attribute of the <code><script></code> element allows the web browser to execute the JavaScript file after the document has been parsed.</li>
</ul>