JavaScript Basics

1. A Simple Alert Box

This example shows a simple alert box when a button is clicked

The script:

<button onclick="test1()">Try it</button>
<script>
function test1() {
  alert("Hello! I am an alert box!");
}
</script>

Explanation

In the code above, you can see the JavaScript inside the <script> tags. This uses the JavaScript ‘Function’ object and a dialog box object. The function is executed by the ‘onclick=’ event handler, assigned to an HTML button.

Reference for this script

2. Write something into a document

This example shows how JS can manipulate text on a document

Watch this text change.

The script:

<button onclick="test2()">Click this button and watch the text below change.</button>
<p style="font-weight:bold;" id="demo1">Watch this text change.</p>
<script>
function test2() {
  document.getElementById("demo1").innerHTML = "Hello World! How are you today?";
}
</script>

Explanation

This code illustrates a highly useful JavaScript method for accessing the Document Object.
JavaScript uses ‘dot syntax’ to access this:
document.getElementById().innerHTML =
This is a JavaScript method for parsing the document in search of an HTML tag with the id “demo1”.
Once the tag with ID “demo1” is located, whatever is placed after the = sign is displayed inside the <p> tag of the document.

Reference for this script

3. Extend the above to get user input and output it to the document

This example shows how JS can take user input and join it to another text and output it.

When you enter a name and submit, a message will be displayed underneath.

Enter your name, or any name:

The message will appear here:

The script:

<p>Enter your name, or any name: <input type="text" id="inputName"><button onclick="test3()">Submit</button></p>
<p>The message will appear here: <span id="output1"></span></p>

<script>
function test3() {
  var yourName = document.getElementById("inputName").value;
  document.getElementById("output1").innerHTML = "Hello " + yourName + ". How are you today?";
}
</script>

Explanation

An HTML input box with an ID of “inputName” accepts user input. The Button calls the JavaScript function.
The function gets the value of the input box, using the document object method:
getElementById().value;</br> The value is whatever is written in the input box.
This value is then stored it in a variable (using the key word var) called “yourName”.
The function then adds the value of the variable after the word “Hello”, using the + operator, and writes it to the document.
Adding two string (word) values together with the ‘+’ operator is known as ‘concatenation’.
Exercise: Modify the output text so that it adds “How are you?” after the user’s name.

But what happens if the user doesn't enter a name?

Yes, that's right, you get a message saying only 'Hello' with no name.

We can solve this by making sure the user enters a name:

Enter your name:

The message will appear here:

The script

<p>Enter your name: <input type="text" id="inputName2"><button onclick="test4()">Try it</button></p>
<p>The message will appear here: <span id="output2"></span></p>

<script>
function test4() {
  var yourName = document.getElementById("inputName2").value;
  if(!yourName){
  alert("Please enter your name!");
  }
  else {
  document.getElementById("output2").innerHTML = "Hello " + yourName;
  }
}
</script>

Explanation

JavaScript provides a core programming construct known as 'if' condition. We can use an ‘if’ condition to check that the text box contains a value.
Look at the ‘if’ and ‘else’ conditions in the code above: The ‘if’ statement checks whether the variable ‘name’ contains a value. This is done using Boolean NOT operator (!), placed before the variable name. In plain English, this means: ‘if the variable ‘yourName’ is empty (i.e. if !yourName is true), show an alert box.
The if statement is followed by an else statement, which executes if the first ‘if’ statement is false. In this case, the ‘else’ statement writes the value to the document.