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


      • These

        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>
	inline Javascript goes here
<script type="text/javascript" src="myscript.js"></script>


      • 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:
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:
      • 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++)
          • 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;
      • 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:


    • 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:
      • 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:
      • 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.


Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article


More article

- Advertisement -