So far we have learnt to add content to a webpage using HTML and also change the look and feel of the webpage with CSS. In this post, we’ll learn to add some intelligence and interactivity to webpages using JavaScript. We will understand what JavaScript is, what are its capabilities and the basic use of JavaScript.
What is JavaScript
JavaScript is basically a programming language for a webpage. It helps add custom behaviour and intelligence to the webpage.
You can use JavaScript to do the following things (and much more).
- Check values entered in form fields. Basically check if the user has entered a valid Email ID in the email field, a valid phone number in the phone field etc.
- Use custom animations. Make certain HTML elements move around, change colors, appear or disappear when something happens on the screen.
- Display custom content for different users. Dynamic content like current time, location etc which would be different for different users could be displayed on the webpage individually.
- Provide custom messages based on the current system status. JavaScript can check if the user has lost internet connectivity, and then display custom messages informing the users about it.
- Detect user specific information. Javascript is able to detect user specific details like the user’s brower, broswer version, operating system etc. JavaScript can then display custom messages like asking them to update the browser if needed.
- Create and manage cookies. JavaScript can create, edit and even delete cookies.
- Control the browser. JavaScript can perform certain browser actions on behalf of the user for example: go to the next or previous page, redirect to another URL, change the position and size of the browser window etc.
JavaScript is a very powerful programming language. In fact the above examples are just a few common uses, JavaScript can actually be used for much more advanced tasks. In fact there are entire games based on JavaScript. JavaScript is slowly gaining popularity even in offline platforms, for e.g. it is used to code macros in Adobe software like Photoshop and Illustrator.
As JavaScript is a programming language, it contains all the common components of Programming like Variables, Arrays, Functions, Loops etc. It is object oriented and most of it’s components are objects.
Using JavaScript
JavaScript needs to be “linked” or “included” in the webpage in order to be used. This can be done in three ways which are very similar to the way CSS is used in a webpage. Javascript can either be
- Placed in an external file and linked to the HTML file : This is probably the most common method of all three. Here, all the JavaScript code is added to a “.js” file. This file is then added (linked) to the HTML page. Let’s say for example we have a JavaScript file knows as “script.js”. In that case the file would be linked to the HTML file using the following piece of code. (The “type’=’text/javascript'” part used to be included in older versions, however, it is not necessary anymore as JavaScript is now the default scripting language in HTML.)
1<script type='text/javascript' src='script.js'></script> - Included in the HTML file between the “<script>” tag : Here the JavaScript code would be placed between an opening and closing “<script>” tag. This block of code can be placed anywhere withing the HTML file. It can be placed in the <head> or even the <body> tag. However, it is recommended to always place JavaScript code at the bottom of the file. This helps load the page faster.Here’s an example of JavaScript between the “<script>” tag.
123<script>document.getElementById("test").innerHTML = "new content";</script> - Entered with the HTML code (Inline) : Here, like inline CSS, JavaScript code is added along with the HTML code. This is mostly done when it’s just one line of code. Inline JavaScript code is mostly placed in an attribute like the “onclick” attribute in HTML. Inline code is tough to read, and would be disastrous if larger chunks of code were placed like this.Here’s an example of inline JavaScript code
12345<button type="button" onclick="document.getElementById('test').innerHTML = 'New Content'">Please click this button</button><p id="test"></p>
Components of JavaScript
As JavaScript is a programming language, it has a same components as most other programming languages. Let’s look at some of them in detail.
Syntax
The syntax of JavaScript is similar to most other programming languages. Below is an example of a JavaScript Function, following which, the same function is also invoked.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// function checkValueOfInput(x) { var a=x; var b; if (a < 10) { b = "a is less than 10"; } else { b = "a is more than 10"; } return b; } input1 = 5; document.getElementById("demo").innerHTML = checkValueOfInput(input1); // |
As you can see, this is very similar to other programming languages. However, let’s break this down into smaller and simpler chunks for better understanding.
Function Definition
Functions are defined using the “function” keyword. The function keyword is followed by the name of the function. The name will always have parenthesis. Any required parameters would be placed in the parenthesis. Let’s look at the above example more closely to understand this better
|
1 |
function checkValueOfInput(x) |
In this example the first word you see (function) is the “function” keyword followed by the name of the function itself which, in this case, is “checkValueOfInput” there is also a parameter “x” that is added here within parenthesis.
Executable code block
After mentioning the name of the function, we need to define the code that would actually be executed whenever this function is invoked. This code is wrapped in curly brackets “{ }”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ var a; var b; if (a < 10) { b = "a is less than 10"; } else { b = "a is more than 10"; } return b; } |
In this example, all the code above is part of the function and would run whenever the function “checkValueOfInput” is called.
Let’s now take a closer look at the code inside this function.
Variables
Variables can be created using the “var” keyword. Below is an example of creating a variable.
|
1 2 |
var a; var b; |
In the example above, variables named a and b are created. Values can then be assigned using the “=” operator. In the example below, let’s give the variable “x” a value of 7.
|
1 2 |
var x; x = 7; |
However, values can also be given as we declare the variable. For example:
|
1 |
var a=x; |
Here, we declare the variable but at the same time also give it the value of “x”.
Conditional Statement
Conditional statements are a way of executing code, only if a predefined criteria is met. For example, “run the login and redirect” code only if the user is authenticated.
The “if…else” statement is probably the most popular of all conditional statements. In the example below, the value of b is set, based on whether the value of “a” is more or less than 10.
|
1 2 3 4 5 6 7 8 9 10 |
if (a < 10) { b = "a is less than 10"; } else { b = "a is more than 10"; } return b; } |
the “if (a < 10)” part sets the criteria for execution of any code residing within the curly brackets after this statement. The “a < 10” part is known as an argument.
The “else” part defines the code that would be executed if the criteria was not met, in the example above, the code to set “b”‘s value to “a is more than 10” would execute only if the value of “a” was not less than 10.
Statements
Statements are basic lines of code that instruct the system to perform a task. In the example above the following lines would be statements
|
1 2 3 4 5 |
b = "a is less than 10"; b = "a is more than 10"; return b; |
Here, the first statement sets the value of “b” to “a is less than 10”. Likewise the second statement sets the value of “b” to “a is more than 10″. The same goes with the third statement that simply returns the value of b. Notice the ” ;” at the end of each statement? that’s a way of telling JavaScript that a statement has been completed. JavaScript doesn’t make it compulsory to use ” ;”, however, it’s highly recommended as you could still get errors in certain scenarios without them.
Conclusion
So these are the basics of JavaScript. While there’s a lot more to this language this should be enough to get a good basic understand of what JavaScript is all about. I will be covering much more in a another post shortly. However, in the meantime, do share in the comments section any questions you might have about the basics (or even advanced) stuff about JavaScript.
