JavaScripttttttttttttttttttttttttttttttttttttttt.ppt

JavaScript Basics
 It is a Scripting Language invented by Netscape in
1995.
 It is a client side scripting language.
 Client-side scripting generally refers to the class of computer programs on the web that
are executed client-side, by the user's web browser, instead of server-side (on the
web server). This type of computer programming is an important part of the
Dynamic HTML (DHTML) concept, enabling web pages to be scripted; that is, to have
different and changing content depending on user input, environmental conditions (such
as the time of day), or other variables
 Sometimes JavaScript is referred to as ECMAscript,
ECMA is European Computer Manufacturers
Association, it is a private organization that develops
standards in information and communication systems. 2

3
Understanding Javascript
 Javascript is used in million of web pages
to
 Improve design
 Validate forms
 Detect browsers
 Create cookies, etc.
 Javascript is designed to add interactivity
to HTML pages.

Advantages of Javascript
 An Interpreted language
 Embedded within HTML
 Minimal Syntax
 Quick Development
 Designed for Simple, Small programs
 Performance
 Procedural capabilities
 Handling User events
 Easy Debugging and Testing
 Platform Independent
4

5
JavaScript Basics
 Prerequisites for learning javascript.
 Knowledge of basic HTML.
 You need a web browser.
 You need a editor.
 No need of special h/w or s/w or a web server.

6
Understanding Javascript
 Javascript is a scripting language
developed by Netscape.
 We can use nodepad, dreamweaver,
golive .etc. for developing javascripts.

7
HTML and Javascript
 The easiest way to test a javascript program is
by putting it inside an HTML page and
loading it in a javascript enabled browser.
 You can integrate javascript code into the
HTML file in three ways
 Integrating under <head> tag
 Integrating under <body> tag
 Importing the external javascript.

8
HTML and Javascript
 Integrating script under the <head> tag
 Javascript in the head section will execute
when called i.e javascript in the HTML file
will execute immediately while the web
page loads into the web browser before
anyone uses it.

9
HTML and Javascript
 Integrating script under the <head> tag
 Syntax :-
<html>
<head>
<script type=“text/javascript” >
-----------------
</script>
</head>
<body> </body>
<html>

10
HTML and Javascript
 Integrating script under the <body> tag
 When you place the javascript code under
the <body> tag, this generates the content
of the web page. Javascript code executes
when the web page loads and so in the
body section.

11
HTML and Javascript
 Integrating script under the <body> tag
 Syntax :-
<html>
<head>
</head>
<body>
-----------------
</script>
</body>
<html>

12
HTML and Javascript
 Importing the External javascript
 You can import an external javascript file when
you want to run the same javascript file on
several HTML files without having to write the
same javascript code on every HTML file.
 Save the external javascript file with an extension
.js
 The external javascript file don’t have a <script>
tag.

13
HTML and Javascript
 Importing the external javascript
 Syntax :-
<html>
<head>
<script src=“first.js” >
-----------------
</script>
</head>
<body>
</body>
<html>

14
First javascript program
 The javascript code uses <script> </script> to
start and end code.
 The javascript code bounded with the script
tags is not HTML to be displayed but rather
script code to be processed.
 Javascript is not the only scripting laguage, so
you need to tell the browser which scripting
language you are using so it knows how to
process that language, so you specify <script
type =“text/javascript”>

15
 Including type attribute is a good
practice but browsers like firefox, IE,
etc. use javascript as their default script
language, so if we don’t specify type
attribute it assumes that the scripting
language is javascript.
 However use of type attribute is
specified as mandatory by W3C.

16
<html>
<head>
<title> first javascript </title>
</head>
<body>
document.write(“First javascript stmt.”);
</script>
</body>
<html>

17
Elements of javascript
 Javascript statement
 Every statement must end with a enter
key or a semicolon.
 Example :-
</script>

18
 Javascript statement blocks
 Several javascript statement grouped
together in a statement block.
 Its purpose is to execute sequence of
statements together.
 Statement block begins and ends with
a curly brackets.

19
 Example :-
{
document.write(“Second javascript stmt.”);
}
</script>

20
 Javascript comments
 It supports both single line and multi
line comments.
 // - Single line comments
 /*---------*/ - Multi line comments

21
 Example :-
<script type=“text/javascript” > // javascript code
{
/* This code will write two statement
in the single line. */
document.write(“Second javascript stmt.”);
}
</script>

22
Variables
 Basic syntax of variable declaration
 Syntax:- var variablename;
 Naming conventions
 Variable name can start with a alphabet or underscore.
( Rest characters can be number, alphabets, dollar symbol,
underscore )
 Do not use any special character other than dollar sign
($), underscore (_)
 Variable names are case-sensitive.
 Cannot contain blank spaces.
 Cannot contain any reserved word.

23
Variables
 Once you declare a variable you can
initialize the variable by assigning
value to it.
 Syntax:- variablename=value;
 You can also declare and initialize
the variable at the same time.
 Syntax:- var variablename=value;

24
Variables
<html>
<head> <title> javascript variables </title> </head>
<body>
<script type=“text/javascript”>
var bookname=“web tech and applications”;
var bookprice=390;
document.write(“bookname is: ”,bookname);
document.write(“bookprice is: ”,bookprice);
</script>
</body>
</html>

25
Datatypes
 Javascript supports three primitive types
