iFour Consultancy
JavaScript
Introduction To JavaScript
What is JavaScript?
• JavaScript is the programming language of the web.• Object based (not object oriented) programming language• All modern HTML pages are using JavaScript.• JavaScript is easy to learn.• JavaScript is the most popular programming language in the world.• The HTML DOM (the Document Object Model) is the official W3C standard for accessing
HTML elements. • JavaScript can manipulate the DOM (change HTML contents).• The method document.getElementById() is one of many methods in the HTML DOM.
•A markup language is a set of markup tags •A markup language is a set of markup tags
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Where did it came from
Originally called LiveScript at Netscapestarted out to be a server side scripting language for providing database
connectivity and dynamic HTML generation on Netscape Web ServersNetscape decided it would be a good thing for their browsers and servers to speak
the same language so it got included in NavigatorNetscape in alliance w/Sun jointly announced the language and its new name Java
ScriptBecause of rapid acceptance by the web community Microsoft forced to include in
IE Browser
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Uses of JavaScript
You can use JavaScript to: • Change HTML Elements.• Text Animation.• Graphic Animation.• Client-side forms data validation (relieving the server of this task).• Create new HTML Elements.• Copy and Clone HTML Elements.• Delete HTML Elements.• web site navigation.• And much more…...
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Where to use JavaScript In HTML, JavaScript's must be inserted between <script> and </script> tags. JavaScript's can be put in the <body> and in the <head> section of an HTML page. To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between <script> and </script> contain the JavaScript code. <script language=…. src=……></ script > The <script> tag indicates to the browser the beginning of an embedded script; </ script >
indicates the end of an embedded script. the “language” attribute indicates the script processor to be used the “src” attribute indicates the URL of a file on the server containing the script to be
embedded
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Scripts can also be placed in external files. External scripts are practical when the same code is used in many different
web pages. JavaScript files have the file extension .js. To use an external script, put the name of the script file in the source (src)
attribute of the <script> tag. You can place an external script reference in <head> or <body> as you like. The script will behave as if it was located exactly where you put the reference
in the HTML document.
External JavaScript
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Object Hierarchy
window
link anchor layer form applet image area
history document location link
Text Radio Button FileUpload Select
Textarea
Password
checkbox Reset
Submit
Option
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
JavaScript Objects
window - the current browser windowwindow.history - the Netscape history listwindow.document - the html document currently in the browser client areawindow.location - the browser location fieldwindow.toolbar - the browser toolbarwindow.document.link - an array containing all of the links in the documentwindow.document.anchor - an array of all the anchor points in the document
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Objects (more…)
Window.document.layer - a named document layerwindow.document.applet - a named java applet areawindow.document.image- a named image tagwindow.document.area - a named areawindow.document.form - a named form or the default form,etc.
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
A few examples...
window.location = “http://www.yahoo.com”• will take you to the specified URL (like a goto)
window.history.back()• back() is a method on history• will be like clicking the back button in Nav 3 • in Nav 4 will take you back to prev window
window.history.goto(1)• takes you back to first URL in history array
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
The Object Model
It is very important to understand the object modeleach object has its own properties, some of which are read only some of
which you can set directly by assignment (as location) each object also has a set of behaviors called methods
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Object Model
Default Value
form name
type value
Red - gettable and settable
=B l u r ()
focus()
handleEvent
Select()
Text Object
HTML text tag
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Object Event Handlers
Most objects respond to asynchronous, user generated events through predefined event handlers that handle the event and transfer control to a user written event handling function
Each object has particular events that they will respond to
the way you specify an event handler is by adding an additional attribute to the HTML tag that specifies the particular handler
<input name=bt1 type=button value=ok onClick=“acb();”>
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
JavaScript Events onAbort onBlur onChange onClick onError onFocus onLoad onMouseOut onMouseOver onReset onSelect onSubmit onUnload
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onAbort
Activated when a user aborts the loading of an image
<img name=ball src=images/ball.gif onAbort=“alert(‘You missed a nice picture’)”>
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onBlur
Used with frame, select, text, textarea and window objects invoked when an object loses the focususe with select, text and textarea for data validation
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onChange
Used with select, text and textarea objects use instead of onBlur to validate only if a value has changed
<form>
Color: <select onChange=“processSelection()”>
<option value=“R”>Red
<option value=“G”>Green
<option value=“B”>Blue
</select>
</form>
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onClick
Used with button, checkbox, link, radio, reset, and submit objects.
<input type=button name=btn1 value=“Click Me” onClick=“alert(‘button was clicked’;” >
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onError
Used with image and window objects to invoke a handler if an error occurs while an image or window is loading.
Setting window.onerror = null will prevent users from seeing JavaScript generated errors
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onFocus
Used with frame, select, text, textarea and window objects.Just the opposite of onBlur; i.e. invoked when the object gets focus.
<body bgcolor=“lightgrey” onBlur=“document.bgColor=‘black’ onFocus=“document.bgColor=‘white’” >
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onLoad
Used with window, frame and image objects (use with <body ….><frameset ….> and <img ...>)
<img name=spinball src=images/spinball.gig onLoad=“startAnimation(this)”>
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onMouseOut and onMouseOver
Used with area and link objectsuser moves mouse off of an area or link
<map name=flower>
<area name=top coords=“0,0,200,300 href=“javascript:displayMessage()” onMouseOver=“self.status=‘when you see this message click your left mouse button’ ; return true” onMouseOut=“self.status = ‘’ ; return true”>
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onReset
Used with form objects
<form onReset=“alert(‘the form has been reset’)” >
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onSelect
Used with text and textarea objectsrun some JavaScript whenever a user selects a piece of text in a text or
textarea object
<input type=text name=line onSelect=“showHelp()” >
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onSubmit
Use with form objects to run a handler whenever a form has been submitted.Useful to validate all fields prior to actual submission
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
onUnload
Just like onLoad but the handler is run when the window/frame is exited
<body onUnload=“cleanup()” >
eCommerce Solution Provider In Indiahttp://www.ifourtechnolab.com
Thank you
Software development company indiahttp://www.ifourtechnolab.com