Lab Manual - Ku Manuals/ISC 340 Lab Manual.pdf · Lab Manual ISC 340 (Web Programming) Prepared by: Eng. Altaf Alfarhan Revised 2018 Kuwait University College of Computing Sciences

Lab Manual

ISC 340 (Web Programming)

Prepared by: Eng. Altaf Alfarhan

Revised 2018

Kuwait University

College of Computing Sciences and Engineering

Department of Information Science

CONTENTS

Laboratory Hardware, Software / Tools Requirements ........................................................... 1

Laboratory Schedule .................................................................................................................... 2

Laboratory Policy ......................................................................................................................... 3

Lab Evaluation .............................................................................................................................. 4

Laboratory # 1 Introduction to HTML5 (Part 1) ...................................................................... 5

Laboratory # 2 Introduction to HTML5 (Part 2) ...................................................................... 7

Laboratory # 3 Introduction to HTML5 (Part 3) .................................................................... 10

Laboratory # 4 Introduction to CSS (Part 1) ........................................................................... 13



Laboratory # 7 Introduction to JavaScript .............................................................................. 22

Laboratory # 8 JavaScript Control Statements (Part 1) ......................................................... 24

Laboratory # 9 JavaScript Control Statements (Part 2) ......................................................... 27

Laboratory # 10 JavaScript Functions ..................................................................................... 30

Laboratory # 11 JavaScript Arrays .......................................................................................... 33

Laboratory # 12 JavaScript Two Dimensional Arrays ........................................................... 35

Appendix “A” ............................................................................................................................... 37

Rules to fallow by Computer Lab Users ........................................................................................... 37

Appendix “B”................................................................................................................................ 38

Certification ..................................................................................................................................................... 38

ISC-340 P a g e | 1

LABORATORY HARDWARE, SOFTWARE / TOOLS REQUIREMENTS • Sublime Text 3

o Can be downloaded from https://www.sublimetext.com/download

• Notepad

• CSE HTML Validator

• Microsoft Visual Web Developer

https://www.sublimetext.com/download

ISC-340 P a g e | 2

LABORATORY SCHEDULE

# Lab Title Lab activity

1 Introduction to HTML (Part 1)

2 Introduction to HTML (Part 2)

3 Introduction to HTML (Part 3) Quiz 1

4 Introduction to CSS (Part 1)

5 Introduction to CSS (Part 2)

6 Introduction to CSS (Part 3) Quiz 2

7 Introduction to JavaScript

8 JavaScript Control Statements (Part 1)

9 JavaScript Control Statements (Part 2) Quiz 3

10 JavaScript Functions

11 JavaScript Arrays

12 JavaScript Two Dimensional Arrays Quiz 4

ISC-340 P a g e | 3

LABORATORY POLICY

• Fallow the laboratory rules listed in appendix “A”

• To pass this course, the student must pass the lab-component of the course.

• Cheating in whatever form will result in F grade.

• Attendance will be checked at the beginning of each Lab.

• Absence for three (03) or more unexcused labs will result in a F grade in the Course. An official

excuse must be shown in one week following return to classes.

• Every unexcused absence leads to a loss of 0.5 % marks.

• Cheating in Lab Work or Lab Final Exam will result F grade in Lab.

• Late Submission of Lab Work will not be accepted.

• There will be no make-up for any Quiz/Exam/Lab.

• Hard work and dedication are necessary ingredients for success in this course.

ISC-340 P a g e | 4

LAB EVALUATION

Activity Weight

Lab Work (10) 5%

Lab Quizzes (4) 10%

Lab Final Exam 10%

Total 25%

ISC-340 P a g e | 5

LABORATORY # 1 INTRODUCTION TO HTML5 (PART 1)

Laboratory Objective:

• To understand the importance of HTML5 and use it to create Web pages.

• To understand how to create and use hyperlinks to navigate web pages.

• To add images to web pages.

• To be able to create lists of data.

ISC-340 P a g e | 6

Lab #1 – Introduction to HTML5 (Part 1)

1. Laboratory Objective:

• To understand the importance of HTML5 and use it to create Web pages.

• To understand how to create and use hyperlinks to navigate web pages.

• To add images to web pages.

• To be able to create lists of data.

2. Laboratory Learning Outcomes:

• State and apply syntaxes of HTML.

• Practice and use web development tools such as Visual Studio and Front Page in order to

gain web programming skills.

3. Laboratory Problem Description

Design and implement a personal Web site composed of two pages linked together, that includes

information about: your name, id, and favorite Web sites. The Web site should include at least the

following:

1. The home page must have:

• A proper title to be displayed on the title bar

• A header to display your name

• A horizontal rule

• A paragraph that includes information about you