of values and supports complex types
such as arrays and objects.
 Number :consists of integer and floating
point numbers.
 Integer literals can be represented in decimal,
hexadecimal and octal form.
 Floating literal consists of either a number
containg a decimal point or an integer
followed by an exponent.

26
Datatypes
 Boolean :consists of logical values
true and false.
 Javascript automatically converts
logical values true and false to 1 and 0
when they are used in numeric
expressions.

27
Datatypes
 String :consists of string values enclosed in
single or double quotes.
 Examples:
var first_name=“Bhoomi”;
var last_name=“Trivedi”;
var phone=4123778;
var bookprice=450.40;

28
Operators
 Arithmetic operators
Operator Action
+ Adds two numbers together
- Subtracts one number from another or changes
a number to its negative
* Multiplies two numbers together
/ Divides one number by another
% Produces the remainder after dividing one
number by another

29
Operators
 Addition
 JavaScript can add together two or more numeric variables and/or numeric
constants by combining them in an arithmetic expression with the
arithmetic operator for addition ( + ).
 The result derived from evaluating an expression can be assigned to a
variable for temporary memory storage.
 The following statements declare variables A and B and assign them
numeric values; variable Sum is declared for storing the result of
evaluating the arithmetic expression that adds these two variables.
 Example :-
var A = 20;
var B = 10;
var Sum = A + B;
var Sum1 = 1 + 2;
var Sum2 = A + 2 + B + 1;
var Sum3 = Sum1 + Sum2;

30
Operators
 Other Arithmetic Operators
Operator Action
++ X++
The equivalent of X = X + 1; add 1 to X, replacing the value of X
-- X--
The equivalent of X = X - 1; subtract 1 from X, replacing the value of X
+= X += Y
The equivalent of X = X + Y; add Y to X, replacing the value of X
-= X -= Y
The equivalent of X = X - Y; subtract Y from X, replacing the value of X
*= X *= Y
The equivalent of X = X * Y; multiply Y by X, replacing the value of X
/= X /= Y
The equivalent of X = X / Y; divide X by Y, replacing the value of X

31
Operators
 Relational Operators
Conditional
Operator
Comparison
== Equal operator.
value1 == value2
Tests whether value1 is the same as value2.
!= Not Equal operator.
value1 != value2
Tests whether value1 is different from value2.
< Less Than operator.
value1 < value2
Tests whether value1 is less than value2.
> Greater Than operator.
value1 > value2
Tests whether value1 is greater than value2.
<= Less Than or Equal To operator.
value1 <= value2
Tests whether value1 is less than or equal to value2.
>= Greater Than or Equal To operator.
value1 >= value2
Tests whether value1 is greater than or equal to value2.

32
Operators
 Logical Operators
Logical
Operator
Comparison
&& And operator.
condition1 && condition2
The condition1 and condition2 tests both must be true for
the expression to be evaluated as true.
|| Or operator.
condition1 || condition2
Either the condition1 or condition2 test must be true for
the expression to be evaluated as true.
! Not operator.
! condition
The expression result is set to its opposite; a true condition is
set to false and a false condition is set to true.

33
If condition
 Syntax:-
if (conditional expression)
{ do this... }

34
If – else condition
 Syntax:-
{ do this... }
else
{ do this... }

35
Nested if condition
 Syntax:-
{
{ do this... }
else
{ do this... }
}
else
{
{ do this... }
else
{ do this... }
}

36
If..else if condition
 Syntax:-
if (conditional expression1)
{ do this... }
else if (conditional expression2)
{ do this... }
else if (conditional expression3)
{ do this... }
...
[else
{do this...}]

37
The Switch Statement
 Syntax:-
switch (expression)
{
case "value1": do this...
break
case "value2": do this...
break
...
[ default: do this... ]
}

38
Iterations
 For statement:-
for (exp1;exp2;exp3)
{
do this...
}
exp1:initial expression
exp2:conditional expression
exp3:incremental expression

39
Iterations
 while statement:-
while (conditional expression)
{
do this...
}

40
Iterations
 do …. while statement
do
{
do this...
}while (conditional expression)

41
Array
 Array is a javascript object that is capable of
storing a sequence of values.
 Array declaration syntax :
 arrayname = new Array();
 arrayname = new Array(arraylength);
 In the first syntax an array of size zero is created.
 In the second syntax size is explicitly specified,
hence this array will hold a pre-determined set of
values.

42
Array
 Example :- bookname = new Array();
 Note :- Even if array is initially created of a fixed
length it may still be extended by referencing
elements that are outside the current size of the
array.
 Example :- cust_order = new Array();
cust_order[50] = “Mobile”;
cust_order[100] = “Laptop”;

43
Array
 Dense Array
 It is an array that has been created with each of
its elements being assigned a specific value.
 They are declared and initialized at the same
time.
 Syntax:- arrayname = new
Array(value0,value1,……..
…,valuen);

44
Array
 Array is a javascript object so it has several
methods associated with it.
 join() – it returns all elements of the array
joined together as a single string. By default “,”
is used as a separator or you can specify the
character to separate the array elements.
 reverse() – it reverses the order of the elements
in the array.

45
Array
 Array is a javascript object so it has also properties
associated with it.
 length - it determines the total number of
elements.
 Example :- length = myarray.length;
 Javascript values for array could me of any
type
 Example :-
myarr = new Array(“one”,”two”,1,2, true, new Array(3,4) );

