java script basics

JavaScript Basics

JavaScript is a scripting language that will allow you to add real programming to your webpages.

JavaScript is lightweight programming language with object oriented capabilities.

JavaScript is executed directly in the browser and all main browsers contain a compiler or interpreter for JavaScript. JavaScript is case sensitive. JavaScript and Java are completely different programming languages even though they have a similar name.

You can put JavaScript into an external file or directly into the HTML page. If you put the

JavaScript code into the HTML page you can either put it into the header or in the body of

the HTML page. JavaScript which is embedded into an HTML page must be surrounded by

<script type="text/javascript"> </script> tags. The type is mandatory, even if the browser only

supports JavaScript.

JavaScript in the body will be executed while the page loads. JavaScript in the header will be

executed when other JavaScript functions in the body call them.

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.

The HTML Document Object Model (DOM) is the browser's view of an HTML page as an object hierarchy, starting with the browser window itself and moving deeper into the page, including all of the elements on the page and their attributes. Below is a simplified version of the HTML DOM.

javascript: Pseudo-ProtocolThe javascript: prefix is called a pseudo-protocol, because it mimics the protocol syntax (e.g, like http:, ftp:, andmailto:). It provides an easy way to test JavaScript on a page. It can also be used in links .

If you paste javascript:alert("Hello world!"); in the location bar of your browser than you will get an alert saying hello world.

Variables:-

Variables defined without the keyword "var" are global variables. Variables defined with "var" are

scoped according to their declaration, e.g. if you define a "var" in a function this variable is only

valid in this function.

It is good JavaScript practice to always use the "var" keyword for defining a variable in

JavaScript.

JavaScript has five basic types, Object,Array and the primitive types Number, String, and

Boolean.

Arrays:-

Arrays are Objects in JavaScript. We can use pop () and push (newValue) method to remove and

value at the end of array.

Syntax 1 var myArray = new Array()

Syntax 2 var myArray = new Array(sizeInteger)Syntax 3 var myArray = new Array(element0, element1, ..., elementN)

An array is a grouping of objects that can be accessed through subscripts. At its simplest, an array can be thought of as a list. In JavaScript, the first element of an array is considered to be at position zero (0), the second element at position one (1), and so on. Arrays are useful for storing related sets of data.

Array Properties and Methods

The tables below show some of the most useful array properties

and methods. All of the examples assume an array

called beatles that holds "Paul", "John", "George", and "Ringo".var beatles = ["Paul", "John", "George", "Ringo"];

Array Properties

Propert

yDescription

length

Holds the number of elements in an

array.

beatles.length // 4

Array Methods

Property Description

join(delimiter)

Returns a delimited list of the items indexed with

integers in the array. The default delimiter is a

comma.

beatles.join(":") // Paul:John:George:Ringo

push()Appends an element to an array.

beatles.push("Steve")

pop()

Removes the last item in an array and returns its

value.

beatles.pop() // Returns Ringo

shift()

Removes the first item in an array and returns its

value.

beatles.shift() // Returns Paul

slice(start,

end)

Returns a subarray from start to end. If end is left

out, it includes the remainder of the array.

beatles.slice(1 ,2) //Returns [John, George]

splice(start,

count)

Removes count items from start in the array and

returns the resulting array.

beatles.splice(1, 2) //Returns [Paul, Ringo]

sort()

Sorts an array alphabetically.

beatles.sort() //Returns [George, John, Paul,

Ringo]

Functions:-

A function in JavaScript encapsulates reusable code and is represented as Objects. Functions

can be directly called via other JavaScript code. It is recommended that you put functions in the

header of the HTML page.

Functions are declared via the “function” keyword. You can call a function directly, or use the

apply method on the function.

Syntax:

var variablename = new Function(Arg1, Arg2..., "Function Body");

Global Functions

JavaScript has a number of global functions. We will examine some

of them in this section. These all global function are the function of

window object. but as window is assumed if no object is referenced,

we don't need to explicitly write window.parseFloat() or window.isNaN().

Number(object)

The Number() function takes one argument: an object, which it

attempts to convert to a number. If it cannot, it returns NaN, for "Not

a Number."

