IUWT Assignments

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
Contents
COPYRIGHT NOTICE .............................................................................................................................................................. i
Contents .................................................................................................................................................................................. iii
Assignments for Introduction to UI Concepts and Web Technologies ...................................................................................... 1
Context................................................................................................................................................................................... 1
Guidelines .............................................................................................................................................................................. 1
Assignment 1: Explore on your social Network .................................................................................................................... 2
Assignment 2: Impact of Web ............................................................................................................................................... 2
Assignment 3: Network Components .................................................................................................................................... 3
Assignment 4: Interconnecting Devices ................................................................................................................................ 4
Assignment 5: IP Addressing and Types of Web Content ..................................................................................................... 5
Assignment 6: Understanding Browsers and HTML ............................................................................................................. 5
Assignment 7: Ways to Apply CSS and its formatting .......................................................................................................... 7
Assignment 8: Chaining of Selectors and Class in CSS ....................................................................................................... 8
Assignment 9: Using div, Span, list, hyperlink and images in CSS....................................................................................... 9
Assignment 10: Creating Tables and Form Elements in HTML ......................................................................................... 12
Assignment 11: Understanding the client side Java Script .................................................................................................. 16
Assignment 12: Understanding functions and scope of variables........................................................................................ 18
Assignment 13: Understanding typeof operator and in-built functions ............................................................................... 21
Assignment 14: Functions and Dialog boxes ....................................................................................................................... 22
Assignment 15: Applying styles to Tables and Form Elements .......................................................................................... 25
Assignment 16: Creating Interactive Webpage and Apply CSS, Form Validation and submission using JavaScript ........ 27
CONFIDENTIAL
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.
Guidelines
1. All assignments in this document must be completed in order to complete the
course
2. The assignments need to be completed as instructed by the facilitators and
submitted appropriately
3. In order to complete the course, assignments in this document must be
completed in the sequence mentioned
Version No: 4.0
Page 1 of 30
Infosys Limited
Assignment 1: Explore on your social Network

Objective: To explore on web technology statistics presently.
Problem Description: Identify the statistical data for the Social Media listed below in
the year 2014.
Google
Twitter
Yahoo
You Tube
Amazons Cloud Service
Q1: Active Users for all the above social networks.
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.
Q6: Number of page in google index
Social Network 2014
Google
Twitter
Yahoo
YouTube
Amazons Cloud
Service
Active Users
Visitors (per day)
Data (per day)
No. 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.
Background: Wheel is one of greatest inventions of mankind during bronze era (3500
to 1200 BC). Steam Engine initiated Industrial revolution (1606 to 1770 AD) in Europe.
The adding machine by Blaise Pascal (AD 1642) set the trend for automation of
computations. The concept of amplification realized using the vacuum tube triodes
brought paradigm shift in the field of electronics. The invention of transistor (AD 1947)
revolutionized the field of semiconductor electronics. Yet another accomplishment is the
Version No: 4.0
Page 2 of 30
Infosys Limited
invention of microprocessor (AD 1971). The first Personal computer was rolled out by
IBM in the year 1981. All these inventions have had a great impact on day to day life of
people.
Q1: In the last 40 years, 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?
Assignment 3: Network Components

Objective: To study about different network components such as repeaters, hubs,
bridges, switches, and routers.
Problem Description: A network service provider has several orders from reputed
institutions and organizations for installation of connecting devices in their networks.
Below are given details of few such orders.
Identify the network component that can be suitably used for the below orders.
Scenario 1: Your University has two departments, Computer Science department and
Mechanical Engineering department. Both are using Ethernet based networks. The
distance between the two department buildings is around 500 meters within the
university campus and the two networks need to be connected. What is the device that
can be used?
Scenario 2: Your Company has two offices in a mega city. The first office located in
heart of the city has network working on say, ATM technology, and the second office
located around 50 km away has a network using Ethernet. The networks of the two
offices need to be connected. What is the device that can be used?
Version No: 4.0
Page 3 of 30
Infosys Limited
Scenario 3:Data has to go from Bangalore to Chennai on a dedicated link on optical