• Emphasize the important words in your paragraph using strong formatting style

• An image to display a nice view of your choice at the home page

• A link to the second page

2. The second page must have:

• A list of at least two hyperlinks to show your favorite Web sites one of them an image

link

• A link to the homepage

ISC-340 P a g e | 7



• To be able to create tables with rows and columns of data.

• To be able to make Web pages accessible to search engines.

• To be able to create nested lists of data.

ISC-340 P a g e | 8



• To be able to create tables with rows and columns of data.

• To be able to make Web pages accessible to search engines.

• To be able to create nested lists of data.






Write the required HTML5 code that would generate a two page Web site that sells chocolate. The first page has

a table identical to the one shown below. The table has a border of size 5. All images used are of type jpg and a

size of 100 by 100 pixels. You are expected to use the proper tags that show the main part of the table and merge

cells as needed. In addition to that, white the required code to help search engines to find this page. Use a heading

element to display your name and ID. The second page uses both ordered and unordered lists to display positive

and negative health effects of chocolate.

ISC-340 P a g e | 9

ISC-340 P a g e | 10



• To be able to create and use forms.

• To be able to build a form using the new HTML5 input types.

• To be able to use self-validating input elements.

• To be able to specify temporary placeholder text in various input elements.

• To be able to use datalist to specify a list of values.

ISC-340 P a g e | 11



• To be able to create and use forms

• To be able to build a form using the new HTML5 input types.

• To be able to use self-validating input elements.

• To be able to specify temporary placeholder text in various input elements.

• To be able to use datalist to specify a list of values.






PART A:

Write the required HTML5 code to create an online feedback form for ISC students. The form should looks like

the screenshot below:

ISC-340 P a g e | 12

PART B:

Write the required HTML5 code to create an online user registration form which looks like the screenshot

below:

ISC-340 P a g e | 13

LABORATORY # 4 INTRODUCTION TO CSS (PART 1)


• To control the appearance of a Web site by creating style sheets.

• To use style sheets to give all the pages of a Web site the same look and feel.

• To use the Class attribute to apply styles.

• To specify the precise font, size, color and other properties of displayed text.

ISC-340 P a g e | 14

Lab #4 – Introduction to CSS (Part 1)




• To use the Class attribute to apply styles.

• To specify the precise font, size, color and other properties of displayed text.



• Apply style sheets emphasizing accessibility issues in web page development.


Design a two page Web site with the following requirements:

• The first page (page1.html) has a link to the second page (page2.html) and vice versa. This can be

done using anchors.

• The first line of each page is written as a heading element.

• Use embedded style sheet to set flower.jpg as a background in page1.html. The background shall

be positioned to the right and repeated vertically.

• An external CSS shall be used to set the font of all paragraphs to Arial purple. Define two

paragraphs in each file.

• Add a third paragraph in page1.html that contains text in bold navy with font of size 30pt.

• Write your name and ID in a fourth paragraph in page1.html.

• Use class Selector to set the direction of the first paragraph of page2.html to be right to left and

the second paragraph to be centered.

Your pages shall be identical to the sample output below:

ISC-340 P a g e | 15

ISC-340 P a g e | 16





• Using style sheets to separate presentation from content.

• To understand how elements are positioned.

• Add shadows to elements and text.

• To understand how to build a CSS Drop-Down Menu.

ISC-340 P a g e | 17






• To understand how elements are positioned.

• Add shadows to elements and text.

• To understand how to build a CSS Drop-Down Menu.





You are given an incomplete multi-page website about butterflies. You are expected to do the following in order to

complete it:

• Add a thick border to h1 elements with a color of your choice.

• Create “Art and Culture” page. It should include unordered list with image bullets of your choice.

• Apply different border styles to butterflies “Fast Facts” similar to the sample page.

• Add a link in the drop-down menu to the “References” page. The page shall include Wikipedia link

reference: http://en.wikipedia.org/wiki/Butterfly. Use distinctive styles for the link, visited link, and

when rolling over the link. You can utilize color, text-decoration, and background-color properties to

achieve that.

Your pages shall be identical to the sample output below:

http://en.wikipedia.org/wiki/Butterfly

ISC-340 P a g e | 18

ISC-340 P a g e | 19

ISC-340 P a g e | 20






• To understand how elements are displayed and positioned.

ISC-340 P a g e | 21






• To understand how elements are displayed and positioned.





You are given the html code displayed below and available for download at BB. Read thouroghly then specify how

to modify the code to achieve the following:

1. Display the divisions as inline elements. Observe the changes in divisions’ size.

2. What difference would it make if the divisions used absolute positioning?

3. Get the divisions to overlap in a way that each shows on the screen.

4. Position the divisions with higher number values on top of the lower number values.

