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.
- What is Javascript?
-
- 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.
- Javascript is used for the following things :
- Uses of 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.
- We can add a javascript code to an HTML page using
- Adding Javascript to an 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:
- Javascript Variables:
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:
- Javascript Arrays:
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 Loops:
-
- Javascript Loop Syntax:
- Here, we will see syntaxes of for loop and while loop to get an idea of the loops.
- For Loop:
- Here, we will see syntaxes of for loop and while loop to get an idea of the loops.
- Javascript Loop Syntax:
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.
- 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:
- Javascript Functions:
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:
- Javascript Objects:
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.