Javascript Basics

Javascript An Introduction Tutorial for absolute Beginners

Javascript is a scripting language. Browser engine such as Chrome, Safari, Opera, Firefox etc. compile and runs javascript code.

Javascript (JS)

Javascript which is also denoted as JS is a client side scripting language. Which means, when ever we want client side data validation then only we should use javascript code.

Example:

If we want to check whether user has provided a valid email and a valid password in the login form, before submission to the server, we use javascript to validate the provided information. If user has not provided valid values, then we show a warning to them.

Javascript Benefits

Javascript is a very powerful and helpful entity in web designing. It reduces down the burden on server at a very great extend.

example:

Lets consider the login form. Suppose a user is required to provide email and password to login.

The process of login validation is simple- Check user provided email and password matches to the record in the database, if yes, then the login is valid. Otherwise the login is invalid.

If we check the login credentials valid or not at the server side, then it will consume server resources.  At this point, understand, if the user has provided valid login credentials then the consumption of server resources is well utilized.  But if the login credentials is not in proper format, then unnecessarily the server resources consumed for improper formatted credentials which is never ever going to match the records.

Example, a user forgot to add @ in his email, or typed 6 character length password where as 8 length character password is required. For such client side mistake the server resources still consumed. Imagine, if 1 million people try to login then the resource will be consumed at a high rate. Server resources costs money.  (If you are wondering where on earth one million people login at a time, then facebook, google, pinterest etc. are best example)

If a hacker finds out the xyz website has no client side validation for login credentials, then with the help of computer program, hacker can login million times each second and thus entire server resource will be exhausted.

So for such situation, we use javascript to validate data at the client side.

Note: Javascript is not restricted for data validation.

Cool stuff that we can do using Javascript

We can animate attention grabbing animation

We can change stylise of the webpage page content

We can redirect user from one page to another

We can alert user about various new options

We can show timer to user about the duration of time the user has spent

We can create beautiful computer games

Javascript has much more usage.

How to Create Java File?

Java code can be implemented in two ways.

First method

Internal Javascript

Internal Javascript, the javascript codes are written inside the same webpage where it is required. The javascript code is wrapped with script tag.

Example

<script>

// required codes here

</script>

External javascript

In external javascript, we create a separate file and we keep all the code inside this javascript file and in the desired webpage, we set the path to the javascript file in the head section.

Example

Suppose index.html is the webpage where I want to execute some task using javascript code.

Therefore, first I need to create a javascript file.

How can we create a javascript file?

Open a blank document in any text editor, save it with .js extension.

Then we keep all the required javascript code in this file. Then we need to set the path of this javascript file inside the desired webpage.

Here the desired webpage is index.html. Therefore in the head section of the index.html, we set the path to the javascript file using script tag.

<script type=”text/javascript” src=”test.js”></script>

Lets understand this with example.

Suppose I have following simple html page.

<html>
<head>
</head>
<body>
<h1>Cricket<h1>
Cricket is one of the popular game in India. Teenagers or retired old man prefer to play and watch cricket. In a cricket game, there are four important parts: batting, fielding, bowling, and score.
<h2>Batting</h2>
A player runs and bowls the ball which a batsman need to hit the ball with the bat in his hand. This is known as batting.
<h2>Fielding</h2>
There are players spread around the field, and their job is to stop the ball after the batsman hits the ball, from reaching to the boundary. This is known as fielding.
<h2>Bowling</h2>
A player runs and throws the ball towards the other player waiting to hit the ball. This is known as bowling.
<h2>Score</h2>
Once the batsman hits the ball, then the batsman needs to run in between the wickets before other players get the ball and hit at the wicket. Each run is known as score and it is calculated in the unit of run.
</body>
</html>

This is simple html webpage. It is about cricket. Now suppose I want to alert user, that today there is a cricket match between India and Australia.

So how can I achieve this?

By using Javascript. (Lets see internal JS coding and external JS Coding)

Internal JS Coding

Javascript has a function called “alert”. Using alert function we can inform the user.

<html>
<head>
</head>
<body>
<script>
alert(“There is a match in between India and Australia Today”);
</script>
<h1>Cricket<h1>
Cricket is one of the popular game in India. Teenagers or retired old man prefer to play and watch cricket. In a cricket game, there are four important parts: batting, fielding, bowling, and score.
<h2>Batting</h2>
A player runs and bowls the ball which a batsman need to hit the ball with the bat in his hand. This is known as batting.
<h2>Fielding</h2>
There are players spread around the field, and their job is to stop the ball after the batsman hits the ball, from reaching to the boundary. This is known as fielding.
<h2>Bowling</h2>
A player runs and throws the ball towards the other player waiting to hit the ball. This is known as bowling.
<h2>Score</h2>
Once the batsman hits the ball, then the batsman needs to run in between the wickets before other players get the ball and hit at the wicket. Each run is known as score and it is calculated in the unit of run.
</body>
</html>

See the red colored text in the above example.

If we run the webpage, then it will show a message. So in internal js coding, we keep js code in between script tag.

External JS Coding

In this approach, we keep all the js code in separate file and set the path in the desired webpage.

Step one.

create js file and write all the required codes.

alert(“There is a match in between India and Australia Today”);

Save above js code in a blank file and save it with .js extension. (In this case, I am saving this file as test.js)

Note: In external js coding, the code does not require script tag unlike internal js coding. The external javascript file should contain javascript codes with out any script tags.

Now its time to set the path to the javascript file.

<html>
<head>
<script type=”text/javascript” scr=”test.js”></script>
</head>
<body>
<h1>Cricket<h1>
Cricket is one of the popular game in India. Teenagers or retired old man prefer to play and watch cricket. In a cricket game, there are four important parts: batting, fielding, bowling, and score.
<h2>Batting</h2>
A player runs and bowls the ball which a batsman need to hit the ball with the bat in his hand. This is known as batting.
<h2>Fielding</h2>
There are players spread around the field, and their job is to stop the ball after the batsman hits the ball, from reaching to the boundary. This is known as fielding.
<h2>Bowling</h2>
A player runs and throws the ball towards the other player waiting to hit the ball. This is known as bowling.
<h2>Score</h2>
Once the batsman hits the ball, then the batsman needs to run in between the wickets before other players get the ball and hit at the wicket. Each run is known as score and it is calculated in the unit of run.
</body>
</html>

If we run the above webpage, then it will show the mentioned message.

This way we create extenal javascript file and set path in the head section of the desired webpage.