String(object)

The String() function takes one argument: an object, which it

converts to a string.

isNaN(object)

The isNaN() function takes one argument: an object. The function

checks if the object is not a number (or cannot be converted to a

number). It returns true if the object is not a number and false if it is

a number.

parseFloat() and parseInt()

The parseFloat() function takes one argument: a string. If the string

begins with a number, the function reads through the string until it

finds the end of the number, hacks off the remainder of the string,

and returns the result. If the string does not begin with a number,

the function returns NaN.

The parseInt() function also takes one argument: a string. If the

string begins with an integer, the function reads through the string

until it finds the end of the integer, hacks off the remainder of the

string, and returns the result. If the string does not begin with an

integer, the function returns NaN.

HTML Events:-

Events are actions that can be detected by JavaScript.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element have a certain set of events which can trigger JavaScript Code.

Table 1. Events in JavaScript

Event Description

Onload Triggered then the user loads the page. The onload even can for example

Event Description

be used to check the visitors browser type.

onChange Called whenever a field is changed. Can for example be used to

validate an input field of a form.

onSubmit Called then a user clicks on the submit button of a form.

OnMouseOver and OnMouseOut Called then the mouse enters a certain element on the page or leaves it.

onFocus, onblur and onchange are mainly used in combination with validation of form fields.

onload and onunload are mainly used for popups that appear when the user enters or leaves the page.

onsubmit is used for one major purpose: To validate all fields within a form before actually submitting it.

onmouseover and onmouseout are mainly used for one purpose: To create animated buttons.

The following are the most important events recognized by JavaScript:

Event Detected when HTML tags

onfocus="" Form field gets focus select, text, textarea

onblur="" Form field loses focus select, text, textarea

onchange="" Content of a field changes select, text, textarea

onselect="" Text is selected text, textarea

onmouseover="" Mouse moves over a link A

onmouseout="" Mouse moves out of a link A

onclick="" Mouse clicks an objectA, button, checkbox, radio, reset, submit

onload="" Page is finished loading body, frameset

onunload="" Browser opens new document body, frameset

onSubmit="" Submit button is clicked form

Event Applies to Occurs whenEvent

handler

abort images User aborts the loading of an image (for example by clicking a link or clicking the Stop button)

onAbort

blur windows, frames, and all form elements User removes input focus from window, frame, or form element

onBlur

click buttons, radio buttons, checkboxes, submit buttons, reset buttons, links

User clicks form element or link onClick

change text fields, textareas, select lists User changes value of element onChange

error images, windows The loading of a document or image causes an error

onError

focus windows, frames, and all form elements User gives input focus to window, frame, or form element

onFocus

load document body User loads the page in the Navigator

onLoad

mouseout areas, links User moves mouse pointer out of an area (client-side image map) or link

onMouseout

mouseover links User moves mouse pointer over a link

onMouse- Over

reset forms User resets a form (clicks a Reset button)

onReset

select text fields, textareas User selects form element's input onSelect

field

submit submit button User submits a form onSubmit

unload document body User exits the page onUnload

Event

HandlerElements Supported Description

onblura, area, button, input, label, select,

textarea

the element lost

the focus

onchange input, select, textarea

the element

value was

changed

onclick

All elements exceptapplet, base,

basefont, bdo, br, font, frame,

frameset, head, html, iframe, isindex,

meta, param, script, style, title

a pointer button

was clicked

ondblclick





a pointer button

was double

clicked

onfocusa, area, button, input, label, select,

textarea

the element

received the

focus

onkeydown





a key was

pressed down

onkeypress





a key was

pressed and

released

Event


onkeyup





a key was

released

onload frameset

all the frames

have been

loaded

onload bodythe document

has been loaded

onmousedow

n





a pointer button

was pressed

down

onmousemov

e





a pointer was

moved within

onmouseout





a pointer was

moved away

onmouseove

r





a pointer was

moved onto

onmouseup





a pointer button

was released

onreset form the form was

Event


reset

onselect input, textareasome text was

selected

onsubmit formthe form was

submitted

onunload frameset

all the frames

have been

removed

onunload body