fiber. Since the distance of around 350 km between these two cities is quite high, the
signal strength at the receiving end will become too poor and not remain recognizable
by the receiver. What is the device that can be used for ensuring successful
communication?
Summary of this assignment:
You have learnt to identify the different interconnecting devices for the given
scenarios.
Assignment 4: Interconnecting Devices

Objective: To study about different network components such as repeaters, hubs,
bridges, switches, and routers.
Problem Description: If you are given two hosts which are connected via a black box
which you dont know. How can you recognize that black box as hub, switch, router or
gateway without using any additional device or host?
One more thing: You cannot perform any operation on the black box. You can't do
anything with black box. You have access to two hosts only.
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.
Scenario 2: A broadcast ping (ie: 255.255.255.255) from one host does not increment
traffic counters on the other host.
Scenario 3: Either hosts' ARP table does not have an entry for the other host.
You have learnt to identify the different interconnecting devices for the given
scenarios.
Version No: 4.0
Page 4 of 30
Infosys Limited
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, active and dynamic.
1. (a) Problem Description: Identify the following:
a. IP address of your machine
b. DNS server IP addresses
c. DHCP server IP address
1. (b) Problem Description: Identify the appropriate web content type for the following
scenarios.
1. LiveFree hospital is a reputed medical organization known for its social activities.
Recently, management organized free medical checkup camp as part of social
responsibility activities. Jane, the coordinator of the medical camp uploaded the photos
and shared the link to other employees for viewing.
2. Alex is curious to play an online game, however he is prompted for downloading a

script on to his computer for better performance and display. Alex accepted the
download prompt and started playing the game.
3. James is searching for information on Algorithm Design Techniques using Google
search engine.
You have understood about how to know the IP address and other information of
your machine and your network.
You have learnt to identify the different types of web content.
Note: To get the above information: Go to the command prompt: Start > Run and type, cmd. At the prompt type, ipconfig -all.
Assignment 6: Understanding Browsers and HTML

Objective: To understand the software requirements for learning HTML and work with
different Browsers and editors.
Version No: 4.0
Page 5 of 30
Infosys Limited
Background: HTML file is a text file containing markup tags. HTML file can be created
using a text editor. You can view the pages with a program called a Web browser.
Popular browsers are Internet Explorer (from Microsoft) and Netscape Navigator
(from Netscape Communications) now known as Mozilla Firefox. Opera is a very
popular alternative browser. Lynx is a text browser for the World Wide Web.
Note: You can easily edit HTML files using a WYSIWYG (what you see
is what you get) editor like FrontPage, Visual Interdev etc. However,
these tools do not generate much optimized HTML code. As a
programmer, you should be able to create and edit HTML files using text
editors like Notepad or Textpad. In the entire course you are supposed
to use only a text editor

Step 1: Open Internet Explorer(Select the Start Menu-> Internet Explorer). And type
http://www.w3schools.com on the Address bar.
Step 2: Select menu option, view -> source. You can find the HTML tag that creates the
sparsh home page.
Version No: 4.0
Page 6 of 30
Infosys Limited
Step 3: Select menu option, Help -> About Internet Explorer. This should display the
version of the Internet Explorer browser you are using.
Step 4: What is the version of Internet Explorer you are using?.
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.
Background: You have learned how to create HTML documents. 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.
Note: CSS1 Accepted by the W3C Consortium in 1996.
In 1998, CSS2 was introduced to add more power to CSS.
However, no browsers support all of the CSS2 features; although, many
support parts of it.
Internet Explorer 6, Netscape 6, and Opera 6 have almost full support of
CSS.
Version No: 4.0
Page 7 of 30
Infosys Limited
You have been provided with EasyShop_Ext_CSS folder that contains html_files, css
and images subfolders. You are expected to modify .css file as suggested below and
observe the changes in the HTML pages.
Step 1: Take a copy of EasyShop_Ext_CSS folder to the desktop. Make the
modifications to style.css as per the following requirements.
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,
AddUser and AddCustomer pages.
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
Usage of different font properties in CSS file
Deliverables of the exercise:
1) style.css
Assignment 8: Chaining of Selectors and Class in CSS

