Скачать презентацию Java Script — a Brief Introduction Anupriya Скачать презентацию Java Script — a Brief Introduction Anupriya

4fbb752908f9342fe03617e1a39b7218.ppt

  • Количество слайдов: 32

Java. Script - a Brief Introduction Anupriya Java. Script - a Brief Introduction Anupriya

What is Java. Script • Object based (not object oriented) programming language – very What is Java. Script • Object based (not object oriented) programming language – very limited object creation – a set of pre-defined objects associated with • HTML document structure – many HTML tags constitute JS Objects • Browser functionality – provides a limited API to Browser functionality

Where did it come from • Originally called Live. Script at Netscape – started Where did it come from • Originally called Live. Script at Netscape – started out to be a server side scripting language for providing database connectivity and dynamic HTML generation on Netscape Web Servers – Netscape decided it would be a good thing for their browsers and servers to speak the same language so it got included in Navigator – Netscape in alliance w/Sun jointly announced the language and its new name Java Script – Because of rapid acceptance by the web community Microsoft forced to include in IE Browser

Browser compatibility • For the most part Java Script runs the same way in Browser compatibility • For the most part Java Script runs the same way in all popular browsers • There are many areas where there are slight differences in how Java Script will run • there will be a separate set of slides addressing these differences.

Java. Script…Java ? • There is no relationship other than the fact that Java Java. Script…Java ? • There is no relationship other than the fact that Java and Java. Script resemble each other (and C++) syntactically • Java. Script is pretty much the de-facto standard for client-side scripting (Internet Explorer also provides VBScript & JScript) • In Netscape browsers there is an API that allows Java. Script and Java applets embedded in the same page to converse

What can it be used for • Some pretty amazing things…. – Text animation What can it be used for • Some pretty amazing things…. – Text animation – graphic animation – simple browser based application – HTML forms submission – client-side forms data validation (relieving the server of this task) – web site navigation

What do I need to get started • A web browser – Netscape Navigator What do I need to get started • A web browser – Netscape Navigator 4. x or later – MS Internet Explorer 3. x or later • A text Editor – Wordpad/Notepad – Vi, Emacs

Process • • • Open your text editor create a file containing html and Process • • • Open your text editor create a file containing html and Javascript save as text file with file type. htm or. html open your browser click on file, open file – locate the file you just created • open file in browser

Putting Java. Script into your HTML • in an external file – collect commonly Putting Java. Script into your HTML • in an external file – collect commonly used functions together into external function libraries on the server • added benefit of privacy from curious users • in-line with your HTML • as an expression for an HTML tag attribute • within some HTML tags as Event Handlers

<SCRIPT>…</SCRIPT> • <SCRIPT language=…. src=……></SCRIPT> • The <SCRIPT> tag indicates to the browser the • The 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

Scripts • Since scripts are placed in line with HTML older browsers will attempt Scripts • Since scripts are placed in line with HTML older browsers will attempt to render them as text. • To preclude this hide them in side of an HTML comment. • for Java. Script comments use // or /* */

<SCRIPT> • • <SCRIPT LANGUAGE=“Java. Script”> <!-- start hiding code from old browsers> Script

Object Hierarchy window history link anchor textarea password layer radio checkbox document form button Object Hierarchy window history link anchor textarea password layer radio checkbox document form button reset submit location applet link image file. Upload select option area

Objects • window - the current browser window • window. history - the Netscape Objects • window - the current browser window • window. history - the Netscape history list • window. document - the html document currently in the browser client area • window. location - the browser location field • window. toolbar - the browser toolbar • window. document. link - an array containing all of the links in the document • window. document. anchor - an array of all the anchor points in the document

Objects (more…) • • • Window. document. layer - a named document layer window. Objects (more…) • • • Window. document. layer - a named document layer window. document. applet - a named java applet area window. document. image- a named image tag window. document. area - a named area window. document. form - a named form or the default form ect, ect

A few examples. . . • window. location = “http: //www. yahoo. 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

The Object Model • It is very important to understand the object model • The Object Model • It is very important to understand the object model • each 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

Object Model Text Object = HTML text tag B l u r () default. Object Model Text Object = HTML text tag B l u r () default. Value form name Select() type focus() value handle. Event Red - gettable and settable

Object Event Handlers • Most objects respond to asynchronous, user generated events through predefined 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 •

Events • • • • on. Abort on. Blur on. Change on. Click on. Events • • • • on. Abort on. Blur on. Change on. Click on. Error on. Focus on. Load on. Mouse. Out on. Mouse. Over on. Reset on. Select on. Submit on. Unload

on. Abort • Activated when a user aborts the loading of an image <img on. Abort • Activated when a user aborts the loading of an image

on. Blur • Used with frame, select, textarea and window objects • invoked when on. Blur • Used with frame, select, textarea and window objects • invoked when an object loses the focus • use with select, text and textarea for data validation

on. Change • Used with select, text and textarea objects • use instead of on. Change • Used with select, text and textarea objects • use instead of on. Blur to validate only if a value has changed

Color:

on. Click • Used with button, checkbox, link, radio, reset, and submit objects. <input on. Click • Used with button, checkbox, link, radio, reset, and submit objects.

on. Error • Used with image and window objects to invoke a handler if on. Error • 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 Java. Script generated errors

on. Focus • Used with frame, select, textarea and window objects. • Just the on. Focus • Used with frame, select, textarea and window objects. • Just the opposite of on. Blur; i. e. invoked when the object gets focus.

on. Load • Used with window, frame and image objects (use with <body …. on. Load • Used with window, frame and image objects (use with and )

on. Mouse. Out and on. Mouse. Over • Used with area and link objects on. Mouse. Out and on. Mouse. Over • Used with area and link objects • user moves mouse off of an area or link

on. Reset • Used with form objects <form on. Reset=“alert(‘the form has been reset’)” on. Reset • Used with form objects

on. Select • Used with text and textarea objects • run some Java. Script on. Select • Used with text and textarea objects • run some Java. Script whenever a user selects a piece of text in a text or textarea object

on. Submit • Use with form objects to run a handler whenever a form on. Submit • Use with form objects to run a handler whenever a form has been submitted. • Useful to validate all fields prior to actual submission

on. Unload • Just like on. Load but the handler is run when the on. Unload • Just like on. Load but the handler is run when the window/frame is exited