Web Programming TutorialsJavascript Fundamentals

Javascript Fundamentals

Today we are going to start an introduction to Javascript and JQuery. It is used to do some processing in a webpage. In this tutorial we will learn Javascript fundaments that will be explained in detail in further tutorials.
Let’s start with an introduction to Javascript.

    • What is Javascript?
      • Javascript was originally created by Netscape and was called ECMAscript.
      • Javascript is the main scripting language of the Web and can be executed by all types of web browsers.
      • Javascript runs on the client as opposed to the server.
      • Javascript is different from Java. It has nothing to do with Java programming language.

 

    • Uses of Javascript?
      • Javascript is used for the following things :
        • HTML Form Validation – to validate input elements for email, phone number etc.
        • Event Handling – to perform some action on an element we can use javascript libraries such as JQuery that contain various functions and events such as click, hover etc.
        • Javascript powers HTML5 features.
        • Using javascript we can also provide searching and autocomplete feature on the webpage.
        • Animations.
        • JQuery, Ajax and other libraries are all written in javascript.

 

    • Adding Javascript to an HTML page:
      • We can add a javascript code to an HTML page using
        <script>---</script>

        tags.

      • These
        <script>---</script>

        tags can be placed in head section as well as in body section.

      • We can add the javascript code to HTML page in two ways:
        • Write the javascript code directly in the script tags in HTML page
        • We can attach a separately written javascript (.js) file to the HTML page.

Let’s see an example.

<!DOCTYPE html>
<html>
<head>
<script>
	inline Javascript goes here
</script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
</body>
</html>

 

      • Here, the statement “inline Javascript goes here” inside the tags indicates the actual code written in javascript. It is called inline here, because the code will be written within HTML page.
      • The next statement,
        <script type="text/javascript" src="myscript.js"></script>

        indicates that the externally written javascript file named “myscript.js” is attached to the HTML page to perform various actions.

 

    • Javascript Variables:
      • Variables in any language are the placeholders that can store different datatype values in it.
      • There are rules to define a variable.
      • Variables should start with a letter.
      • Variables are case sensitive
      • Declaration of an empty variable x is shown below:
var x;
      • Here var is a keyword used to declare a variable.
      • Declaration of variables with assignment of a value is shown below:
y=4;
var y=4;
      • Here, two variable declaration statements are shown above.
      • The two statements are one and the same, i.e. they will do exactly the same work of declaring a variable y with value 4 assigned to it.
      • From this you might have understood that var keyword is not compulsory. We can declare variable without var keyword also.

 

    • Javascript Arrays:
      • Array is just a variable that holds more than one values.
      • Variables have a property to hold a single value. But if you want to store more values under a single variable, you can definitely use arrays.
      • Declaration of arrays is shown below:
var cars=new Arrays();   // this is an empty array having no values stored in it.
      • If you want to store values in this array, you can store it as follows:
cars[0]=”Honda”;
cars[1]=”Toyota”;
cars[2]=”Ford”;
      • Array index starts from zero(0).
      • You can assign values as shown above at every index.
      • Next way of declaring array along with the assignment of values is shown below:
var cars=new Array(“Honda”,”Toyota”,”Ford”);
      • This creates an array of cars with values assigned to it as parameters.

 

    • Javascript Loops:
      • Loops are used to run the same code over and over until a certain condition is met.
      • The loops in javascript are shown below:
        • For Loop: It loops through a block of code a number of times. You usually know the number of times.
        • While Loop: It loops through a block of code until a condition is true. You usually don’t know the number of times.
        • For In Loop: It loops through array object values.
        • Do—While Loop: It is same as While loop, only it checks the condition at the last. It is not used frequently.

 

    • Javascript Loop Syntax:
      • Here, we will see syntaxes of for loop and while loop to get an idea of the loops.
        1. For Loop:
for(var i=0;i<5;i++)
{
	document.write(“number”+i+”<br/>”);
}
          • In for loop, the initialization, condition check and increment/decrement is done in a single statement.
          • document.write(); is a command that is used to print the output on the screen.
          • The loop will repeat 5 times, since the condition will remain true until i=4.
        1. While Loop:
var i=0;
while(i<5)
{
	document.write(“number”+i+”<br/>”);
        i++;	
}
      • For while loop, we need to first initiate the variable before starting the loop.
      • Then the condition is checked, if condition is true the given statements in the curly braces are executed.

The output of both the above loops will be:
number0
number1
number2
number3
number4

 

    • Javascript Functions:
      • A function is a block of code that runs when it is called.
      • It is mostly used to reduce the length and complexity of the program.
      • If a program requires same code to be written in most of the places, we can write function for it once and call it wherever required, thus reducing the programmer’s work.
      • Syntax for creating a function:
function someFunction()
{
	document.write(“This is some function”);
}
      • The function is defined with a keyword function followed by a function name and paranthesis.
      • Whatever statements present inside the opening and closing curly braces form the body of the function.
      • The function is not executed unless it is called.
      • Syntax for calling a function:
someFunction();
      • Calling a function is very simple. Just write the function name with paranthesis.
      • A function can have parameters also.

 

    • Javascript Objects:
      • Everything in javascript is an object.
      • Some built in objects are: String, Date, Array, Function, etc.
      • Objects have properties or characteristics.
      • In javascript properties can be accessed as follows:
objectName.propertyName
      • An example is shown below:
var greeting=”Hello”;
var x=greeting.length;
      • Here, x is equal to 5 as it is equal to the length property of the “greeting” variable.

 

Thus we finished with an overview of Javascript Fundamentals. We will study each topic in detail in further tutorials.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -