Part 1 : Fancy Effects - Event Objects Keystroke Events Mouse ...

possumneckvegetableΛογισμικό & κατασκευή λογ/κού

4 Ιουλ 2012 (πριν από 5 χρόνια και 3 μήνες)

414 εμφανίσεις

© 2006 AcademyX, Inc.

Review CSS, JavaScript,
XML

Manipulating HTML
Elements from JavaScript

Event Objects

Keystroke Events

Mouse Events
Part 1
:
Fancy Effects
© 2006 AcademyX, Inc.
8
Review of CSS

The difference between inline, internal, and external
style declarations

“Class” attributes specify a style applied to more than
one element

“ID” attributes specify a style applied to a single element

<span> allows you to apply styles to inline elements

<div> allows you to apply styles to block elements

Open 01exr_css_review.html:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
h1 {font-size: 150%; background-color: pink;}
.fancy {font-family: bauhaus;}
#copyr {border-width: 1px; border-style: dashed;}
</style>
</head>
<body>
<h1>Welcome</h1>
<p class="fancy">Hello!</p>
<blockquote class="fancy">
Sincerely,<br/>
AcademyX, Inc.
</blockquote>
<div id="copyr">Copyright <span style="background-color:
lightblue;">2006</span></div>
</body>
External stylesheet
Internal stylesheet
Inline style
Class
ID
© 2006 AcademyX, Inc.
9
Lab: Review of CSS

Open 01lab_css_review.html

Save it as 01my_css_review.html so you have a copy of the original lab

Use CSS to make the page look like the screenshot below, without
changing the order of the HTML elements. You should use:

IDs

Classes

An internal style sheet

You will need the following CSS properties:

position (e.g., position: absolute;) and top (e.g., top: 150px;)

border-width and border-style

background-color and color

<span>
© 2006 AcademyX, Inc.
10
Review of JavaScript

Immediate versus event-driven programming

Objects, methods, and properties

Functions

Arrays

Form elements and the DOM

Open 02exr_js_review.html:
<script>
var timeAtPageLoad = new Date();
function validate() {
if(window.document.frmAge.q.value == '') {
window.alert('No query since ' + timeAtPageLoad.toString());
} else {
window.document.forms[0].submit();
}
}
</script>
<body>
<form action="http://www.google.com/search" name="frmAge">
query: <input type="text" name="q">
<input type="button" onclick="validate();" value="search">
</form>
run immediately
memorized
for later use
forms DOM
arrays
objects
methods
events
© 2006 AcademyX, Inc.
11
Lab: Review of JavaScript

Open 02lab_js_review.html and save as
02my_js_review.html

The purpose of this script is to:

ask the user five times whether they are happy or sad

change the blank images to happy or sad faces

output the number of times the user said they were happy
and sad

Replace all the underscore marks with the correct
variables or expressions
var aryMoods = new Array(10);
for(____;____;x++) {
var mood = prompt('','are you happy or sad?');
document.images[____].src = 'images/' + ____ + '.gif';
aryMoods[____] = mood;
}
var countHappyFaces = 0;
var countSadFaces = 0;
var y = 9;
while(____ > 0) {
if(____[y] == 'happy') {
countHappyFaces++;
} else {
____++;
}
____ = y - 1;
}
alert('You were happy ' ____ ' times' + '\n' +
'You were sad ' ____ ' times.');
© 2006 AcademyX, Inc.
12
Review of XML

XML is hierarchical, tag-based data in text format

XML is well-formed according to simple rules

XML is valid according to:

DTDs

Schema

Namespaces disambiguate common element names

Elements have parents and may have children

Open 03exr_xml_review.xml
<?xml version="1.0" encoding="UTF-8"?>
<lib:library xmlns:lib="http://www.academyx.com/libraries"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="library.xsd">
<lib:book>
<lib:title>Awakening, The</lib:title>
<lib:author>Chopin, Kate</lib:author>
<lib:isbn>0-14-039022-7</lib:isbn>
<lib:publishYear>1988</lib:publishYear>
</lib:book>
<lib:book>
<lib:title>White Gryphon, The</lib:title>
<lib:author>Dixon, Larry</lib:author>
<lib:isbn>0-88677-682-1</lib:isbn>
<lib:publishYear>1995</lib:publishYear>
</lib:book>
</lib:library>
XML processing
instruction
XML namespace
XML
Schema
lib namespace indicates this is
not an HTML <title> element
© 2006 AcademyX, Inc.
13
Lab: Review of XML

