Lab Manual - Ku Manuals/ISC 340 Lab Manual.pdf · Lab Manual ISC 340 (Web Programming) Prepared by:...
Transcript of Lab Manual - Ku Manuals/ISC 340 Lab Manual.pdf · Lab Manual ISC 340 (Web Programming) Prepared by:...
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 # 5 Introduction to CSS (Part 2) ........................................................................... 16
Laboratory # 6 Introduction to CSS (Part 3) ........................................................................... 20
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
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
LABORATORY # 2 INTRODUCTION TO HTML5 (PART 2)
Laboratory Objective:
• 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
Lab #2 – Introduction to HTML5 (Part 2)
1. Laboratory Objective:
• 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.
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
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
LABORATORY # 3 INTRODUCTION TO HTML5 (PART 3)
Laboratory Objective:
• 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
Lab #3 – Introduction to HTML5 (Part 3)
1. Laboratory Objective:
• 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.
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
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)
Laboratory Objective:
• 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)
1. Laboratory Objective:
• 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.
2. Laboratory Learning Outcomes:
• State and apply syntaxes of HTML.
• Apply style sheets emphasizing accessibility issues in web page development.
3. Laboratory Problem Description
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
LABORATORY # 5 INTRODUCTION TO CSS (PART 2)
Laboratory Objective:
• 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.
• 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
Lab #5 – Introduction to CSS (Part 2)
1. Laboratory Objective:
• 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.
• 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.
2. Laboratory Learning Outcomes:
• State and apply syntaxes of HTML.
• Apply style sheets emphasizing accessibility issues in web page development.
3. Laboratory Problem Description
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:
ISC-340 P a g e | 18
ISC-340 P a g e | 19
ISC-340 P a g e | 20
LABORATORY # 6 INTRODUCTION TO CSS (PART 3)
Laboratory Objective:
• 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.
• Using style sheets to separate presentation from content.
• To understand how elements are displayed and positioned.
ISC-340 P a g e | 21
Lab #6 – Introduction to CSS (Part 3)
1. Laboratory Objective:
• 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.
• Using style sheets to separate presentation from content.
• To understand how elements are displayed and positioned.
2. Laboratory Learning Outcomes:
• State and apply syntaxes of HTML.
• Apply style sheets emphasizing accessibility issues in web page development.
3. Laboratory Problem Description
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
Laboratory Objective:
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. Laboratory Objective:
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.
2. Laboratory Learning Outcomes:
• State the technological differences between static web sites and dynamic web sites.
• Practice and use web development tools such as Visual Studio and Front Page in order to
gain web programming skills.
3. Laboratory Problem Description
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)
Laboratory Objective:
• 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)
1. Laboratory Objective:
• 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.
2. Laboratory Learning Outcomes:
• State the technological differences between static web sites and dynamic web sites.
• Practice and use web development tools such as Visual Studio and Front Page in order to
gain web programming skills.
3. Laboratory Problem Description
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)
Laboratory Objective:
• 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.
• 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)
1. Laboratory Objective:
• 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.
• To perform multiple selection using the switch selection statement.
• To use the break and continue program control statements.
2. Laboratory Learning Outcomes:
• State the technological differences between static web sites and dynamic web sites.
• Practice and use web development tools such as Visual Studio and Front Page in order to
gain web programming skills.
3. Laboratory Problem Description
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
Laboratory Objective:
• 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
1. Laboratory Objective:
• To be able to create new functions.
• To understand mechanisms used to pass information between functions
2. Laboratory Learning Outcomes:
• State the technological differences between static web sites and dynamic web sites.
• Practice and use web development tools such as Visual Studio and Front Page in order to
gain web programming skills.
3. Laboratory Problem Description
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
Laboratory Objective:
• 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
1. Laboratory Objective:
• 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.
2. Laboratory Learning Outcomes:
• State the technological differences between static web sites and dynamic web sites.
• Practice and use web development tools such as Visual Studio and Front Page in order to
gain web programming skills.
3. Laboratory Problem Description
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
Laboratory Objective:
• 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
1. Laboratory Objective:
• 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.
2. Laboratory Learning Outcomes:
• State the technological differences between static web sites and dynamic web sites.
• Practice and use web development tools such as Visual Studio and Front Page in order to
gain web programming skills.
3. Laboratory Problem Description
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