IP Exit Exam

Study Guide
For
Internet Programming
Department of Computer Science

Faculty of Informatics
Prepared by
Michael Melese
293
St. Mary’s University College
Degree Exit Exam Study Guides
January 2012
Internet Programming
The client server communication established with the help of scripting (both client and
server side) and markup languages following all the communication protocols and
transmission protocols can be described as Internet programming.
Summary of the Module
This guide will get you up and running HTML, Cascade Style Sheet (CSS), JavaScript
and Server Side Scripting Language (SSSL) specifically PHP so as to makes you ready
for developing a dynamic website using MYSQL as a middleware.
Part I: Introduction to HTML and Client side Scripting Language

Unit I: HTML
HTML is a special kind of text document that is used by Web browsers to present text
and graphics. HTML documents are often referred to as "Web pages". The browser
retrieves Web pages from Web servers over the Internet without limitation.
Many people still write HTML by hand using tools such as Notepad on Windows, or
gEdit on the Linux or using a third party Editor called WYSIWYG.
Once you are comfortable with the basics of HTML, you may want to learn how to
add a touch of style using CSS, and to go on to try out features covered in my page on
advanced HTML
General Objective
The general objective of this section is to make the student to learn about HTML so as
to develop in order to develop a fully fledged static and dynamic site to be hosted on
the internet.
Specific Objectives
The specific objective of this document is to learn HTML tags and basic document
structure which includes Headings, Paragraphs, Formatting, Fonts, Styles, Links,
Images, Tables, Lists, Forms, Color names and value and other HTML elements.
294
Self-test question
1. How can you open a link in a new browser window?
a. <a href="url" target="_blank">
b. <a href="url" target="new">
c. <a href="url" new>
d. <a href="url" target="_parent">
2. Which of the following path is supported by HTML?
a. Relative only
b. Absolute only
c. Absolute and Relative
3. There are_____color names recognized by all version of HTML.

a. 6 c. 256
b. 8 d. 16
4. Interpret this statement: <strong>SMUC</strong>
a. It makes SMUC strong
b. It will print out SMUC in bold font
c. It highlights SMUC as being strong
5. What is the HTML? Discuss in detail
6. How can we add a comment in HTML? Show with an example.
7. What is Empty HTML element or tag? Give two examples of empty tag.
8. How do we define HTML Attribute Reference?
9. How Cell Padding is different from Cell Spacing?
10. How you display a picture in background of HTML?
11. How can we use Form's Action Attribute and Submit Button in HTML?
12. What are the different types of list and how they differ one from the other? List them and
give one example for each.
13. Create the following table using HTML?
14. How can we achieve text formatting in HTML? Give at least 5 examples of text
formatting tag and discuss how to use inside the code.
15. Suppose you need to display a text without any modification including the newline, space
and the like element. What type of tag will allows you to construct this? Show with an
example.
16. Construct the following table as it is using HTML.
295
17. Given the code construct the table.
<html>
<head> <title>messed up table</title> </head>
<body>
<table width="400" border="1" align=”center”>
<tr><td width="139" height="42"><del>Abysinia</del> </td>
<td colspan="2" align="center">Ethiopia</td>
<td colspan="2" rowspan="3"><script language="javaScript"><br />
alert("can u see me?");<br />
</script></td>
<td width="80" rowspan="3" valign="top" align="right">TCP/IP Model </td>
<td width="94">E<sub>X</sub>I<sup>T<sub>EXAM</sub> </sup> </td>
</tr>
<tr> <td colspan="2" align="center">The law of Inertia </td>
<td width="58" rowspan="2">Pissa</td>
<td rowspan="2"><pre> this text<br>
will be diplayed<br> as it is using<br> <b> predefined tag</b> </td>
</tr>
<tr><td colspan="2" rowspan="2" align="right">How many colums and rows are
spanned plus aligned to the right </td>
</tr>
<tr> <td height="37" colspan="3"align="right">Lucy origin of life </td>
<td colspan="2">R<sub>e</sub>n<sup>aissance</sup> </td>
</tr>
<tr><td rowspan="2">S©hool of ©omputing</td>
<td width="65"> </td>
<td colspan="3">Exchange rate for £; </td>
<td>SMUC</td>
<td align="right">COSC</td>
</tr>
<tr><td colspan="2">® trade mark </td>
<td colspan="2" align="center"><b><i>bold, italic & Justify</i></b> </td>
<td colspan="2" align="right">HTML</td>
296
</tr></table></body></html>
Solution for Self-test question
1. A
2. C
3. C
4. B
5. HTML stands for Hyper Text Markup Language. It is a markup language which is use to
develop web pages. Using them we can describe our document into the form of text
based information. For achieving those goals it has many tags like title, head, paragraph,
table etc. In HTML we write tags surrounded with angle brackets. We can you some
scripting language like JavaScript to display HTML doc in more attractive way.
Some main features of HTML are given below:

1. It is markup language.
2. It has provided pre-defined tags.
3. We save HTML file by using one of two extensions .htm or .html.
4. It uses markup tags to display on web pages.
6. You can add comment in HTML using <! - - Your comment’s goes here - - > as shown
code below.
<html>
<body>

<p>this is a regular paragraph</p>
</body>
</html>
7. When HTML element does not have any content to put between the starting and ending
tag we will leave the tag empty. Then those elements are called as Empty element.
Empty element does not have any end tag.
<br> used to insert a new line
<hr> used to insert a line
<input type=”text” name=”fname” > used for displaying a text box for input element.
8. Here I have given you some example of attribute with their description. These are a
simple tooltip to be displayed for the user as he/she moves the mouse over the link.
Syntax: :<a href=”URL” title="sometitle">.......</a>

