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-Protocol
The 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
PropertyDescription
length
Holds the numberof 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

Array Methods
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 assumedif no object is referenced, we don't needto 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 numberand 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
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 object
A, 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 when
Event
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
field
onSelect
submit submit button User submits a form onSubmit
unload document body User exits the page onUnload
Event
Handler
Elements Supported Description
onblur
a, 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
onfocus
a, area, button, input, label, select,
textarea
the element
received the focus
onkeydown
a key was pressed
down

Event
Handler
onkeypress
a key was pressed
and released
onkeyup
a key was released
onload frameset
all the frames have
been loaded
onload body
the document has
been loaded
onmousedown
a pointer button
was pressed down
onmousemove
a pointer was
moved within
onmouseout
a pointer was
moved away
onmouseover
a pointer was
moved onto
onmouseup
a pointer button
was released

Event
Handler
onreset form the form was reset
onselect input, textarea
some text was
selected
onsubmit form
the 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 fourparameters 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 - whetheror not to include the location bar
6. menubar - whether or not to include the menubar
7. resizable - whetheror not the window shouldbe 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 shouldbe 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 fourmethods 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
length
Read-only value containing the numberof characters in the
string.
1
2
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.
1
2
webucator.charAt(4)
//Returns c (the fifth character)
charCodeAt(position)
Returns the Unicode character code of
the character at the specified position.

Method Description
1
2
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.
1
2
String.fromCharCode(169)
//Returns ©
indexOf(substring,startPosition)
Searches
from startPosition forsubstring.
Returns the position at which
thesubstring is found. If substring is not
found, returns -1.
1
2
3
4
5
webucator.indexOf("cat");
//Returns 4
webucator.indexOf("cat", 5);
//Returns -1
lastIndexOf(substring,endPosition
)
Searches from the end of the string
forsubstring until endPosition is
reached. Returns the position at which

Method Description
the substringis found. If substring is not
found, returns -1.
1
2
3
4
5
webucator.lastIndexOf("cat");
//Returns 4
webucator.lastIndexOf("cat", 5);
//Returns 4
substring(startPosition,endPositi
on)
Returns the substring beginning
atstartPosition andending with the
character
before endPosition. endPosition is
optional. If it is excluded, the substring
continues to the end of the string.
1
2
3
4
5
webucator.substring(4, 7);
//Returns cat
webucator.substring(4);
//Returns cator
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.
1
2
webucator.substr(4, 3);
//Returns cat

Method Description
3
4
5
webucator.substr(4);
//Returns cator
slice(startPosition,endPosition)
Same assubstring(startPosition,
endPosition).
1
2
webucator.slice(4, 7);
//Returns cat
slice(startPosition,positionFromE
nd)
positionFromEnd is a negative integer.
Returns the substring beginning
atstartPosition and
ending positionFromEndcharacters from
the end of the string.
1
2
webucator.slice(4, -2);
//Returns cat
split(delimiter)
Returns an array by splitting a string on
the specified delimiter.
1
2
3
4
var s = "A,B,C,D";
var a = s.split(",");
document.write(a[2]);
//Returns C

Method Description
toLowerCase() Returns the string in all lowercase letters.
1
2
webucator.toLowerCase()
//Returns webucator
toUpperCase() Returns the string in all uppercase letters.
1
2
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

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
2
Math.ceil(5.4);
//Returns 6
Math.floor(number) number rounded down.
1
2
Math.floor(5.6);
//Returns 5
Math.max(numbers) Highest Numberin numbers.
1 Math.max(2, 5, 9, 3);

Common Math Methods
Method Description
2 //Returns 9
Math.min(numbers) Lowest Numberin 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 numberbetween 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 var low = 1;

2
3
4
5
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()constructortakes 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).
1
2
rightNow.getDate();
//Returns 14
getDay() Returns the day of the week as a number (0-6, 0=Sunday,

Common Date Methods
Method Description
6=Saturday).
1
2
rightNow.getDay();
//Returns 4
getMonth()
Returns the month as a number(0-11, 0=January,
11=December).
1
2
rightNow.getMonth();
//Returns 3
getFullYear() Returns the four-digit year.
1
2
rightNow.getFullYear();
//Returns 2011
getHours() Returns the hour(0-23).
1
2
rightNow.getHours();
//Returns 0
getMinutes() Returns the minute (0-59).
1
2
rightNow.getMinutes();
//Returns 23
getSeconds() Returns the second (0-59).
1
2
rightNow.getSeconds();
//Returns 54
getMilliseconds() Returns the millisecond (0-999).
1
2
rightNow.getMilliseconds();
//Returns 650
getTime()
Returns the numberof milliseconds since midnight
January 1, 1970.
1
2
rightNow.getTime();
//Returns 1113452634650
getTimezoneOffset
()
Returns the time difference in minutes between the user's
computer and GMT.
1
2
rightNow.getTimezoneOffset();
//Returns 240
toLocaleString() Returns the Date object as a string.
1
2
3
rightNow.toLocaleString();
//Returns Thursday, April 14,
//2011 12:23:54 AM
toGMTString() Returns the Date object as a string in GMT timezone.
1
2
rightNow.toGMTString();
//Returns Thu, 14 Apr 2011
//04:23:54 UTC

Common Date Methods
Method Description
3
typeof Operator
The typeof operator is used to find out the data type of a variable.
Experienced

Java script basics

More Related Content

What's hot (20)

Similar to Java script basics (20)

Recently uploaded (20)

Java script basics