JavaScript Title Image

How to create a website – Web Design and Development Tutorial – JavaScript

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).

  1. 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.
  2. Use custom animations. Make certain HTML elements move around, change colors, appear or disappear when something happens on the screen.
  3. 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.
  4. 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.
  5. 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.
  6. Create and manage cookies. JavaScript can create, edit and even delete cookies.
  7. 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

  1. 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.)
  2. 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.
  3. 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

Components of JavaScript

Syntax 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.

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

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 “{ }”.

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.

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.

However, values can also be given as we declare the variable. For example:

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.

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

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.

Related Post

How to create a website – Web Design and Developme... In the previous HTML tutorial we've learnt how HTML is used to define the basic structure of a webpage. We've also made a basic HTML page with a headi...
How to create a website – Web Design and Developme... So in the previous HTML Tutorial we looked at a lot of types of HTML tags and how HTML syntax works. In this post we'll just put it all together into ...
Combine, subtract, intersect – Create custom... Incase you'll haven't heard, MS Office 16 has recently been released. Reminds me of when MS Office 13  was released and all the new features it brough...
How to create a website – Web Design and Dev... How does one create a website - I've come across this question a lot of times, mostly from people aspiring to learn web design or web development but ...

Leave a Reply

Your email address will not be published.


*