ISC-340 P a g e | 22

LABORATORY # 7 INTRODUCTION TO JAVASCRIPT


1. To be able to write simple JavaScript programs.

2. To be able to use input and output statements.

3. To be able to use arithmetic operators.

4. To be able to use equality and relational operators.

Use if and if…else selection statements to choose among alternative actions.

ISC-340 P a g e | 23

Lab #7 – Introduction to JavaScript


1. To be able to write simple JavaScript programs.

2. To be able to use input and output statements.

3. To be able to use arithmetic operators.

4. To be able to use equality and relational operators.

Use if and if…else selection statements to choose among alternative actions.


• State the technological differences between static web sites and dynamic web sites.




Part A:

Write a JavaScript program that prompts the user to enter two integers. Once obtained, the program outputs

HTML text displayed in the browser indicating which number is greater than the other. If the two numbers are

equal, it displays the message “The two numbers are equal”. The text must be displayed within <h1> tags.

Part B:

Modify the JavaScript program done in Part A by changing the way output is displayed. In this part, you are

expected to output the same text in an alert window.

ISC-340 P a g e | 24

LABORATORY # 8 JAVASCRIPT CONTROL STATEMENTS (PART 1)


• To learn the essentials of counter controlled repetition.

• To be able to use the while repetition statement to execute statements in a script

repeatedly.

• To be able to use the for and the do…while repetition statements to execute statements in

a program repeatedly.

ISC-340 P a g e | 25

Lab #8 – JavaScript Control Statements (Part 1)



• To be able to use the while repetition statement to execute statements in a script repeatedly.

• To be able to use the for and the do…while repetition statements to execute statements in a program

repeatedly.






PART A:

The process of finding the largest value (i.e., the maximum of a group of values) is used frequently in computer

applications. For example, a program that determines the winner of a sales contest would input the number of units

sold by each salesperson. The salesperson who sells the most units wins the contest. Write a pseudo-code program

and then a JavaScript program that inputs a series of 10 real numbers as strings, determines the largest of the numbers

and outputs a message that displays the largest number. Your program should use four variables as follows:

• counter: A counter to count to 10 (i.e., to keep track of how many numbers have been input and to determine

when all 10 numbers have been processed);

• number: The current real number input to the program as a string;

• n: The floating point number resulted from string number conversion;

• largest: The largest number found so far.

ISC-340 P a g e | 26

PART B:

Write a JavaScript program that asks the user to input five integer numbers to determine the sum of the numbers and

outputs the result to the browser window. You are expected to use a while loop to perform repeated operations.

Followed by a for loop to achieve the same task.

ISC-340 P a g e | 27

LABORATORY # 9 JAVASCRIPT CONTROL STATEMENTS (PART 2)



• To be able to use the while repetition statement to execute statements in a script

repeatedly.

• To be able to use the for and the do…while repetition statements to execute statements in

a program repeatedly.

• To perform multiple selection using the switch selection statement.

• To use the break and continue program control statements.

ISC-340 P a g e | 28

Lab #9 – JavaScript Control Statements (Part 2)



• To be able to use the while repetition statement to execute statements in a script repeatedly.

• To be able to use the for and the do…while repetition statements to execute statements in a program

repeatedly.

• To perform multiple selection using the switch selection statement.

• To use the break and continue program control statements.






A mail-order house sells five different products whose retail prices are as follows: product 1, $2.98; product 2, $4.50;

product 3, $9.98; product 4, $4.49; and product 5, $6.87. Write a script that reads a series of pairs of numbers as

follows:

1. Product number

2. Quantity sold for one day

Your program should use a switch statement to determine each product's retail price and should calculate and output

HTML that displays the total retail value of all the products sold last week. Use a prompt dialog to obtain the product

number and quantity from the user. Use a sentinel-controlled loop to determine when the program should stop looping

and display the final results. If the user inputs an invalid product number a proper alert window shall be displayed.

ISC-340 P a g e | 29

ISC-340 P a g e | 30

LABORATORY # 10 JAVASCRIPT FUNCTIONS


• To be able to create new functions.

• To understand mechanisms used to pass information between functions

ISC-340 P a g e | 31

Lab #10 – JavaScript Functions


• To be able to create new functions.

• To understand mechanisms used to pass information between functions






PART A:

Write a JavaScript program that uses functions to find the square of a given number entered as form input. You should

use two functions one to calculate the square, while the other writes the result to the form.

PART B:

Create a webpage using form text boxes that:

1. contains the function Celsius, that returns the Celsius equivalent of a Fahrenheit temperature, using the

calculation:

C = 5.0/9.0 * (F – 32)

2. Contains the function Fahrenheit that returns the Fahrenheit equivalent of a Celsius temperature, using the

