Hello, world! in JavaScript

In this part of the tutorial, we will learn on core JavaScript.

We need working environment o run our scripts. We will use either IDE or browser to do this. Now, let’s learn how to attach a script to a webpage. In server-side environments like Node.js, you can execute a script by using a command like “node my.js”.

The “script” tag

By using HTML tag <script>, you can insert a Javascript program anywhere into an HTML document.

For example:

<!DOCTYPE HTML>
<html>
<body>

  <p>Before the script...</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>...After the script.</p>

</body>
</html>

Inside tag <script> tag, we have JavaScript code which is automatically executed when the browser processes the tag.

Modern markup

In old HTML codes, tag <script> tag has a few attributes that were compulsory to use, but now these are optional to use. Some of these are : the type attribute: tag <script type=…> usually it was type=”text/javascript”. It’s not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules.

The language attribute: &ltscript language=…> this attribute no longer makes sense because JavaScript is the default language. There is no need to use it.

Note that you can also comment script code to ignore.

External scripts

You can use separate file for JavaScipt code and attached these separate files to HTML with the src attribute:

<script src="/path/to/script.js"></script>

You can provide either absolute path to the script from the site root or provide a relative path from the current page. You can also give a full URL as well. For example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

You need to use multiple tags to attach several scripts:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

Note

You should use separate files for complex code instead of puting it inside HTML code.

There is one benefit of using separate files is the browser will download it only once and store it in its cache. Later, it will be taken from the cache instead of downloading again and again by those pages that reference the same script. So, this makes pages faster and by reducing traffic.

If src is set, the script content is ignored.

If src is set, the script content is ignored. You can not use both the src attribute and code in script tag. You can use separate two script tags: one for src and code inside.

For example, you can not use this:

<script src="file.js">
  alert(1); // the content is ignored, because src is set
</script>

This should be written as :

<script src="file.js"></script>
<script>
  alert(1);
</script> </pre>

You can use either an external <script src=”…”> or a regular <script> with code. But, you can not use both in a same <script> tag.

Task

Create a page that shows a message “This is alert!”. You can use IDE or Browser console whatever. You code should be working.

Then, another step is to use separate file for JavaScipt code and then link it in HTML code file using src attribute of <script> tag. Run it and it should be working.