The Web Wizard`s Guide To JavaScript

Transcript The Web Wizard`s Guide To JavaScript

The Web Wizard’s Guide To
DHTML and CSS
Chapter 1
A Review of CSS1
Chapter Objectives
• To learn the history of HTML and CSS
• To learn to create style rules using CSS
selectors and declarations
• To learn where to place style sheets and
create basic styles in CSS1
History of HTML and CSS
•
•
•
•
•
•
Tim Berners-Lee at CERN
Mosaic and graphical browsing
The advent of non-standard tags
HTML 4 and CSS
Proper Containment
Block level versus Inline elements
Creating Your Own Style Rules
•
•
•
•
A CSS rule; Selector and Declaration
Properties and values
h1 {font-family : arial, sans-serif}
p{
font-family : "times new roman", serif;
color : red; text-align: left
}
HTML Element Selectors
• Designate style for one or more HTML tags
• h1, h2, h3, h4, h5, h6 {
font-family : arial, sans-serif;
color : blue; text-align: center
}
• Contextual Selectors
• p b {color : maroon}
Class Selectors
•
•
•
•
•
Applies rules to HTML content by class
Create a rule in the style sheet
.isgreen {color : green}
Reference the class name in the HTML
<h1 class=“isgreen”>This will appear
green.<h1>
ID Selectors
•
•
•
•
•
Applies rules to HTML content by ID
Create a rule in the style sheet
#silverware {color : silver;}
Reference the ID in the HTML
<h1 id=“silverware ”>This will appear
silver.<h1>
• ID must be unique
Pseudo-Elements
• Typically used for drop cap effect
• p.dropcap:first-letter { font-size: 300%;
float: left; color: red; }
Placing Style Sheets
• Inline Style Sheets
• Applies to a single element
• <p style="color : silver;">some text goes
here.</p>
• Discouraged by the W3C
Placing Style Sheets
• Internal Style Sheets
• Applies to a single page
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-family : arial, sans-serif;
color : blue; text-align: center; }
p b {color : maroon;}
.isgreen {color : green;}
</style>
External Style Sheets
• Store style rules in an external file
• Reference the external file using link in the
<head>
• <html><head>
<title>Page with external CSS</title>
<link rel=“stylesheet” type=“text/css”
href=“somestyle.css”>
</head>
• Great for consistent styling on large sites
The Web Wizard’s Guide To
DHTML and CSS
Chapter 2
A Review of CSS2 and JavaScript
Chapter Objectives
• To review how to position, hide, and show
content, using CSS2
• To understand how CSS works with a
scripting language to create Dynamic HTML
• To review the fundamentals of JavaScript
• To learn about the Document Object Model
• To create a three-dimensional animation
• To examine the pros and cons of animation
with DHTML versus Flash
A Review of CSS2
•
•
•
•
•
The position property
The visibility property
The overflow property
The clip property
Add JavaScript to create Dynamic HTML
Why Learn JavaScript?
•
•
•
•
•
•
Broad support among web browsers
Vast libraries of scripts available online
Applicable to other host environments
Allows use of reusable code libraries
Similar syntax to C, C++, and Java
Encourages creative problem solving
A Little History
•
•
•
•
Invented by Eich at Netscape in 1995
Became popular with Navigator 3
JScript: Microsoft’s competing language
ECMA: a standard emerges
Fundamental Concepts
•
•
•
•
•
•
•
•
•
•
Objects: The nouns of the language
Instances: incarnations of objects
Properties: attributes of objects
Values: content for properties
Events and Events Handlers
Variables: containers for data
Arrays: ordered collections of data
Methods: The verbs of the language
Operators: Assignment versus Comparison
Functions: groups of statements
The Document Object Model
• Internal road map of
objects on a web page
• Hierarchical model of
web browser objects
• Old DOMs for
Netscape, Microsoft
• New browsers use the
standard DOM by
W3C
Animating with DHTML
•
•
•
•
Create the HTML
Absolute position your objects
Be aware of z-index stacking
Call an init() function in the onload
handler
• Store generic functions in an external
library
Flash over Dynamic HTML
• Flash gives more control over animations.
• Flash animations look the same on all
browsers and platforms.
• Flash files embed any fonts needed for
display of highly stylized text.
• Flash works better with sound and video.
• Flash is a little easier to learn than DHTML
• There are versions of the Flash plug-in for
obsolete browsers.
Dynamic HTML over Flash
• Works better with the browser’s back button.
•
•
•
•
•
•
DHTML text can be searched and selected.
DHTML requires only a text editor.
Flash files require a plug-in.
DHTML integrates well with HTML.
DHTML is often better for navigation.
DHTML works anywhere on the page
The Web Wizard’s Guide To
DHTML and CSS
Chapter 3
Introducing the W3C DOM
Chapter Objectives
• To discover the W3C DOM—its nature
and its importance
• To learn about nodes and how to
reference them
• To learn how to dynamically change the
content of nodes
What is the DOM?
• DOM is Document Object Model
• A standard way to refer to objects on a Web
page
• The W3C DOM1 replaces proprietary
DOMs from Netscape and Microsoft
• document.getElementById()
• document.getElementsByTagName()
What are Nodes?
• An object in DOM1 is called a node.
• Element nodes (<p>, <h1>, etc.)
• Text nodes (text contained by element
nodes)
• Attribute nodes (align=“center”)
Visualizing Nodes
Things to do with nodes
• Change the text of nodes
• Add and remove text nodes
• Create element nodes to dynamically style
content
• Change the value of attribute nodes
The Web Wizard’s Guide To
DHTML and CSS
Chapter 4
Building Your Dynamic HTML
Code Library
Chapter Objectives
• To start creating a library of reusable code
• To include browser detection in a library
• To create library functions for 3-D positioning
• To learn about library functions used for window
size manipulation
Beginning Your Code Library
• What’s an API?
• A toolbox full of code
• Store in a simple text file
Browser Detection Code
• Tool number 1 in your code library.
• Detect browsers by feature support
• var theDOM1 = (document.getElementById) ? true : false;
• Detect browsers by name
• var UA = navigator.userAgent.toLowerCase();
• Detect the platform in use
• var isMAC = (UA.indexOf('mac') >= 0) ?
true : false;
• var isWIN = (UA.indexOf('win') >= 0) ?
true : false;
Using Object-Positioning
Library Code
•
•
•
•
Create a getObj() function
Create a shiftTo() function
Create functions to find x, y, and z
Create a function to empty a node
•
•
•
•
Library Code to Change
Window Size
A function to get the available width
A function to get the available height
A function to set the window size
A function to maximize the window
The Web Wizard’s Guide To
DHTML and CSS
Chapter 5
Creating Dynamic Visibility
Applications
Chapter Objectives
• To use off-window locations to control visibility
• To create dropdowndrop-down menus with the
visibility property
• To create collapsible menus with the display
property
• To control how much of an image is visible
Hiding Content Off-Screen:
A Sliding Menu
•
•
•
•
Create two side-by-side divs
The left div contains links
The right div opens and closes the menu
Absolute position both divs to hide left div
off-screen
• Add scripting to move right div on screen
• Enhance with setCursor() and
setBackground()
Drop-Down Menus
•
•
•
•
•
Simulate GUI Menus
Absolute position limits placement to top
Use relative position for topmost div
Drop-down menu in an invisible nested div
Enhance with color and cursor changes
Collapsible Menus
•
•
•
•
•
Simulate hierachical file trees
Set display to none to hide menu
Set display to block to show menu
Enhance with text node substitution
Enhance with cursor and color changes
Dynamic Clipping
• Control visible portion of content
• Use the clip property of the style object
The Web Wizard’s Guide To
DHTML and CSS
Chapter 6
Understanding Events
Chapter Objectives
• Learn the history of Web browser event models
• Discover the nature of events on the Web
• Explore event propagation and bubbling
• Discover mouse events and position
• Use visibility techniques to create hypertext
• Create drag-and-drop applications
• Use keyboard events in Web page development
History of Web Browser Events
•
•
•
•
Limited support for events in early browsers
Expanded events in version 4.0 browsers
Disparate event models (NN4 vs. IE4)
New W3C event model
Events on the Web
• Browser creates events in response to user action.
• Event object begins life when user acts
• Event object ends life when scripts stop
processing it
• One event at a time
• Netscape and W3C static Event object
• IE4+ window.event
• Every event has a target
Propagation and Bubbling
Tracking Mousemove Events and
Mouse Position
• <body onmousemove = "showxy(event);”>
function showxy(evt){
if (window.event){ evt =
window.event; }
if (evt){
var pos = evt.clientX + ", " +
evt.clientY;
window.status=pos;
}
}
Hypertext with Mouse Events
• Title tag for single line tool tips
• Hypertext for multi-line content
• Add event handlers to links
• onmouseover="doHT(event,'vitry','visible');”
• onmouseout="doHT(event,'vitry',’hidden');”
• First parameter passes event
• Second parameter passes ID
• Third parameter passes visibility
Drag-and-Drop Applications
•
•
•
•
•
•
•
•
Place drag-and-drop code in library
Place utility functions in library
Add event handlers to div
onmousedown="setDrag(event,this);"
onmouseup="checkdroploc('1','0');”
Drag begins on mousedown
Drag ends on mouseup
Script checks new position of div
Keyboard Events
•
•
•
•
•
•
Keyboard is fasted input device
onload="init();”
document.onkeyup = getKeyEvent;
Obtains keyCode
Check for letters, numbers, or space bar
Swap text node value to show key typed
The Web Wizard’s Guide To
DHTML and CSS
Chapter 7
Using Dynamic Techniques
Chapter Objectives
•
•
•
•
•
Modify font size and color dynamically
Modify text border style and color dynamically
Improve appearance and responsiveness of lists
Work dynamically with images
Load external content in an inline frame
Modifying Font Size and Color
Dynamically
•
•
•
•
Complex text effects without Flash
Any CSS font property can be changed
Style sheet sets initial color of text to white
<button
onclick="fadeText('fadingText',255,0,0);">
• Specifies final color for div with id=“fadingText”
• fadeIn() function makes small changes to size and
color every 35 milliseconds
Modifying Border Style and
Color Dynamically
• CSS values for border color, border style,
border width, and background color
• document.getElementById('myText').style
.borderColor = "red green yellow blue";
• Easily create ugly effects
Creating Dynamic Lists
• Replace
standard bullet
with custom
image
• Change image
on mouseover
Replacing Images with Dynamic
HTML
•
•
•
•
•
Old way - event handlers in <a> tag
New way - event handlers in any tag
Load all images in stacked divs
Change stacking order to show desired image
Combine with Dynamic List effect
Using an Inline Frame to Load
External Content
•
•
•
•
<iframe> tag creates inline frame
Can be positioned anywhere on the page
Works in newer browsers only
Change src attribute of iframe to load new
content
• Simple link with target attribute also works
The Web Wizard’s Guide To
DHTML and CSS
Chapter 8
Putting It All Together
and Moving Forward
Chapter Objectives
• Confront design questions in navigating a large site
• Generate large amounts of content with a small amount
of code
• Combine collapsible menus with hypertext to display
text and html HTML files in both inline frames and new
windows
• Learn about XML, SMIL, SVG, and other developing
technologies
Designing with DHTML
•
•
•
•
Content Organization
Navigation Structure
Layout
Interactivity
Scripting for Efficiency
• When presented with tedious copy paste,
create scripts to do the work.
• Use loops and document.write() to create
repetitive HTML
• Use variables to change content as needed
• Escape nested quotes and forward slashes
Putting It All Together
• Create collapsible menu using loops and
document.write()
• Include event handlers for hypertext
• Insert and <iframe> to display HTML pages
• Swap text node values to display captions
• Give the visitor the option to open a new
window
Putting It All Together
Emerging Standards
• XML - Extensible Markup Language
• XHTML - Extensible HyperText Markup
Language
• SMIL - Synchronized Multimedia
Integration Language
• SVG - Scalable Vector Graphics

The Web Wizard`s Guide To JavaScript

Transcript The Web Wizard`s Guide To JavaScript

Directory