Html session 12

Html session 12 :

Introduction
Consider an organization that provides a Web site that allows its customers to view their products. The company has received frequent customer feedbacks to provide the shopping facility online. Therefore, the company has decided to add the shopping facility in their Web site by creating dynamic Web pages. These Web pages will allow the user to shop for the products online. Here, the main task of the developer is to validate the customer’s inputs while they shop online. For example, details such as credit card number, email, and phone number entered by the customer must be in a proper format. Further, the developer also needs to retrieve the chosen products and their quantity to calculate the total cost.
The developer can handle all these critical tasks by using a scripting language. A scripting language refers to a set of instructions that provides some functionality when the user interacts with a Web page.

Scripting
Scripting refers to a series of commands that are interpreted and executed sequentially and immediately on occurrence of an event. This event is an action generated by a user while interacting with a Web page. Examples of events include button clicks, selecting a product from a menu, and so on. Scripting languages are often embedded in the HTML pages to change the behavior of the Web pages according to the user’s requirements.
There are two types of scripting languages. They are as follows:
Client-side Scripting
Refers to a script being executed on the client’s machine by the browser.
Server-side Scripting
Refers to a script being executed on a Web server to generate dynamic HTML pages.

JavaScript
JavaScript is a scripting language that allows you to build dynamic Web pages by ensuring maximum user interactivity.
JavaScript language is an object-based language, which means that it provides objects for specifying functionalities. In real life, an object is a visible entity such as a car or a table. Every object has some characteristics and is capable of performing certain actions. Similarly, in a scripting language, an object has a unique identity, state, and behavior.

The identity of the object distinguishes it from the other objects of the same type. The state of the object refers to its characteristics, whereas the behavior of the object consists of its possible actions.
The object stores its identity and state in fields (also called variables) and exposes its behavior through functions (actions).
Figure 12.3 displays the objects .
Versions of JavaScript
The first version of JavaScript was developed by Brendan Eich at Netscape in 1995 and was named JavaScript 1.0. Netscape Navigator 2.0 and Internet Explorer 3.0 supported JavaScript 1.0. Over the period, it gradually evolved with newer versions where each version provided better features and functionalities as compared to their previous versions.
 lists the various versions of JavaScript language.

Version Description  
1.1 Is supported from 3.0 version of the Netscape Navigator and Internet Explorer  
1.2 Is supported by the Internet Explorer from version 4.0  
1.3 Is supported by the Internet Explorer from version 5.0, Netscape Navigator from version 4.0, and Opera from version 5.0  
1.4 Is supported by servers of Netscape and Opera 6  
1.5 Is supported by the Internet Explorer from version 6.0, Netscape Navigator from version 6.0, and Mozilla Firefox from version 1.0

Version Description  
1.6 Is supported in the latest versions of the Internet Explorer and Netscape Navigator browsers. It is also supported by Mozilla Firefox from version 1.5  
1.7 Is supported in the latest versions of the Internet Explorer and Netscape Navigator browsers. It is also supported by Mozilla Firefox from version 2.0