<html>
<head>
<title>Wel-Come to IP</title>
</head>
<body>
297
<a href="Internet Programming.html" title='IP'>Internet
Programming</a>
</body>
</html>
9. The difference between Cell-padding and Cell-spacing attribute of the table are
discussed in detail below:
Cell Padding: Cell Padding in HTML: is used to define the how much space need
between cell content and cell edges.
Syntax:
<Table width="200" border="1" cellpadding="3"> means that it takes 3 pixels of
padding inside the each cell.
Cell Spacing: It is also used to format the table .but it differ than cell padding because
in cell padding we can set an extra space to separate the cell content with cell edges.
Where as we use cell spacing to set the space between the cells.
Syntax:
< Table width="200" border="1" cellspacing="10">
We can use cell padding and cell spacing together like that,
< Table width="200" border="1" cellpadding="3" cellspacing =”10”>
10. We can display a picture as a background of HTML either using as a style of by using
the background attribute of the page using as the code shown below.
Syntax:
<body style="background-image:url(image path)"> or
<body background="image path">
11. Using Submit Button we can sends the form to the server and Action Attribute is
specified that which file we send.
<form name="input" action="submit_form.php" method="get">

<input type="hidden" name="hidden_val">
<input type="text" name="Form">
<input type="submit" value="Submit">
</form>
When we click the submit button web page than the sumbit_form is send to the server
page of submit_form.php.
12. In HTML we can create ordered, unordered and definition list.
Ordered List: Ordered list define as list of items and they are fully numbered. Our
ordered list starts with <ol> tag and end with <li> tag.
<ol>
<li>Internet Programming</li>
<li>Rapid Application development</li>
298
<li>Network Administration and Security </li>
</ol>
Output:
1. Internet Programming
2. Rapid Application development
3. Network Administration and Security
Unordered List: Unordered list define as list of items and they are write with small black
circles. Our ordered list starts with <ul> tag and end with <li> tag.
<ul>
<li>Internet Programming</li>
<li>Rapid Application development</li>
<li>Network Administration and Security </li>
</ul>
Output:
 Internet Programming
 Rapid Application development
 Network Administration and Security
Definition List: It is not only a list of items. In create list of item with their description.
Description list start with <dl> tag and end with <dt> tag. In this we list each item by
using <dt> and write their description by using <dd> tag as shown below.
<dl>
<dt>Coffee</dt>
<dd>Black Hot drink</dd>
<dt>Ice Cream</dt>
<dd> A smooth, sweet, cold food prepared from a frozen mixture of milk
products.</dd>
</dl>
Output:
Coffee
Black Hot drink
Ice Cream
A smooth, sweet, cold food prepared from a frozen mixture of milk products.
You can use any kind of tag inside the above three type of list. i.e <p>, <br>, <img>,
<table>, <form>, headings and …
13. We use <table> tag to create the table in HTML. After creating a table we use <tr> tag to
create the rows and use <td> to create data cell on each row. Make sure to use <th> tag if
the table contain heading. These cells can store images, text, tables, list etc.
299
Basic syntax to create an Table are given below:
<table border="1" align="Center">

<tr>
<th> </th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<th>Row 1</th>
<td>row 1, cell 1</td>
</tr>
<tr>
<th>Row 2 </th>

</tr>
</table>
14. Using Text formatting we can change the overall view of the sentence like as shown
below:
<b> This is bold text
<i> This is a italic text
<sub> Used to make the text subscripted like Co2
<sup> Used to make the text superscripted like X2
<u> used to make the text underlined
<h1> Used to make the text as a header with largest font

Or you can use one or more combination (nested tag) of the above text in order to
get different ways of formatted text.
15. <html>
<body>
<pre>
300
Text in a pre element tags are displayed
as you Typed
in a fixed-width
font, and it preserves
both spaces and line breaks and Others
</pre>
<p>The pre element is often used to display computer code:</p>
<pre> for($i=0;$i<=100;$i++)
print($i);
</pre>
</body>
</html>
The output is shown below
16. Code solution

