Java script -23jan2015

K.Sasidhar
JavaScript
K.Sasidhar

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)

K.Sasidhar
Importance / facts
 Embedded into HTML
 Browser Dependent
 Interpreted Language
 Loosely Typed Language
 Object-Based Language
 Event-Driven
 Java Script is not java

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

K.Sasidhar
Web Application Framework
Content
Creation
Graphics
Editor
HTML Editor
Browsers Client
Extensions
Active X
Applets
Scripting
JavaScript
VB Script
Servers Server
Extension
s
Java
script
Database
Extensions
ODBC, JDBC
Security
Content
Management
Search tools
Database Services

K.Sasidhar
JavaScript & HTML
 JavaScript is integrated into HTML with
 <script> and </script> tags.
 Ex:
 <script language = “JavaScript”>
 </script>

K.Sasidhar
First program
 Ex:
 <script language=“JavaScript”>
 {
 Document.write(“Hello to script”);
 }
 </script>

K.Sasidhar
Ex program
 <HTML>
 <HEAD>
 <TITLE>
 JAVASCRIPT PROGRAM TESTING</TITLE>
 <SCRIPT LANGUAGE="JavaScript">
 alert("Hello! everybody");
 </script>
 </head>
 <body>
 testing script
 </body>
 </html>

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>

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.

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.

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 /* ------*/

K.Sasidhar
Functions
 Declaration:
 function displaymessage()
 {
 document.write(“functions demo”);
 }
 A function is declared in the head part of
html.

K.Sasidhar
Operators
 Assignment
 Arithmetic
 Comparison
 Conditional
 String
 Boolean
 Type
 Function

K.Sasidhar
Operators continue…
 Data structure
 Bitwise

K.Sasidhar
Control Structures
 Conditional
 Looping
 With
 Conditional:
if(condition)
{ statements
}

K.Sasidhar
Conditions ……
 if – else
 if(condition)
 {
 Statemetns
 }
 Else
 {
 }

K.Sasidhar
Looping
 for :
 for (initializing exp; condition-exp; loop-exp)
 {
 Statements;
 }
 Ex:
 for(var i=0;i<10;i++)
 {
 document.writeln(i);
 }

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.

K.Sasidhar
Example:
 var myArray= new Array(“rama”, “ravana”);
 var elementIndex;
 for(elementIndex in myArray)
 {
 document. Write(myArray[elementIndex]);
 }

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.

K.Sasidhar
do-while, break and continue
 break terminates the loop altogether
 continue skips the remaining statements
for the current loop,

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.

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” >

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

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.

K.Sasidhar
Ex:
 function a()
 {
 var k= window.open(“xyz.html”,
“mywin”,”menubar=yes, toolbar=yes,
location=yes directories=yes,
status=yes”);
}

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()

K.Sasidhar
Continue…
 Specific page no
 Use go() method
 Window.history.go(5)
 Location object:

K.Sasidhar
Ex:
 Ex: function evalProtocol
 {
 if(curProtocol == “http:”)
 {
 alert(“from web”);
 else
 if(curProtocol == “file:”)
 alert(“from file”);
 else
 alert(“else where”);
 }
 }

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

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/”

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.

K.Sasidhar
Document continue…..
 <BODY
 [BACKGROUND = “backgroundImage”]
 [BGCOLOR = “backgroundColor”]
 [TEXT = “foregroundColor”]
 [LINK = “unfollowedLinkColor”]
 [ALINK = “activatedLinkColor”]
 [VLINK = “followedLinkColor”]
 [onload = “methodName”]
 [onUnload = “methodName”]>

K.Sasidhar
Form Object
 This allows users interactions.
 Gives life to static web pages.
 Properties:
 <FORM
 [NAME=“formName”]
 [ACTION=“ServerURL”]
 [ENCTYPE=“encodingType”]
 [METHOD = “GET|POST”]
 [TARGET = “windowName”]
 [onSubmit = “methodName”]
 </FORM>