Client-side JavaScript
JavaScript is a scripting language, which can be executed on the client-side and on the server-side. A client-side JavaScript (CSJS) is executed by the browser on the user’s workstation. A client-side script might contain instructions for the browser to handle user interactivity. These instructions might be to change the look or content of the Web page based on the user inputs. Examples include displaying a welcome page with the username, displaying date and time, validating that the required user details are filled, and so on.
A JavaScript is either embedded in an HTML page or is separately defined in a file, which is saved with .js extension. In client-side scripting, when an HTML is requested, the Web server sends all the required files to the user’s computer. The Web browser executes the script and displays the HTML page to the user along with any tangible output of the script.
Server-side JavaScript
A server-side JavaScript (SSJS) is executed by the Web server when an HTML page is requested by a user. The output of a server-side JavaScript is sent to the user and is displayed by the browser. In this case, a user might not be aware that a script was executed on the server to produce the desirable output.
A server-side JavaScript can interact with the database, fetch the required information specific to the user, and display it to the user. This means that server-side scripting fulfills the goal of providing dynamic content in Web pages. Unlike client-side JavaScript, HTML pages using server-side JavaScript are compiled into bytecode files on the server. Compilation is a process of converting the code into machine-independent code. This machine-independent code is known as the bytecode, which is an executable file. The Web server runs this executable to generate the desired output.
<Script> Tag
The <script> tag defines a script for an HTML page to make them interactive. The browser that supports scripts interprets and executes the script specified under the <script> tag when the page loads in the browser. You can directly insert a JavaScript code under the <script> tag. You can define multiple <script> tags either in the <head> or in the <body> elements of an HTML page. In HTML5, the type attribute specifying the scripting language is no longer required as it is optional.
Code Snippet 1 demonstrates the use of the <script> tag.


<!DOCTYPE html>
<html>
<head>
<script>
document.write(“Welcome to the Digital World”);
</script>
</head>
<body>
...
</body>
</html>

There are two main purposes of the <script> tag, which are as follows:
Identifies a given segment of script in the HTML page
Loads an external script file
12.8 Variables in JavaScript
A variable refers to a symbolic name that holds a value, which keeps changing. For example, age of a student and salary of an employee can be treated as variables. A real life example for variables includes the variables used in algebraic expressions that store values.
In JavaScript, a variable is a unique location in the computer’s memory that stores a value and has a unique name. The name of the variable is used to access and read the value stored in it. A variable can store different types of data such as a character, a number, or a string. Therefore, a variable acts as a container for saving and changing values during the execution of the script.

Declaring Variables
Declaring a variable refers to creating a variable by specifying the variable name. For example, you can create a variable named studName to store the name of a student. Here, the variable name studName is referred to as an identifier. In JavaScript, the var keyword is used to create a variable by allocating memory to it. A keyword is a reserved word that holds a special meaning in JavaScript.
You can initialize the variable at the time of creating the variable or later. Initialization refers to the task of assigning a value to a variable. Once the variable is initialized, you can change the value of a variable as required.
Variables allow keeping track of data during the execution of the script. While referring to a variable, you are referring to the value of that variable. In JavaScript, you can declare and initialize multiple variables in a single statement. Figure 12.6 displays how to declare variables.

The syntax demonstrates how to declare variables in JavaScript.
Syntax:
var <variableName>;
where,
var: Is the keyword in JavaScript.
variableName: Is a valid variable name.
The syntax demonstrates how to initialize variables in JavaScript.
Syntax:
<variableName> = <value>;
where,
=: Is the assignment operator used to assign values.

value: Is the data that is to be stored in the variable.
The syntax demonstrates how to declare and initialize multiple variables in a single statement, which are separated by commas.
Syntax:
var <variableName1> = <value1>, <variableName2> = <value2>;
Code Snippet 2 declares two variables namely, studID and studName and assign values to them.


var studID;
var studName;
studID = 50;
studName = “David Fernando”;

This code assigns values to studID and studName variables by using the assignment operator (=). The value named David Fernando is specified within double quotes.
Code Snippet 3 demonstrates how to declare and initialize multiple variables in a single statement in JavaScript.

Variable Naming Rules
You cannot refer to a variable until it is created in JavaScript. JavaScript is a case-sensitive language. This means that if you specify X and x as variables, both of them are treated as two different variables. Similarly, in JavaScript, there are certain rules, which must be followed while specifying variables names. These rules for a variable name are as follows:
Can consist of digits, underscore, and alphabets.
Must begin with a letter or the underscore character.
Cannot begin with a number and cannot contain any punctuation marks.
Cannot contain any kind of special characters such as +, *, %, and so on.
Cannot contain spaces.
Cannot be a JavaScript keyword.