You are on page 1of 34

Assignments for Introduction to UI Concepts and Web

Technologies

Author(s)

Anil Kumar P & Malathi M

Campus Connect
Customization for FP 4.0

Kalpana

Authorized by

Pramod Panda

Creation/Revision Date

Sep 2014

Version

4.0

COPYRIGHT NOTICE
© 2014 Infosys Limited, Bangalore, India. All Rights Reserved.
Infosys believes the information in this document is accurate as of its publication date; such
information is subject to change without notice. Infosys acknowledges the proprietary rights of
other companies to the trademarks, product names and such other intellectual property rights
mentioned in this document. Except as expressly permitted, neither this documentation nor
any part of it may be reproduced, stored in a retrieval system, or transmitted in any form or by
any means, electronic, mechanical, printing, photocopying, recording or otherwise, without the
prior permission of Infosys Limited and/ or any named intellectual property rights holders
under this document.
Education, Training and Assessment Department
Infosys Limited
Electronics City
Hosur Road
Bangalore - 561 229, India.
Tel: 91 80 852 0261-270
Fax: 91 80 852 0362
www.infosys.com
mailto:ETA@infosys.com

Document Revision History

Version

Date

Author(s)

Reviewer(s)

Description

1.0

Jan 2014

Anil Kumar P

Manjunatha Prasanna
Vijay Kumar Dani

Initial creation as per FPR
2014 guidelines

2.0

Jun 2014

Anil Kumar P
Malathi M
Suhird Singh

Manjunatha Prasanna
Mohana Krishna B G

Updated based on the
feedback from stake holders

Customization Revision History

Version

Date

Author(s)

Reviewer(s)

Description

4.0

Sep 2014

Kalpana

Dr. Suresh P.,
Manisha

Customization for Campus
Connect FP 4.0 release

CONFIDENTIAL

............ 21  Assignment 14: Functions and Dialog boxes ....... 18  Assignment 13: Understanding typeof operator and in-built functions ........................................ 5  Assignment 7: Ways to Apply CSS and its formatting ...................................... 27  CONFIDENTIAL ............. 2  Assignment 3: Network Components ............................................................ 8  Assignment 9: Using div.......Contents COPYRIGHT NOTICE ............................................................................... 22  Assignment 15: Applying styles to Tables and Form Elements ................................................................................................................................................................................................ 4  Assignment 5: IP Addressing and Types of Web Content .................................................. 5  Assignment 6: Understanding Browsers and HTML ............................................................................................... iii  Assignments for Introduction to UI Concepts and Web Technologies ................................................................................ 1  Guidelines .................................................... 1  Context............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................ i  Contents ............................................... list.. 25  Assignment 16: Creating Interactive Webpage and Apply CSS............................. 9  Assignment 10: Creating Tables and Form Elements in HTML .................................................................... 2  Assignment 2: Impact of Web .................................... Form Validation and submission using JavaScript ................. Span.................................................................... 12  Assignment 11: Understanding the client side Java Script ...................... 1  Assignment 1: Explore on your social Network .................. 16  Assignment 12: Understanding functions and scope of variables.............. 3  Assignment 4: Interconnecting Devices ...................................................................................................................... hyperlink and images in CSS........................................................................................................................... 7  Assignment 8: Chaining of Selectors and Class in CSS .....................................................................................................................................................................................................................................................................................................................................................................................................................................................

assignments in this document must be completed in the sequence mentioned Version No: 4.Infosys Limited Lab Guide for Introduction to Web Technology Assignments for Introduction to UI Concepts and Web Technologies Context This document contains the assignments to be completed as part of the hands on for the subject Introduction to UI Concepts and Web Technologies. All assignments in this document must be completed in order to complete the course 2. In order to complete the course. Guidelines 1. The assignments need to be completed as instructed by the facilitators and submitted appropriately 3.0 Page 1 of 30 .

