Introduction to java script

INTRODUCTION TO
JAVASCRIPT
By,
Divya K.S

WHAT IS JAVASCRIPT?
JavaScript is a lightweight, interpreted programming language with
object-oriented capabilities .
It allows you to build interactivity into otherwise static HTML pages.
JavaScript is a lightweight, interpreted programming language
Designed for creating network-centric applications
Complementary to and integrated with Java
Complementary to and integrated with HTML.

ADVANTAGES OF JAVASCRIPT:
The merits of using JavaScript are:
Less server interaction: The user input can be validated before sending
the page to the server. This puts fewer loads on the server.
Immediate feedback to the visitors: Users don't have to wait for a page
reload to see if they have forgotten to enter something.
Increased interactivity: Interfaces can be created that react when the
user hovers over them with a mouse or activates them via the
keyboard.
Richer interfaces: JavaScript can include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

LIMITATIONS OF JAVASCRIPT:
Client-side JavaScript does not allow the reading or writing of
files. This has been kept for security reason.
JavaScript cannot be used for networking applications because
there is no such support available.
JavaScript doesn't have any multithreading or multiprocessing
capabilities.

DOCUMENT OBJECT
When an HTML document is loaded into a web browser, it becomes
a document object.
The document object is the root node of the HTML document and the
"owner" of all other nodes:
(element nodes, text nodes, attribute nodes, and comment nodes).
The document object provides properties and methods to access all node
objects, from within JavaScript.

SCRIPTS
The script tag takes two important attributes:
language: This attribute specifies what scripting language is
used. Its value will be javascript.
type: This attribute is what is now recommended to indicate
the scripting language in use and its value should be set to
"text/javascript".
So the JavaScript segment will be:

OPERATOR
Consider 4 + 5 =9. Here 4 and 5 are called operands and + is called
operator. JavaScript language supports following type of operators.
Arithmetic Operators
Comparision Operators
Logical (or Relational) Operators
Assignment Operators
Conditional (or ternary) Operators

ARITHMETIC OPERATORS:
Operator Description
+ Adds two operands
- Subtracts second operand from the first
* Multiply both operands
/ Divide numerator by denumerator
% Modulus Operator and remainder of after an integer division
++ Increment operator, increases integer value by one
-- Decrement operator, decreases integer value by one

COMPARISON OPERATORS:
Operato
r
Description
==
Checks if the values of two operands are equal or not, if yes then condition
becomes true.
!=
Checks if the values of two operands are equal or not, if values are not equal
then condition becomes true.
>
Checks if the value of left operand is greater than the value of right operand,
if yes then condition becomes true.
<
Checks if the value of left operand is less than the value of right operand, if
yes then condition becomes true.
>=
Checks if the value of left operand is greater than or equal to the value of
right operand, if yes then condition becomes true.
<=
Checks if the value of left operand is less than or equal to the value of right

LOGICAL OPERATORS:
&&
Called Logical AND operator. If both the operands are non zero
then then condition becomes true.
||
Called Logical OR Operator. If any of the two operands are non
zero then then condition becomes true.
!
Called Logical NOT Operator. Use to reverses the logical state of
its operand. If a condition is true then Logical NOT operator will
make false.

THE BITWISE OPERATORS:
&
Called Bitwise AND operator. It performs a Boolean AND operation on each bit of
its integer arguments.
|
Called Bitwise OR Operator. It performs a Boolean OR operation on each bit of its
integer arguments.
^
Called Bitwise XOR Operator. It performs a Boolean exclusive OR operation on
each bit of its integer arguments. Exclusive OR means that either operand one is
true or operand two is true, but not both.
~
Called Bitwise NOT Operator. It is a is a unary operator and operates by reversing
all bits in the operand.

ASSIGNMENT OPERATORS:
=
Simple assignment operator, Assigns values from right side operands to left side
operand
+=
Add AND assignment operator, It adds right operand to the left operand and assign the
result to left operand
- =
Subtract AND assignment operator, It subtracts right operand from the left operand
and assign the result to left operand
*=
Multiply AND assignment operator, It multiplies right operand with the left operand
and assign the result to left operand
/=
Divide AND assignment operator, It divides left operand with the right operand and
assign the result to left operand
%=
Modulus AND assignment operator, It takes modulus using two operands and assign
the result to left operand

