Learn Javascript Fundamentals


Modern web-based software development comprises HTML, CSS, and Javascript. We have already looked at HTML a technology that describes a web page, and CSS a technology that helps to specify styles, formatting, and position of contents in a web page, therefore CSS changes the appearance of the website. On the other hand, javascript technologies help to develop responsive web pages and enable dynamic changing and dynamic manipulation of web page contents.

In this article, you will look at what is javascript, and how you can use javascript to build dynamic and responsive web pages.

 

What is Javascript?

Javascript is a technology we use to create responsive and dynamic websites. With JavaScript, we can change the HTML content and manipulate the HTML Document Object Model (DOM).

 

Where and How to Write JavaScript?

The answer to this question is that there are two ways to embed javascript into your HTML document: inside <script> element in an HTML document; and using external javascript file.

Javascript statements end with a semicolon “;”

 

Using <script> element:

Insert javascript codes inside a <script> element as follows:

<script>

let a = 5;

let b= 10;

c = a+b;

</script>

The <script> element can be inside the <head> section of the HTML document or anywhere inside the <body> of the HTML document as here:

HTML example with javascript embedded inside <script> element:

<!DOCTYPE html>

<html>

<head>

<title>Sales Portal</title>

</head>

<body>

<h2>Users:</h2>

<script>

let firstname = “John”;

let sirname = “Doe”;

fullname = firstname+” ”+sirname;

</script>

</body>

</html>

Using external javascript file:

You can insert a link to an external javascript file inside the <head> section of the HTML document using <script> element as here:

<script src=”javascriptfile.js”></script>

<!DOCTYPE html>

<html>

<head>

<title>Sales Portal</title>

<script src=”javascriptfile.js”></script>

</head>

<body>

<h2>Users:</h2>

</body>

</html>

Then javascriptfile.js will contain:

let firstname = “John”;

let sirname = “Doe”;

fullname = firstname+” ”+sirname;

 

Javascript Statements

Usually javascript program comprises a list of javascript statements.

 

What are javascript statements?

Javascript statements are instructions we give to the computer and the task of the computer is to execute and display the output. Javascript statements contain variables, values, operators, expressions, keywords, and comments. Javascript statements are separated with semicolon “;”.

Examples of javascript statements:

let a, b,c;

a=3;

b= 6

c=a+b;

Great work so far, We all know that javascript changes the contents of HTML, the question is: How can javascript change the HTML contents?

 

HTML Document Object Model (DOM)

Before answering this question let us first understand the structure of HTML Document Object Model (DOM). HTML DOM is created when a web page is loaded, The root element of HTML DOM is <html> element which contains the <head> element and <body> element. The <title> and <body> respectively contain other HTML elements and text.

Therefore HTML DOM is a standard way to change, add, and delete HTML elements. HTML DOM contains objects, methods, and properties. Objects are HTML elements, methods are actions performed on HTML elements, and properties are values that we can get or set for instance changing the content of HTML elements.

 

How HTML elements and HTML contents are changed by javascript?

The answer to this question is very simple, The basic principle is that you need first to select or filter the HTML element you want to change or apply settings using one of the available javascript methods and then apply changes or assign a value. Usually, HTML elements are referenced by: their element name, id, and class.

For example we a paragraph <p> HTML element with an id=”orderInfo” as here:

<p id=”orderInfo”></p>

or by using a class name as here:

<p class=”orderInfo”></p>

 

Javascript methods

Javascript methods are actions we use to select objects or HTML elements. The owner of all other objects is the document object, therefore all javascript methods start with the document followed by a dot “.” and the object name.

There are several built-in methods in javascript as here: document.getElementsByTagName(), document.getElementsByClassName(),document.createElement(), document.removeChild(), document.appendChild(), document.replaceChild(new, old), document.write(), document.getElementById(id).onclick = function(){code}.

In this article, I’m not going to explain all of them but I will focus on the following javascript built-in methods: document.getElementById(), and document.querySelector().

The getElementById() method selects an HTML element based on its specific id, for example, if we recall the above example of a <p> element as here: <p id=”orderInfo”></p> I can select this HTML element as follows: document.getElementbyId(‘orderInfo’).

The document.querySelector() method selects elements based on both the id name and class name. To select based on class name we specify the class name starting with a dot “.”, To select based on id name we start with a hash symbol “#”.