calculation:

F = 9.0/5.0 * C + 32

Use these functions to write a script that enables the user to enter either a Fahrenheit or a Celsius temperature

and displays the Celsius or Fahrenheit equivalent. Your XHTML document should contain two buttons; one

ISC-340 P a g e | 32

to initiate the conversion from Fahrenheit to Celsius and one to initiate the conversion from Celsius to

Fahrenheit.

ISC-340 P a g e | 33

LABORATORY # 11 JAVASCRIPT ARRAYS


• To declare an array, initialize an array and refer to individual elements of an array.

• To use arrays to store lists and tables of values.

ISC-340 P a g e | 34

Lab #11 – JavaScript Arrays


• To declare an array, initialize an array and refer to individual elements of an array.

• To use arrays to store lists and tables of values.






Use a one-dimensional array to solve the following problem: A company pays its salespeople on a commission basis.

The salespeople receive $200 per week plus 9 percent of their gross sales for that week. For example, a salesperson

who grosses $5000 in sales in a week receives $200 plus 9 percent of $5000, or a total of $650. Write a script (using

an array of counters) that obtains the gross sales for each employee through an HTML form and determines how many

of the salespeople earned salaries in each of the following ranges (assume that each salesperson's salary is truncated

to an integer amount):

A. $200–299

B. $300–399

C. $400–499

D. $500–599

E. $600–699

F. $700–799

G. $800–899

H. $900–999

I. $1000 and over

ISC-340 P a g e | 35

LABORATORY # 12 JAVASCRIPT TWO DIMENSIONAL ARRAYS


• To declare, initialize, and refer to individual elements of a two dimensional array.

• To use two dimensional arrays to store lists and tables of values.

ISC-340 P a g e | 36

Lab #12 – JavaScript Two Dimensional Arrays


• To declare, initialize, and refer to individual elements of a two dimensional array.

• To use two dimensional arrays to store lists and tables of values.






Use a two-dimensional array to solve the following problem: A company has four salespeople (1 to 4) who sell five

different products (1 to 5). Once a day, each salesperson passes in a slip for each different type of product actually

sold. Each slip contains:

a) the salesperson number,

b) the product number, and

c) the total dollar value of the product sold that day.

Thus, each salesperson passes in between zero and five sales slips per day. Assume that the information from all of

the slips for last month is available. Write a script that will read all this information for last month’s sales and

summarize the total sales by salesperson by product. All totals should be stored in the two-dimensional array sales.

After processing all the information for last month, display the results in an HTML5 table format, with each of the

columns representing a different salesperson and each of the rows representing a different product. Cross-total each

row to get the total sales of each product for last month; cross-total each column to get the total sales by salesperson

for last month. Your tabular printout should include these cross-totals to the right of the totaled rows and to the bottom

of the totaled columns.

ISC-340 P a g e | 37

APPENDIX “A”

RULES TO FALLOW BY COMPUTER LAB USERS

• The loud conversations / discussion that disturbing the other users is prohibited.

• Audio CDs or applications with audio output may only be used with headphones with minimum

volume that it should not be disturb other users.

• All cell phones are to be turned off or set to silent while in the lab. If you receive a phone call, you

should exit the lab before answering your cell phone.

• Do not bring food or beverages inside the lab.

• Any file saved on the computer hard drive will be deleted without notice. Students should save

their work onto an external storage device such as USB drive or CD.

• Changing hardware and software configurations in the computer labs is prohibited. This includes

modifications of the settings, modification of system software, unplugging equipment, etc.

• Open labs are reserved for academic use only. Use of lab computers for other purposes, such as

personal email, non-academic printing, instant messaging, playing games, and listening to music

is not permitted.

• Please leave the computer bench ready for the next patron. Leave the monitor on the login screen,

and do not forget to take goods related to you. While leaving computer bench please push the

chair inside the computer bench.

• Users are responsible for their own personal belongings and equipment. Do not leave anything

in the Computer Lab unattended for any length of time. The Computer Labs staffs are not

responsible for lost or stolen items.

• Users are not allowed to clear paper jams in the printer by themselves.

• Operate the lab equipments with care.

• After using white-board the user must clean for other user.

Thanks for your cooperation.

Information Science Department

ISC-340 P a g e | 38

APPENDIX “B”

CERTIFICATION

LABORARTORY MANUAL FOR COURSE ISC 340 (Web

Programming)

# Instructor name Remarks Signature Date

1 Dr. Abdullah Al Mutairi

2

3

Documents

Lab Manual - Ku Manuals/ISC 340 Lab Manual.pdf · Lab Manual ISC 340 (Web Programming) Prepared by: Eng. Altaf Alfarhan Revised 2018 Kuwait University College of Computing Sciences