JavaScript Basics

On this page, we work through three basic JavaScript examples, showing the code extracts and explaining how it works.

Through these examples, you will learn how to get and respond to user input.

You can also copy the code extracts from the grey code boxes and try them on your own website.

1. A Simple Alert Box

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

Click me

The script:

<button id="myButton">Click me</button>
<script>
myButton.addEventListener("click", test1);  
function test1() {
  alert("Hello! I am an alert box!");
}
</script>

Explanation

1. First we have a button with an id id="myButton" attached. This button is an HTML object and can be placed anywhere on the page.
2. Next, we have our JavaScript code block, inside the <script> tags.
3. The first thing the code does is access the object named 'myButton' and attach an event listener to it: myButton.addEventListener("click", test1);. The event is "click" and the action performed by the click is the function named test1.
4. The test1 function is created using the function keyword. The function is named test1(), and it performs the action enclosed within { ... }. This function performs an alert(), which presents a pop-up box.
5. Inside the alert() object we have the sentence "Hello! I'm an alert box!", which will display to the user.

Reference for this script

2. Writing something into a document

This example shows how JS can manipulate text on a document.

Click this button and watch the text below change.

Watch this text change.

The script:

<button id="button2">Click this button and watch the text below change.</button>
<p style="font-weight:bold;" id="demo1">Watch this text change.</p>
<script>
  button2.addEventListener("click", test2); 
  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("demo1").innerHTML =
• Notice the dots. The code shows a JavaScript method for parsing the document in search of an HTML tag document.getElementById("demo1") that has an id named "demo1".
• Once the tag with ID “demo1” is located, the script specifies the phrase that shold be inserted into the element, using innerHTML =. The phrase after the = sign is then displayed inside the <p> tag with id="demo1".

Reference for this script

3. Extending 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: Submit

The message will appear here:

The script:

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

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

Explanation

• An HTML input box input type="text" with an ID, id="inputName" is used for user input.
• The function gets the value (contents) of the input box, using the document object method: getElementById().value;
• The value is whatever is written in the input box.
• This value of the input box is stored in a variable (using the key word var) named yourName.
• The function then adds the value of the variable after the word “Hello”, using the + operator, and writes it to the document inside the page element with id "output1".
• Adding two strings (words and letters) together with the + operator is known as ‘concatenation’.
• The script then adds the phrase “How are you today?” after the user’s name.

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

Try the above example again, without inputting a name. You will see a message saying only 'Hello' with no name.

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

Enter your name: Try it

The message will appear here:

The script

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

<script>
button4.addEventListener("click", test4); 
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 an 'if / else' 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 yourName 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 (i.e., if yourName is not empty).
• In this case, the else statement writes the value to the document.

This is the end of this brief introduction to JavaScript. If you want to proceed, head over to my random sentence maker to learn some more JavaScript concepts.