<noscript> Sorry...JavaScript is needed to go ahead.</noscript>

If users browser does not support JavaScript than the message inside <noscript> tag will be displayed in browser.

Window:- To open a new window follow this syntax.

var newWin = window.open(URL, name, features, replace);

All four parameters are options:

1. URL - the URL of the page to load. If it is left blank, a blank

window is open and can be written to

with newWin.document.write().

2. name - the target attribute of the window. This can be used to

reuse an existing window if it is open.

3. features - a comma-delimited list of window features. Some of

the most common are:

1. height - the height of the window

2. width - the width of the window

3. left - the left position of the window

4. top - the top position of the window

5. location - whether or not to include the location bar

6. menubar - whether or not to include the menubar

7. resizable - whether or not the window should be

resizable

8. scrollbars - whether or not to include scrollbars

9. status - whether or not to include the status bar

10. toolbar - whether or not to include the toolbar

4. replace - true or false. If set to true, the new page replaces the

current page (if there is one) in the browser window's history.

The height, width, left, and top features should be set in pixels.

The location, menubar, resizable, scrollbars, status,

and toolbar features are boolean values: "true" or "false", "yes" or

"no", or "1" or "0" will work.

Timers

Timers are started and stopped with the following four methods of

the window object:

1. setTimeout(code_to_execute, wait_time_in_milliseconds)

2. clearTimeout(timer)

3. setInterval(code_to_execute, interval_in_milliseconds)

4. clearInterval(interval)

Built-In JavaScript Objects:- Mostly used built-in object are String, Math and

Date.

String

Some common string properties and methods are shown below. In

all the examples, the variable webucator is the string "Webucator".

Common String Properties


lengthRead-only value containing the number of characters

in the string.12

webucator.length//Returns 9

Common String Methods

Method Description

charAt(position)

Returns the character at the

specified position. Note that it is

zero-based, so the first letter in the

string is at position 0.12

webucator.charAt(4)//Returns c (the fifth character)


Method Description

charCodeAt(position)

Returns the Unicode character code

of the character at the specified

position.

12

webucator.charCodeAt(4)//Returns 99

fromCharCode(characterCodes)

Returns the text representation of

the specified comma-delimited

character codes. Used

with String rather than a specific

String object.

12

String.fromCharCode(169)//Returns ©

indexOf(substring,startPositio

n)

Searches

from startPosition forsubstring.

Returns the position at which

thesubstring is found. If substring is

not found, returns -1.

12345

webucator.indexOf("cat");//Returns 4

webucator.indexOf("cat", 5);//Returns -1


Method Description

lastIndexOf(substring,endPosit

ion)

Searches from the end of the string

forsubstring until endPosition is

reached. Returns the position at

which the substringis found.

If substring is not found, returns -1.

12345

webucator.lastIndexOf("cat");//Returns 4

webucator.lastIndexOf("cat", 5);//Returns 4

substring(startPosition,endPos

ition)

Returns the substring beginning

atstartPosition and ending with the

character

before endPosition. endPosition is

optional. If it is excluded, the

substring continues to the end of

the string.

12345

webucator.substring(4, 7);//Returns cat

webucator.substring(4);//Returns cator


Method Description

substr(startPosition,length)

Returns the substring

of Length characters beginning

at startPosition. length is optional.

If it is excluded, the substring

continues to the end of the string.

12345

webucator.substr(4, 3);//Returns cat

webucator.substr(4);//Returns cator

slice(startPosition,endPositio

n)

Same assubstring(startPosition,

endPosition).

12

webucator.slice(4, 7);//Returns cat

slice(startPosition,positionFr

omEnd)

positionFromEnd is a negative

integer. Returns the substring

beginning atstartPosition and

ending positionFromEndcharacters

from the end of the string.

12

webucator.slice(4, -2);//Returns cat


Method Description

split(delimiter)Returns an array by splitting a

string on the specified delimiter.

1234

var s = "A,B,C,D";var a = s.split(",");document.write(a[2]);//Returns C

toLowerCase()Returns the string in all lowercase

letters.

12

webucator.toLowerCase()//Returns webucator

toUpperCase()Returns the string in all uppercase

letters.

12