The concept of amplification realized using the vacuum tube triodes brought paradigm shift in the field of electronics.      Google Twitter Yahoo You Tube Amazon’s Cloud Service Q1: Active Users for all the above social networks.0 Page 2 of 30 . Problem Description: Identify the statistical data for the Social Media listed below in the year 2014.Infosys Limited Lab Guide for Introduction to Web Technology Assignment 1: Explore on your social Network Objective: To explore on web technology statistics presently. Background: “Wheel” is one of greatest inventions of mankind during bronze era (3500 to 1200 BC). Q6: Number of page in google index Social Network 2014 Google Twitter Yahoo YouTube Amazon’s Cloud Service Active Users Visitors (per day) Data (per day) No. The adding machine by Blaise Pascal (AD 1642) set the trend for automation of computations. Yet another accomplishment is the Version No: 4. “Steam Engine” initiated Industrial revolution (1606 to 1770 AD) in Europe. The invention of “transistor” (AD 1947) revolutionized the field of semiconductor electronics. of Hits (per day) Estimated time: 10 minutes Assignment 2: Impact of Web Objective: To understand how web technology plays an important role in present day scenario. Q2: Number of visitors per day Q3: Data Storage or sharing per day Q4: Number of Hits per day Q5: Number of video uploads per minute in you tube.

what in your opinion is the significant revolution which has transformed the life style of people with the use of interconnected computers? Q2: Can you list few popular online applications/systems which you have used for the following services?      communication and collaboration online shopping online ticket reservation online searching social networking Q3: Which is your favorite web-browser? What makes it different from the other browsers? Where is the content displayed in the browser coming from? Estimated time: 10 minutes Assignment 3: Network Components Objective: To study about different network components such as repeaters. The first office located in heart of the city has network working on say. What is the device that can be used? Scenario 2:  Your Company has two offices in a mega city. Both are using Ethernet based networks.Infosys Limited Lab Guide for Introduction to Web Technology invention of microprocessor (AD 1971). bridges. What is the device that can be used? Version No: 4. switches. The networks of the two offices need to be connected. The first Personal computer was rolled out by IBM in the year 1981. Computer Science department and Mechanical Engineering department. The distance between the two department buildings is around 500 meters within the university campus and the two networks need to be connected. Q1: In the last 40 years. and routers.   Identify the network component that can be suitably used for the below orders. All these inventions have had a great impact on day to day life of people. Scenario 1:  Your University has two departments. Below are given details of few such orders. and the second office located around 50 km away has a network using Ethernet. Problem Description: A network service provider has several orders from reputed institutions and organizations for installation of connecting devices in their networks. ATM technology.0 Page 3 of 30 . hubs.