<html>
<head>
<title> Table Construction </title>
</head>
<body>
<TABLE border=2 align="center">
<TR> <TD COLSPAN=3 ALIGN="center"><H2>Main Table</h2></TD>
</TR>
<TR>
<TD ALIGN="center">
<TABLE BORDER=4>
<TR> <TD COLSPAN=2 ALIGN="center">Sub Table One </TD>
</TR>
<TR> <TD>Item 1 </TD> <TD> Item 2 </TD> </TR>
</TABLE>
</TD>
<TD> </TD>
<TD ALIGN="center" >
<TABLE BORDER=4>
<TR> <TD COLSPAN=2 ALIGN="center">Sub Table Two </TD>
</TR>
<TR> <TD>Item 3 </TD> <TD> Item 4 </TR>
301
</TABLE>
</TD>
</TR>
</TABLE>
</body>
</html>
17. Output the table code
Self-test question
1. What type of protocol we are expected to use in order to access/send a file from/to a web
server?
2. Identify the correct order of HTML tags that used to construct a single page?
a. <html><head><title><title></head><body></body></html>
b. <html><head></head><body><title><title></body></html>
c. <html><head><title><title><body></body></head></html>
d. <html><title><title><head></head><body></body></html>
3. Which command we use to link a page with another page of HTML page?
a. <a herf ="page.html"></a>
b. <a href="page.html"></a>
c. <a connect="page.html" ></a>
d. <a src="page.html" ></a>
4. Identify the correct tag that can be used to add an Image to a given page?
a. <image src="url"> b. <img src="url">
302
c. <src img="url"> d. <img srcimg="url">
5. Identify one or more elements of World Wide Web (www) that must be present in order
to access a page from a remote location like from Google server?
a. Browser
b. Internet connection
c. Web server in the client side
d. Domain name system
e. HTTP protocol
f. The page itself
6. Choose the correct HTML tag for the largest heading
a. <h6> c. <head>
b. <heading> d. <h1>
7. How can you create an e-mail link?
a. <mail href="[email protected]">
b. <mail>[email protected]</mail>
c. <a href="[email protected]">
d. <a href="mailto:[email protected]">
8. Write the output of the following code
<html>
<body>
<pre> the quick brown for <br> Jumps <b>o<i>ve</i>r the lazy dog</b></pre>
<p>sample java for loop statement</p>
<pre>
for(int i=0;i<=100;i++)
document.out.printl (i);
</pre>
</body>
</html>
9. Construct the following form using HTML. Make sure that the room reserved for should
be selected by making the room type and reserved for disable so that the user can not
select “room type” and reserved for option.
303
10. Write the difference and similarity between Relative and Absolute addressing system and
give one example for each. Which addressing system is appropriate? Why?
11. Write the HTML code that displays the following table.
12. List the different elements of www and discuss each of them in detail.
13. Design your own personal site using HTML.
Part II: Cascade Style Sheet (CSS)
General Objective
The general objective of this section is to make the student to learn about Cascade
Style Sheet so as to separate the presentation from the actual content of the document
304
and to give the same feel and look among the entire website to be hosted on the
internet.
Specific Objectives
The specific objective of this document is to learn the basic and advanced Cascade
Style Sheet which includes an Inline, Internal and External style sheet and discuss the
importance of structure/style separation, order and cascading mechanism
305
Self-test question
1. Where in an HTML document is the correct place to refer to an external style sheet?
a. In the <body> section
b. At the end of the document
c. At the top of the document
d. In the <head> section
e. Between head and body
2. Which HTML tag is used to define an internal style sheet?
a. css
b. text/style
c. style
d. script
3. Which is the correct CSS syntax?
a. body {color: black}
b. body:color=black
c. {body:color=black(body}
d. {body;color:black}
4. How do you insert a comment in a CSS file?
a. /* this is a comment */
b. ' this is a comment
c. // this is a comment //
d. // this is a comment
5. Which property is used to change the background color in CSS?
a. bgcolor:
b. background-color:
c. color:
6. How do you add a background color for all "<h1>" elements?
a. all.h1 {background-color:#FFFFFF}
b. h1.all {background-color:#FFFFFF}
c. h1 {background-color:#FFFFFF}
7. Which CSS property controls the text size?
a. font-style
b. text-style
c. font-size
d. text-size
8. How do you make a list that lists its items with squares?
a. type: square
b. list-style-type: square - correct answer
306
c. style-list: square
d. list-type: square
9. Suppose you want to insert an image using CSS to the page, select the one that is
appropriate to implement using an inline style sheet.
a. background-image=url(“picturepath”)
b. background-image:url(“picturepath”)
c. background:url(“picturepath”)
d. Background=url(“picturepath”)
e. image:url(“picturepath”)
10. Write down at least three benefit that we can achieve from CSS.
11. What is the difference between CSS and HTML?
12. List the three different types of CSS and discuss them in detail.
13. Write a CSS code that change the background color of page to yellow, cursor type to
crosshair and the text color to blue using inline, internal and External style sheet.
14. List the different type of selector in CSS and discuss them in detail.
15. What make one type of selector different from other types of selector?
16. What is the importance of having group selector?
Solution for Self-test question

1. D 2. C 3. A 4. A 5. B 6. C 7. C
8. D 9. B
9. CSS allow us
 Control layout of many documents from one single style sheet;
 more precise control of layout;
 Apply different layout to different media-types.
 Separates the presentation from the actual content of the data.
10. CSS and HTML are different due to the following

a. HTML is used to structure content of document and CSS is used for formatting
the structured content.
b. CSS is a style language that defines layout of HTML documents. covering fonts,
colours, margins, lines, height, width, background images, advanced positions and
many other things.
307
c. HTML can be mis-used to add layout to websites. But CSS offers more options
and is more accurate and sophisticated
11. Different types of CSS

In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute style.
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Internal (the tag style)
Another way is to include the CSS codes using the HTML <style> tag between
head tag.
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
External (link to a style sheet)
The recommended method is to link to a so-called external style sheet. An

external style sheet is simply a text file with the extension .css. Like any other
file, you can place the style sheet on your web server or hard disk.
For example, let's say that your style sheet is named style.css and is located in a
folder named style.
308
Such link can be created with one line of HTML code:
<link rel="stylesheet" type="text/css" href="style/style.css" />
The line of code must be inserted in the header section of the HTML code i.e.
between the <head> and </head> tags. Like this:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
You html tag goes here
</body>
</html>
This link tells the browser that it should use the layout from the CSS file when
displaying the HTML file. Several HTML documents can be linked to the same
style sheet. In other words, one CSS file can be used to control the layout of many
HTML documents.
12. CSS implementation
Internal
<html>
<head>
<style type="text/css">
body {
background-color:#FFFF00;
color:#0000FF;
cursor:pointer;
}
</style>
</head>
<body>
<h1>Mouse over me to see the cursor changing to pointer type</h1>
<p>internal style sheet</p>
</body>
</html>
Inline
309
<html>
<body style="background-color:#FFFF00;
color:#0000FF;cursor:pointer;">
<h1>Mouse over me to see the cursor changing to pointer type</h1>
<p>internal style sheet</p>
</body>
</html>
External
<html>
<head>
<link rel="stylesheet" type="text/css" href=" style.css" />
</head>
<body>
You html tag goes here
</body>
</html>
//Style.css
body {
background-color:#FFFF00;
color:#0000FF;
cursor:pointer;
}
13. Type of selector
There are three types of selectors:
 Tag selectors :
Used to define styles associated to specific HTML tags.
 Class selectors
Used to define styles that can be used without redefining plain HTML tags.
 ID selectors
Used to define styles relating to objects with a unique ID
14. The difference among the selector
 The difference between ID and class selector is that an ID selector can be called only
once in a document, while a class selector can be called multiple times in a document.
 The second difference is that ID can be called by Javascript's getElementByID
function.
310
 Class Selectors are used to specify the same style for different tag and different style
for the same tag.
 Class and ID names are both case sensitive. For example, .classone and .ClassOne are
two different classes but not in tag selector.
 An ID selector applies styles to an element in the same way as a class.
15. The following is the importance of grouping
Helps to avoid repetition when applying the same styles to several html elements, you
can group selectors as a comma-separated list. example
h1, h2, h3, h4, h5, h6 {
color: #468966;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10px 0;
}
Self Assessment question

1. What is the correct CSS syntax for making all the <p> elements bold?
a. p {text-size:bold}
b. p {font-weight:bold}
c. style:bold
d. p{font:bold}
2. How do you display a border like this: The top border = 10 pixels, The bottom border = 5
pixels, The left border = 20 pixels, The right border = 1pixel?
a. border-width:10px 20px 5px 1px
b. border-width:10px 1px 5px 20px
c. border-width:10px 5px 20px 1px
d. border-width:5px 20px 10px 1px
3. How do you change the left margin of an element?
a. padding:
b. indent:
c. margin:
d. text-indent:
e. margin-left:
4. What is the correct HTML for referring to an external style sheet?
311
a. <link rel="stylesheet" type="text/css" href="mainstyle.css">
b. <style src="mainstyle.css">
c. <stylesheet>mainstyle.css</stylesheet>
d. <link url="stylesheet" type="text/css" href="mainstyle.css">
5. What is the correct CSS syntax for making all the <p> elements bold?
a. p {font-weight:bold}
b. p {text-size:bold}
c. <p style="text-size:bold">
d. <p style="font-size:bold">
6. How do you make each word in a text start with a capital letter?
a. text-transform:uppercase
b. text-transform:capitalize
c. text-transform:togglecase
7. What makes CSS different from HTML? Discuss in detail.
8. Arrange the CSS style from highest to the lowest precedence and which one is the most
common style that we can apply for a page.
9. Given the following CSS group them by selecting the best match among the given
attribute.
.right {
margin: 10px 1.2% 15px 1.2%;
padding: 5px 0.5% 5px 0.5%;
}
.left {
margin: 10px 1.2% 10px 1.2%;
}
.box_header {
margin: 10px 1.2% 15px 1.2%;
}
312
10. Is there a difference between the CSS shown below? Discuss the similarity and
differences between the CSS style a and b.
a. p, b, i {
margin: 10px 1.2% 10px 1.2%;
}
b. p b i {
margin: 10px 1.2% 10px 1.2%;
}
11. Given the following attribute of style write a CSS code that will allows you implement
the CSS style of inline, internal and external style sheet and using the three type of
selector along with the HTML tag.
 Tag selector
 Class selector
 ID Selector
Float: left, color: #000, height: 275px, font-size: 10px, background-repeat: no-repeat,
background-position: left width: 100% and font-family: Verdana, Arial, sans-serif;
12. Given the followings specification write a CSS code that will allows you implement the
CSS style for scroll-bar of a page
3dlight-color: red, arrow-color: yellow, base-color: blue, darkshadow-color: cyan,

face-color: green, highlight-color:grey, shadow-color: pink and scrollbar-track-
color: silver
13. Apply different CSS style for the personal page that you have designed in the first section
of HTML.
313
Unit I: Client side Scripting Language
JavaScript is scripting language used for client side scripting which is a dynamic typed
language. JavaScript can be thought of as an extension to HTML which allows authors
to incorporate functionality in their web pages by detect what browser a person is
using, customize the pages to their browser, swap images on a page to create rollovers,
perform calculations in forms and check to ensure that entries in the form are correct
and prompt users for information and use it to customize a page.
General Objective
The general objective of this section is to make the student to learn about JavaScript so
as to develop an event-driven programming in response to events that occur in a Web
browser.
Specific Objectives
The specific objective of this document is to make use of JavaScript accomplished its
tasks by using objects (things like windows, forms, string documents) methods and
properties.
Unit self-test question list with answer key

1. Identify the JavaScript code that display a random number between 5 and 9 inclusive is:
a) Math.floor((Math.random() * 5) + 4);
b) Math.floor((Math.random() * 4) + 4);
c) Math.floor((Math.random() * 4) + 5);
d) Math.floor((Math.random() * 5) + 5);
2. Which of the following JavaScript statements will assign the word "and" to variable s?
var str="Mix and Match"
a) s = str.substring(4,3);
b) s = str.substring(5,3);
c) s = str.substring(4,7);
d) s = str.substring(5,7);
e) s = str.substring(5,8);
3. Write a JavaScript code that validate E-Mail Validation code given the following form.
4. Write a javaScript code that validate Number, Text and Alphanumeric from the given input below
314
5. Write a java script program that changes the background color of the pages when the user
selects the color from combo box.
6. List the different advantages of JavaScript, what it can do and what it can't do.
7. Write a Javascript program/function that shows the numbers [1-10] in an alert box, one
after another sleeping for 100, 200, ..., 900 msecs. That is, when the program starts, it
should show “1”. Then it should sleep for 100 msec. and show “2”, sleep for 200 msec.
and show “3” and so on, finally showing “10” before returning.
8. write a JavaScript program that insert an image in the page with the <img> tag. When the
mouse pointer rolls over the image, it should switch to a different image. When it rolls
out (leaves the image), it should swap back again. You'll need to wrap the images inside
<a> tags because img objects don't have the onmouseover and onmouseout events.
Solution for self Assessment
1. D
2. C
3. Code for E-mail validation
<html>
<head>
<title>Email Validation</title>
<script language = "Javascript">
function Check_Email(Email){
var LengthOfAt=Email.indexOf("@")
var EmailLength=Email.length
var LengthOfDot=Email.indexOf(".")
if (Email.indexOf("@")==-1){
alert("Invalid E-mail ID")
return false
}
if (Email.indexOf("@")==-1 || Email.indexOf("@")==0 || Email.indexOf("@")==EmailLength){
return false
}
315
if (Email.indexOf(".")==-1 || Email.indexOf(".")==0 || Email.indexOf(".")==EmailLength){
return false
}
if (Email.indexOf("@",(LengthOfAt+1))!=-1) {
return false
}
if (Email.substring(LengthOfAt-1,LengthOfAt)=="." ||
Email.substring(LengthOfAt+1,LengthOfAt+2)==".") {
return false
}
if (Email.indexOf(".",(LengthOfAt+2))==-1) {
return false
}
if (Email.indexOf(" ")!=-1) {
return false
}
return true
}
function ValidateForm(){
var emailID=document.frmSample.txtEmail
if ((emailID.value==null)||(emailID.value=="")) {
alert("Please Enter your Email ID")
emailID.focus()
return false
}
if (Check_Email(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
</script>
</head>
<body>
<form name="frmSample" method="post" action="#" onSubmit="return ValidateForm()">
<table bgcolor="#FF0000" border="2" align="center">
<tr>
<td>Enter an Email Address : </td>
<td><input type="text" name="txtEmail"></td>
</tr>
<tr><td colspan="2" align="center"><input type="submit" name="Submit"
value="Submit"></td>
</tr>
</table>
</form>
316
</body>
</html>
4. Codes for validation of Number, Text and Alphanumeric
<html>
<head>
<title>Number Validation</title>
<script language = "Javascript">
/*It's also possible to create more complex validation routines using JavaScript's built-in support for
regular expressions. Consider the following methods, which uses a regular expression to test whether all
the characters or combination of the character and integer so as to validate the input element of the
form… */
function isInteger(){
s=document.numeric_validation.num.value;
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) {
alert("Not a Number");
document.validation.num.value="";
document.validation.num.focus();
return false;
}
}
return true;
}
function isAlphabetic(){
val=document.validation.num.value;
if (val.match(/^[a-zA-Z]+$/)){
alert("Character");
}
else
alert("Not A valid Text ");
}
function isAlphaNumeric(){
val=document.validation.combine.value;
if (val.match(/^[a-zA-Z0-9]+$/)){
alert("Valid AlphNumeric Character");
}
else
alert("Not A AlphNumeric Character");
}
</script>
</head>
<body>
<form name="validation" method="post" action="" >
<table width="280" border="1" align="center" bgcolor="#CC0000">
317
<tr><td>Enter a Number <font color="#CC0000"><b></b></font>:</td>
<td> <input type="text" name="num" size="15" onBlur="return isInteger(this)"></td> </tr>
<tr><td>Enter a text <font color="#CC0000"><b></b></font>:</td>
<td><input type="text" name="text" size="15" onBlur="return isAlphabetic(this)"></td>
</tr>
<tr><td>Enter a text and Number <font color="#CC0000"><b></b></font>:</td>
<td><input type="text" name="combine" size="15" onBlur="return isAlphaNumeric(this)"></td>
</tr>
<tr><td colspan="2" align="center"> <input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
5. codes for changing background of the page.
<form>
<select onChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="40E0D0"> Torquoise
<option value="2E8B57"> Sea Green
<option value="87CEEB"> Sky Blue
<option value="F4A460"> Sandy Brown
<option value="FFF0F5"> Lavender Blush
<option value="FFFFFF" SELECTED> White
</select>
</form>
6. Solution for advantage and what a JavaScript can do
Make your web pages responsive.
Web environments are dynamic, things happen all the time: the web page loads
in the browser, the user clicks a button or moves the mouse over a link, etc.
These are called events. With JavaScript you can make the page immediately
react to these events the way you choose: for example, by showing or hiding
specific page elements, by changing the background color, etc.
Detect visitors' browsers.
You can use a JavaScript script to detect the visitor’s browser, or, even better.
Create cookies.
A JavaScript script is great if you want to create cookies so that your visitors can
enjoy a personalized experience the next time they visit your website.
Validate web form data.
You can use a JavaScript script to validate form data before the form is submitted
to a server. This saves the server from extra processing.
7. Solution for time count-down
var a = 1;
function showNumbers(){
alert (a++);
318
if (a < 11)
setTimeout ("showNumbers()", (a-1) * 100);
}
8. Solution for mouseOver and mouseOut event
<html>
<head>
<script language=JavaScript>
function mouseOver(){
document.images["myImage"].src = "Img2.jpg";
}
function mouseOut(){
document.images["myImage"].src = "Img1.jpg";
}
</script>
</head>
<body>
<a style="cursor : default" href="" onclick="return false" name="link1"
onmouseover="mouseOver()" onmouseout="mouseOut()"><img src="Img1.jpg"
name="myImage">
</a>
</body>
</html>
Unit self-test question list without answer key

1. Write a java script program that displays in a table the number, square and cubic for a number
between 1 and 150 using the following format.
Number Square Cube
1 1 1
2 4 8
3 9 27
. . .
. . .
150 22500 506250000
2. Write a JavaScript program that accepts a positive number from the user and calculate the
product of the integer between 1 and the number that the user entered.
3. Write a JavaScript program that accept the result of the student out of 100 from the user
and computes a letter grade based on the following rules: Using both if … else and switch
statement.
4. Mention the three different ways to implement JavaScript and discuss each of them.
319
5. Write a JavaScript program that can serve as a calculator having the following basic
functionality as shown figure below.
6. write a JavaScript program that find the number of occurrences of each letter in specified
string “addis ababa is the capital city of ethiopia”.
7. Write a JavaScript program that calculate the factorial of the number using a function.
Write the output of this code
<script language=javascript type="text/javascript">

var x = 5;
document.write("<p>x before function call = " + x);
test();
document.write("<p>x after function call = " + x);
function test()
{
var x = 1000;
document.write("<p>x in function = " + x)
}
</script>
8. Write a JavaScript function that takes array of numbers as an argument. It
should apply the function to each entry in the array, add up the results, and return the sum. So if
you call yourNewFunction([1, 2, 3]), it should return 14 ( sum
of the squares of 1, 2, and 3)
9. Write a JavaScript program that calculate the Fibonacci series.

Note : The Fibonacci numbers are the integer sequence 0, 1, 1, 2, 3, 5, 8, 13, 21, ..., n which
each item is formed by adding the the previous two number. (Hint Use recursive function)
320
10. Write a JavaScript program that accept two numbers from the user and multiplies them
and finally prints out the result on the screen.
11. Write a JavaScript program that read an integer value from the keyboard and displays a
message indicating the number is odd or even.
12. Write a small JavaScript program that prints out the even integers from 0 to 100 using a
while loop.
13. Using conditional statement and iteration control structure to output all the odd integers
from 1 to 101 that are not divisible by either 3 or 5.(use continue and break)
14. Your program should output integers such as 1, 7, 11, 13, 19 ...
15. Write a JavaScript program that accept an integer value from the user and display the
factorial of that number.
factorial (n) = 1 if n < 2, n * (n - 1) * ... * 1 otherwise
16. Write an application that inputs an integer containing only 0s and 1s (i.e., a binary
integer) and prints its decimal equivalent, the program must reject other inputs.
17. Write an application that displays a table of the binary, octal and hexadecimal equivalents
of the decimal numbers in the range 1 through 256.
18. An integer is said to be prime if it is divisible by only 1 and the number itself. Write a
program that accepts a positive integer and counts the number of primes which are less
than the given number entered by the user. Display the count value of the primes less
than the number.
321
19. Write JavaScript program that estimates the value of the mathematical constant e by using the
formula:
1. e = 1 + 1/1! + 1/2! + 1/3! + . . . compare its result with the Math constant Math.E
20. Write a JavaScript program that enables you to convert from degree Fahrenheit to Celsius and
vise verse and finally displays the information on the screen using the following formula. (Hint
use HTML form for accepting value and to what to convert)
Fahrenheit = 1.8 * celcius + 32
Celcius = (5/9) * Fahrenheit - 32
21. Write a program that defines two floating point variables. The first variable that represent the
monthly income (salary) and the second variable for payable allowance of the employee. The
question is to write a JavaScript program that accept the salary along with the allowance and
finally calculate the amount of tax and net income based on the following condition
Sal<=15 tax= Sal *0%
Sal <=650 tax= Sal *10%-15
Sal <=1400 tax= Sal *0.15-47.5
Sal <=2350 tax= Sal *0.2-117.5
Sal <=3550 tax= Sal *25%-235
Sal <=5000 tax= Sal *30%-412.5
Sal >5000 tax= Sal *35%-662.5
 Total_income = Sal + allowance, Net_income = Sal +allowance - tax
 For the above question allow the user to enter the number of employee and finally
display the average, maximum, and minimum statistics about employee salary,
allowance and tax in formatted way for the user and make sure to include Escape
Sequences for Special Characters a(backspace, tab, linefeed, Carriage return, double
quote, Single quote and back space) using. (using while, do while and for loop)
Unit IV: PHP
PHP (Hypertext Preprocessor) is one of open source server-side scripting language that
executed on the server side supporting many databases like MySQL, Informix, Oracle,
Sybase, Solid, etc.
PHP runs on different platforms Windows, Linux, UNIX, and are compatible with almost all
servers used today and an easy to learn and runs efficiently on the server side.
322
General Objective
The general objective of this section is to make the student to learn about PHP as one of the
server side scripting language so as to develop a dynamic to be hosted on the internet under
the Apache web server.
Specific Objectives
The specific objective of this document is to learn the basic syntax, variable, conditional
structure, array, string manipulation, function which might be user defined or built in, how to
embed HTML and JavaScript and the CRUD operations using apache as a server and
MYSQL as database management system.
323
Unit self-test question list with answer key
1. Is it possible to pass data from PHP to JavaScript?
a. No, because PHP is server-side and JavaScript is client-side.

b. No, because PHP is a loosely typed language.
c. Yes, because JavaScript executes before PHP.
d. Yes, because PHP can generate valid JavaScript.
2. Is it possible to pass data from JavaScript to PHP?
a. Yes, but not without sending another HTTP request.

b. Yes, because PHP executes before JavaScript.
c. No, because JavaScript is server-side, and PHP is client-side.
d. No, because JavaScript executes before PHP.
3. Which types of form elements can be excluded from the HTTP request?
a. text, radio, and check box

b. text, submit, and hidden
c. submit and hidden
d. radio and check box
4. When processing the form, what is the difference between a hidden form element and a non hidden
one, such as a text box?
a. The hidden form element does not have a name.

b. There is no difference.
c. The hidden form element does not have a value.
d. The hidden form element is excluded from the request.
5. Which of the following form element names can be used to create an array in PHP?
a. myArray
b. [myArray]
c. myArray[]
d. myArray[bar]
6. Why must you call session_start() prior to any output?
a. Because it is easy to forget if not placed at the top of your scripts.
324
b. Because you can no longer access the session data store after there has been output.
c. Because session_start() sets some HTTP headers.
d. Because calling session_start() causes the HTTP headers to be sent.
7. Which of the following represents the proper way to set a session variable?
a. $_SESSION['foo'] = 'bar';
b. session_start();
c. session_set_save_handler ('myopen');
d. $foo = $_SESSION['foo'];
8. The command responsible to create a link with the server for MySQL database operations
a. mysql_sql(username,password);
b. mysql_connect_db(server,username,password);
c. mysql_select_db(databaseName);
d. mysql_connect(server,username,password);
9. Which one of the following is true about PHP ?
a. PHP is one of the client-side scripting language, like JavaScript.

b. PHP is one of an open source software that supports only MYSQL databases.
c. PHP files are returned to the browser as plain HTML text.
d. can have a file extension of ".pph", ".pph3", or ".phmtl"
10. Select the correct statement(s) which is/are true forms in HTML and PHP
a. Submit buttons always forwards the form element to the page specified in the action
attribute of the form.
b. The METHOD attribute of the form specifies the names of form element
c. The values of form elements can be accessed in PHP pages by using their names
d. HTML and JavaScript element can be embedded in php script.
11. Which one of the following is true provided that we have selected appropriate MYSQL database
from which we access all information
$res=mysql_query(“select name from user”) or die(“failed”);

a. $res is a string that represent the query
b. $res is an array that contain record fetched from the table user
c. The command always die after successfully completing mysql_query()
325
d. $res holds a simple number of record
12. The command responsible to create a link with the server for MySQL database operations
a. mysql_select_db(databaseName);
b. mysql_connect(server,username,password);
c. mysql_sql(username,password);
d. mysql_connect_db(server,username,password);
13. Which one of the following is true about validation?
a. Validation is always performed at the client side.

b. Validation in the client side is preferable if the data is to be inserted in to a database.
c. Validation in the server side is preferable if the data is to not to be inserted in the server
side.
d. Validation is always performed at the server side.
e. None of the above
14. Which one of the following is false about forms
a. The METHOD attribute of the form specifies the names of form element
b. Submit buttons always forwards the form element to the page specified in the action
attribute of the form.
c. The values of form elements can be accessed in PHP pages by using their names
d. HTML and JavaScript element can be embedded in php script.
15. What will be the output of the following script?
<?php
$array=array(1,2,3,5,8,13,21,34,55);
$sum=0;
for($i=0;$i<5;$i++)
$sum+=$array[$array[$i]];
print($sum);
?>
a. 5 b. 0 c. 19 d. 78
Answer the following three questions based on the code given below along with each question
326
<?php
$con = mysql_connect("localhost","root","vertrigo");
if (!$con){
die('Could not connect: ' . mysql_error());}
if (!mysql_query("CREATE DATABASE my_db",$con))
echo "Error creating database: " . mysql_error();
mysql_select_db("my_db", $con);
$sql = "CREATE TABLE Persons(FirstName varchar(15), LastName
varchar(15),Age int)";
$result=mysql_query($sql,$con);
mysql_close($con);
?>
16. Suppose you put // before the code $result=mysql_query($sql,$con); What would happen to the
database after successful creation of the connection ?
a. The code will be executed successfully and create a database but not the table.
b. An error is generated in creating database and table will be created.
c. The code will be executed successfully and create a table but not the database.
d. An error is generated without creating database as well as table.
17. Suppose the default username=”vertrigo” and password=”root” for MYSQL database. What
would happen to the code if you provide the following code for creating a connection?
$con = mysql_connect("localhost", "root", "vertrigo");
a. The code will be executed successfully and create a database but not the table.
c. The code will be executed successfully and create a table but not the database.
18. Suppose you moved the code mysql_select_db("my_db", $con); below the code
$result=mysql_query($sql,$con);. What would happen to the code after creating the MYSQL
connection succesfully?
a. The code will be executed successfully without any error.

