java script -23jan2015
TRANSCRIPT
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 FrameworkContent
Creation
Graphics Editor
HTML Editor
Browsers Client Extensions
Active X
Applets
Script ing
JavaScript
VB Script
Servers Server Extensions
Java script
Database ExtensionsODBC, 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 HierarchyWindow
history location
text
Text area
form
frameDocument
password
hidden
checkbox
Select
link
Reset
submit
button
anchor image
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”] [onBlur = “methodname”] [onChange = “methodname”] [onFocus = “methodname”] [onSelect = “methodname”] </TEXTAREA>
K.Sasidhar
Password object <INPUT type=“password” [Name = “objectname”] [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> [Name = “objectname”] [Size=“numberVisible”] [MULTIPLE] [onBlur = “methodname”] [onChange = “methodname”] [onFocus = “methodname”] <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
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>
<script type="text/javascript"> 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>
<script type="text/javascript"> 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!");