46
Special Operators
 Strict Equal (= = =)
 Example “5” == 5 – true but “5” === 5 false
 It do not perform type conversion before testing for
equality.
 Ternary operators (? :)
 Example :- condition ? Exp1 : Exp2
 Delete operator
 It is used to delete a property of an object or an element
at an array index.
 Example :- delete arrayname[5]

47
Special Operators
 New operator
 It is used to create an instance of object type.
 Example :- myarr = new Array();
 Void operator
 It does not return a value
 It is specially used to return a URL with no value.

48
Functions
 Functions are blocks of JS code that perform a
specific task and often return a value.
 Functions can be
 Built in functions
 User defined functions
 Built in functions
 Examples :
 eval()
 parseInt()
 parseFloat()

49
Functions
 eval
 It is used to convert a string expression to a numeric value.
 Example :- var g_total = eval (“10 * 10 + 5”);
 parseInt
 It is used to convert a string value to an integer.
 It returns the first integer contained in a string or “0” if the
string does not begin with an integer.
 Example :-
var str2no = parseInt(“123xyz”); //123
var str2no =parseInt(“xyz”); //NaN

50
Functions
 parseFloat
 It returns the first floating point number contained in a
string or “0” if the string does not begin with a valid
floating point number.
 Example :-
var str2no = parseFloat(“1.2xyz”);
//1.2

51
Functions
 User Defined functions
 When defining user defined functions appropriate
syntax needs to be followed for
 Declaring functions
 Invoking / calling functions
 Passing values
 Returning and accepting the return values

52
Functions
 Function Declaration
 Functions are declared and created using the function
keyword.
 A function can comprise of the following things,
 function name
 List of parameters
 Block of javascript code that defines what the function
does.
 Syntax :-
function function_name( P1, P2,………..,Pn)
{
// Block of JS code
}

53
Functions
 Place of declaration
 Functions can be declared any where
within an HTML file.
 Preferably functions are created within the
<head> tags.
 This ensures that all functions will be
parsed before they are invoked or called.

54
Functions
 If the function is called before it is declared and
parsed, it will lead to an error condition as the
function has not been evaluated and the browser
does not know that it exists.
 Parsed:- it refers to the process by which the JS
interpreter evaluates each line of script code and
converts it into a pseudo – compiled byte code
before attempting to execute it.
 At this time syntax errors and other
programming mistakes that would prevent the
script from running are trapped and reported.

55
Functions
 Function call
 A variable or a static value can be passed to a
function.
 Example:-
printName(“Bhoomi”);
var firstname=“Bhoomi”;
printName(firstname);

56
Functions
 Variable Scope
 Any variable declared within the function is local to the function.
 Any variable declared outside the function is available to all the
statements within the JS code.
 Return Values
 Use return statement to return a value or expression that evaluates
to a single value.
function cube(n)
{
var ans = n * n * n;
return ans;
}

57
Functions
 Recursive Functions
 A function calls itself.
 Example :-
function factorial(n)
{
if ( n >1 )
return n * factorial(n-
1);
else
return n;
}

58
Dialog Boxes
 Dialog Boxes
 JS provides the ability to pickup user input, display text
to user by using dialog boxes.
 These dialog boxes appear as separate windows and
their content depends on the information provided by
the user.
 These content is independent of the text in the HTML
page containing the JS code and does not affect the
content of the page in any way.
 There are three types of dialog boxes provided by JS,
 Alert dialog box
 Prompt dialog box
 Confirm dialog box

59
Dialog Boxes
 Alert dialog box
 It is used to display small amount of “textual output” to
a browser window.
 The alert DB displays the string passed to the alert() as
well as an OK button.
 It is used to display a “cautionary message” or “some
information” for eg.
 Display message when incorrect information is keyed in a
form.
 Display an invalid result as an output of a calculation.
 A warning that a service is not available on a given date/time.

60
Dialog Boxes
 Syntax :- alert (“message”);
 Example :-
<html>
<body>
alert(“This is a alert dialog box”);
document.write(“Hello”);
</script>
</ body >
</html>

62
Dialog Boxes
 Prompt Dialog Box
 Alert DB simply displays information in the
browser and does not allow any interaction.
 It halts program execution until some action
takes place. (i.e. click OK button)
 But it cannot be used to take input from user
and display output based on it.
 For this we use prompt DB.

63
Dialog Boxes
 Prompt() display the following things
 A predefined message.
 A textbox ( with a optional value)
 A OK and CANCEL button.
 It also causes program execution to halt until action
takes place. (i.e OK or CANCEL )
 Clicking OK causes the text typed inside the textbox to be
passed to the program environment.
 Clicking CANCEL causes a Null value to be passed to the
environment.

64
Dialog Boxes
 Syntax :- prompt( “msg”,”<default value>”);
 Example :-
<html>
<body>
var name;
name=prompt(“Enter you Name: ”,” “ “);
document.write(“<br/>Name entered is :
”,name);
</script>
</ body >
</html>

65
Prompt Dialog Box : Example

66
Dialog Boxes
 Confirm Dialog Box
 Confirm() display the following things
 A predefined message.
 A OK and CANCEL button.
 It also causes program execution to halt until action
takes place. (i.e OK or CANCEL )
 Clicking OK causes true to be passed to the program, which
called Confirm DB.
 Clicking CANCEL causes false to be passed to the program
which called Confirm DB.

