| Really
Annoying Javascript Tricks
Assignment: Come to class on Friday, March 10,
with a short description of the larger goal and
focus of your next website.
1. Understanding HTML Code
<script> ....</script>
<body>....</body>
<head> .... </head>
<a href= "index.htm">Home Page </a>
2. Using Javascript Behaviors in Dreamweaver:
Use Free
JavaScripts, Codelifter.com,
- Java and Javascript are not the same thing.
Javascript is a scripting language that is used
to set the properties of a webpage. Java
is a compiling programming language that
is used to develop program applications.
- You can use "Behaviors" window
in
Dreamweaver to insert javascript behaviors
into your webpage
- But in order to use the "Behaviors" window,
you must first download the behavior from
the Macromedia
Exchange website
3. . Adding Javascript using Macromedia
Extension Manager
- Go to Dreamweaver
Exchange to download javascript behaviors
- In order to download extensions, you must have
Macromedia
Extension Manager on your computer
- Use the Behaviors Tools window to add javascript
effects to your page.
- Use example of "Text Link Rollover"
- In Dreamweaver, use "Insert" and
select "TextRollover"
- Example of Text Link
Rollover using Dreamweaver
4. Adding more than one Javascript Effect
to a page
- So
what's the problem: Adding mulitple
javascript code to one page
- Adding
more than one javascript trick to a page
One event handler, many javascript actions
EXAMPLE #1:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: <body onload="dothat()">
RESOLUTION: <body onload="dothis();dothat()">
EXAMPLE #2:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: window.onload=dothat()
RESOLUTION: <body onload="dothis();dothat()">
EXAMPLE #3:
SCRIPT 1: window.onload=dothis
SCRIPT 2: window.onload=dothat
RESOLUTION: <body onload="dothis();dothat()">
- Example of Webpage
with running clock
<body onLoad="show5()">
- Example of Clock counting
the time until
Springbreak
<body onLoad="getTime()" >
- Example of Two Javascripts
on the same webpage
<body onLoad="getTime();show5()">
- In order for two javascripts to work on
the
same page if they both use the "onLoad"
command, you must combine them. If you
put in two separate "onLoad" commands,
one of the javascripts won't work.
<body onLoad="show5()">
<body onLoad="getTime()" >
- You combine the two onLoad commands by
inserting the onLoad instructions in one
command string, and separate each onLoad
command by a semi-colon.
- Notice that the combined onLoad commands
are now contained with quotation marks. If
you put quotation marks around each of
the onLoad commands, your javascript
won't work.
<body onLoad="getTime();show5()">
5. Changing colors and textsize in
javascript code
- Highlight
text trick
-
This
is an example of Highlighted text .
<span style="background-color:#0066FF">This
is an example of Highlighted text</span>
-
Upper
Lefthand corner Clock trick
-
Example of Webpage
with running clock
-
//change font size here to your desire
myclock="<font color='000000' size='5' face='Arial' ><b><font
size='5'>Current Time:</font></br>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"
-
Changing color and
font size in the Source Code
-
Source Code for Changing
Color and
Font Size
5. Really
Annoying Javascript Tricks
- Annoying
Roaming Cursor Trick
---Roaming Cursor
Trick Webpage
- Annoying
Eyes Trick
--Annoying Eyes Trick Webpage
- Annoying
Blinking Links Trick
--Annoying Blinking
Links Webpage
6. Javasript code for Basic Hit Counter
<!--#exec
cgi="/cgi-bin/counter"-->
<br>Number
of Visitors to this site: </font><!--#exec
cgi="/cgi-bin/counter"--></b>
Example of Hit counter:
Number of Visitors to this site:
52453
|