Open 03lab_xml_review.xml and save as a “my”
file

Look and the company organizational diagram and
reproduce it as an XML file. You do not need to
supply namespaces.

When finished, preview the file in Internet Explorer
to see if it is well-formed
Chairman
Susan Smith
CEO
John Lee
President
Aaron Jones
Vice President
Nancy Romero
Vice President
Florence Sanders
Sales Director
Randy Klein
HR Director
John Lee
© 2006 AcademyX, Inc.
14
What is Ajax?

A
synchronous J
avaScript a
nd X
ML

JavaScript processing is done in the background, on an
event-driven basis. XML is used to send and retrieve data
from the server without loading new pages.

It is also an umbrella term for fancy JavaScript effects:

keypresses and mouseclicks

drag-and-drop effects

any GUI-like programming found on a web page
The Old Way:
Request page
Reload Page for latest stock price
<html>…with topnav + logo .. </html>
The Ajax Way:
Request page
<html>… with topnav + logo .. </html>
Now get updated data as XML
<price>21.85</price>
browser server
browser server
topnav
IBM
stock price
$21.85
topnav
IBM
stock price
$19.23
plug price into
existing page
topnav
IBM
stock price
$21.85
<html>…with topnav + logo .. </html>
© 2006 AcademyX, Inc.
15
HTML Elements in JavaScript

There are several ways of capturing HTML
elements in JavaScript variables besides the dot-
notation used in <form> elements:

document.getElementById() returns an object
representing the HTML element

document.getElementsByTagName() returns an
array of objects

Open 04exr_get_elements.html
:
:
<h1>Hello</h1>
<h1>How are you?</h1>
<h1>Goodbye</h1>
<p id="idGoodLuck">Good luck.</p>
<script>
aryHeadings = document.getElementsByTagName('h1');
alert('There are ' + aryHeadings.length + ' headings');
luckParagraph = document.getElementById('idGoodLuck');
alert('The paragraph is an ' + luckParagraph);
</script>
for getElementById()
array of h1 elements
JavaScript object representing
the paragraph element
© 2006 AcademyX, Inc.
16
Lab: HTML Elements in JavaScript

Open 04lab_get_elements.html

This is a free eBook from Project Gutenberg, The Adventure of the
Devil's Foot
by Arthur Conan Doyle.

Note that:

Sherlock Holmes’ name always appears in bold

Dr. Watson’s name always appears in italics

Determine how many times each detective is mentioned.

Use getElementById() to set the “value” property of the button
to “Go to Project Gutenberg Site”.
Without changing any HTML, use JavaScript to
programmatically change the button behavior
such that, instead of launching the
“getDetective()” subroutine, it should redirect the
browser to http://www.gutenberg.org.
Extra Credit:
© 2006 AcademyX, Inc.
17
Style and innerHTML Properties

Two useful properties of elements are:

style

innerHTML

The style property allows you to control CSS styles, including:

visibility

positioning

The innerHTML property allows the programmer to set content
inside an element.

Note: innerHTML is deprecated, but all major browsers support it

Open 05exr_set_style.html
<script>
function setGlobals() {
elmPara = document.getElementById('idPara');
elmGreen = document.getElementById('idGreen');
}
</script>
</head>
<body onload="setGlobals()">
<p id="idPara">
It's not easy being <span id="idGreen">green</span>.
</p>
<input type="button" value="green!“ onclick="elmGreen.style.color='lightgreen'">
<input type="button" value="poof!" onclick="elmPara.style.visibility='hidden'">
<input type="button" value="presto!" onclick="elmPara.style.visibility='visible'">
<input type="button" value="frog!" onclick="elmGreen.innerHTML='a <b>frog</b>'">
global object
variables
after DOM
hierarchy built
style properties
innerHTML property
Note: many CSS properties have dashes in them, such as “background-color”. To convert these to
valid JavaScript property property names, remove the dash and capitalize the first letter of the next
word:
• background-color -> backgroundColor
• border-width -> borderWidth
© 2006 AcademyX, Inc.
18
Lab: Styles and innerHTML

Open 05lab_set_style.html

This lab simulates a tabbed GUI application.

Add another tab called “Time” and use the innerHTML
property to insert the current time onto the screen every
time the user clicks on the tab.