67
Dialog Boxes
 Confirm Dialog Box
 Syntax :- confirm( “message”);
 Example :-
<html>
<body>
var ans;
ans=confirm(“Are you sure want to exit ? “);
if ( ans == true )
document.write(“ you pressed OK”);
else
document.write(“ you pressed CANCEL”);
</script>
</ body >
</html>

68
Confirm Dialog Box : Example

Different types of Objects
 W3C DOM objects
 In recent browsers several objects are made available to allow
more control over a document.
 Eg :- navigator, window, document, form, etc.
 Built-in objects
 Several objects are part of JS language itself.
 These include the date, string and math objects.
 Custom objects
 JS allows you to create your own objects that can contain related
functionality.

W3C DOM objects
 To access a documents property or method
the general syntax is as follows,
 objectname.property
 objectname.method()
 Document object
 Property :- alinkcolor, bgcolor, fgcolor,
lastmodified, linkcolor, referrer, title, vlinkcolor.
 Example :- document.lastModified
 Method :- write(str) , writeln(str)

W3C DOM objects
 Form object
 Property :- action, method, length, name, target
 action- it points to the address of a program on the
web server that will process the form data captured
and being sent back.
 method – it is used to specify the method used to send
data captured by various form elements back to the
web server.
 Method :- reset(), submit()

HTML form elements
 text – a text field ( <input type=“text” /> )
 password – a password field in which
keystrokes appear as an asterisk ( <input
type=“password” /> )
 button – it provides a button other than submit
and reset. ( <input type=“button” /> )
 checkbox – a checkbox. ( <input
type=“checkbox” /> )
 radio – a radio button. ( <input type=“radio” /> )

HTML form elements
 reset – a reset button (<input type=“reset” /> )
 submit – a submit button ( <input type=“submit” /> )
 select – a selection list.
( <select> <option> option1 </option>
<option> option2 </option> </select> )
 textarea – a multiline text entry field. ( <textarea
rows=n cols=n > </textarea>)
 hidden – a field that may contain a value but is not
displayed within a form. ( <input type=“hidden”
/> )

Properties of form elements
Property
Name
Form element name Description
name Text,password,texta
rea,button,radio,che
ckbox,select,submit,
reset,hidden
Indicates the name of
the object.
value Text,password,texta
rea,button,radio,che
ckbox,select,submit,
reset,hidden
Indicates the current
value of the object.

Property Name Form element
name
Description
defaultvalue Text,
password,
textarea
Indicates the default
value of the object.
checked Radio button ,
checkbox
Indicates the current
status of the object.
(checked/unchecked)
defaultchecked Radio button ,
checkbox
Indicates the default
status of the element.

name
Description
length Radio Indicates the number of
radio buttons in the
group.
index Radio button ,
select
Indicates the index of
currently selected radio
button or option.
text select Contains the value of
the text.

name
Description
selectindex select Contains the index
number of the currently
selected option.
defaultselected select Indicated whether the
option is selected by
default in the option tag
selected select Indicates the current
status of the option.

Events on form elements
Method Name Form element
name
Description
onFocus() Text,
password,text
area
Fires when the form
cursor enters into an
object.
onBlur() Text,
password,text
area
Fires when the form
cursor is moved away
from an object.
onSelect() Text,
password,text
area
Fires when text is
selected in an object.

Events on form elements
Method Name Form element
name
Description
onChange() Text,
password,text
area
Fires when the text is
changed in an object.
onClick() Button, radio,
checkbox,
submit, reset
Fires when an object is
clicked on.

82
Events
 Events
Event Handler Event
onclick The mouse button is clicked and released with the cursor positioned
over a page element.
ondblclick The mouse button is double-clicked with the cursor positioned over a
page element.
onmousedown The mouse button is pressed down with the cursor positioned over a
page element.
onmousemove The mouse cursor is moved across the screen.
onmouseout The mouse cursor is moved off a page element.
onmouseover The mouse cursor is moved on top of a page element.
onmouseup The mouse button is released with the cursor positioned over a page
element.

Example
 Accept any mathematical expression evaluate and display the
result.
<html> <head> <script type =“text/javascript”>
function calculate(form){
form.result.value=eval(form.entry.value);
}
</script> </head>
<body>
<form> Enter a mathematical expression
<input type=“text” name=“entry” />
<input type=“button” value=“Calculate”
onClick=calculate(this.form) />
<input type=“text” name=“result” />
</form> </body> </html>

Built-in objects
 String object
 Date object
 Math object

String object
 Every string in an javascript is an object.
 So it also has property and methods.
 Property : length
Property Description Returns
length Returns the number of
characters in a string:
TextString.length
"A text string".length
13

Method Description Returns
bold() Changes the text in a string to bold.
TextString.bold()
"A text string".bold()
A text string
italics() Changes the text in a string to italic.
TextString.italics()
"A text string".italics()
A text string
strike() Changes the text in a string to strike-through
characters.
TextString.strike()
"A text string".strike()
A text string
sub() Changes the text in a string to subscript.
"Subscript" + TextString.sub()
"Subscript" + "A text string".sub()
SubscriptA text string
sup() Changes the text in a string to superscript.
"Superscript" + TextString.sup()
"Superscript" + "A text string".sup()
SuperscriptA text string
toLowerCase() Changes the text in a string to lower-case.
TextString.toLowerCase()
"A text string".toLowerCase()
a text string

