JavaScript Introduction Tutorial Part1

• What is JavaScript?
• Features of JavaScript.
• Advantages of JavaScript.
• Disadvantages of JavaScript.
• Use of JavaScript.
• Introduction to JavaScript Syntax.
• Adding comment to a JavaScript program.
• The rule for creating variables.
• Type of variables in JavaScript.
• Introduction to JavaScript operators.
• JavaScript special operators.

What is JavaScript?

JavaScript is a client-side scripting language that is used to add programming logic and calculation on the web pages. Whereas, HTML is a designing language it only used to designs web pages. You can’t perform any arithmetical and logical operation on the Web Pages by using HTML.

Suppose a user click on the link and you want to do some processing by calling a function. For this calling a function, you need a programming language. JavaScript is a programming language that adds logic on the Web Pages and makes it dynamic but it can’t be done by HTML because it is used only for designing layout, text formatting, embed audio and video, etc.

JavaScript was developed by Sun Micro Systems. Previously it was named LiveScript which was later changed to javascript. JavaScript has Object-Oriented Programming capabilities. It is defined in the head section of the HTML document.

If you do not use JavaScript, then you can’t perform any arithmetical (calculations) and logical operation with HTML. You can also perform the validation by using JavaScript. JavaScript is the programming language that browsers understand and it is used only for special Web Pages.

Features of JavaScript

There are two important features of JavaScript that are given below.

Dynamic

JavaScript is capable of generating a dynamic web page. It is able to make changes on the web page when it is loaded. It can be decided at the time of loading web pages, what the task is to be performed.

While this does not happen in HTML, all the actions are already defined before and you can’t take any action at the loading time of the web pages. HTML generates static pages whereas JavaScript generates dynamic pages.

For example, it can show weather according to your location at the loading time of the JavaScript page.

Client-side

There are two types of a programming language such as client-side and server-side. JavaScript is a client-side scripting language whereas PHP is a server-side programming language. The execution in PHP performs on the server because it is server-side programming language but this is not in the case of JavaScript. When you use JavaScript, execution performs on the client side.

For example, In JavaScript, validation is performed in the web browser on the client side but PHP performs validation on the server. Because of this, JavaScript reduces the load of the server.

Advantages of JavaScript

There are some of the advantages of using JavaScript.

Very Fast

JavaScript is very fast because of being a client side. It does not waste time in establishing a connection to the server. JavaScript is executed without connecting to the server.

Cross Platform

JavaScript runs smoothly on any browser and operating systems without any problems. By default, all the latest browsers support JavaScript.

It Works with Multiple Languages

JavaScript can work easily with other languages such as HTML, CSS, and PHP, etc.

Simple

JavaScript is a very simple language. Anyone can easily learn and implement it on the website or web pages.

Disadvantages of JavaScript

There are also disadvantages along with the advantages of JavaScript, which are given below.

Less Secure

The JavaScript code executes on the client side so some viruses can occur in it because of this JavaScript is not considered to be much secure.

Execution Vary

JavaScript gives different results on different browsers but this is not with server-side scripting languages. Whatever the Browser is, the server side scripting always gives the same result.

No Support for Network Applications

JavaScript can’t work with network applications, because there is no support available in it.

Use of JavaScript

·    JavaScript is used to create a dynamic web page.

·    JavaScript creates a highly interactive web page.

·    You can reduce the load of the server by performing validation on the Client side using JavaScript.

·    With JavaScript, you can solve many problems related to the browser.

Introduction to JavaScript Syntax

It is very easy to add in an HTML document. For this you use <script> tag. You can add <script> tag to anywhere in your HTML files but for readability, it is always suggested you write it within the <head> tag. The browser from <script> tags knows this is the JavaScript code and how to interpret it. 

The <script> tag has two attributes. You can define scripting language and type by these attributes.

1. Language - With this attribute, you can define scripting language such as PHP and JavaScript, etc.

2. Type - This attribute is used to define the type of file, such as text/JavaScript

With the help of these attributes, you can only define the <script> tag. An example of this has been given below.

               <script language = "javascript" type = "text /javascript">

                       // Here you can write the JavaScript code.

               </script>

This is a standard syntax for defining JavaScript. You can define <script> tag even without the language attribute. But adding "type" attribute is mandatory.

The first program of JavaScript

Create a file named “javascript1stProgram.html”.

