![Page 1: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/1.jpg)
UNIT 3
DYNAM
IC W
EBS ITES W
ITH
CSS
AND
JAVASCRIP
T
![Page 2: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/2.jpg)
OBJECTIVES CO4 Apply style to a website using
CSS.
CO5 Describe the use of scripting when
creating a website.
CO6 Create a dynamic website usingJavaScript.
2
![Page 3: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/3.jpg)
LEARNING OUTCOMESLO12 Create a fixed-layout Web page using
CSS.LO13 Create a liquid-layout Web page
using CSS.LO14 Create a hybrid Web page using CSS.LO15 Describe server-side scripting.LO16 Describe client-side scripting.LO17 Create a JavaScript event
handler.LO18 Display random content using
JavaScript.LO19 Document JavaScript code using
comments.
3
![Page 4: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/4.jpg)
FIXED LAYOUTSThe body of the page has a specific width.
Width is controlled by a master wrapper <div>. Specified in pixels
Determine the minimum screen resolution you want to accommodate:
800x600 was common. Now, many Web designers use 1024x768
as a minimum.
4
![Page 5: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/5.jpg)
FIXED WIDTH - SMALLER SIZE SCREEN
5
Horizontal scrollbars
![Page 6: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/6.jpg)
FIXED WIDTH - LARGER SIZE SCREEN
6
![Page 7: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/7.jpg)
LIQUID LAYOUTS
Often use a <div> where width is specified as a percentage
Require a significant amount of
testing
7
![Page 8: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/8.jpg)
LIQUID LAYOUT - SMALL SCREEN SIZE
8
![Page 9: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/9.jpg)
LIQUID LAYOUT - VERY SMALL SCREEN
9
![Page 10: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/10.jpg)
LIQUID LAYOUT - LARGE SCREEN
10
![Page 11: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/11.jpg)
CREATING A HYBRID LAYOUT
1. Start with a basic layout structure.
2. Create a header and footer.
3. Define two fixed columns on either side.
4. Define a liquid column in the middle.
11
![Page 12: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/12.jpg)
BASIC LAYOUT STRUCTURE<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Sample Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">HEADER</div>
<div id="wrapper"><div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html> 12
![Page 13: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/13.jpg)
HEADER AND FOOTER
#header {float: left;width: 100%;background-color: #7152F4;
}#footer {float: left;width: 100%;background-color: #7152F4;
}
13
![Page 14: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/14.jpg)
WRAPPER
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
}
14
![Page 15: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/15.jpg)
LEFT SIDE
#left_side {position: relative;float: left;width: 200px;background-color: #52f471;right: 200px;margin-right: -100%;
}
15
![Page 16: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/16.jpg)
RIGHT SIDE
#right_side {position: relative;float: left;width: 125px;background-color: #f452d5;margin-right: -125px;
}
16
![Page 17: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/17.jpg)
CONTENT AREA
#content_area {position: relative;float: left;background-color: #ffffff;width: 100%;
}
17
![Page 18: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/18.jpg)
HYBRID LAYOUT
18
![Page 19: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/19.jpg)
HYBRID LAYOUTProblem under 400 pixels
19
![Page 20: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/20.jpg)
SETTING MIN-WIDTH
body {margin: 0;padding: 0;min-width: 525px;}
20
![Page 21: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/21.jpg)
MANAGING COLUMN HEIGHT
Add the following to left_side, right_side, and content_area:
margin-bottom: -2000px;padding-bottom: 2000px;
Add the following to the footer:position: relative;
Add the following to the wrapper:Overflow: hidden;
21
![Page 22: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/22.jpg)
HYBRID LAYOUT COMPLETE
22
![Page 23: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/23.jpg)
Server-side scripting
PHP JSP ASP Perl Python Ruby
Client-side scripting
JavaScript VBScript jQuery Ajax
23
SCRIPTING
![Page 24: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/24.jpg)
Server-side The script is
executed by the Web server.
Browser-independent
Requires a trip across the Internet
Client-side The script is
executed by the browser.
Support can differ by browser
Can execute without a trip across the Internet
24
CLIENT-SIDE vs. SERVER-SIDE
![Page 25: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/25.jpg)
WHERE TO PUT JAVASCRIPT In its own file with a .js extension
<script type="text/javascript" src="/path/to/script.js">
In a <script></script> block in the HTML• Typically in the <head> block
Is not executed unless called
• Can be placed in the <body> block Is executed when the page loads
• Associated with an event
25
![Page 26: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/26.jpg)
INLINE JAVASCRIPT EXAMPLE<!DOCTYPE html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>JavaScript Example</h1>
<p>This text is HTML.</p>
<script type="text/javascript">
<!-- Hide the script from old browsers
document.write('<p>This text comes from JavaScript.</p>');
// Stop hiding the script -->
</script>
</body>
</html>
26
![Page 27: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/27.jpg)
JAVASCRIPT EXAMPLE OUTPUT
27
![Page 28: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/28.jpg)
ABOUT JAVASCRIPT Case-sensitive
White space is ignored except inside of quotes.• Use + to concatenate strings that span
multiple lines
Add a semicolon after a statement:hours = now.getHours();mins = now.getMinutes();secs = now.getSeconds();
Use comments to document:// Initialize the arrays with quotes/* This is a multiline commentSo you can comment out a block of code */
28
![Page 29: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/29.jpg)
VARIABLES AND FUNCTIONS
var text;
text = prompt(“Enter some text.”);
29
ParameterVariable to store return value
Variable declaration
![Page 30: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/30.jpg)
OBJECTS
Store multiple pieces of data, known as propertiesobject.propertyBob.addressBob.phone
Can include methodsBob.display()
30
![Page 31: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/31.jpg)
TYPES OF OBJECTS
Built-in objects
DOM objects
Custom objects
31
![Page 32: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/32.jpg)
ARRAYS An array stores a list of values. Each item in the list can be accessed
through its index.
32
Mark David Sarah
0 1 2
![Page 33: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/33.jpg)
PARALLEL ARRAYS
33
Mark David Sarah
0 1 2
Apple Pear Orange
0 1 2
![Page 34: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/34.jpg)
USING ARRAYS Declare array variables:
quotes = new Array(4);sources = new Array(4);
Store values in an array:quotes[0] = "When I was a boy of 14, my father was so " +
"ignorant...but when I got to be 21, I was astonished at " +
"how much he had learned in 7 years.";sources[0] = "Mark Twain";
34
![Page 35: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/35.jpg)
RANDOM NUMBERi = Math.floor(Math.random() * quotes.length);
Math.random() returns a random number between 0 and 1.
Multiply the random number by the number of quotes.
Math.floor rounds the result down.
35
![Page 36: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/36.jpg)
CONDITIONALS
Do something if a specific condition exists
if (count==1) alert(“The countdown has reached 1.”);
36
![Page 37: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/37.jpg)
LOOPS
for (i=1; i<=10; i++) {
alert(“It's another alert!”);
}
37
![Page 38: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/38.jpg)
EVENT HANDLERS
<img src=”button.gif” onMouseOver=”highlight();”>
38
![Page 39: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/39.jpg)
WHICH SCRIPT RUNS FIRST? <script> tags within the <head> section
• Cannot create output in the Web page
<script> tags within the <body> section• Executed in order
Event handlers are executed when events happen.
39
![Page 40: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/40.jpg)
DOCUMENT OBJECT MODEL
40
document
wrapper
style
background-color
content_area
style
color
product_img
src
![Page 41: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/41.jpg)
IMAGE DISPLAYED ON ROLLOVER
41
<a href="#" onmouseover="javascript:document.product_img.src =
'/path/to/large4.jpg'"><img src="/path/to/small4.jpg"
width="104" height="104" style="padding: 4px; border: 0px"
alt="photo" /></a>
![Page 42: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/42.jpg)
IMAGE DISPLAYED ON ROLLOVERResult:
42
![Page 43: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/43.jpg)
JAVASCRIPT SYNTAX RULES
Case Sensitivity Keywords are always lowercase. Built-in objects are capitalized. DOM object names are usually
lowercase. DOM methods often contain a mix of
upper- and lowercase.
43
![Page 44: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/44.jpg)
JAVASCRIPT SYNTAX RULES
Variable, Object, and Function Names Can include:• Uppercase letters• Lowercase letters• Numbers• Underscore (_)
Must begin with a letter or underscore
Variable names cannot be reserved words.
44
![Page 45: UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT. OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating](https://reader030.vdocuments.net/reader030/viewer/2022033106/56649e2d5503460f94b1c6b2/html5/thumbnails/45.jpg)
JAVASCRIPT BEST PRACTICES Use comments liberally.
Use a semicolon at the end of each statement.
Use one statement per line for easier debugging.
Use separate JavaScript files when possible.
Avoid being browser-specific.
Keep JavaScript optional.
45