c. The code will be executed successfully and create a database but not the table.
19. Write the output of the following code
327
a) <?php
$txt1="Internet Programming";
$txt2="Degree Exit Exam";
echo $txt1 . " " . strlen($txt2);
?>
b) <?php
$sentence = "number divide by zero is undefined";
$words = explode (" ", $sentence);
foreach ($words as $dis)
print(strlen(substr($dis,2))."<br>");
?>
c) <?php
$OS = array ("Windows", "Ubuntu", "Fedora", "Solaris", "Mac");
$list = implode(" , ", $OS);
echo $list;
?>
d) <?php
echo "<table border=1 align=center>";
for ($i = 1; $i<=5; $i++){
echo "<tr>";
for ($j = 1; $j <=5; $j++)
echo "<td align='center'>" . $i * $j . "</td>";
echo "</tr>";}
echo "</table>";
?>
e) <?php
for ($x=10; $x<=100; $x++){
if (($x % 19) == 0 && ($x!=76))
echo "$x<br> ";
else
continue;}
?>
f) <?php
$email="[email protected]";
print(strpos($email, 'i',5));
?>
g) <?php
$text="indicator";
print(strtoupper(substr($text,4)."<br>"));
print(substr($text,-4)."<br>");
print(substr($text,4,3)."<br>");
print(substr($text,4,-3)."<br>");
?>
Solution for Self Assessment Question