Identify the network component that can be suitably used for the below criteria. Scenario 1: The two hosts have IP addresses in different IP networks.0 Page 4 of 30 .255) from one host does not increment traffic counters on the other host. Scenario 2: A broadcast ping (ie: 255. switch. Version No: 4. Problem Description: If you are given two hosts which are connected via a black box which you don’t know. bridges. Since the distance of around 350 km between these two cities is quite high. You can't do anything with black box.255. switches. You have access to two hosts only. Assignment 4: Interconnecting Devices Objective: To study about different network components such as repeaters. the signal strength at the receiving end will become too poor and not remain recognizable by the receiver. How can you recognize that black box as hub. What is the device that can be used for ensuring successful communication? Estimated time: 10 minutes Summary of this assignment:  You have learnt to identify the different interconnecting devices for the given scenarios. Scenario 3: Either hosts' ARP table does not have an entry for the other host. Estimated time: 5 minutes Summary of this assignment:  You have learnt to identify the different interconnecting devices for the given scenarios. hubs. and routers.255. router or gateway without using any additional device or host? One more thing: You cannot perform any operation on the black box.Infosys Limited Lab Guide for Introduction to Web Technology Scenario 3:  Data has to go from Bangalore to Chennai on a dedicated link on optical fiber.

DHCP server IP address 1. Note: To get the above information: Go to the command prompt: Start > Run and type.0 Page 5 of 30 . management organized free medical checkup camp as part of social responsibility activities.  Alex is curious to play an online game. Alex accepted the download prompt and started playing the game. Assignment 6: Understanding Browsers and HTML Objective: To understand the software requirements for learning HTML and work with different Browsers and editors. Recently. Estimated time: 5 minutes Summary of this assignment:  You have understood about how to know the IP address and other information of your machine and your network. however he is prompted for downloading a script on to his computer for better performance and display.  You have learnt to identify the different types of web content. the coordinator of the medical camp uploaded the photos and shared the link to other employees for viewing. Version No: 4. DNS server IP addresses c. active and dynamic. (a) Problem Description: Identify the following: a. (b) Problem Description: Identify the appropriate web content type for the following scenarios. James is searching for information on Algorithm Design Techniques using Google search engine. LiveFree hospital is a reputed medical organization known for its social activities. IP address of your machine b.    2. 1. ipconfig -all. 1. Jane. At the prompt type. 3.Infosys Limited Lab Guide for Introduction to Web Technology Assignment 5: IP Addressing and Types of Web Content Objective: To find out IP addresses of the servers working on your network and understand web content types – static. cmd.

As a programmer. You can find the HTML tag that creates the sparsh home page.Infosys Limited Lab Guide for Introduction to Web Technology Background: HTML file is a text file containing markup tags. Lynx is a text browser for the World Wide Web. you should be able to create and edit HTML files using text editors like Notepad or Textpad. HTML file can be created using a text editor. However. Version No: 4.w3schools. Opera is a very popular alternative browser. And type http://www. In the entire course you are supposed to use only a text editor Estimated time: 5 minutes Step 1: Open Internet Explorer(Select the Start Menu-> Internet Explorer). view -> source. Step 2: Select menu option. these tools do not generate much optimized HTML code. You can view the pages with a program called a Web browser.com on the Address bar. Note: You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage.0 Page 6 of 30 . Popular browsers are Internet Explorer (from Microsoft) and Netscape Navigator (from Netscape Communications) now known as Mozilla Firefox. Visual Interdev etc.

Step 4: What is the version of Internet Explorer you are using?.0 Page 7 of 30 . Netscape 6. In 1998. and Opera 6 have almost full support of CSS. Help -> About Internet Explorer. many support parts of it. Background: You have learned how to create HTML documents. although. CSS2 was introduced to add more power to CSS. Note: CSS1 Accepted by the W3C Consortium in 1996. Style Sheets is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. Internet Explorer 6. Summary of this exercise: You have just learnt  Using a Web Browser  Using “View Source” feature of Web browsers to see the actual HTML code  Finding the version of the browser Assignment 7: Ways to Apply CSS and its formatting Objective: To understand the usage of CSS and provide cascading style for your HTML documents. no browsers support all of the CSS2 features. Version No: 4. This should display the version of the Internet Explorer browser you are using. However.Infosys Limited Lab Guide for Introduction to Web Technology Step 3: Select menu option.

css Assignment 8: Chaining of Selectors and Class in CSS Objective: To understand the usage of selectors using cascading style for your HTML documents. css and images subfolders.css file and HomeScreen.css file as suggested below and observe the changes in the HTML pages.Infosys Limited Lab Guide for Introduction to Web Technology You have been provided with EasyShop_Ext_CSS folder that contains html_files. You have been provided with EasyShop_Ext_CSS folder that contains html_files. Step 4: Modify the text format of “Infosys Limited” in the “footer” area as follows:     font-size to 10pt font-family to Arial font-weight to normal font-style to italic Step 5: Observe the changes to text “Infosys Limited” in the footer area of all the 3 screens Summary of this exercise: You have just learnt Usage of different font properties in CSS file Deliverables of the exercise: 1) style.html file as suggested below and observe the changes in the HTML pages.0 Page 8 of 30 . AddUser and AddCustomer pages. css and images subfolders. Step 2: Modify the text format of “EasyShop Manager” heading in the banner area as follows:  font-family to Cursive  color to #FF00FF  font-size to 30px  font-weight to normal Step 3: Observe the changes to the text “EasyShop Manager” in the HomeScreen. You are expected to modify . You are expected to modify . Version No: 4. Make the modifications to “style. Estimated time: 15 minutes Step 1: Take a copy of EasyShop_Ext_CSS folder to the desktop.css” as per the following requirements.

Step 2: Add a new div id called “string” to the style. You are expected to modify . Make the modifications to “style. Span.html” as per the following requirements. list. Division with same id must have similar appearance. Estimated time: 30 minutes Step 1: Take a copy of EasyShop_Ext_CSS folder to the desktop. list.html file as suggested below and observe the changes in the HTML pages. Make the modifications to “style.html” as per the following requirements.  To understand how to create hyperlinks in HTML  To understand how to embed images in HTML You have been provided with EasyShop_Ext_CSS folder that contains html_files. Summary of this exercise: You have just learnt Usage of selectors in CSS file Deliverables of the exercise: 1) style.Infosys Limited Lab Guide for Introduction to Web Technology Estimated time: 15 minutes Step 1: Take a copy of EasyShop_Ext_CSS folder to the desktop. css and images subfolders.css 2) HomeScreen. hyperlink and image tags.css file and HomeScreen.css” and “HomeScreen.css with the following text formatting values:      font-family as Calibri color as # 58BE6C font-style as normal font-size as18px font-weight as normal Add a div tag with id as “string” to the following sentences in HomeScreen.html Assignment 9: Using div.0 Page 9 of 30 .  To understand how to create ordered and unordered lists in HTML.html file: Version No: 4. Step 2: Create style for divisions using its id and assign different color to each division.css” and “HomeScreen. <span>. hyperlink and images in CSS Objective:  To create a new division using <div>.

