Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
19 views

Lab 4-Manual-CS314-JavaScript-Part2

Uploaded by

mohmmedhhg6d
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

Lab 4-Manual-CS314-JavaScript-Part2

Uploaded by

mohmmedhhg6d
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

CS 314 –

Web Application Development Lab Script


Date: / /

Department of Forensic Computing and Cyber Security


College of Computer Science and Information Technology

1. Objectives

This lab is designed to achieve the following goals:

Apply the client-side web development languages such as HTML/HTML5, CSS3, and JavaScript
In this lab, you will learn the basics of JavaScript programming and how to use it to suit
your professional and creative goals. Upon completion of this course, you will be able to:
Develop the syntax and structure of JavaScript programs, including statements, expressions,
variables, and operators. Collect values using loops, arrays, and objects. Add and remove web
page elements using the Document Object Model (DOM). Validate and respond to user input
using functions and events.

2. Introduction

The topic of Lab 4 provides an introduction to JavaScript and HTML/HTML5, CSS, we will
be introducing you to JavaScript Control flow, Functions, Arrays, Objects, DOM
manipulation, Learn the tree structure of HTML based websites.

3. Equipment / Apparatus / Materials / Environment / Tools and Techniques

The labs for CS-314 provide time to do computer science under the direction of an
instructor who will be serving as a facilitator during the lab session. This means that the
instructor will not solve your problems or show you how to complete the activities. The
instructor may provide helpful hints, ask additional questions, ask you to explain a
solution, ask how you obtained a solution, or facilitate discussions about observations,
experiments, results, discoveries, and other topics that arise.
Some lab activities will ask you to develop solutions to problems, program solutions in
Web Application Development, and test the programs. Other activities will involve using
programs we give you to illustrate important concepts in Computer Science. You will be
required to make observations, form and test hypotheses, and use the results of your
testing to change aspects of your programs.
CS 314 –
Web Application Development Lab Script
Date: / /

4. Procedures / Getting Started / JavaScript

 PART 3: Document Object Model (DOM Elements, Changing HTML, Events, Animation,
Event Listener, styling)
 Tables & Forms
CS 314 –
Web Application Development Lab Script
Date: / /
1.Document Object Model
CS 314 –
Web Application Development Lab Script
Date: / /
2.Document Object Model
DOM Elements
CS 314 –
Web Application Development Lab Script
Date: / /
3.Set_ Elements DOM html_Inner
CS 314 –
Web Application Development Lab Script
Date: / /
4.Insert_DOM Elements
CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /
5.Replace_DOM Elements
CS 314 –
Web Application Development Lab Script
Date: / /
6.Dom_Remove Elements
CS 314 –
Web Application Development Lab Script
Date: / /
7.DOM_Animation

8.JavaScript Form validation


CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /

Your Tasks

Task 1:

7- Create the following tasks related to Document Object Model:


7.1: insert DOM
7.2 replace DOM
7.3 Remove DOM
7.4 Create a DOM animation (Bonus question)
8. Create a form and validate the form using JavaScript

Task 2:
The Goal of this Task:
Demonstrate knowledge of basic JavaScript through building one-page website with
self-updating time (a clock) using JavaScript.
1. Create a new folder within webserver root i.e. htdocs. The name of the folder
should be your student number_t4.
2. You need to create three files namely;
 index.html
 script.js
 style.css
CS 314 –
Web Application Development Lab Script
Date: / /

This page has the following Features:


Feature #1
Display the current date and time
Hint: Date()
CS 314 –
Web Application Development Lab Script
Date: / /
Feature #2
Continually update time
Hint: SetInterval()
Feature #3
Check the time to display the greeting massage.
Hint: use if

Assessment
Students will prepare a report in which they will submit the snapshots taken while they worked on each
part. They will explain the figures to make sure that they understood what they did.

Note: Any submission crossing the deadline will be penalized by 10% reduction per day.

You might also like