Objective: To understand the usage of selectors using cascading style for your HTML
documents.
and images subfolders. You are expected to modify .css file and HomeScreen.html file
as suggested below and observe the changes in the HTML pages.
Version No: 4.0
Page 8 of 30
Infosys Limited

modifications to style.css and HomeScreen.html as per the following requirements.
Step 2: Create style for divisions using its id and assign different color to each division.
Division with same id must have similar appearance.
Usage of selectors in CSS file
1) style.css
2) HomeScreen.html
Assignment 9: Using div, Span, list, hyperlink and images in CSS

Objective:
To create a new division using <div>, <span>, list, hyperlink and image tags.
To understand how to create ordered and unordered lists in HTML.
To understand how to create hyperlinks in HTML
To understand how to embed images in HTML
and images subfolders. You are expected to modify .css file and HomeScreen.html file
as suggested below and observe the changes in the HTML pages.
modifications to style.css and HomeScreen.html as per the following requirements.
Step 2: Add a new div id called string to the style.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 file:
Version No: 4.0
Page 9 of 30
Infosys Limited
This application automates the retail processing. 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 4: Add a new span id called RetailWord to the style.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.html file:
retail chain
Step 5: Observe the changes to the words retail chain in the HomeScreen page.
modifications to HomeScreen.html as per the following requirements.
Step 7: Add a new list item called Working Staff as the last item to the user groups in
HomeScreen.html file as follows:
1.
2.
3.
4.
Administrator
Manager
Billing Staff
Working Staff
Step 8: Modify the above list numbering to A, B, C, and D instead of 1, 2, 3 and 4.

Step 9: Modify user groups ordered list to unordered list in HomeScreen.html file as
follows:
Administrator
Manager
Billing Staff
Working Staff
Step 10: Remove Manager list item from the above unordered list. (delete <li> tag for
Manager)
Version No: 4.0
Page 10 of 30
Infosys Limited
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 .CSS file and apply the above mentioned properties to the same.
Step 11: Modify the above unordered list items from disc to square in .CSS file.
Hint: Use ul tag in the .CSS file and specify the appropriate type for list-style-type
property.
Step 12: Observe the changes to the ordered list in the HomeScreen page.
modifications as per the following requirements.
Step 14: Add a new link with the label Contact Us next to home link in AddUser.html
as follows :
Home | Contact Us
Link Contact Us label to ContactUs.html provided in the EasyShop_Ext_CSS folder.
Step 15: Add a new link with the label Contact Us next to home link in
AddCustomer.html as follows :
Home | Contact Us
Link Contact Us label to ContactUs.html provided in the EasyShop_Ext_CSS folder.
Step 16: Change the link properties for Contact Us in style.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.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.0
Page 11 of 30
Infosys Limited
Step 18: Observe the changes in AddUser page and AddCustomer page before visiting
the links and after visiting the links
modifications to HomeScreen.html as per the following requirements.
Step 20: Change the cart image to Cart 1.jpg in style.css
Step 21: Observe the changes in AddUser page, AddCustomer page, HomeScreen
Page and ContactUs Page.
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
1. style.css
2. HomeScreen.html
3. AddUser.html
4. AddCustomer.html
5. 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.
To add text box and text area in a form and apply different properties to the
elements.
To add radio button, list box and check box in a form.
To add button in a form.
Step 1: Design a table file named table.html
Step 2: Add the following rows to the table.
Version No: 4.0
Page 12 of 30
Infosys Limited
Hint: Use rowspan and colspan wherever necessary