html file as follows: 1. Step 4: Add a new span id called “RetailWord” to the style. B. 3.html” as per the following requirements. 3 and 4. Make the modifications to “HomeScreen.Infosys Limited Lab Guide for Introduction to Web Technology This application automates the retail processing.css with the following text formatting values:    font-family as Cursive color as # D0B173 font-size as 20px Add a span tag with id as “RetailWord” to the following words in HomeScreen. 2. 4. (delete <li> tag for “Manager”) Version No: 4. Step 9: Modify user groups “ordered list” to “unordered list” in HomeScreen.html file: retail chain Step 5: Observe the changes to the words “retail chain“ in the HomeScreen page. Step 7: Add a new list item called “Working Staff” as the last item to the user groups in HomeScreen. and D instead of 1. C.0 Page 10 of 30 . Administrator Manager Billing Staff Working Staff Step 8: Modify the above list numbering to A. 2.html file as follows:     Administrator Manager Billing Staff Working Staff Step 10: Remove “Manager” list item from the above unordered list. The application helps in faster billing and easy maintenance of the stock and customer details. Step 3: Observe the changes in the HomeScreen page. Step 6: Take a copy of EasyShop_Ext_CSS folder to the desktop.

0 Page 11 of 30 .html as follows : Home | Contact Us Link “Contact Us” label to ContactUs. Step 16: Change the link properties for “Contact Us” in style.html provided in the EasyShop_Ext_CSS folder.css as follows: Change color as # A87648 for unvisited link Change color as # 48A89E for visited link Hint: Changes to be made for a:link{} and a:visited{} Step 17: Add following two properties for the above mentioned links in style. Make the modifications as per the following requirements. Hint: Use ul tag in the . Step 11: Modify the above unordered list items from “disc” to “square” in .html as follows : Home | Contact Us Link “Contact Us” label to ContactUs.CSS file and specify the appropriate type for “list-style-type” property. Step 15: Add a new link with the label “Contact Us” next to home link in AddCustomer.Infosys Limited Lab Guide for Introduction to Web Technology Step 11: Modify the text of the items in the unordered list of the previous requirement with the following properties: font-family as Tahoma color as # 76DECB font-style as italic Hint: Use li tag in the . Step 13: Take a copy of EasyShop_Ext_CSS folder to the desktop. Step 12: Observe the changes to the ordered list in the HomeScreen page.CSS file and apply the above mentioned properties to the same. Step 14: Add a new link with the label “Contact Us” next to home link in AddUser.CSS file.html provided in the EasyShop_Ext_CSS folder.css Change the color as # 9AC25A for hover link Change the color as # EEB281 for active link Hint: a:hover{} and a:active{} is to be added as CSS properties Version No: 4.

css 2.html” as per the following requirements.html 5.  To add radio button. Step 20: Change the “cart image” to “Cart 1. Make the modifications to “HomeScreen. list box and check box in a form.Infosys Limited Lab Guide for Introduction to Web Technology Step 18: Observe the changes in AddUser page and AddCustomer page before visiting the links and after visiting the links Step 19: Take a copy of EasyShop_Ext_CSS folder to the desktop.  To add button in a form. HomeScreen.html 3. HomeScreen Page and ContactUs Page. AddCustomer. style. Estimated time: 30 minutes Step 1: Design a table file named “table.jpg” in style.  To add text box and text area in a form and apply different properties to the elements.0 Page 12 of 30 . AddCustomer page. AddUser.html” Step 2: Add the following rows to the table.css Step 21: Observe the changes in AddUser page. Summary of this exercise: You have just learnt  Usage <div> and <span> tag  Usage of text formatting in CSS  Ordered List  Unordered List  CSS properties of list  Usage of links in HTML  Applying CSS properties to links in HTML  Adding images to the existing HTML files Deliverables of the exercise: 1. style.css Assignment 10: Creating Tables and Form Elements in HTML Objective:  To understand how to create tables and adding CSS properties to tables in HTML.html 4. Version No: 4.