1. D 6. C
2. A 7. A
3. D 8. B
4. B 9. C
5. C 10. A,C and D
328
11. B 15. D
12. B 16. A
13. B 17. D
14. A 18. C
19. The output for the code
329
a. Internet Programming 16
b. 4
4
0
2
0
7
c. Windows , Ubuntu , Fedora , Solaris , Mac
d.
e. 19
38
57
95
f. 8
g. CATOR
ator
cat
ca
Unit self-test question list without answer key
1. Write the output of the following script?
Code Output
<?php
$array=array(1,2,3,5,8,13,21,34,55);
$sum=0;
for($i=0;$i<2;$i++)
$sum+=$array[$array[$array[$i]]];
print($sum);
?>
<?php
$array=array(2=>8,3=>27,4=>64,5=>125);
foreach ($array as $key=>$value)
print($key.”, “.$value.”<br>”)
print($sum);
?>
2. Write a PHP code that counts the total number of user who have logged in to the system. (Hint
use a session control to count and store to DB mechanism).
3. Write a PHP program that generates an ID for new user.
Assumption : Read the a column called “Account_ID” from the table “account” after sorting in
descending order and do increment the ID by one and generate ID
4. Using conditional statement and iteration control structure to output all the odd integers from 1 to
101 that are not divisible by either 3 or 5.(use continue and break)
Your program should output integers such as 1, 7, 11, 13, 19 ...
5. Write a PHP program that accept an integer value from the form and post to the server side and
display the factorial of that number in a message box (Use JavaScript inside PHP).
factorial (n) = 1 if n < 2, n * (n - 1) * ... * 1 otherwise
6. Write a program that defines two floating point variables. The first variable that represent the
monthly income (salary) and the second variable for payable allowance of the employee. The
question is to write a PHP program that accept the salary along with the allowance from the form
then post to the page “Calculate_Salary_Info.php” and finally calculate the amount of tax and net
income based on the following condition
Sal<=15 tax= Sal *0%
Sal <=650 tax= Sal *10%-15
Sal <=1400 tax= Sal *0.15-47.5
Sal <=2350 tax= Sal *0.2-117.5
Sal <=3550 tax= Sal *25%-235
Sal <=5000 tax= Sal *30%-412.5
Sal >5000 tax= Sal *35%-662.5
Total_income = Sal + allowance, Net_income = Sal +allowance - tax
For the above question allow the user to enter the number of employee using JavaScript which is
embedded in PHP and finally display the average, maximum, and minimum statistics about
employee salary, allowance and tax in tabular way for the entire employee.
7. Create a PHP class having the attribute machine_name, Username, password and DBName with
all setter, getter method along with a constructor and two public method that can do the
following:
a. Accept SQL statement and execute the query for Insert, Update and Delete.
b. Accept select SQL statement and execute the query and finally return the record set to the
caller method.
c. Create an account form that can post all the information received from the user in to the
database table called ''Account”.
d. Write a full php