toUpperCase() Changes the text in a string to upper-case.
TextString.toUpperCase()
"A text string".toUpperCase()
A TEXT STRING
fixed() Changes the text in a string to fixed
(monospace) font.
TextString.fixed()
"A text string".fixed()
A text string
fontcolor ("color") Changes the color of a string using color
names or hexadecimal values.
TextString.fontcolor("blue")
TextString.fontcolor("#0000FF")
"A text string".fontcolor("blue")
"A textstring".fontcolor("#0000FF")
A text string
fontsize("n") Changes the size of a string using font
sizes
1 (smallest) - 7 (largest).
TextString.fontsize("4")
"A text string".fontsize("4")
A text string
link("href") Formats a string as a link.
TextString.link("page.htm")
"A text string".link("page.htm")
A Text String

charAt(index) Returns the character at position index in
the string.
TextString.charAt(0)
"A text string".charAt(0)
A
charCodeAt(index) Returns the Unicode or ASCII decimal
value of the character at position index in
the string.
TextString.charCodeAt(0)
"A text string".charCodeAt(0)
65
indexOf("chars") Returns the starting position of substring
"chars" in the string. If "chars" does not
appear in the string, then -1 is returned.
TextString.indexOf("text")
"A text string".indexOf("text")
TextString.indexOf("taxt")
2
2
-1
lastIndexOf("chars") Returns the starting position of substring
"char" in the string, counting from end of
string. If "chars" does not appear in the
string, then -1 is returned.
TextString.lastIndexOf("text")
"A text string".lastIndexOf("text")
TextString.lastIndexOf("taxt")
2
2
-1

substr(index[,length]) Returns a substring starting at position index and
including length characters. If no length is given, the
remaining characters in the string are returned.
TextString.substring(7,6)
"A text string".substring(7,6)
string
substring(index1,index2) Returns a substring starting at position index1 and
ending at (but not including) position index2.
TextString.substring(7,13)
"A text string".substring(7,13)
string
toString() Converts a value to a string.
var NumberValue = 10
var StringValue = NumberValue.toString()
10
toFixed(n) Returns a string containing a number formatted to n
decimal digits.
var NumberValue = 10.12345
var StringValue = NumberValue.toFixed(2)
10.12
toPrecision(n) Returns a string containing a number formatted to n total
digits.
var NumberValue = 10.12345
var StringValue = NumberValue.toPrecision(5)
10.123

Math object
 It has following properties
 E - Euler's constant
 LN2 - Natural log of the value 2
 LN10 - Natural log of the value 10
 LOG2E - The base 2 log of euler's constant (e).
 LOG10E - The base 10 log of euler's constant (e).
 PI - 3.1428 - The number of radians in a 360
degree circle (there is no other circle than a 360
degree circle) is 2 times PI.
 SQRT2 - The square root of 2.

Math object
 It has following methods
Math.abs(expression) Returns the absolute
(non-negative) value of
a number:
Math.abs(-100)
100
Math.max(expr1,expr2) Returns the greater of
two numbers:
Math.max(10,20)
20
Math.min(expr1,expr2) Returns the lesser of
two numbers:
Math.min(10,20)
10

Math object
Math.round(expression) Returns a number rounded to nearest integer (.5
rounds up):
Math.round(1.25)
Math.round(1.50)
Math.round(1.75)
1
2
2
Math.ceil(expression) Returns the next highest integer value above a
number:
Math.ceil(3.25) 4
Math.floor(expression) Returns the next lowest integer value below a
number:
Math.floor(3.25) 3
Math.pow(x,y) Returns the y power of x:
Math.pow(2,3) 8
Math.sqrt(expression) Returns the square root of a number:
Math.sqrt(144) 12
Math.random() Returns a random number between zero and
one:
Math.random()
0.039160

Date object
getDate() Returns the day of the month.
TheDate.getDate() 4
getDay() Returns the numeric day of the week
(Sunday = 0).
TheDate.getDay()
4
getMonth() Returns the numeric month of the
year (January = 0).
TheDate.getMonth()
6
getYear()
getFullYear()
Returns the current year.
TheDate.getYear()
TheDate.getFullYear()
2013
2013

Date object
getTime() Returns the number of milliseconds
since January 1, 1970.
TheDate.getTime()
1280911017797
getHours() Returns the military hour of the day.
TheDate.getHours() 14
getMinutes() Returns the minute of the hour.
TheDate.getMinutes() 6
getSeconds() Returns the seconds of the minute.
TheDate.getSeconds() 57
getMilliseconds() Returns the milliseconds of the second.
TheDate.getMilliseconds() 797

Date object
toTimeString() Converts the military time to a
string.
TheDate.toTimeString()
14:06:57 UTC+0530
09:45:48 UTC+0530
toLocaleTimeString() Converts the time to a string.
TheDate.toLocaleTimeString()
2:06:57 PM
9:45:48 AM
toDateString() Converts the date to an
abbreviated string.
TheDate.toDateString()
Wed Jul 11 2012
toLocaleDateString() Converts the date to a string.
TheDate.toLocaleDateString()
Thursday, July 04, 2013
toLocaleString() Converts the date and time to a
string.
TheDate.toLocaleString()
Thursday, July 04, 2013
9:44:00 AM