css for applying the above mentioned properties. Hint 2: Use border-spacing and padding in style.css: For Table: Cellspacing as 2 Cellpadding as 3 Border as 5px For rows: Background color as # E5E6E6 Hint 1: Use “table” tag as selector in style. Step 10: “Zip Code” text field should allow a maximum of ten characters Step 11: Add default value as 02201-2021 in Zip Code Id text field Note : Refer to the screenshot for the above mentioned requirements.Infosys Limited Lab Guide for Introduction to Web Technology Hint: Use “rowspan” and “colspan” wherever necessary Step 3: For the above created table. Step 9: Add a new row immediately after “Address Line” row with label as “Zip Code” and create a textbox for the corresponding “Zip Code” label.css for applying the above mentioned properties Step 6: Observe the changes in html Page.html” file.0 Page 13 of 30 . apply the following CSS properties to the table and its rows in style. Step 7: Add a new row immediately after “Contact Preferences” row with label as “Address Line” immediately after “Contact Preferences” row and create a text area with 3 rows and 12 columns corresponding to the “Address Line” in “AddCustomer. Step 8: “Address Line” text area should have default text as “Your Address Here”. Version No: 4.

html and AddUser.0 Page 14 of 30 .Infosys Limited Lab Guide for Introduction to Web Technology Step 12: Observe the changes in AddCustomer. Note : Refer to the screenshot for the above mentioned requirements Version No: 4.html Page. Step 13: “Elite” should be selected as the default without changing the above mentioned sequence.

html Page.0 Page 15 of 30 .Infosys Limited Lab Guide for Introduction to Web Technology Step 14: Observe the changes in AddCustomer. Step 15: Add a new button in “AddCustomer. Version No: 4.html” with type as “submit” and label of the button as “Check”.

Note: JavaScript is embedded as a small program in a web page that is interpreted and executed by the Web client. JavaScript is a scripting language .write("Displaying using JavaScript"). JavaScript is supported by all major browsers like Netscape.0 Page 16 of 30 . Internet Explorer.a scripting language is different from programming language.html” <html> <head> <!-. JavaScript is an interpreted language (means that scripts execute without preliminary compilation).html Assignment 11: Understanding the client side Java Script Objective: To understand the usage of Client Side JavaScript. Background: You have learned HTML and Cascading Style Sheet (CSS). Now you can create interactive pages using client side JavaScript.css 3.html 2.Comments : To include a client side script use <script> tag --> <script type=”text/javascript”> <!-document. --> </script> </head> Version No: 4. AddCustomer. Style. Mozilla etc. Estimated time: 15 minutes Step 1: Type the following code into a text editor and save it as “FirstJS. ContactUs. Using HTML and CSS you can create only static pages.Infosys Limited Lab Guide for Introduction to Web Technology Summary of this exercise: You have just learnt  Creating a table in HTML  Usage of rowspan and colspan  CSS properties of table  Creating text box and text area in HTML  Properties of text box and text area in HTML  Creating radio button and check box in HTML  Usage of button and its properties in CSS Deliverables of the exercise: 1.

Double click on the status bar.. In case Step 3: Click on ‘Show details” button. document.Infosys Limited Lab Guide for Introduction to Web Technology <body> <h1> First JavaScript Program</h1> </body> </html> Note: To hide the script from the browsers.html”.write(<h1>"Displaying using JavaScript"</h1>). Let us examine the code at line number 5 document. Observe the error message. you would be able to see the below screen. Open the page in the browser. -->). The dialog box is showing that the error is at line number 5 and the message is “Syntax error”. which are not supporting JavaScript use HTML comments (<!-.write(<h1>"Displaying using JavaScript"</h1>) Version No: 4.0 Page 17 of 30 . Step 2: Modify the “FirstJS.html” like the following and save as “FirstError.

write(“<h1>Displaying using JavaScript</h1>”) Step 4: Correct the error and save the file as “ErrorFree.html” Summary of this exercise: You have learnt  How to use JavaScript in HTML documents.html Assignment 12: Understanding functions and scope of variables Objective: To understand the basic concepts of functions and scope of variables in JavaScript Estimated time: 20 minutes Version No: 4. Deliverables of the exercise: 1) FirstJS.html 2) FirstError.Infosys Limited Lab Guide for Introduction to Web Technology We can find that the syntax is wrong.0 Page 18 of 30 .html 3) ErrorFree.  Debug and fix the error. The correct syntax is document.