MISCELLANEOUS OPERATOR
The Conditional Operator (? :)
The conditional operator first evaluates an expression for a true or false value and then
executes one of the two given statements depending upon the result of the evaluation. The
conditional operator has this syntax:
Operator Description Example
? : Conditional Expression
If Condition is true ? Then
value X : Otherwise value Y

CONDITIONAL STATEMENTS
JavaScript supports conditional statements which are used to perform
different actions based on different conditions. JavaScript supports
following forms of if..else statement:
if statement
if...else statement
if...else if... statement.

if statement:
The if statement is the fundamental control
statement that allows JavaScript to make decisions
and execute statements conditionally.
if (expression)
{
Statement(s) to be executed if
expression is true
}

EXAMPLE FOR IF STATEMENT
<script type="text/javascript">
var age = 20;
if( age > 18 )
{
document.write("<b>Qualifies for driving</b>");
}
</script>

IF...ELSE STATEMENT:
The if...else statement is the next form of control statement that allows JavaScript to execute statements in
more controlled way.
 Here JavaScript expression is evaluated. If the resulting value is true, given statement(s) in
the if block, are executed. If expression is false then given statement(s) in the else block, are
executed.
if (expression)
{
Statement(s) to be executed if expression is true}
Else
{
Statement(s) to be executed if expression is false
}

EXAMPLE FOR IF-ELSE STATEMENT
var age = 15;
if( age > 18 )
{
document.write("<b>Qualifies for driving</b>");
}
Else
{
document.write("<b>Does not qualify for driving</b>");
}
</script>

IF...ELSE IF... STATEMENT:
The if...else if... statement is the one level advance form of control statement that allows JavaScript to
make correct decision out of several conditions
if (expression 1)
{
Statement(s) to be executed if expression 1 is true
}
else if (expression 2)
{
}
else if (expression 3)
{
}
Else
{

EXAMPLE FOR IF-ELSE-IF STATEMENT
var book = "maths";
if( book == "history" )
{
document.write("<b>History Book</b>");
}
else if( book == "maths" )
{
document.write("<b>Maths Book</b>");
}
else if( book == "economics" )
{
document.write("<b>Economics Book</b>");
}
Else
{
document.write("<b>Unknown Book</b>");
}

SWITCH STATEMENT
The basic syntax of the switch statement is to give an expression to evaluate and several
different statements to execute based on the value of the expression. The interpreter
checks each case against the value of the expression until a match is found. If
nothing matches, a default condition will be used.
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}

EXAMPLE FOR SWITCH CASE STATEMENT
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{ case 'A': document.write("Good job<br />");
break;
case 'B': document.write("Pretty good<br />");
break;
case 'C': document.write("Passed<br />");
break;
case 'D': document.write("Not so good<br />");
break;
case 'F': document.write("Failed<br />");
break;
default: document.write("Unknown grade<br />");
}
document.write("Exiting switch block");
</script>

PRECACHING IMAGES WITH JAVASCRIPT
JavaScript helps you to load images into the browser’s memory cache without displaying
them.This images is the precaching images. And this technique preload the images into the
browser cache when the page initially loads.
Steps:
In order to precache an image we need to construct an image object in memory. Image object
created in memory is dissimilar from the document image object aka <IMG>tag.
HERE YOU GO:
Parameters to the constructor are the pixel width and height of the image
So the image object exists in memory. Now you can assign a filename or URL to the src
property of that image object:
1var myImage = new Image(width, height)
1myImage.src = “someImage.jpeg”

IMAGE ROLLOVERS
Image rollovers (sometimes also called Image Mouse Overs or mouse-overs) can be
found in numerous websites on the Internet today. You've probably seen them
around too: when you move your mouse cursor over a button on a particular
site, the button appears to be depressed. Move your mouse cursor away, and the
button pops out again.
Image rollovers are implemented by creating two images for the same button. The
first image is that which you want displayed when the mouse is not hovering
over it, typically the "undepressed" or "up" state of a button.
The second image is the graphic you want displayed when the mouse pointer is over
the graphic, usually showing the button in a depressed or "down" state.

FORM AND FORM ELEMENT
The use of HTML forms is basic to almost all JavaScript programs. This chapter explains
the details of programming with forms in JavaScript. It is assumed that you are
already somewhat familiar with the creation of HTML forms and with the input
elements that they contain.

FORM VALIDATION
Form validation normally used to occur at the server, after the client had entered
all the necessary data and then pressed the Submit button. If the data entered
by a client was incorrect or was simply missing, the server would have to send
all the data back to the client and request that the form be resubmitted with
correct information.