webucator.toUpperCase();//Returns WEBUCATOR

Math

The Math object is a built-in static object. The Math object's properties

and methods can be accessed directly (e.g, Math.PI) and are used for

performing complex math operations. Here are two commonly used

properties of the Math object.

Common Math Properties


Math.PI Pi (Π)

1

2

Math.PI;

//3.141592653589793

Math.SQRT2 Square root of 2.

1

2

Math.SQRT2;

//1.4142135623730951

Below are some of the common Math methods that you can use to

perform mathematical operations:

Common Math Methods

Method Description

Math.abs(number) Absolute value of number.

1

2

Math.abs(-12);

//Returns 12

Math.ceil(number) number rounded up.

1 Math.ceil(5.4);

Common Math Methods

Method Description

2 //Returns 6

Math.floor(number) number rounded down.

1

2

Math.floor(5.6);

//Returns 5

Math.max(numbers) Highest Number in numbers.

1

2

Math.max(2, 5, 9, 3);

//Returns 9

Math.min(numbers) Lowest Number in numbers.

1

2

Math.min(2, 5, 9, 3);

//Returns 2

Math.pow(number, power) number to the power of power.

1

2

Math.pow(2, 5);

//Returns 32

Math.round(number) Rounded number.

1

2

Math.round(2.5);

//Returns 3

Math.random() Random number between 0 and 1.

1

2

3

Math.random();

//Returns random

//number from 0 to 1

You can see these examples in a browser by

openingBuiltInObjects/Demos/MathPropertiesAndMethods.html. In

the next activity, we'll use the Math.round() and Math.random()

methods in a simple example.

Method for Generating Random Integers

You can easily generate random numbers in JavaScript using

the Math.random()method.

1

2

3

4

5

var low = 1;

var high = 10;

var rndDec = Math.random();

var rndInt = Math.floor(rndDec * (high - low + 1) + low);

Date

The Date object has methods for manipulating dates and times.

A few things to note:

1. To create a Date object containing the current date and time,

the Date()constructor takes no arguments.

2. When passing the date as a string to the Date() constructor,

the time portion is optional. If it is not included, it defaults to

00:00:00. Also, other date formats are acceptable (e.g,

"4/14/2011" and "14-04-2011").

3. When passing date parts to

the Date() constructor, dd, hh, mm, ss, and ms are all optional.

The default of each is 0.

4. Months are numbered from 0 (January) to 11 (December).

5. Some common date methods are shown below. In all the

examples, the variablerightNow contains "Thu Apr 14

00:23:54:650 EDT 2011".

Common Date Methods

Method Description

getDate() Returns the day of the month (1-31).12

rightNow.getDate();//Returns 14

getDay()Returns the day of the week as a number (0-6,

0=Sunday, 6=Saturday).12

rightNow.getDay();//Returns 4

getMonth()Returns the month as a number (0-11, 0=January,

11=December).12

rightNow.getMonth();//Returns 3

getFullYear() Returns the four-digit year.12

rightNow.getFullYear();//Returns 2011

getHours() Returns the hour (0-23).12

rightNow.getHours();//Returns 0

getMinutes() Returns the minute (0-59).12

rightNow.getMinutes();//Returns 23

getSeconds() Returns the second (0-59).12

rightNow.getSeconds();//Returns 54

getMilliseconds

()Returns the millisecond (0-999).

12

rightNow.getMilliseconds();//Returns 650

Common Date Methods

Method Description

getTime()Returns the number of milliseconds since midnight

January 1, 1970.12

rightNow.getTime();//Returns 1113452634650

getTimezoneOffs

et()

Returns the time difference in minutes between

the user's computer and GMT.12

rightNow.getTimezoneOffset();//Returns 240

toLocaleString(

)Returns the Date object as a string.

123

rightNow.toLocaleString();//Returns Thursday, April 14,//2011 12:23:54 AM

toGMTString()Returns the Date object as a string in GMT

timezone.123

rightNow.toGMTString();//Returns Thu, 14 Apr 2011//04:23:54 UTC

typeof Operator

The typeof operator is used to find out the data type of a variable.

Experienced

java script basics

Technology