length==0) { document.charAt(count)!=' ') { return.write("Supplier Name cannot contain only spaces").0 Page 19 of 30 .html’ in the browser.count<sName.html’ Step 2: Add the below function inside <script> tag sName= “”.sName. function valSupNameForEmpty() { sName= document. } Step 4: Invoke the method ‘valSupNameForOnlySpaces’ in ‘valSupNameForEmpty’ and let the invocation statement be the last statement in the method Step 5: Associate the following event with the ‘Submit’ button of ‘Add Supplier’ web page onClick=”valSupNameForEmpty()” Step 6: Open the modified ‘AddSupplier.length.Infosys Limited Lab Guide for Introduction to Web Technology Step 1: Take a copy of ‘AddSupplier. } } Step 3: Include another function by name 'valSupNameForOnlySpaces' function valSupNameForOnlySpaces() { for(var count=0.suppform. return. } } document. Input only spaces in the supplier name field and click ‘Submit’ button. if(sName!=null && sName.count++) { if(sName.value.write("Supplier Name is empty"). Version No: 4. Verify that the following output is displayed “Supplier Name cannot contain only spaces”.

Step 12: Open the modified ‘AddSupplier. Step 11: Now. Summary of this exercise: You have learnt How to define functions How to define variables with different scopes Deliverables of the exercise: 1) ‘AddSupplier. Verify that the following output is displayed “Supplier Name cannot contain only spaces”. Verify that the following output is displayed “Supplier Name cannot contain only spaces”.html’ in the browser. it is local to this function only. add the keyword ‘var’ with ‘sName’ definition. Verify that the following output is displayed “Supplier Name cannot contain only spaces”. Hence ‘sName’ is accessible by both the functions. Step 10: Open the modified ‘AddSupplier. Hence the error message. Place this modified statement inside the function ‘valSupNameForEmpty’ as the first statement.html’ Version No: 4.html’ in the browser.0 Page 20 of 30 . Inference: Even though the variable ‘sName’ is defined with the keyword ‘var’. Hence accessible by ‘valSupNameForOnlySpaces’ also. ‘valSupNameForEmpty’ and ‘valSupNameForOnlySpaces’ Step 9: Remove the keyword ‘var’ associated with ‘sName’ definition. still it is global as it is defined outside all the functions.Infosys Limited Lab Guide for Introduction to Web Technology Inference: The variable ‘sName’ is defined as global and hence it is accessible by both the functions ‘valSupNameForEmpty’ and ‘valSupNameForOnlySpaces’ Step 7: Modify the definition statement of ‘sName’ in the code by adding the keyword ‘var’. Inference: Even though the variable ‘sName’ is defined inside the function ‘valSupNameForEmpty’ it is still global as it is NOT associated with ‘var’ . Input only spaces in the supplier name field and click ‘Submit’ button. Step 8: Open the modified ‘AddSupplier. Inference: As the variable ‘sName’ is associated with ‘var’ inside the function ‘valSupNameForEmpty’ . Input only spaces in the supplier name field and click ‘Submit’ button. Input only spaces in the supplier name field and click ‘Submit’ button.html’ in the browser. It is not accessible by ‘valSupNameForOnlySpaces’.

suppform.write(“Data type of contactNum is “+typeof(contactNum)). document.0 Page 21 of 30 .value.//Line 1 document. 'Number' Deliverables of the exercise: 1) AddSupplier. Input contact number and click ‘Submit’ button.//Line 2 } Step 3: Associate the following event with the ‘Submit’ button of ‘Add Supplier’ web page onClick=” checkVarType()” Step 4: Open the modified ‘AddSupplier. Input contact number and click ‘Submit’ button.html’ code Step 2: Add the below function within ‘<script>’ tag function checkVarType() { contactNum = document.html’ in the browser. after conversion is Step 6: Open the modified ‘AddSupplier. Verify that the following output is displayed Data type of contactNum is string Step 5: Convert the type of ‘contactNum’ to number type using the in-built function ‘Number’ by adding the following lines after ‘Line 2’ contactNum = Number(contactNum).html Version No: 4.html’ in the browser. Verify that the following output is displayed Data type of contactNum is string Data type of contactNum after conversion is number Summary of this exercise: You have learnt the following There is no explicit data type for variables Automatic conversion of types would take place in JavaScript Usage of few in-built functions like 'typeof' .write(“Data type of contactNum “+typeof(contactNum)).contactNo.Infosys Limited Lab Guide for Introduction to Web Technology Assignment 13: Understanding typeof operator and in-built functions Objective: To understand the operation of ‘typeof’ operator and in-built functions Estimated time: 20 minutes Step 1: Take a copy of ‘AddSupplier.

Note: The main advantage of a function is reusability.html”. Step 3: Type the following code into a text editor and save it as “funreturn.50)+"</h1>"). } /* Comments: Calling function */ addFun(10.Infosys Limited Lab Guide for Introduction to Web Technology Assignment 14: Functions and Dialog boxes Objective: Functions are one of the fundamental building blocks in JavaScript.20). Estimated time: 25 minutes Step 1: Type the following code in to a text editor and save it as “fun1. add a function for multiplying two numbers. Here we will learn how to create user defined functions and make use of in built functions. </script> Step 2: Modify the above program. So instead of displaying the output inside the function return the result to the caller using the return keyword.html”.num2) { /* Comments : Returning value to the calling environment */ return num1+num2.write("<h1>Sum is "+addFun(20. } </script> </head><body> <h1> Function Demo</h1> /* Comments : More than one script tag can be used in a document */ <script type="text/javascript"> document. </script> Version No: 4. A function is a JavaScript procedure — a set of statements that performs a specific task.num2) { document.0 Page 22 of 30 . <html><head> <script type="text/javascript"> function addFun(num1.write("the sum is "+ (num1+num2)). <script type="text/javascript"> /* Comments : function definition */ function addFun(num1.

<html><head> <script type="text/javascript"> /* Comments : function does not have any arguments.html”. /* Comments : Calling function with five arguments */ dispStr("2one"."2five")."2two".html”. but arguments array will store the arguments */ function dispStr() { for(count=0. you can address the parameters passed to it as follows: arguments[i].Infosys Limited Lab Guide for Introduction to Web Technology </body></html> Step 4: Write a function called power(arg1.0 Page 23 of 30 . Note: The arguments of a function are maintained in an array.write(arguments[count]+" ").count<arguments. Within a function."1two". document. The total number of arguments is indicated by arguments. Step 5: Type the following code and save it as “funarg. } } /* Comments : Calling function with three arguments */ dispStr("1one".length.write("<br>")."2three". arg2) to find the power of the given number and save it as “power."1three").length."2four".count++) { document. </script> </head><body></body></html> Version No: 4.

moving your mouse over a link. } function closeWin() { /* Comments : confirm dialog box used to get user confirmation about closing the window or not */ res=confirm("Do you really want to close the window?"). alert("Sum is \n"+(num1+num2)). but rather.e. <html><head> <script type="text/javascript"> function dispMsg() { /* Comments : Using prompt dialog box data can be accepted through data entry field from the user */ num1=parseInt(prompt("Enter the first number". /* Comments : parseInt method used to convert string to a numeric value */ num2=parseInt(prompt("Enter the second number")).close(). } } Version No: 4."0")). if(res) { window.etc.0 Page 24 of 30 . prompt and confirm) which are the methods of “window” object.html” Note: There are three different types of dialog boxes (alert. All these three dialog boxes are modal i.Infosys Limited Lab Guide for Introduction to Web Technology Step 6: Write a function which takes ‘n’ number of arguments and return the average of n numbers and save it as “numarg.html”. submitting a form . such as pressing a button. For Example <input type="button" value="Close" name="but2" onClick="closeWin()"> Step 7: Type the following code and save it as “dialog. that execute JavaScript when an event happens. The user must close it before continuing. inside the html tags. Note: Event handlers are very powerful and useful in client side scripting. They are JavaScript code that are not added inside the <script> tags.

Note: It’s possible to change the default look of a table and form elements by styling their html tags. Odd numbered rows Version No: 4.  Use onClick event handler.html 5) numarg.html 3) power. Hint: Create separate Id’s styles for the following: 1.0 Page 25 of 30 .html Assignment 15: Applying styles to Tables and Form Elements Objective: To understand the usage of CSS with tables and form elements.Infosys Limited Lab Guide for Introduction to Web Technology </script> </head><body> <form name="f1"> /* Comments : Event Onclick used with ‘Add’ button . Hence on clicking the ‘Add’ button ‘dispMsg()’ function is invoked */ <input type="button" value="Add" name="but1" onClick="dispMsg()"> <input type="button" value="Close" name="but2" onClick="closeWin()"> </form> </body></html> Summary of this exercise: You have learnt  Create and invoke user defined functions.html 2) funreturn.html 4) funarg. Estimated time: 25 minutes Step 1: Create the following html file and save it as “csstab1. Table heading 2.html”.html 6) dilog. Even numbered rows 3. Deliverables of the exercise: 1) fun1.  The arguments array and its usage  Use Dialog boxes.