Step 3: For the above created table, apply the following CSS properties to the table and
its rows 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.css for applying the above mentioned
properties.
Hint 2: Use border-spacing and padding in style.css for applying the above mentioned
properties
Step 6: Observe the changes in html Page.
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.html file.
Step 8: Address Line text area should have default text as Your Address Here.
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.
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.
Version No: 4.0
Page 13 of 30
Infosys Limited
Step 12: Observe the changes in AddCustomer.html and AddUser.html Page.
Step 13: Elite should be selected as the default without changing the above
mentioned sequence.
Note : Refer to the screenshot for the above mentioned requirements
Version No: 4.0
Page 14 of 30
Infosys Limited
Step 14: Observe the changes in AddCustomer.html Page.

Step 15: Add a new button in AddCustomer.html with type as submit and label of the
button as Check.
Version No: 4.0
Page 15 of 30
Infosys Limited

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
1. ContactUs.html
2. Style.css
3. AddCustomer.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). Using
HTML and CSS you can create only static pages. Now you can create interactive pages
using client side JavaScript.
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 - a scripting language is different from programming language.
JavaScript is an interpreted language (means that scripts execute
without preliminary compilation). JavaScript is supported by all major
browsers like Netscape, Internet Explorer, Mozilla etc.
Step 1: Type the following code into a text editor and save it as FirstJS.html
<html>
<head>

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

document.write(<h1>Displaying using JavaScript</h1>)
Step 4: Correct the error and save the file as ErrorFree.html

You have learnt
How to use JavaScript in HTML documents.
Debug and fix the error.
1) FirstJS.html
2) FirstError.html
3) ErrorFree.html
Assignment 12: Understanding functions and scope of variables

Objective: To understand the basic concepts of functions and scope of variables in
JavaScript
Version No: 4.0
Page 18 of 30
Infosys Limited
Step 1: Take a copy of AddSupplier.html

Step 2: Add the below function inside <script> tag
sName= ;
function valSupNameForEmpty()
{
sName= document.suppform.sName.value;
if(sName!=null && sName.length==0)
{
document.write("Supplier Name is empty");
return;
}
}
Step 3: Include another function by name 'valSupNameForOnlySpaces'
function valSupNameForOnlySpaces()
{
for(var count=0;count<sName.length;count++)
{
if(sName.charAt(count)!=' ')
{
return;
}
}
document.write("Supplier Name cannot contain only spaces");
}
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.html in the browser. Input only spaces in the
supplier name field and click Submit button. Verify that the following output is displayed
Supplier Name cannot contain only spaces.
Version No: 4.0
Page 19 of 30
Infosys Limited
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 with the keyword var, still it is
global as it is defined outside all the functions. Hence sName is accessible by both the
functions, valSupNameForEmpty and valSupNameForOnlySpaces
Step 9: Remove the keyword var associated with sName definition. Place this
modified statement inside the function valSupNameForEmpty as the first statement.
Inference: Even though the variable sName is defined inside the function
valSupNameForEmpty it is still global as it is NOT associated with var . Hence
accessible by valSupNameForOnlySpaces also.
Step 11: Now, add the keyword var with sName definition.
Inference: As the variable sName is associated with var inside the function
valSupNameForEmpty , it is local to this function only. It is not accessible by
valSupNameForOnlySpaces. Hence the error message.

You have learnt
How to define functions
How to define variables with different scopes
1) AddSupplier.html
Version No: 4.0
Page 20 of 30
Infosys Limited
Assignment 13: Understanding typeof operator and in-built

functions
Objective: To understand the operation of typeof operator and in-built functions
Step 1: Take a copy of AddSupplier.html code
Step 2: Add the below function within <script> tag
function checkVarType()
{
contactNum = document.suppform.contactNo.value;//Line 1
document.write(Data type of contactNum is +typeof(contactNum));//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.html in the browser. Input contact number and
click Submit button. 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);
document.write(Data type of contactNum
+typeof(contactNum));
after
conversion
is
Step 6: Open the modified AddSupplier.html in the browser. Input contact number and
click Submit button. Verify that the following output is displayed
Data type of contactNum is string
Data type of contactNum after conversion is number
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' , 'Number'
1) AddSupplier.html
Version No: 4.0
Page 21 of 30
Infosys Limited
Assignment 14: Functions and Dialog boxes