program that accept the username and password from the user as shown figure below and
check if the username and password exist. If the username and password exist update/change
the old password by the new one.
8. Write PHP programs that accept a series 0s and 1s (i.e., a binary integer) from the user and
display the equivalent Octal and Hexadecimal and display the final result for user screen after
rejecting other inputs.
9. Write an application that displays a table of the binary, octal and hexadecimal equivalents of the
decimal numbers in the range 1 through 256.
10. An integer is said to be prime if it is divisible by only 1 and the number itself. The question is to
write a PHP program that accepts a positive integer and counts the number of primes which are
less than the given number entered by the user. Display the count value of the primes less than the
number in table.

IP Exit Exam

Uploaded by

Copyright:

Available Formats

IP Exit Exam

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IP Exit Exam

Uploaded by

Copyright:

Available Formats

Study Guide

Department of Computer Science

Part I: Introduction to HTML and Client side Scripting Language

3. There are_____color names recognized by all version of HTML.

Some main features of HTML are given below:

Syntax: :<a href=”URL” title="sometitle">.......</a>

<form name="input" action="submit_form.php" method="get">

<table border="1" align="Center">

<td>row 2, cell 1</td>

<i> This is a italic text

<sub> Used to make the text subscripted like Co2

<sup> Used to make the text superscripted like X2

