JavaScript Hello World!

by

JavaScript Hello World Tutorial

In this Codingcompiler JavaScript tutorial we will create a simple JavaScript and see how it works.

SCRIPT Tag

In case, if the reader is impatient and has already developed in JavaScript or has enough experience in another programming language, he may not read every article in this section, but jump directly to the advanced chapters.

If you have enough time and desire to start from scratch, read on 🙂

JavaScript programs can be inserted anywhere in HTML using a tag SCRIPT. 

Hello World JavaScript Example

For example:

 <!DOCTYPE HTML> 
<html> 
<head>   
<!-- Meta tag for specifying encoding -->   
<meta charset="utf-8"> 
</head> 
<body>   
<p>Start document …</p>   
<script>     
alert( 'Hello World!' );   
</script>   
<p>…End of document</p> 
</body> 
</html>

This example uses the following elements:<script> ... </script>

Tag scriptcontains executable code. Previous HTML standards required a mandatory attribute type, but now it is no longer needed. Simple enough <script>.

Browser when sees <script>:

  1. Starts displaying the page, shows part of the document until script
  1. Upon encountering a tag script, it switches to JavaScript mode and does not show, but executes its contents.
  2. When completed, returns to HTML mode and only then displays the rest of the document.Try this example in action and see for yourself.

alert(message)Displays a message box and waits until the visitor clicks OK.

Encoding and tag META

When you try to make the same file on your disk and run it, you may encounter a problem – “krakozyably”, “squares” and “questions” are displayed instead of the Russian text.

To make everything good, you need:

  1. Make sure that HEADthere is a string <meta charset="utf-8">. If you open the file from the disk, then it will tell the browser the encoding.
  2. Make sure that the editor saved the file in UTF-8 encoding, and not, say, in windows-1251.

Specifying the encoding is part of normal HTML, I mention this “just in case” so that there are no surprises when running examples locally.

Modern markup for SCRIPT

In old scripts, the design of the tag SCRIPTwas a bit more complicated. In the outdated manuals you can find the following elements:Attribute <script type=…>Unlike HTML5, the HTML 4 standard required the mandatory indication of this attribute. It looked like this: type="text/javascript". If you specify a different value type, the script will not be executed.

In modern development attribute is typeoptional.Attribute <script language=…>

This attribute is intended to indicate the language in which the script is written. By default, the language is JavaScript, so this attribute is optional.Comments before and after scripts

In very old manuals and books, it is sometimes recommended to use HTML comments inside SCRIPTto hide Javascript from browsers that do not support it.

It looks like this:

<script type="text/javascript"><!--
    ...
//--></script>

The browser for which such tricks were intended, a very old Netscape, has long died. Therefore, there is no need for these comments.

So, to insert the script, we simply write <script>, without additional attributes and comments.

Tasks

Make a page that displays “I am JavaScript!”.

Create it on disk, open it in the browser, make sure everything works.

Related JavaScript Tutorials For Beginners

JavaScript Introduction Tutorials
Introduction to JavaScript
Javascript Reference and Specifications
Javascript Code editors
Javascript Developer Console
JavaScript Basics Tutorial
JavaScript Hello World.!
External JavaScript Files

Leave a Comment