Embed Size (px)
Citation preview
Working in design mode
Go to website, copy this code (and css) into Dreamweaver documents
Links, tables, insert, css, tools at toolbar, etc
2. Form validation
The script checks for a value on your computer, not by sending info to a server
javascriptworld.com | 5th edition
Chapter 8Verifying words
Chapter 9• Validating an email address
• Validating a file name
Let’s look at the script, how do they work
What does it do
Go to javascriptworld.com, instructions on next slide
What does it do
1. Go to the site indicated, look at the page
2. Copy code into a Dreamweaver document and answer questions using Comments Field tag –Write at end of page
3. Four examples = four pages (put your name on each with the Comments Field tag)
4. Email four pages to me: [email protected]
Get the points and this will replace one of your missed classes Print out slides
6 – 9 for students before class
Example
JavaScriptworld – 5th edition
Chapter 5 – Building wraparound slide shows
1. What does line 8 do
2. Why is the attribute name important in line 30
3. What does line 31 do
JavaScriptworld – 5th edition
Chapter 11 – Handling events, onDbclick
1. What does ondblclick=“newWindow” in lines 18 – 20 mean
2. If I wanted to make the pop up window larger, what would I change in which line.
JavaScriptworld – 5th edition
Chapter 5 – Combining a rollover with an image map
1. What is line 8 – 26 called
2. What would you need to change in lines 14-17 to use on your page
3. Lines 32 – 36 map off an area of the page. Do your best and try to figure out what that code does
JavaScriptworld – 5th edition
Chapter 7 – Load different content into a window
1. Instead of photos, what else could you put in lines 19-21
2. How do you make the new window larger or smaller (what line of code does this)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Slideshow</title> <script language="Javascript" type="text/javascript"> <!-- Hide script from old browsers myPix = new Array("images/callisto.jpg","images/europa.jpg","images/io.jpg","images/ganymede.jpg") thisPic = 0 imgCt = myPix.length - 1 function chgSlide(direction) { if (document.images) { thisPic = thisPic + direction if (thisPic > imgCt) { thisPic = 0 } if (thisPic < 0) { thisPic = imgCt } document.myPicture.src=myPix[thisPic] } } // End hiding script from old browsers --> </script> </head> <body bgcolor="#FFFFFF"> <h1 align="center">Jupiter's Moons</h1> <p align="center"><img src="images/callisto.jpg" name="myPicture" width="262" height="262" alt="Slideshow" /></p> <h1 align="center"><a href="javascript:chgSlide(-1)"><< Previous</a> <a href="javascript:chgSlide(1)">Next >></a></h1> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Image Popup</title> <script language="Javascript"
type="text/javascript"> <!-- Hide script from old browsers function
newWindow(imgNumber) { imgName = "images/Img" + imgNumber
+ ".jpg" imgWindow = window.open(imgName, "imgWin",
"width=320,height=240,scrollbars=no") } // End hiding script from old
browsers --> </script> </head> <body bgcolor="#FFFFFF">
<h3>Double-click on an image to see the full-size version</h3> <img
src="images/Img0_thumb.jpg" width="160" height="120"
hspace="10" border="3" alt="Thumbnail 0"
ondblclick="newWindow(0)" /> <img src="images/Img1_thumb.jpg"
width="160" height="120" hspace="10" border="3" alt="Thumbnail 1"
ondblclick="newWindow(1)" /> <img src="images/Img2_thumb.jpg"
width="160" height="120" hspace="10" border="3" alt="Thumbnail 2"
ondblclick="newWindow(2)" /> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Combining rollovers & image
maps</title> <script language="Javascript" type="text/javascript"> <!-- Hide script from old
browsers if (document.images) { img1 = new Image img2 = new Image img3 = new Image
imgRed = new Image img1.src = "images/testGreen1.gif" img2.src = "images/testGreen2.gif"
img3.src = "images/testGreen3.gif" imgRed.src = "images/testRed.gif" } else { img1 = "" img2 = ""
img3 = "" imgRed = "" document.roll = "" } // End hiding script from old browsers --> </script>
</head> <body bgcolor="#FFFFFF"> <map name="roll_map" id="roll_map"> <area shape="rect"
href="sec1.html" onmouseover="document.roll.src=img1.src"
onmouseout="document.roll.src=imgRed.src" coords="0,0,120,60" alt="Sample chapter" /> <area
shape="rect" href="sec2.html" onmouseover="document.roll.src=img2.src"
onmouseout="document.roll.src=imgRed.src" coords="0,60,120,120" alt="About the authors" />
<area shape="rect" href="sec3.html" onmouseover="document.roll.src=img3.src"
onmouseout="document.roll.src=imgRed.src" coords="0,120,120,180" alt="Buy a copy" />
</map> <a href="home.html" onmouseout="document.roll.src=imgRed.src"><img
usemap="#roll_map" src="images/testRed.gif" width="120" height="180" border="0" name="roll"
align="left" hspace="20" alt="Book info" /></a> <h3>Thanks for visiting our site. You'll find some of
the best JavaScript information on the Web right here, much of which we also put into our book,
JavaScript for the World Wide Web, Visual QuickStart Guide, Fifth Edition, published by Peachpit
Press. You can find out more by clicking on the info box to the left.</h3> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Book Info</title> <script
language="Javascript" type="text/javascript"> <!-- Hide script from old browsers function
newWindow(bookjpg) { bookWindow = window.open(bookjpg, "bookWin",
"width=140,height=160") bookWindow.focus() } // End hiding script from old browsers --
> </script> </head> <body bgcolor="#FFFFFF"> <h1>Our other Peachpit books</h1>
<h2>Click on the name to see a picture of the cover<br /><br /> <a
href="javascript:newWindow('images/java2-sm.jpg')">Java 2 for the World Wide Web:
Visual QuickStart Guide</a><br /><br /> <a href="javascript:newWindow('images/cont-
sm.jpg')">Macromedia Contribute for Windows: Visual QuickStart Guide</a><br /><br />
<a href="javascript:newWindow('images/key-sm.jpg')">Keynote for Macintosh: Visual
QuickStart Guide</a></h2> </body> </html>
![Nonlinear photoprocesses in bichromophores. I. Two-photon ...REFERENCES [1] J. B. Birks, Photophysics of Aromatic Molecules (Wiley, N.Y., 1970). [2] J. B. Birks, Ed., Organic Molecular](https://img.dokumen.tips/doc/110x75/5f7201dffaed45044307548a/nonlinear-photoprocesses-in-bichromophores-i-two-photon-references-1-j.jpg)
