Dick's Cut and Paste Tutorial
|
|
|
|
As much as I
love GIFs, there is more to web page design than animations, (yes, you heard me say that).
I had stayed away from JavaScript, because I could not afford the time to first learn the
code, and then write the code ( I never wanted to learn HTML either). After investigating
a little, I have found a wealth of freeware scripts on the web. They, like animated gifs,
add a little spark to your page. I couldn't find instructions to suit me so, below is a
basic tutorial on how to copy and paste the script into your HTML, and make it work. I'm
learning this too as I go so bear with me, there may be some things that don't quite work.
First, the basics,
JavaScript freeware is abundant on the web, but most of the documentation that comes with it is written like you already knew what to do. Following, is a step by step description of how to copy and paste this code example.
This page has some JavaScript that puts a message, one letter at a time on the status bar ( that's the bottom line of your browser where it normally reports what your browser is doing). In this page's status bar are the words " I love to copy and paste!". In case you weren't watching, the letters came one at a time from right to left. This type is called a text scroller. And can be found on my One letter scroller page. Now, lets see how it's done. A sample of the HTML for this page when it started looks like this, <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>New Page 1</title> </head> <body> </body> </html> I went to The JavaScript Source and found a simple sample code for a text scroller. And I have put a copy of the code in next. I know it looks like a lot of stuff, but you don't have to actually know anything, all it takes is copy and paste, so don't stop now. Glance through the code below. You
don't have to memorize anything, I only put this code here so you could look at
it and see that it isn't scary, it's just code written by somebody to make your
browser do certain things. Take notice of the instructions. It might make
following my explanation a little easier.
<!-- TWO STEPS TO INSTALL ONE LETTER SCROLL: 1. Copy the coding into the HEAD of your HTML document 2. Add the onLoad event handler to the BODY tag --> <!-- STEP ONE: Add this code into the HEAD of your HTML document --> <!-- Original: Pun Man Kit <mkpunnl@netvigator.com> --> <!-- Web Site: http://home.netvigator.com/~mkpunnl --> <!-- This script and many more are available online from --> <!-- The JavaScript Source!! http://javascriptsource.com --> <script LANGUAGE="JavaScript"> <!-- Original: Pun Man Kit <mkpunnl@netvigator.com> --> <!-- Web Site: http://home.netvigator.com/~mkpunnl --> <!-- This script and many more are available online from --> <!-- The JavaScript Source!! http://javascriptsource.com --> <!-- Begin function scroll(jumpSpaces,position) { var msg = "I love to copy and paste!" var out = "" if (killScroll) {return false} for (var i=0; i<position; i++){ out += msg.charAt(i)} for (i=1;i<jumpSpaces;i++) { out += " "} out += msg.charAt(position) window.status = out if (jumpSpaces <= 1) { position++ if (msg.charAt(position) == ' ') { position++ } jumpSpaces = 100-position } else if (jumpSpaces > 3) { jumpSpaces *= .75} else { jumpSpaces--} if (position != msg.length) { var cmd = "scroll(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,5); } else { scrolling = false return false} return true; } function startScroller() { if (scrolling) if (!confirm('Re-initialize snapIn?')) return false killScroll = true scrolling = true var killID = window.setTimeout('killScroll=false',6) scrollID = window.setTimeout('scroll(100,0)',10) return true } var scrollID = Object var scrolling = false var killScroll = false // End --> </script> <!-- STEP TWO: Add the onLoad event handler to the BODY tag --> <onLoad="startScroller()" background="spacebackground.gif" bgproperties="fixed" text="#FFFF00" link="#00FFFF"> <!-- Script Size: 1.67 KB -->
That's the code. Your browser sees this code while a page is loading, and if everything is right, it knows what to do. It writes what you tell it to in the status bar of a visitors browser window. That's all.
Just a few mouse clicks more, Now we get down to it. You'll have to have your page authoring software or your online page building ready in the HTML view, when your ready to paste the code into your page. If your just reading then never mind. Either way, now's the time to see how copy and pasting makes it work. The author of this script, has added some handy instructions with the script (not all authors do that, it's a nice touch ). Up at the beginning it says, <!-- TWO STEPS TO INSTALL ONE LETTER SCROLL: 1. Copy the coding into the HEAD of your HTML document 2. Add the onLoad event handler to the BODY tag --> <!-- STEP ONE: Add this code into the HEAD of your HTML document -->
Ok, we can do that,
Now step two,
One last step to
personalize this script for your page,
{var
msg = "Another JavaScript Example! Do you like it?"
{var msg = "I love to copy and
paste!"
That's all there is to simple copy and paste JavaScript. Be sure to give credit to the authors by way of a link, because they are the ones that make it all up in the first place. Other than that, have fun.
|
Free Web Tools! ______________________ 
|
|
|