<u> used to make the text underlined

<h1> Used to make the text as a header with largest font

16. Code solution

17. Output the table code

Solution for Self-test question

 Control layout of many documents from one single style sheet;

 more precise control of layout;

 Apply different layout to different media-types.

 Separates the presentation from the actual content of the data.

10. CSS and HTML are different due to the following

11. Different types of CSS

The recommended method is to link to a so-called external style sheet. An

<link rel="stylesheet" type="text/css" href="style/style.css" />

12. CSS implementation

Self Assessment question

3dlight-color: red, arrow-color: yellow, base-color: blue, darkshadow-color: cyan,

Unit self-test question list with answer key

Solution for self Assessment

Unit self-test question list without answer key

<script language=javascript type="text/javascript">

of the squares of 1, 2, and 3)

9. Write a JavaScript program that calculate the Fibonacci series.

Unit IV: PHP

1. Is it possible to pass data from PHP to JavaScript?

a. No, because PHP is server-side and JavaScript is client-side.

a. Yes, but not without sending another HTTP request.

a. text, radio, and check box

a. The hidden form element does not have a name.

a. Because it is easy to forget if not placed at the top of your scripts.

a. PHP is one of the client-side scripting language, like JavaScript.

$res=mysql_query(“select name from user”) or die(“failed”);

a. Validation is always performed at the client side.

a. The code will be executed successfully without any error.

Solution for Self Assessment Question

1. Write the output of the following script?

d. Write a full php

You might also like