K.Sasidhar
Text Object
 Common element to gather data entered by user.
 <INPUT type=“text”
 [Name = “objectname”]
 [Value=“value”]
 [Size=size]
 [MAX.LENGTH = size]
 [onBlur = “methodname”]
 [onChange = “methodname”]
 [onFocus = “methodname”]
 [onSelect = “methodname”]

K.Sasidhar
Text Area Object
 < TEXTAREA
 [Name = “objectName”]
 [ROWS=“numRows”]
 [COLS=“numCols”
 [WRAP=“off | virtual | physical”]
 [onSelect = “methodname”]
 </TEXTAREA>

K.Sasidhar
Password object
 <INPUT type=“password”
 [Value=“defaultpassword”]
 [Size=integer]
 Anchor Object:
 <A [HREF = URL ]
 Name = “objectname”
 [TARGET = “windowName”]>

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.

K.Sasidhar
Button properties
<INPUT
TYPE=“button | submit | reset”
[NAME = “objectName”]
[VALUE=“labelText”]
[onClick = “methodName”]

K.Sasidhar
Select Object
 <SELECT>
 [Size=“numberVisible”]
 [MULTIPLE]
 <OPTION VALUE = “optionValue”
<[SELECTED]>

K.Sasidhar
Radio Object
 <input>
 TYPE = “radio”
 [NAME = “groupName”]
 [VALUE = “value”][CHECKED]
 [onClick=“methodName”]> [displayText]

K.Sasidhar
BUILT-IN LANGUAGE
Objects
 String
 Date
 Array
 Math

K.Sasidhar
Methods…..
 Length
 CharAt(pos)
 IndexOf (search text[startPos],[endpos])
 Substring(startPos,endPos)
 Big
 Blink
 Fixed
 Fontcolor
 Fontsize
 Small
 Strike
 Sub
 Sup
 toLowerCase
 toUPperCase

K.Sasidhar
Date
 getDate()
 getDay()
 getHours()
 getMinutes()
 getMonth()
 getSeconds()
 getTime()
 getYear()
 getTimeZoneOffset() --- GMT etc..

K.Sasidhar
Set Methods of Date object
 setdate(value)
 setHours(value)
 setMinutes(value)
 setMonth(value)
 setSeconds(value)
 setTime(value)
 setYear(value)

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

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

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)

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)

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)

K.Sasidhar
Arrays
 <html>
 <body>
 <script type="text/javascript">
 var i;
 var mycars = new Array();
 mycars[0] = "Saab";
 mycars[1] = "Volvo";
 mycars[2] = "BMW";
 for (i=0;i<mycars.length;i++)
 {
 document.write(mycars[i] + "<br />");
 }
 </script>
 </body>
 </html>

K.Sasidhar
Join two arrays
 <html>
 <body>
 <p id="demo">Click the button to join three arrays.</p>
 <button onclick="myFunction()">Try it</button>
 function myFunction()
 {
 var hege = ["Cecilie", "Lone"];
 var stale = ["Emil", "Tobias", "Linus"];
 var kai = ["Robin"];
 var children = hege.concat(stale,kai);
 var x=document.getElementById("demo");
 x.innerHTML=children;
 }
 </script>
 </body>
 </html>

K.Sasidhar
Remove the last element
 <!DOCTYPE html>
 <html>
 <body>
 <p id="demo">Click the button to remove the last array element.</p>
 <button onclick="myFunction()">Try it</button>
 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 function myFunction()
 {
 fruits.pop();
 var x=document.getElementById("demo");
 x.innerHTML=fruits;
 }
 </script>
 </body>
 </html>

K.Sasidhar
Creating custom objects
 function object (parameter1, parameter2,…)
 {
 this.property1=parameter1
 this.property2=parameter2
 this.method1=function1
 this.method2=function2
 }

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”);

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
}

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

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:

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";


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!");

Java script -23jan2015

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Java script -23jan2015 (20)

More from Sasidhar Kothuru (20)

Recently uploaded (20)

Java script -23jan2015