32 Introduction to JAVA Script

Himanshu Patel

epgp books

 

 

 

What is java script?

 

JavaScript is an object-oriented language that allows creation of interactive Web Pages. JavaScript allows user entries, which are loaded into an HTML form to be processed as required. This empowers a web site to return site information according to a user’s requests.

 

Java Script has following capabilities

  • Manipulation of an HTML element
  • Event handling: respond to user interaction with form element
  • Validation: preprocessing data on the client before submission
  • To know browser capabilities
  • To create cookies
  • Asynchronous processing: loading data from server without reload entire page
  • Animation

 

Software required for using Java Script

 

The best way to learn JavaScript is to type the HTML and scripting code into documents in a any text editor. To test your code you require web browser. Most of the browser available today supports JavaScript.

 

Steps for writing and executing JavaScript

 

1) Write HTML And script code into source document in a text editor

2) Save the source document file

3) Open any browser and open source document in browser and view output

Please note that, if you made any change in your source document then you must save it then refresh browser to view the changes.

 

The <Script> Tag

 

To include JavaScript in HTML document, you must enclose it inside <Script>…</Script> tag, you must set type attribute of script tag to text/JavaScript. You can write script anywhere within HTML document but it is preferable to write it inside <Head> … </Head> tags.

 

Example:

 

<  HTML>

<HEAD>

<TITLE>Home Page</TITLE> <SCRIPT type = “text/javascript”>

//   JavaScript Statements…

</SCRIPT>

</HEAD>

<BODY> </BODY>

</HTML>

 

JavaScript Statement

 

The JavaScript statement does something relevant to the script such as follows:

  • Define or initialize variable
  • Assign/change the  value of a property or variable
  • Invoke object method
  • Call function
  • Decision making and looping

 

Value/Data types in Java Script

 

Every statement in JavaScript deals with different types of data such as number, text, date, Boolean values etc. JavaScript supports four primitive types of values and supports complex types such as arrays and objects. Primitive types are types that can be assigned a single literal value such as number, string or Boolean value.

 

The primitive data types that JavaScript supports are:

  1. Number: Consists of integer and floating point numbers and the special NaN (not a number) value. Integer literals can be represented in JavaScript in decimal, hexadecimal, and octal form. Floating-point literals are used to represent numbers that require the use of a decimal point Example 33, 12.10, -35.8, 2E3, Ox5F
  2. Boolean: Consists of the logical value true and false. JavaScript supports a pure Boolean type that consists of the two values true and false. Logical operators can be used in Boolean expressions. JavaScript automatically converts the Boolean values true and false into 1 and 0 when they are uses in numerical expressions.
  3. String: Consists of string values that are enclosed in single or double quotes. JavaScript provides built-in support for strings. A string is a sequence of zero or more characters that are enclosed by double (“) or single (‘) quotes. If a string begins with a double quote it must end with a double quote. If a string begins with a single quote it must end with a single quote. For example, “Rahul”, ’24, Sanjay Nagar, Bangalore’
  4. Null: Consists of a single value, null, which identifies a null, empty or nonexistent reference. The null value is common to all JavaScript types. It is used to set a variable to an initial value that is different from other valid values. Use of the null value prevents the sort of errors that result from using un-initialized variables. The null value is automatically converted to default values of other types when used in an expression.

 

JavaScript Identifier

 

JavaScript variables or function must be identified with unique names called identifiers. The JavaScript identifiers are case-sensitive. The general rules for constructing names for variables or function are:  Identifier can contain letters, digits, underscores, and dollar signs.

  • Identifier must begin with a letter
  • Identifier can also begin with $ and _ (but we will not use it in this tutorial)
  • Identifier are case sensitive (y and Y are different variables)
  • Keyword cannot be used as names

 

Operators supported by JavaScript

 

An operator is used to transform one or more values into a single resultant value. The value to which the operator is applied is referred to as operands. A combination of an operator and its operands is referred to as an expression. Following are the types of operators available in JavaScript with symbol, meaning and example.