Form Elements
TextBox <input type=“text” name=“txtusr” />
Properties Methods Events
name
value
defaultValue
focus()
blur()
select()
onFocus()
onBlur()
onSelect()
onChange()
Password <input type=“password” name=“p1” />
name
value
defaultValue
focus()
blur()
select()
onFocus()
onBlur()
onSelect()
onChange()

Form Elements
Button <input type=“button” value=“Click” />
Submit <input type=“submit” value=“Submit” />
Reset <input type=“reset” value=“Reset” />
name
value
click() onClick()

Form Elements
Checkbox <input type=“checkbox” name=“chk” />
name
value
checked
defaulChecked
click() onClick()
Radio <input type=“radio” name=“Radio” />
name
checked
index
length
click() onClick()

Form Elements
Textarea <textarea cols=20 rows=30> </textarea>
name
value
defaultValue
rows
cols
focus()
blur()
select()
onFocus()
onBlur()
onSelect()
Select and option
<select name=“city”> <option> Changa</select>
name
text
value
selected
index
selectedIndex
defaultSelected
focus()
blur()
change()
onFocus()
onBlur()
onChange()

Referencing Elements
 The other way of referencing elements is as
follows,
 Syntax :- <tag id="id"...>
 The assigned id value must be unique within
the document; that is, no two tags can have
the same id.
 Also, the id value must be composed of
alphabetic and numeric characters and must
not contain blank spaces.

Referencing Elements
 Once an id is assigned, then the HTML object
can be referenced in a script using the
notation as follows,
 Syntax :-
document.getElementById("id")

Getting and Setting Style
Properties
 The style properties associated with particular
HTML tags are referenced by appending the
property name to the end of the object referent.
 Syntax :-
 Get a current style property:
document.getElementById("id").style.property
 Set a different style property:
document.getElementById("id").style.property =
value

Getting and Setting Style
Properties
 Example :-
<h2 id="Head" style="color:blue">This is a
Heading</h2>
document.getElementById("Head").style.color
document.getElementById("Head").style.color
= "red"

Applying Methods
 Methods are behaviors that elements can
exhibit, it can be referenced in a script using
the notation as follows,
 Syntax:-
document.getElementById("id").method()
Enter your name: <input id="Box"
type="text"/>
document.getElementById("Box").focus()

Examples
<script type="text/javascript">
function ChangeStyle()
{
document.getElementById("MyTag").style.fontSize = "14pt";
document.getElementById("MyTag").style.fontWeight = "bold";
document.getElementById("MyTag").style.color = "red";
}
</script>
<body>
<p id="MyTag" onclick="ChangeStyle()">This is a
paragraph that has its styling changed.
</p>
</body>

Passing a Self Reference to a Function
 Use of the self-referent keyword this can be
combined with a function call to pass a self identity
to a function .
 Syntax :- eventHandler="functionName(this)“
function functionName(objectName)
{
objectName.style.property = "value";
objectName.style.property = "value";
}

Examples
function ChangeStyle(Mytag)
{
MyTag.style.fontSize = "14pt";
MyTag.style.fontWeight = "bold";
MyTag.style.color = "red";
}
</script>
<body>
<p onclick="ChangeStyle(this)">This is a
paragraph that has its styling changed.
</p>
</body>

Examples
function ChangeStyle(Sometag)
{
SomeTag.style.fontSize = "14pt";
SomeTag.style.fontWeight = "bold";
SomeTag.style.color = "red";
}
</script>
<body>
<p onclick="ChangeStyle(this)">This is para1.</p>
<p onclick="ChangeStyle(this)">This is para2.</p>
</body>

Navigator object
 The JavaScript navigator object is the object
representation of the client internet browser or web
navigator program that is being used. This object is
the top level object to all others
 Properties :- userAgent, appVersion, cookieEnabled
 Methods :- javaEnabled(), tiantEnabled()
 Navigator Objects
 Mime type
 Plugin
 Window

Window object
 The JavaScript Window Object is the highest level
JavaScript object which corresponds to the web
browser window.
 Internal Objects :- window, self, parent, top
Window
name
length
status
defaultStatus
alert()
confirm()
prompt()
blur()
close()
focus()
open()
close()
onBlur
onClick
onError
onFocus
onmouseout
onmouseover
onmouseup

History object
 The JavaScript History Object is property of the
window object.
 Properties :- current , length, next, previous
 Methods :- back(), forward(), go()
 Example :-
<FORM>
<INPUT TYPE="button" VALUE="Go Back"
onClick="history.back()“ />
</FORM>

Frame object
 The JavaScript Frame object is the representation of an HTML
FRAME which belongs to an HTML FRAMESET. The frameset
defines the set of frame that make up the browser window. The
JavaScript Frame object is a property of the window object.
Document
frames
name
length
parent
self
blur()
focus()
setInterval()
clearInterval()
setTimeout(exp, milliseconds)
clearTimeout(timeout)
onBlur
onFocus

Document object
 The JavaScript Document object is the container for
all HTML HEAD and BODY objects associated
within the HTML tags of an HTML document.
Document
alinkcolor
bgcolor, fgcolor,
lastmodified,
linkcolor, referrer,
title, vlinkcolor
write()
open()
close()
contextual()
onClick
ondblclick
ondragstart
onkeydown
onkeypress ,onkeyup
onmousedown ,onmousemove
onMouseOut ,onMouseOver

Image object
 The JavaScript Image Object is a property of the