<!DOCTYPE html>

<html>

<head>

<title> First JavaScript program </title>
</head>
<body>
<script type = "text/javascript">
// Print message on the webpage
document.write ("This is the first example of the JavaScript language");
</script>

</body>

</html>

In the above program, I have added some JavaScript code in an HTML file. This is a very simple program. The first <script> tag has been defined in the <body> section. The “write” function has been called in the <script> tag.

A string is passed in this function. This function shows that string on the web page. Similarly, you can add JavaScript anywhere in the program. 

The above script will generate the below output in the web page.

      

Adding Comments to a JavaScript Program

JavaScript has two types of comment single line and multi-line. These are given below.

Single Line Comment

You can add Single line comments by the double backslash (//). An example of this is given below.

               <script type = "text/javascript">

                     // this is a single comment

                        Some other JavaScript code will be here

               </ script>

Multi-line Comment

You can add Multi-line comment by a backslash (/) and *. An example is given below.

               <script type = "text/JavaScript">

                      / * More than one line comment is called

                           Multi-line comment * /

                           Some other JavaScript code will be here

               </ script>

If you want to store a value, you will have to create a variable for it. This concept is the same in all programming languages.

A variable is like a box in which you can store a value and as long as your program has executed this value will be in the computer memory. If you want, it can also be permanently stored. 

The method of creating variables in each programming language can be different. But creating the variables always has the same intention and it is to store the value and perform some operations on it.

Creating variables in JavaScript differs from common languages. You do not need to define the data type in JavaScript. The value that you enter in the variable, JavaScript automatically judge the data type on the base of that value.

Therefore it is considered very easy to create variables in JavaScript. Before you can create variables, let us know about some rules for creating it.

The rule for creating variables

The name of your variable should begin with a letter, underscore, or $ sign. You can also use numbers like 1,2,3,4,5,6,7,8,9 in the names of variables.

The JavaScript Variables is case sensitive. Here you can see “Name” and “name” will be considered as two different variables because of capital “N” and small “n”.

Creating Variables in JavaScript

As I told you before, creating variables in JavaScript is very easy. For this, you use the “var” keyword. The structure of creating variables in JavaScript is given below.

                   var variableName = value;

An interesting concept is found in JavaScript. Adding a semicolon after any statement in JavaScript is optional. Errors are not generated even if you do not add a semicolon after a statement. Let us now understand with an example creating variables in JavaScript.

Create a file with the named JsVarExample.html

<!DOCTYPE html>

<html>

<head>

<title> Example of JavaScript variables </title>
</head>
<body>
<script type = "text/javascript">
// Create a variable
var name = "John Ibraham";
var age = 25;
// Print the value of variable
document.write ("Name is:" + name);
document.write ("<br>");
document.write ("Age is:" + age);      
</script>

</body>

</html>

The above script will generate the below web page.

Types of Variables in JavaScript

There are two types of variables in JavaScript. These have been classified according to the variable scope whose are given below.

JavaScript Local Variable

Local variables are those variables whose scope is limited in a function. Such variables are created inside a function and they only work in that function. You can’t use this outside of the Function. If you try to access local variables outside of their function, an undefined variable error is generated.

JavaScript Global Variable

Global variables are those variables whose scope is in the entire program. These variables are created at the beginning of the program and you can use anywhere in the whole program. The scope of such variables is in the entire program.

Introduction to JavaScript Operators

Values in variables are not stored only for the display but also perform different types of operations. You need operators to perform operations with the values of variables.

Suppose you want to add values of two variables. For this, you will use the addition (+) operator and if you want to compare the values of two variables, then you use relational operators. Let's learn about some important terms before learning more about operators.

What is Operand?

The operators which apply on variables or used with variables, those variables are called operands.  As you can see blow statement.

            Example:  c = a + b;

This statement has a and b operands. C is also an operand because equal to (=) operator is applied to it.

Types of operators

There are two types of JavaScript operator unary and binary. Unary operators are those operators that apply only to a variable such as NOT operator (~). These operators are applied only with one variable.

Binary operators are those operators whose execution requires two operators such as a (+) operator. You can’t use this operator with any single variable. This variable requires two operands to be executed.

JavaScript Arithmetic Operators

Arithmetic operators are used to performing arithmetical operations. These are given below.

Negation: This is a unary operator which is used to define opposite values of a variable. It is denoted by “-”.

           Example:   -a

Addition (+): It is used to add values of two or more variables.

           Example:   a + b

Subtraction (-): It is used to subtract the value of one variable from other variables.

           Example:  a - b 

Multiplication (*): Multiply values of 2 variables

           Example:  a * b

Division (/): Divide value of one variable by value of another variable

           Example:  a / b

Modulus (%): It is used to get the remainder.

           Example:  a % b

Exponentiation (**): It is used to get the value of the first variable

           Example:  a ** b

JavaScript Relational Operators

With relational operators, you can compare the values of two variables. These operators are mostly used in control statements when you try to build logic, such as which variable is big or small.

Equal (==): This operator compares the values of two variables for equality.

            Example:  a == b;

Not Equal (!=): This operator checks the values of two variables for non-equality.

            Example:  a != b;

Less than (<): This operator checks whether the variable of the left side is smaller than the variable of the right side or not.

            Example:  a < b;

Greater than (>): This operator checks whether the variable with the right side is bigger than the variable with the left side or not.

            Example:  a > b;

Less than equal to (<=): This operator checks whether the left side is equal to the variable of variable right or smaller than that or not.

            Example:  a <= b;

Greater than equal to (> =): This operator checks whether the variable of the right side is equal to or greater than the variable of the left side.

            Example:  a >= b;

JavaScript Bitwise Operators

Values of all the variables are converted into bits. With bitwise operators, you can perform operations on bits. These operators are also used in control statements. These are given below.

AND (&): In the values of both variables, which are common bits, they are returned.

            Example:  a & b

OR (|): All bits of both variables are returned.

            Example:  a | b

X-OR (^): Which is not in the variable of the right side but is returned in the variable of the left side.

             Example:  a ^ b

NOT (~): All bits are returned by an invert.

             Example:  ~ a

Shift Left (<<): All bits are shifted to the left of the value of the variable of the right side.

             Example:  a << b

Shift Right (>>): All bits are shifted to the right of the variable of the right side of the variable.

             Example:  >> b

JavaScript Logical Operators

Logic perform are performed by logical operators. These operators are used in control statements.

And (&&): If the value of both variables is true then this operator returns a true result.

             Example:  a && b

Or (||): Even if one of the two variables is true, the result is true.

             Example:  a || b

Not (!): If the variable is true then it will be false and if false, then it will be true.

             Example:  ! a

Xor: If either of the two is true then the result will be true. And if both false or both are true then the result is false.

             Example:  a Xor b

JavaScript Assignment Operators

The assignment operator is used to assigning the values of variables among themselves. Assignment operators those are used in JavaScript are given below. Simple assignment (=): This assigns the value left variable to the right variable.

             Example:  a = b;

Plus assignment (+=): This operator stores the left and right variables and adds it to the left variable.

             Example:  a += b;

Minus assignment (-=): This operator stores the side of the left side's variable and decreases the value of the variable of the right side and stores it in the variable of the result left-side.

             Example:  a -= b

Multiple assignments (*=): This operator stores the left and right side values of the variables by multiplying it in the variable of the result left-side.

             Example:  a *= b

Divide assignment (/=): It separates the value of the variable left side from the variable of the right side and stores it in the variable of the result left-side.

             Example:  a /= b

JavaScript Special Operators

JavaScript provides you with some special operators that are used to perform some special operations. Each of these operators fulfills a different purpose. These are being given below.

JavaScript Conditional Operator (?:)

The conditional operator is the same as if-else. You can also call it a one-line if else statement. It is very easy to use. A condition is given before the question mark. If this condition is true then the first statement of the colon and if it is false then the statement after the colon is returned as a result. 

An example of this is being given below.

            z = (10> 5)? 10: 5;

            document.write (z); // It will print 10

JavaScript Typeof Operator

JavaScript typeof operator is very helpful for debugging. The data type of any variable can be detected With this operator. This is very easy to use. After writing typeof, you write the value or variable that you want to find out. 

An example is given below.

             str = "hello world";

             document.write (typeof str);

JavaScript Void Operator

JavaScript void operator is used to discard the return value whenever you call a function in JavaScript. It's easy to use it. Whatever the operator's return value you want to discard, you pass this operator (...) as an argument.

An example of this is being given below.

           <a href="your-url" onClick="myFunction(...)"> Click here </a>

                                                                                                      NEXT -->>