Download presentation
Presentation is loading. Please wait.
1
In this session, you will learn to:
Objectives In this session, you will learn to: Map images Create image rollovers Create custom objects Identify complex custom objects Use cookies to secure Web pages Identify security issues in JavaScript This session discusses the use of forms, frames, and images in JavaScript. Start the session by sharing the objectives of the session with the students.
2
Working with Images in JavaScript
Images in a Web page can be manipulated during runtime, by using a technique called image mapping. Image mapping is the technique of dividing an image into multiple areas and linking these areas to different documents. Image mapping can be done dynamically by using JavaScript. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user.
3
Working with Images in JavaScript (Contd.)
Mapping Images using JavaScript: An image is mapped by using the <MAP> tag in HTML. The following code creates an image map: <HTML> <HEAD> <TITLE>Image Maps</TITLE> </HEAD> <BODY> <P><MAP NAME="FPMap0"> <AREA HREF="page_1.html" SHAPE="rect" COORDS="1, 0, 152, 137"> <AREA HREF="page_2.html" SHAPE="rect" COORDS="1, 140, 152, 271"> </MAP><IMG BORDER="0" SRC="6.GIF" USEMAP="#FPMap0" WIDTH="153" HEIGHT="272"></P> </BODY> </HTML> Tell the students that the <MAP> tag is used for image mapping. You can also write various functions to associate user’s action.
4
Working with Images in JavaScript (Contd.)
JavaScript can be used to write functions to handle events associated with specific areas of an image. Such event handler functions are called in the various <AREA> tags. By using JavaScript, you can change the properties of an image, such as its height and width, when a specific area of the image is clicked. Tell the students that the <MAP> tag is used for image mapping. You can also write various functions to associate user’s action. 4
5
Working with Images in JavaScript (Contd.)
Creating Image Rollovers: Image rollovers are effects in which the appearance of an image changes when a mouse pointer is placed or moved above it. The Image object of JavaScript can be used to create image rollovers. To use the Image object, an instance of the Image object needs to be created. The syntax to create an instance of the Image object is: var Imagename= new Image([Width], [Height]); In the preceding syntax: Imagename: Is the name of the new instance of the Image objectDate object. [Width]: Is the width of the image in pixels. [Height]: Is the height of the image in pixels. Explain the importance of using image rollovers in Web Pages. Also explain how image rollover is implemented by creating an instance of the image object.
6
Working with Images in JavaScript (Contd.)
To attach an image with the Image object, the src attribute of the Image object is used. The syntax for attaching an image to an instance of Image object is: Imagename.src=”ImageURL” In the preceding syntax: Imagename: is an instance of the Image object. ImageURL: is the URL of the image. JavaScript uses an array called document.images to store the embedded images in the HTML document. In JavaScript, an image rollover can be created by using two images of same width and height. An image is replaced by another image when the mouse is rolled over the first image. Explain the students that using the src attribute they can link an image with the image object. Also tell the students that they can also store multiple images using an array.
7
Demo: Creating an Image Map Using JavaScript
Problem Statement: MagnifyMaze is a leading advertising firm in Canada. Smith is working as a senior graphic designer with MagnifyMaze. To improve the look and feel of the company’s Web site, the management decides to replace of its Web site’s hyperlinks with hyperlinks created by applying image maps. The Web site should contain the following image hyperlinks: About the Company Vision Achievements Partners Contacts. Contd… Explain the various methods of navigator object to the students. 7
8
Demo: Creating an Image Map Using JavaScript (Contd.)
The images used for the creation of these links must be pre-loaded every time the Web site is loaded. In addition, Smith wants to ensure that when the user moves the mouse over any of the images, the color of the image changes. How can you help Smith to perform the preceding task? Explain the various methods of navigator object to the students. 8
9
Demo: Creating an Image Map Using JavaScript (Contd.)
Solution: To solve the preceding problem, perform the following tasks: Create the HTML page for index.html. Create the HTML page for linkspage.html. Create the HTML pages for various hyperlinks. Verify the solution. Explain the various methods of navigator object to the students. 9
10
Introducing Custom JavaScript Objects
Custom objects are user-defined objects that consist of data and functions. You can create and use custom objects to build a custom JavaScript toolbox. To create custom objects, perform the following steps: Declare the custom object Instantiate the custom object Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 10
11
Introducing Custom JavaScript Objects (Contd.)
Creating Object Methods: The methods associated with custom objects are called custom object methods. You need to add custom object methods after creating a custom object. To add methods to custom objects: Define and declare method functions. Method functions are functions of the custom object. Associate this method function with the object function. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 11
12
Introducing Custom JavaScript Objects (Contd.)
Defining and Declaring Method Functions: While adding a method to an object, you need to first define a function for the method. This is followed by the activity performed by the method in the method function. The syntax to declare a method function in JavaScript is: //declaring method function function functionname() { function definition } In the preceding syntax, functionname() is the name of the method function. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 12
13
Introducing Custom JavaScript Objects (Contd.)
Associating the Method Function with the Object Function: After defining and declaring a method function, you need to associate it to the object function. For this, you need to create an instance of the custom object. The syntax for creating and instantiating the custom object is: function customobject(parameter) { function definition } var varname=new customobject(parametervalue); In the preceding syntax, customobject is the name of a custom object. A new instance varname, of the custom object is created. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 13
14
Introducing Custom JavaScript Objects (Contd.)
Complex Custom Objects: Components are complex custom objects that can be used in Web pages. Components are created based on logic and do not have any visual appearance. Similar to JavaScript objects, the JavaScript components can also have: Properties: Specify the data related to a component Methods: Specify the function to be performed by a component at run time Events: Specify the instructions that a component conveys to the application at run time Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 14
15
Introducing Custom JavaScript Objects (Contd.)
JavaScript Beans (JSB): It is a component file created with an extension .jsb. It provides the means to combine the dynamic features of HTML with JavaScript. JSBs provide methods to reuse the combination of HTML and JavaScript. The advantages of using JSBs are: JSBs provide reusability. JSBs add interactivity to Web pages. JSBs reduce the download time for a Web page. JSBs are platform independent. Therefore, Web pages created using JSBs can be downloaded and viewed on any platform, such as, UNIX, Macintosh, and Windows. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 15
16
Introducing Custom JavaScript Objects (Contd.)
Scriptlet: It is a powerful Web component that consists of standard features of Internet Explorer. It provides the benefits of component programming with Dynamic HTML and script. Using Scriptlets: Scriptlets must be added in an HTML document. To create and add scriptlets, perform the following steps: Create an HTML file to use as a scriptlet. Create a second HTML file or a parent page that will host the scriptlet. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 16
17
Introducing Custom JavaScript Objects (Contd.)
The advantages of using scriptlets are: Scriptlets exist on a separate file and therefore any error that occurs in a program does not affect the scriptlet. This makes debugging of the program easy and less time consuming. Scriptlets are create-once-use-anywhere programs. A scriptlet can be reused in many programs without making any modifications to it. Scriptlets can be combined together and used in a program. Scriptlets can be written in any scripting language, such as JavaScript or VBScript. Scriptlet components are also used by commonly used programs, such as Microsoft Word. Scriptlets are supported by multiple platforms, such as Windows, Apple Macintosh, and UNIX. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 17
18
Demo: Creating Custom Objects
Problem Statement: Fun&Fantasy Books Inc. is a leading publisher of books and journals in Philadelphia, USA. The company has decided to add a new Web page to their Web site that provides review information about widely acclaimed books. Dorothy is given the task of developing the Web page. Dorothy wants to ensure that the Web page is divided into two frames and includes a Current Releases section, which contains the name of the books in a combo box. When the visitor selects a book entry from the combo box, specific information related to the book, such as author name, price, and publisher appears in the second frame in a tabular format. How can you help Dorothy to build the Web site using custom objects? Explain the various methods of navigator object to the students. 18
19
Demo: Creating Custom Objects (Contd.)
Solution: To solve the preceding problem, perform the following tasks: Create the custom objects. Create the frame window. Verify the solution. Explain the various methods of navigator object to the students. 19
20
Implementing Security Using JavaScript
Security on the Internet can be implemented in various ways, such as by using digital certificates, configuring Web browser settings, and encrypting the data to be transferred on the Internet. Another way to implement security on the Internet is by using cookies in JavaScript. Cookies can be used to store the username, password, or other information related to the users on a Web site. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 20
21
Implementing Security Using JavaScript (Contd.)
Introducing Cookies: Cookies are messages sent by Web servers of the Web sites visited by you, to your browser. A cookie file typically contains information about your previous visits to the Web site, your credentials, or other information that you volunteer, such as your desired home page, color scheme, or other preferences. Cookies mostly allow Web site administrators to track your browsing patterns and activities on the site. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 21
22
Implementing Security Using JavaScript (Contd.)
Assigning, Testing, and Clearing Cookies: To use cookies, you need to assign cookies, and update the information stored in the cookies. JavaScript provides you the document.cookie property to assign cookies. The syntax to assign a cookie is: document.cookie=”[name]=[values]; expires=[date]; path=[pathname]; domain=[domainname]; secure” The preceding syntax consists of the following attributes: name expires path domain secure Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 22
23
Implementing Security Using JavaScript (Contd.)
You can define your own methods in JavaScript to perform various actions associated with cookies, such as to retrieve the value of a cookie, set the attributes of a cookie, and delete a cookie. Conventionally, the following methods are declared to perform the tasks of reading, creating, and deleting cookies: getCookie() : accepts the name of the cookie as a parameter and returns the value of the cookie. setCookie() :creates or updates a cookie deleteCookie() : deletes a cookie. Different areas of the images can also be used to create hyperlinks. This technique is called image mapping. Ask the student to describe various situations where image mapping can be helpful. Tell the students that images can also be changed on the Web page related to action of the user. 23
24
Demo: Storing and Retrieving Information Using Cookies
Problem Statement: Penelope is developing a Web site for BeautyInFitness. The company has recently started a fitness center that provides herbal therapies and body rejuvenation programs. Penelope is designing interactive Web pages for health and beauty sections. In addition to related information, each section contains a sub-section for FAQs, which is used to send visitors’ queries to the company. Penelope wants to track navigation history, every time a visitor navigates from one Web page to another. The information that the user entered in the previous page should be maintained when the visitor returns to that page. How can you help Penelope to incorporate the preceding requirement? Explain the various methods of navigator object to the students. 24
25
Demo: Storing and Retrieving Information Using Cookies (Contd.)
Solution: To solve the preceding problem, perform the following tasks: Create the homepage. Create the Thanks page. Verify the solution. Explain the various methods of navigator object to the students. 25
26
In this session, you learned that:
Summary In this session, you learned that: Images in a Web page can be manipulated during runtime using JavaScript. Image mapping is the technique of dividing an image into multiple areas and linking these areas to different documents. Image mapping can be done dynamically by using JavaScript. Image rollover is the technique of changing images on a Web page dynamically on user behavior, such as mouse movements over images. Image rollovers can change the appearance of an image when a mouse moves above it. Custom objects are user-defined objects that consist of data and functions. The methods associated with custom objects are called custom object methods. Read out the summary to the students.
27
Summary (Contd.) A JavaScript Bean (JSB) is a component file, which combines the dynamic features of HTML with JavaScript. A scriptlet provides the benefits of component programming with Dynamic HTML and script. Cookies can be used to implement security by authenticating the client on the Internet. Cookies are small bits of information and are stored on the hard disk of the client computer. JavaScript uses the document.cookie property to manipulate cookies on client side. Read out the summary to the students. 27
28
Summary (Contd.) The attributes of a cookie are:
name expires path domain secure JavaScript can be used to perform various actions on a cookie, such as creating new cookies, retrieving values of, and deleting already existing cookies. Read out the summary to the students. 28
Similar presentations