Let select the above example using document.querySelector() using both id name and class name respectively as here: document.querySelector(‘.orderInfo’) and document.querySelector(‘#orderInfo’).

 

Javascript Properties

Properties in JavaScript are values we get or set to HTML elements. For example, in JavaScript, we can replace the HTML element with another HTML element or change the contents of the HTML element.

There are several javascript properties here to mention a few of them: innerHTML; document.body; document.head; document.title; document.documentElement; document.baseURI; document.images; document.lastModified.

In this article, I’m going to use the innerHTML property which changes the contents of the HTML element. For instance, suppose you want to change the contents of <p> element in the above example. Initially, the <p>element was empty as here under:

document.getElementById(‘orderInfo’).innerHTML = “Hello World!”;

Let's look at an example:

In this example is an HTML document with empty page title, empty <h1> element, and empty <p> element. We are going to exercise and use javascript program codes to change the page title from empty to “Product List”, to change <h1> content from empty to “Orders”, and to change the content of <p> element from empty to “Please Pick items of your interest”.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<h1 id=”orderHead”></h1>

<p id=”orderInfo”></p>

</body>

</html>

Great let's look at the javascript code to be embedded inside <script> element as here:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<h1 id=”orderHead”></h1>

<p id=”orderInfo”></p>

<scripts>

document.title() = “Product List”;

document.getElementById(“orderHead”).innerHTML = “Orders”;

document.getElementById(“orderInfo”).innerHTML = “Please Pick items of your interest”;

</script>

</body>

</html>

Example explained:

In the above example, we have used a document.title() method to change the content of a web-page title, also use document.getElementById(“orderHead”) method to change innerHTML of <h1> element as well as used document.getElementById(“orderInfo”) to change innerHTML of <p> element .

 

Javascript syntax

Well now we have started writing javascript codes, we need to understand the rules on how to write javascript programs as here:

  1. Javascript uses the following keywords to define variables: var, let, and const 

  2. The equal sign is used to assign values to variables

  3. Javascript uses operators to compute values

  4. Javascript computes values using arithmetic operators ( + - * / )

  5. Javascript uses comments to document what has been done on the codes, code after // or between /* */ are not executed by javascript.

  6. Javascript is not case-sensitive, for example, the variable name surname is not the same as the Surname

  7. When combining words as variable names hyphens are not recommended. In this case, underscore and camel case styles are recommended. For example first_name or firstName

     

Javascript events

Events are something that happens to HTML elements. When JavaScript is used with HTML events can be one of the following: the web page has finished loading, the input field has changed, a button has been clicked, and the mouse hovers over the HTML element.

Javascript allows to execution of codes when certain events are detected. Commonly used events include onchange, onclick, onmouseover, onmouseout, onkeydown, and onload.

For example, let's look at a basic on-click event that displays an alert box when a button is clicked as here:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<h1 id=”orderHead”></h1>

<p id=”orderInfo”></p>

<button onclick=”alert(‘Button has been Clicked!’)”>Click Here</button>

</body>

</html>

 

Javascript functions

The function is a block of code that performs a particular task. Usually, a function executes when invoked or called after a certain event occurrence. For example, when a user clicks a button a function is invoked to execute and perform a particular task.

The syntax to create a function is here:

functionName() {


}

Syntax explained:

To create a function we start by specifying a function name followed by open and close brackets () and open and close curl brackets {}. Javascript code statements are written inside curl brackets

Let at this example in which initially the page was empty, When a button is clicked the page will be populated with the required contents:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<h1 id=”orderHead”></h1>

<p id=”orderInfo”></p>

<button onclick=”populatePage() ”>Populate Page</button>

<scripts>

function populatePage() {

document.title() = “Product List”;

document.getElementById(“orderHead”).innerHTML = “Orders”;

document.getElementById(“orderInfo”).innerHTML = “Please Pick items of your interest”;

}

</script>

</body>

</html>

Example explained:

In this example, a function populatePage() is created and invoked when a user clicks a “Populate Page” button.

 

Javascript Objects

Javascript variables are containers that store values.

Javascript objects on the other hand are variables that store multiple values. Examples of objects are cars, and students to mention a few of them. Student objects can have values like first name, surname, full name, age, subject, and score.

How javascript objects are created?

The answer is very simple, you need to follow the syntax for creating javascript objects as here:

To create a javascript object start with the const keyword followed by the object name, followed by equal sign “=” and open and close curl brackets. Then populate curl brackets with a series of key-value pairs separated by coma “,”. The key value pair is separated by a full colon “:”

Example:

Create a student object as here:

const student = {

firstname: “Mark”,

surname: “Doe”,

fullname: function(){return this.firstname+” “+sirname;}

age: 36,

subject: “Math”,

score: 66

}

 

Conclusion

Javascript is a powerful tool in web software development. We tried to cover only the fundamentals of javascript scripting language, In the coming articles we will continue learning more aspects of javascript techniques and apply them in various situations.


Post a Comment

0 Comments