Objective: Functions are one of the fundamental building blocks in JavaScript. A
function is a JavaScript procedure a set of statements that performs a specific task.
Here we will learn how to create user defined functions and make use of in built
functions.
Step 1: Type the following code in to a text editor and save it as fun1.html.
<script type="text/javascript">
/* Comments : function definition */
function addFun(num1,num2)
{
document.write("the sum is "+ (num1+num2));
}
/* Comments: Calling function
*/
addFun(10,20);
</script>
Step 2: Modify the above program, add a function for multiplying two numbers.
Note: The main advantage of a function is reusability. So instead of
displaying the output inside the function return the result to the caller
using the return keyword.
Step 3: Type the following code into a text editor and save it as funreturn.html.
<html><head>
function addFun(num1,num2)
{
/* Comments : Returning value to the calling environment */
return num1+num2;
}
</script>
</head><body>
<h1> Function Demo</h1>
/* Comments : More than one script tag can be used in a document */
document.write("<h1>Sum is "+addFun(20,50)+"</h1>");
</script>
Version No: 4.0
Page 22 of 30
Infosys Limited
</body></html>
Step 4: Write a function called power(arg1, arg2) to find the power of the given number
and save it as power.html.
Note: The arguments of a function are maintained in an array. Within a
function, you can address the parameters passed to it as follows:
arguments[i]. The total number of arguments is indicated by
arguments.length.
Step 5: Type the following code and save it as funarg.html.
<html><head>
/* Comments : function does not have any arguments, but arguments array will
store the arguments */
function dispStr()
{
for(count=0;count<arguments.length;count++)
{
document.write(arguments[count]+" ");
}
}
/* Comments : Calling function with three arguments */
dispStr("1one","1two","1three");
document.write("<br>");
/* Comments : Calling function with five arguments */
dispStr("2one","2two","2three","2four","2five");
</script>
</head><body></body></html>
Version No: 4.0
Page 23 of 30
Infosys Limited
Step 6: Write a function which takes n number of arguments and return the average of
n numbers and save it as numarg.html
Note: There are three different types of dialog boxes (alert, prompt and
confirm) which are the methods of window object. All these three
dialog boxes are modal i.e. The user must close it before continuing.
Note: Event handlers are very powerful and useful in client side
scripting. They are JavaScript code that are not added inside the
<script> tags, but rather, inside the html tags, that execute JavaScript
when an event happens, such as pressing a button, moving your mouse
over a link, submitting a form ,etc. For Example
<input type="button" value="Close" name="but2" onClick="closeWin()">
Step 7: Type the following code and save it as dialog.html.

<html><head>
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","0"));
/* Comments : parseInt method used to convert string to a numeric value
*/
num2=parseInt(prompt("Enter the second number"));
alert("Sum is \n"+(num1+num2));
}
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?");
if(res)
{
window.close();
}
}
Version No: 4.0
Page 24 of 30
Infosys Limited
</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>

You have learnt
Create and invoke user defined functions.
The arguments array and its usage
Use Dialog boxes.
Use onClick event handler.
1) fun1.html
2) funreturn.html
3) power.html
4) funarg.html
5) numarg.html
6) dilog.html
Assignment 15: Applying styles to Tables and Form Elements

Objective: To understand the usage of CSS with tables and form elements.
Note: Its possible to change the default look of a table and form
elements by styling their html tags.

Step 1: Create the following html file and save it as csstab1.html.
Hint:
Create separate Ids styles for the following:
1. Table heading
2. Even numbered rows
3. Odd numbered rows
Version No: 4.0
Page 25 of 30
Infosys Limited
Step 2: Modify the above code by including the above created style classes in a
separate external file cssexternal.css.
Step 3: Type the following code and save the file as cssform1.html.
<html>
<head>
<style>
input{
color:blue;
letter-spacing:3pt;
font-size:14pt;
}
form{
border: thick solid blue;
}
</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.html.
Version No: 4.0
Page 26 of 30
Infosys Limited

