Punjabi revolution tutorials Javascript introduction

JavaScript is a a very light and easy language used by web developers to interact with web pages. Strictly speaking this interaction is limited to client side. In other words, we can safely say, in this interaction, there is no server side trip.

Since the JavaScript does not involve any server side trip, it is compiled/ translated by browser.  So you may face different behaviors of browsers for same piece of code.

Just to recap below is the scope and purposes of different client side languages.

HTML (Hyper text markup language) is used for contents only

CSS (Cascaded Style Sheet) is used for styling the contents rendered by HTML.

JavaScript is used for user interaction with the web page but this interaction is limited to client side only. In other words, this interaction would not be disturbed after loading the page even if the internet is disconnected. The reason is, there is no server side trip involved.

To write the JavaScript, we have to enclose all the JavaScript code inside <script> </script> tags. Of course there is no limitation,  but conventionally we place the script tag inside <head></head> tags.  Let’s write the Hello World in JavaScript.

As aforementioned , the primary objective of JavaScript is to interact with user, let’s create an example of interaction.

Here is a syntax for an input button,

The input tag has attribute onclick which is used to capture the event fired when we click the button. we use that attribute to capture the click event as below.

As you might note, there is a semicolon at the end of the function call myFun(), it is because every JavaScript statement ends with a semicolon.

Next we define this function inside the script tag. The function definition in JavaScript is very simplified, there is no need to specify any return type whether we return something or not. Here is the definition of the function being called at the fire event of the above button.

The alert() is a built in JavaScript function used to pop up an alert.

Next, let see how we we can get or set the value of an HTML element. There are two methods to get an element in JavaScript.

  1.  By ID
  2. By name.

To get any HTML element in JavaScript, there is a built in function named getElementById(). Please note, the function name is case sensitive, so be careful while writing it. Let’s say we put a text field before the “Click Me” button.

Now to get the value of this text field, we would use following syntax

Here, var is the keyword to declare any variable. JavaScript is very flexible in this context that we don’t need to specify the type of the variable. The type of the variable is automatically set based on the contents. As in above case, the contents are of string type. so the variable” name” is a String variable. By writing document.getElementById(“x”) we get the element as an object and by adding .value we get the value contained by the object.

Next we can add an other line to show the entered syntax in alert box.

Here is the complete code written so far.

As I said, we can also access the HTML element by name, to access any element by name, we have to next the input tag inside the form tag as below.

Here, you may note, I added the name attribute in form tag as well as input tag. so in JavaScript, we would access as

Here myform is the name of the form and y is the name of the text field. Once again the full and final code is as below.

Hope, it is quite straightforward and easy, should you have any confusion, you can write in comments below.
Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *