Topics to be covered
We will cover the following topics in this lesson
- Lesson Prerequisites
- Lesson Practical Examples Project Setup
For you to successfully complete this lesson, you should have the following requirements
This is a practical based lesson. For you to successfully work out the examples given in this lesson, you will need to setup the following directories and files
Create a new directory called
Open the directory
Create the following files inside your project folder.
The following visualizes our project setup
Open the the file
index.html and add the following code to it.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JS Hello World</title> <script> alert('Hello World') </script> </head> <body> </body> </html>
alert('Hello World')uses the built-in function
alertto display a message box in the web browser.
Open the file
index.html in the web browser
You should be able to see the following alert message
Let's now look at a more advanced example. We will create an HTML form where the user will enter their name then click on a button that will greet the user by their name.
Replace the contents of
index.html with the following code
<html>...</html>defines a standard HTML document and loads Bootstrap CSS for styling purposes
<form>...</form>defines a standard form that contains an input element and a button to click.
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Enter name">defines an input element with the
name. We will use this
idvalue to access the value of the input
<button onclick="sayHello()" type="button" class="btn btn-primary">Say Hello</button>defines a button element.
var name = document.getElementById('name').valuedefines a variable
namethat is assigned the value of the form input with the
document.getElementById('message').innerHTML = 'Hello ' + name;gets the element with the
messageand replaced its contents with
Open the file
index.html in your web browser.
You should be able to get the following form.
Enter your first name in the form then click on Say Hello
You should be able to see the following results
onclick in the above example. An event is used to define the action that should be taken when the user does something like click a mouse, move the mouse cursor over an element etc.
The following table shows some of the most comment events
|onclick||Called when a user clicks an element|
|onchange||Called when the contents of an element change|
|onload||Executed when the browser has loaded the page|
|onkeydown||Executed when a user presses a key on the keyboard||`|
|onmouseover||Called when a mouse is moved over an element|
|onmouseout||Executed when the mouse pointer moves away from the element|
The above list is not complete. It just shows you some of the most common events that we can work with. We will work with and discover more events as we continue with the lessons.