TYPES OF FORM VALIDATION
Form validation generally performs two functions.
Basic Validation − First of all, the form must be checked to
make sure all the mandatory fields are filled in. It would require just a loop
through each field in the form and check for data.
Data Format Validation − Secondly, the data that is entered
must be checked for correct form and value. Your code must include
appropriate logic to test correctness of data.

JAVASCRIPT OBJECTS
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects

JavaScript Primitives
A primitive value is a value that has no properties or methods.
A primitive data type is data that has a primitive value.
JavaScript defines 5 types of primitive data types:
• string
• number
• boolean
• null
• undefined

JAVASCRIPT BUILT-IN OBJECTS
1. Math object
These objects are used for simple data processing in the JavaScript
Math Property Description
SQRT2 Returns square root of 2.
PI Returns Π value.
E Returns Euler's Constant.
LN2 Returns natural logarithm of 2.
LN10 Returns natural logarithm of 10.
LOG2E Returns base 2 logarithm of E.
LOG10E Returns 10 logarithm of E.

MATH METHODS
Methods Description
abs() Returns the absolute value of a number.
acos() Returns the arccosine (in radians) of a number.
ceil() Returns the smallest integer greater than or equal to a number.
cos() Returns cosine of a number.
floor() Returns the largest integer less than or equal to a number.
log() Returns the natural logarithm (base E) of a number.
max() Returns the largest of zero or more numbers.
min() Returns the smallest of zero or more numbers.
pow() Returns base to the exponent power, that is base exponent.

2. DATE OBJECT
• Date is a data type.
• Date object manipulates date and time.
• Date() constructor takes no arguments.
• Date object allows you to get and set the year, month, day, hour, minute,
second and millisecond fields.
Syntax:
var variable_name = new Date();
Example:
var current_date = new Date();

Methods Description
Date() Returns current date and time.
getDate() Returns the day of the month.
getDay() Returns the day of the week.
getFullYear() Returns the year.
getHours() Returns the hour.
getMinutes() Returns the minutes.
getSeconds() Returns the seconds.
getMilliseconds() Returns the milliseconds.
getTime() Returns the number of milliseconds since January 1, 1970 at 12:00 AM.
getTimezoneOffset() Returns the timezone offset in minutes for the current locale.
getMonth() Returns the month.
setDate() Sets the day of the month.
setFullYear() Sets the full year.
setHours() Sets the hours.
setMinutes() Sets the minutes.
setSeconds() Sets the seconds.
setMilliseconds() Sets the milliseconds.
setTime() Sets the number of milliseconds since January 1, 1970 at 12:00 AM.
setMonth() Sets the month.
toDateString() Returns the date portion of the Date as a human-readable string.
toLocaleString() Returns the Date object as a string.
toGMTString() Returns the Date object as a string in GMT timezone.
valueOf() Returns the primitive value of a Date object.

3. String Object
• String objects are used to work with text.
• It works with a series of characters.
Syntax:
var variable_name = new String(string);
Example:
var s = new String(string);

STRING PROPERTIES
Properties Description
length It returns the length of the string.
prototype It allows you to add properties and
methods to an object.
constructor It returns the reference to the String
function that created the object.

Window Object
The window object represents an open window in a browser.
If a document contain frames (<iframe> tags), the browser creates one window
object for the HTML document, and one additional window object for each
frame.
Property Description
closed Returns a Boolean value indicating whether a window has been closed or not
console Returns a reference to the Console object, which provides methods for logging
information to the browser's console (See Console object)
defaultStatus Sets or returns the default text in the statusbar of a window
document Returns the Document object for the window (See Document object)
frameElement Returns the <iframe> element in which the current window is inserted
frames Returns all <iframe> elements in the current window

A Document object
A Document object represents the HTML document that is displayed in that window. The Document object has
various properties that refer to other objects which allow access to and modification of document content.
The way a document content is accessed and modified is called the Document Object Model, or DOM. The
Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a
Web document.
• Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
• Document object − Each HTML document that gets loaded into a window becomes a document object. The
document contains the contents of the page.
• Form object − Everything enclosed in the <form>...</form> tags sets the form object.
• Form control elements − The form object contains all the elements defined for that object such as text fields,
buttons, radio buttons, and checkboxes.

Introduction to java script

More Related Content

What's hot

Similar to Introduction to java script

More from DivyaKS12

Recently uploaded

Introduction to java script