You have learnt
Applying styles to <table>, <tr> and <td> tag.
Applying styles to <form>, <input> and <select> tag.
Applying external styles.
1) csstab1.html
2) cssexternal.css
3) cssform1.html
4) cssform2.html
Assignment 16: Creating Interactive Webpage and Apply

CSS, Form Validation and submission using JavaScript
Objective: To understand designing interactive forms in HTML.
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.
Version No: 4.0
Page 27 of 30
Infosys Limited
Step 1: Use AddCustomer.html page, which you have designed in Assignment 10.
<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=file> : This control is used for file uploading.
<input type=button> : This control used to create a button that has no
predetermined actions(rest (or) submit).
<input type=hidden> : Used to store some temporary data(hidden) that
can be accessed by client side or server side programs.
<input type=image> :This control is used to create a graphical version
of the submit button.
Version No: 4.0
Page 28 of 30
Infosys Limited
Note: Some special attributes.

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

You have learnt
Creating a login screen.
Designing GUI using HTML.
Using <textarea> and <select>
Aligning form elements using tables.
Debugging the code.
1) login.html
2) AddCustomer.html
Version No: 4.0
Page 30 of 30

IUWT Assignments

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

IUWT Assignments

Загружено:

Авторское право:

Доступные форматы

Assignments for Introduction to UI Concepts and Web

Anil Kumar P & Malathi M

Document Revision History

Initial creation as per FPR

Updated based on the

Customization Revision History

Dr. Suresh P.,

Customization for Campus

Lab Guide for Introduction to Web Technology

Assignments for Introduction to UI Concepts and Web

Version No: 4.0

Lab Guide for Introduction to Web Technology

Assignment 1: Explore on your social Network

Estimated time: 10 minutes

Assignment 2: Impact of Web

Version No: 4.0

Lab Guide for Introduction to Web Technology

communication and collaboration

Assignment 3: Network Components

Version No: 4.0

Lab Guide for Introduction to Web Technology

Scenario 3:Data has to go from Bangalore to Chennai on a dedicated link on optical

Assignment 4: Interconnecting Devices

Version No: 4.0

Lab Guide for Introduction to Web Technology

Assignment 5: IP Addressing and Types of Web Content

2. Alex is curious to play an online game, however he is prompted for downloading a

Assignment 6: Understanding Browsers and HTML

Version No: 4.0

Lab Guide for Introduction to Web Technology

Estimated time: 5 minutes

Version No: 4.0

Lab Guide for Introduction to Web Technology

Summary of this exercise:

Assignment 7: Ways to Apply CSS and its formatting

Version No: 4.0

Lab Guide for Introduction to Web Technology

Assignment 8: Chaining of Selectors and Class in CSS

Version No: 4.0

Lab Guide for Introduction to Web Technology

Estimated time: 15 minutes

Assignment 9: Using div, Span, list, hyperlink and images in CSS

Version No: 4.0

Lab Guide for Introduction to Web Technology

Step 8: Modify the above list numbering to A, B, C, and D instead of 1, 2, 3 and 4.

Version No: 4.0

Lab Guide for Introduction to Web Technology

Version No: 4.0

Lab Guide for Introduction to Web Technology

Assignment 10: Creating Tables and Form Elements in HTML

Version No: 4.0

Lab Guide for Introduction to Web Technology

Hint: Use rowspan and colspan wherever necessary

Version No: 4.0

Lab Guide for Introduction to Web Technology

Step 12: Observe the changes in AddCustomer.html and AddUser.html Page.

Version No: 4.0

Lab Guide for Introduction to Web Technology

Step 14: Observe the changes in AddCustomer.html Page.

Version No: 4.0

Lab Guide for Introduction to Web Technology

Summary of this exercise:

Assignment 11: Understanding the client side Java Script

Version No: 4.0