The equal (==) and not equal (!=) operators perform type conversions before testing for equality. For example, “5” == 5 evaluate to true.

 

The strictly equal (===) and the strictly not equal (!===) do not perfom1 type conversions before testing for equality. For example, “5” === 5 will return the value false

 

String Operators

  • String operators are those operators that are used to perform operations on strings. Currently JavaScript supports only the string concatenation (+) operator. This operator is used to join two strings. For example, “pq” + “ab” produces “pqab”.

     Assignment Operators

  • The assignment operator is used to update the value of a variable. Some assignment operators are combined with other operators to perform a computation on the value contained in a variable and then update the variable with the new value. Some of the assignment operators supported by JavaScript are:

 

JavaScript Statement

 

A statement is the basic action item in any program code. In effect, each statement is telling the computer to do something. Statements can be divided up into five categories:

  • Control structure of Java Script
  • Conditional
  • Loops
  • Object manipulation
  • Comments
  • Expressions

 

Control structures are used to make decision and loop around to repeat statements. JavaScript provide various kinds of control structure for handling various programming situations. Following are the examples of different types of statement with their purpose and example.

 

Expression

 

An expression is anything that returns a value. Following table lists the common types of expressions, along with an example of their use.

JavaScript’s Built-in Classes

Following are some of the classes exist in JavaScript along with a brief description of the functionality each class provides

 

String Object’s Built-in Functionality

 

String objects are given a number of predefined functions, which allow you to perform all sorts of manipulations on them

 

Arrays

 

Array is most useful construct in JavaScript. Array is collection of similar types of data. You can access data inside array using array name and index which starts from zero. Array is an object in JavaScript. Data that can be stored inside array can be any data type including object.

 

Creating array and accessing array data

 

To create array syntax is: var <var-name> = new Array(size);

 

Here var-name is the name of variable and size refers to number of array elements. Example: var a = new Array(5);

 

The above statement will create array with name a and no of elements inside array is five.

 

To access element of an array we can use index. For example following statement will assign value “Himanshu” to first element of an array

 

A[0]=”Himanshu”;

 

Following are different methods of array with its purpose.

Functions in JavaScript

 

A function is a definition of a set of action. Function can be invoked by JavaScript Statement defined somewhere else. A function can return a value to the calling statement. The objective of function is to provide reusability. There are two types of functions available

 

1) Global function: readily available to use inside JavaScript

2) User defined function: Defined by user. Syntax for user defined function is:

 

function function_name ([parameter1]…[parameterN]) { // statements

}

Example:

function helloworld()

{

document.write(“Hello World !”);

}

Following are some example of global functions with its description to use.

 

The Document Object Model (DOM)

 

Document Object Model (DOM) is the World Wide Web Consortium (W3C) standard for accessing documents. It is a platform and language-neutral interface and allows programs and scripts to dynamically access and update the content, structure, and style of a document. Following figure represents partial Document Object Model hierarchy.

 

 

For example if we have HTML Text element with name property set to “sname” and we want to convert it into uppercase. We can write down following code inside JavaScript to do the same.

 

var sname = document.getElementById(“sname”);

sname.value = sname.value.toUpperCase();

 

Event

 

JavaScript’s interaction with HTML is handled through events. Events are actions that take place in a document by the user. Some Example of events includes when the page opens or closed, clicking a button and typing text in text field. The code which is used to handle event is known as Event handlers. Following are example of different types of event and brief description.

 

you can view video on Introduction to JAVA Script

References

 

1) JavaScript: The Complete Reference, Second Edition, by Thomas Powell and Fritz Schneider, McGraw-Hill/Osborne

2) JavaScript Bible, Wiley Publishing, Danny Goodman with Michael Morrison

3) Beginning JavaScript with DOM Scripting and Ajax From Novice to Professional The ultimate guide to modern JavaScript development, Christian Heilmann, Apress