document object.
Document
Properties Events
border, complete
height, hspace
lowsrc , name.
prototype , src
vspace
Width
onAbort
onError
onLoad

Javascript Global
 The JavaScript global properties and functions can be
used with all the built-in JavaScript objects.
Property Description
Infinity A numeric value that represents
positive/negative infinity
NaN "Not-a-Number" value
undefined Indicates that a variable has not been
assigned a value

Javascript Global
Function Description
decodeURI() Decodes a URI
decodeURIComponent() Decodes a URI component
encodeURI() Encodes a URI
encodeURIComponent() Encodes a URI component
escape() Encodes a string
eval() Evaluates a string and executes it as if it was script code
isFinite() Determines whether a value is a finite, legal number
isNaN() Determines whether a value is an illegal number
Number() Converts an object's value to a number
parseFloat() Parses a string and returns a floating point number
parseInt() Parses a string and returns an integer
String() Converts an object's value to a string
unescape() Decodes an encoded string

RegExp Object
 A regular expression is an object that describes a
pattern of characters.
 Regular expressions are used to perform pattern-
matching and "search-and-replace" functions on text.
 Regular expressions can be created in two ways as
follows,
 Syntax :-
 var txt= new RegExp(pattern,modifiers);
 var txt=/pattern/modifiers;

RegExp Object
 Modifiers
 Modifiers are used to perform case-insensitive and global
searches:
Modifier Description
i Perform case-insensitive matching
g Perform a global match (find all matches rather than
stopping after the first match)
m Perform multiline matching

RegExp Object
 Brackets
 Brackets are used to find a range of characters:
Expression Description
[abc] Find any character between the brackets
[^abc] Find any character not between the brackets
[0-9] Find any digit from 0 to 9
[A-Z] Find any character from uppercase A to uppercase Z
[a-z] Find any character from lowercase a to lowercase z
[A-z] Find any character from uppercase A to lowercase z
[adgk] Find any character in the given set
[^adgk] Find any character outside the given set
(red|blue|green) Find any of the alternatives specified

RegExp Object
 Metacharacters
 Metacharacters are characters with a special meaning:
Metacharacter Description
. Find a single character, except newline or line terminator
w Find a word character
W Find a non-word character
d Find a digit
D Find a non-digit character
s Find a whitespace character
S Find a non-whitespace character
b Find a match at the beginning/end of a word
B Find a match not at the beginning/end of a word

RegExp Object
Metacharacter Description
0 Find a NUL character
n Find a new line character
f Find a form feed character
r Find a carriage return character
t Find a tab character
v Find a vertical tab character
xxx Find the character specified by an octal number
xxx
xdd Find the character specified by a hexadecimal
number dd
uxxxx Find the Unicode character specified by a
hexadecimal number xxxx

RegExp Object
 Quantifiers
 * is short for {0,}. Matches zero or more times.
+ is short for {1,}. Matches one or more times.
? is short for {0,1}. Matches zero or one time.
E.g: /o{1,3}/ matches 'oo' in "tooth" and 'o' in "nose".
Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
{n} Matches exactly n times.
{n,} Matches n or more times.
{n,m} Matches n to m times.
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n

RegExp Object
 Regular Expression Method
Description Example
RegExp.exec(string)
Applies the RegExp to the given
string, and returns the match
information.
var match = /s(amp)le/i.exec("Sample text")
match then contains ["Sample","amp"]
RegExp.test(string)
Tests if the given string matches the
Regexp, and returns true if matching,
false if not.
var match = /sample/.test("Sample text")
match then contains false
String.match(pattern)
Matches given string with the RegExp.
With g flag returns an array containing
the matches, without g flag returns
just the first match or if no match is
found returns null.
var str = "Watch out for the rock!".match(/r?
or?/g)
str then contains ["o","or","ro"]

RegExp Object
 Regular Expression Method
Description Example
String.search(pattern)
Matches RegExp with string and
returns the index of the beginning of
the match if found, -1 if not.
var ndx = "Watch out for the
rock!".search(/for/)
ndx then contains 10
String.replace(pattern,string)
Replaces matches with the given
string, and returns the edited string.
var str = "Liorean said: My name is
Liorean!".replace(/Liorean/g,'Big Fat Dork')
str then contains "Big Fat Dork said: My
name is Big Fat Dork!"
String.split(pattern)
Cuts a string into an array, making
cuts at matches.
var str = "I am confused".split(/s/g)
str then contains ["I","am","confused"]

RegExp Object
 Regular Expression Examples
Test for Regular Expression
No white space charater S/;
No alphabets, or hyphen, or period
may appear in the string.
/[^a-z - .] /gi ;
No letters of digits may appear /[^a-z0-9]/gi ;
16 digit credit card number /^d{4} ( [-]? d{4} ){3}$ /

Custom Object
 Objects are useful to organize information.
 An object is just a special kind of data, with a collection of
properties and methods.
 Example
 A person is an object.
 Properties are the values associated with the object. The persons'
properties include name, height, weight, age, skin tone, eye color, etc.
 Objects also have methods. Methods are the actions that can be
performed on objects. The persons' methods could be eat(), sleep(),
work(), play(), etc.

Custom Object
 Properties
 The syntax for accessing a property of an object is:
 objName.propName
 You can add properties to an object by simply giving it a
value. Assume that the personObj already exists - you can
give it properties named firstname, lastname, age, and
eyecolor as follows:
 personObj.firstname=“Rajiv";