Version No: 4. Step 3: Type the following code and save the file as “cssform1. } form{ border: thick solid blue.html”.css. letter-spacing:3pt. } </style> </head> <body> <form> Name <input type="text" value="style"><br> <input type="submit"> </form> </body> </html> Step 4: create the following html file and save it as “cssform2.Infosys Limited Lab Guide for Introduction to Web Technology Step 2: Modify the above code by including the above created style classes in a separate external file cssexternal.0 Page 26 of 30 . font-size:14pt. <html> <head> <style> input{ color:blue.html”.

Infosys Limited Lab Guide for Introduction to Web Technology Summary of this exercise: You have learnt Applying styles to <table>.html 4) cssform2.html 2) cssexternal. Note: Forms enable users to submit information that can be used to create an interactive web application ranging from an order entry system to an email application.0 Page 27 of 30 . <tr> and <td> tag. <input> and <select> tag. Form Validation and submission using JavaScript Objective: To understand designing interactive forms in HTML. Estimated time: 60 minutes Version No: 4. Deliverables of the exercise: 1) csstab1.css 3) cssform1. Applying styles to <form>.html Assignment 16: Creating Interactive Webpage and Apply CSS. Applying external styles.

<input type=”hidden”> : Used to store some temporary data(hidden) that can be accessed by client side or server side programs.html” page. <input type=”button”> : This control used to create a button that has no predetermined actions(rest (or) submit).0 Page 28 of 30 . which you have designed in Assignment 10.Infosys Limited Lab Guide for Introduction to Web Technology Step 1: Use “AddCustomer. Version No: 4. <input type=”file”> : This control is used for file uploading. <body> <form> <! – Comment: The entire table should be inside the table tag--> <table border=”2”> <tr> <td>User ID</td> <td><input type=”text” name=”txtname”></td> </tr> …………………………………………………………………………… …………………………………………………………………………… </table> </form><!—Comment: close the form only after the </table> tag --> </body> Note: Some special elements. <input type=”image”> :This control is used to create a graphical version of the submit button.

