2. K.Sasidhar
Introduction to JavaScript
At First, Scripting Language developed by Sun Micro
Systems & Netscape jointly
JavaScript was designed to add interactivity to HTML
pages
JavaScript is a scripting language
A scripting language is a lightweight programming
language
JavaScript is usually embedded directly into HTML
pages
JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
3. K.Sasidhar
Importance / facts
Embedded into HTML
Browser Dependent
Interpreted Language
Loosely Typed Language
Object-Based Language
Event-Driven
Java Script is not java
4. K.Sasidhar
Importance ………
JavaScript is multifunctional
i) Enhance HTML Pages
ii) Develop client side applications
iii) creates extensions to a webserver
iv) Provide database connectivity without
using CGI
6. K.Sasidhar
JavaScript & HTML
JavaScript is integrated into HTML with
<script> and </script> tags.
Ex:
<script language = “JavaScript”>
</script>
9. K.Sasidhar
User Interaction
<HTML>
<HEAD><TITLE>
Dialog Box from a function</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function opendoc()
{
alert(“dialog called from function");
}
</script></head>
<body><b>Push button test</b>
<FORM METHOD=“POST”>
<INPUT TYPE=Button Name=“B1” VALUE=“push”
onClick=“opendoc()”></FORM>
</body>
</html>
10. K.Sasidhar
Identifiers, Keywords
Variables or methods or objects
Key words:
break, if, this, continue, in, time, else,
but, false, new, while, for, null, with,
function and return.
Literals:
Integer, Floating, Boolean, String,
Special characters.
11. K.Sasidhar
Variables
Variables are used to store the data.
Ex:
Var variablename;
Types: Number, Boolean, String,
Function, Object
A variable declared inside a function
has local scope.
12. K.Sasidhar
Global Scope
Global variables are accessible to all
parts of an application including
functions.
Global variable is created by initializing
it directly and not using the keyword
var.
Comments: // or /* ------*/
19. K.Sasidhar
for … in
for .. in loop works with arrays.
Ex: for (index in arrayName)
{
// some code
}
index is a variable that we declare prior to
loop, that will automatically populated with
the next index value in array.
20. K.Sasidhar
Example:
var myArray= new Array(“rama”, “ravana”);
var elementIndex;
for(elementIndex in myArray)
{
document. Write(myArray[elementIndex]);
}
21. K.Sasidhar
While Loop
While loop allows to test a condition and
keep on looping while it’s true.
While loop is more useful when you don’t
know how many you will need to loop.
22. K.Sasidhar
do-while, break and continue
break terminates the loop altogether
continue skips the remaining statements
for the current loop,
23. K.Sasidhar
Object Model
Java script is an object based
language.
It has no inheritance.
The relation between objects is not of
ancestor descendent but of container.
When an objects properties or methods
are referenced is used to denoted
ownership.
24. K.Sasidhar
Java Script Objects &
Corresponding HTML tags
Window ---
Frame <frame>
History ----
Location ----
Document <BODY>
form <FORM>
Button <Input type = “button”>
Checkbox < Input type = “checkbox” >
25. K.Sasidhar
Object Model Hierarchy
Window
history location
text
Text area
form
frameDocument
password
hidden
checkbox
Select
link
Reset
submit
button
anchorimage
radio
Navigator
String
Array
Date
Math
26. K.Sasidhar
Window object
Browser runs in a window.
This is highest level object.
It contains all other navigator object.
Two primary methods:
open() – name of html page, internal name of
window, host features of the window – menu
bar, tool bar, location, directories, document
and status.
These are properties of window object.
27. K.Sasidhar
Ex:
function a()
{
var k= window.open(“xyz.html”,
“mywin”,”menubar=yes, toolbar=yes,
location=yes directories=yes,
status=yes”);
}
28. K.Sasidhar
Properties with objects
window.status = “this is displayed on
the status bar”
HISTORY object
To navigate to back page
Window.history.back()
Window.history.forward()
31. K.Sasidhar
Location object properties
Href: complete URL
Protocol: initial element of a URL
Hostname: Host and domain name or
IP address
Host : Hostname: Port element of a
URL
Port: communications port of server
Pathname: path element of URL
32. K.Sasidhar
Continue….
Serach: query definition portion of URL
Hash : Anchor name of url (begin with #)
Opening a new URL:
Window.location=http://www.snist.com/
Window.location.href = “href://
www.snist.com/”
33. K.Sasidhar
Document object
This is important and is responsible for all the
actual content displayed on a given page.
We can display dynamic HTML pages & all user
interface elements.
Write() or writeln() method is used to display
content on page.
This is equivalent of HTML document.
It is a container for all HTML related objects
associated with <head><body> tags.
39. K.Sasidhar
Button
This is a generic object that we have to
add code for it to be useful.
Submit button is used to submit form data.
Reset button is for reset the values of all
controls of a form.
46. K.Sasidhar
Set Methods of Date object
setdate(value)
setHours(value)
setMinutes(value)
setMonth(value)
setSeconds(value)
setTime(value)
setYear(value)
47. K.Sasidhar
examples
var today = newDate()
Result = today.getDate()
Other formats:
getFullyear() returns a year in the yyyy
format
getActualMonth() returns the actual
numeric value for the month
getCalenderMonth() returns the name of
the month
48. K.Sasidhar
Date methods continue…..
getActualDay() returns the actual numeric
value of the day of the week
getCalenderDay() returns the name of the
day of the week
49. K.Sasidhar
Mathematical constants
Property Description
E Returns Euler's number (approx. 2.718)
LN2 Returns the natural logarithm of 2 (approx. 0.693)
LN10 Returns the natural logarithm of 10 (approx. 2.302)
LOG2E Returns the base-2 logarithm of E (approx. 1.442)
LOG10E Returns the base-10 logarithm of E (approx. 0.434)
PI Returns PI (approx. 3.14)
SQRT1_2 Returns the square root of 1/2 (approx. 0.707)
SQRT2 Returns the square root of 2 (approx. 1.414)
50. K.Sasidhar
Math Object
abs(value) absolute value
acos(value) arc cosine value in radians
asin(value) arc sine of value in radians
atan(value) arc tangent of value in radians
ceil(value)
Cos(value) cosine value
floor(value)
51. K.Sasidhar
Math continue
exp(value) Euler’s constant to the power of value
(euler’s constant: 2.718)
log(value)
max(value)
min(value)
pow(value)
round(value)
sin(value)
sqrt(value)
tan(value)
57. K.Sasidhar
Instantiating objects
new operator is used for instantiating objects
objectInstance= objectType(parameter1,
2,3,……)
Ex: creating a book object using the
following code
dbBook=new book(“beginning javascript”,
“paul wilton”, “Rs.400”, “ 1000”);
58. K.Sasidhar
Exception Handling
The try...catch statement allows you to test a
block of code for errors. The try block contains
the code to be run, and the catch block contains
the code to be executed if an error occurs.
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
59. K.Sasidhar
The Throw Statement
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
60. K.Sasidhar
Example
The example below determines the value of
a variable called x. If the value of x is
higher than 10, lower than 5, or not a
number, then throw an error. The error is
then caught by the catch argument and the
proper error message is displayed:
61. K.Sasidhar
JavaScript facts
JavaScript is Case Sensitive
A function named "myfunction" is not the same as
"myFunction" and a variable named "myVar" is not the
same as "myvar".
JavaScript is case sensitive - therefore watch your
capitalization closely when you create or call variables,
objects and functions.
White Space:
JavaScript ignores extra spaces. You can add white
space to your script to make it more readable. The
following lines are equivalent:
var name="Hege";
var name = "Hege";
62. K.Sasidhar
Break up a Code Line
You can break up a code line within a text
string with a backslash. The example below
will be displayed properly:
document.write("Hello
World!");
However, you cannot break up a code line
like this:
document.write
("Hello World!");