personObj.lastname=“Gandhi";
personObj.age=60;
personObj.eyecolor="black";
document.write(personObj.firstname);

Custom Object
 Methods
 An object can also contain methods.
 You can call a method with the following syntax:
 objName.methodName()
 Note: Parameters required for the method can be
passed between the parentheses.
 To call a method called sleep() for the personObj:
 personObj.sleep();

Custom Object
 Creating Your Own Objects
 There are different ways to create a new object:
1. Create a direct instance of an object
 The following code creates an instance of an object and
adds four properties to it:
 personObj=new Object();
personObj.firstname=“Rajiv";
personObj.lastname=“Gandhi";
personObj.age=60;
personObj.eyecolor="black";

Custom Object
2. Create a template of an object
 The template defines the structure of an object:
 function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
 Once you have the template, you can create new instances of the
object, like this:
 myson=new person(“Rahul",“Gandhi",30,"blue");
 mydaughter=new person(“Priyanka",“Gandhi",32,"green");

Custom Object
 You can also add some methods to the person object. This is
also done inside the template:
 function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.newlastname=newlastname;
}
 Note that methods are just functions attached to objects.
 function newlastname(newln)
{ this.newlastname=newln; }

Custom Object
 Example
 Create an object :- Circle
 It has property :- radius
 It has methods :-

computearea()

computediameter()
 Note area = pi r2
and diameter = radius * 2

Custom Object
<html> <head> <script type="text/javascript" >
function circle(r){
this.radius=r;
this.computearea=computearea;
this.computediameter=computediameter;
}
function computearea(){
var area=this.radius * this.radius * 3.14; return area
}
function computediameter(){
var diameter=this.radius * 2 ; return diameter;
}
</script></head>

Custom Object
<body>
<script type="text/javascript" >
var mycircle = new circle(20);
alert("Area is " + mycircle.computearea());
alert("Diameter is " + mycircle.computediameter());
</script>
</body>
</html>

Try and Catch
 The try...catch statement allows you to test a block of
code for errors.
 When browsing Web pages on the internet, we all
have seen a JavaScript alert box telling us there is a
runtime error and asking "Do you wish to debug?".
Error message like this may be useful for developers
but not for users. When users see errors, they often
leave the Web page.
 We will see how to catch and handle JavaScript error
messages, so you don't lose your audience.

Try and Catch
 The try...catch Statement
 The try block contains the code to be run, and the catch block
contains the code to be executed if an error occurs.
 Syntax :- try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
 Note that try...catch is written in lowercase letters. Using
uppercase letters will generate a JavaScript error!

Try and Catch
<html> <head> <script type="text/javascript">
var txt="";
function message() {
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="There was an error on this page.nn";
txt+="Click OK to continue.nn";
alert(txt);
}
}
</script></head><body>
<input type="button" value="View message" onclick="message()" />
</body></html>

Try and Catch
<html> <head> <script type="text/javascript">
var txt="";
function message(){
try { adddlert("Welcome guest!");
}
catch(err)
{ txt="There was an error on this page.nn";
txt+="Click OK to continue viewing this page,n";
txt+="or Cancel to return to the home page.nn";
if(!confirm(txt))
document.location.href="http://www.w3schools.com/";
}
}
</script></head> <body>
<input type="button" value="View message" onclick="message()" />
</body> </html>

Try and Catch
 JavaScript Throw Statement
 The throw statement allows you to create an exception.
 The throw statement allows you to create an exception. If
you use this statement together with the try...catch
statement, you can control program flow and generate
accurate error messages.
 Syntax :-
 throw(exception)
 The exception can be a string, integer, Boolean or an object.
 Note that throw is written in lowercase letters. Using
uppercase letters will generate a JavaScript error!

Try and Catch
<html> <body>
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
throw "Err1";
else if(x<0)
throw "Err2";
else if(isNaN(x))
throw "Err3";
}

Try and Catch
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high");
if(er=="Err2")
alert("Error! The value is too low");
if(er=="Err3")
alert("Error! The value is not a number");
}
</script>
</body>
</html>

JavaScript Special Characters
 In JavaScript you can add special characters to a text
string by using the backslash sign.
 Insert Special Characters
 The backslash () is used to insert apostrophes, new lines,
quotes, and other special characters into a text string.
 var txt=“ Welcome to “CICA” which is a part of
CHARUSAT”
document.write(txt);
 var txt=“ Welcome to “CICA” which is a part of
CHARUSAT”
document.write(txt);

JavaScript Special Characters
Code Outputs
' single quote
" double quote
& ampersand
backslash
n new line
r carriage return
t tab
b backspace
f form feed

JavaScript For...In Statement
 JavaScript For...In Statement
 The for...in statement loops through the elements of an
array or through the properties of an object.
 Syntax
 for (variable in object)
{
code to be executed
}

JavaScript For...In Statement
<html><body> <script type="text/javascript">
var x; var mycars = new Array();
mycars[0] = " BMW ";
mycars[1] = "Volvo";
mycars[2] = “Santro";
for (x in mycars)
document.write(mycars[x] + "<br />");
</script> </body></html>

JavaScripttttttttttttttttttttttttttttttttttttttt.ppt

More Related Content

Similar to JavaScripttttttttttttttttttttttttttttttttttttttt.ppt

Recently uploaded

JavaScripttttttttttttttttttttttttttttttttttttttt.ppt