maxlength : sets the maximum number of characters allowed in the field. rs. name and value are the common attribute for all the <input> elements.close. connection.Connection") . var rs = new ActiveXObject("ADODB.execute("insert into …………”). var connectionstring="Data Source=<server name>. } </script> Version No: 4. connection).Open("SELECT * FROM TableName".0 Page 29 of 30 .fields(“column2”)). Step 4: Partial JavaScript code for SQL Database connection for adding and retrieving the data from the database.write(rs. checked : To set a checkbox (or) radio button to be selected by default.eof) { document. Applicable only to text.close. selected : An occurrence of the selected attribute in the <option> element sets the form select control to select this item by default. } rs.Provider=SQLOLEDB".Infosys Limited Lab Guide for Introduction to Web Technology Note: Some special attributes. connection.Integrated Security=SSPI. <script type="text/javascript"> function DataSubmit() { var connection = new ActiveXObject("ADODB. rs.Open(connectionstring). connection. rs. hidden and password elements.Recordset").Initial Catalog=<DatabaseName>.MoveFirst while(!rs.movenext. Step 2: Write the Scripting code to validate the form and add the values to the database.fields(“column1”)+”\t”+ rs.

html Version No: 4. Deliverables of the exercise: 1) login.html 2) AddCustomer.0 Page 30 of 30 .Infosys Limited Lab Guide for Introduction to Web Technology Summary of this exercise: You have learnt Creating a login screen. Designing GUI using HTML. Using <textarea> and <select> Aligning form elements using tables. Debugging the code.