The Beginner Guide for Basic JavaScript

JavaScript Tutorial	Last Revised: 01/10/2004
Quick Study

Learn the JavaScript Basics

To begin with the tutorial let me explain what you will learned thru this tutorial. Learn the very basics of JavaScript, and how to create some scripts for your web page. Beginners should start here to learn the basics, then move on the next level intermediate/advanced scripting.

Ok, let's get started with JavaScript. The tags used to begin and end a script are the <SCRIPT> and </SCRIPT> tags. The opening tag should appear like this: < SCRIPT language="JavaScript"> . The JavaScript code will follow this tag, and end with the < /SCRIPT> tag <SCRIPT language="JavaScript">.

What is JavaScript anyway? JavaScript, developed by Netscape Communications joined with Sun Microsystems. Java and JavaScript are two completely different programming language. You do not need to be a programmer to use JavaScript. JavaScript is a popular program that most Webmaster used to create their homepage because it is supported by both Microsoft and Netscape.

Lets proceed to the main topic of this tutorial. An example of Java Scripting:

Example Javascript #1
<HEAD>
<SCRIPT language="JavaScript">
document.write("Hello, World!")
< /SCRIPT>
</HEAD>

The "Hello World" will display once you open/access the web site. The document.write("Hello,World") between the <SCRIPT> read by the browser and load into it. Another example is when you want to have the pop up when you enter the web page. Simply change the "document.write" to "alert" like "alert("Hello,World!"). You can also use the 'prompt" command in connection with the pops up. It will prompt you a window to enter a text or message. However using the PROMPT will need to use a variable like "var NAME=prompt("Enter your own message here","")". So once you access a web page it will ask for your name.

NOTE: Not all browsers are capable of reading JavaScript, since there are older browsers being used out there that are having a hard time or reading JavaScript. Older browser like, MSIE 3.0 and Netscacpe 3.0 they do not recognize the < SCRIPT> tag. To avoid this problem, you have to trick the browser into ignoring the text within the < SCRIPT> . This is done by using an HTML comment.

This is the SOURCE code:

Example Javascript #2
< SCRIPT language="JavaScript">
< !-- This is the HTML comment tag that will trick the older browsers from reading JavaScript --> This closes the comment tag
< /SCRIPT>

Another example in using JavaScript is "onMouseOver". In creating page for a Web site, a roll over (some people call it a "mouse over") is a technique using JavaScript that lets you change a page element (usually a graphic image) when the user rolls the mouse over something on the page (like a line of text or a graphic image).

The term roll over recognizes that there is a little ball in your mouse that you roll on a surface. Some common uses of the roll over include:

Inviting user interaction by causing text elements in a menu to "pop up" or otherwise become lively as you roll the mouse over each line. This is done by creating a small graphic image for each text line and a second graphic image for each line that is substituted when a given text line is rolled over with a mouse. The effect invites users to click on one of the rolled over lines. Causing a previously invisible graphic image or other element to suddenly appear when the user rolls the mouse over a particular page element.
Have one element on a page change color as you roll the mouse over other elements. It's a way to reinforce the user's recognition that certain page elements are "alive" and clickable. Source: What is.Com

Did you see the changes when you move your mouse to a LINK? That is the example of On Mouse Over. It will display the message on windows status bar below the window. One more example of this is to put graphic image for each line that is substituted when given text line is rolled over with a mouse. The effect is that the Text will change it to a graphics when you roll the mouse. One more thing if you want to change the color background of your webpage when you move your mouse to a certain link it will change its background color.

The On Mouse Over is another command for making your page more interesting. When you move your mouse to a certain word it will display a pop up message or a message in your Status Bar. On Mouse Over are very simple command but sometimes its tricky. JavaScript and OnMouse are likely the same, you can design your webpage like in a Flash Player and DHTML ( Dynamic Hyper-Text Markup Language ).

Another example of On Mouse Over effect :

Example Javascript #3
< a href="#" onMouseOver="alert(' onMouseOver Effect'); return false" onMouseOut="alert('onMouseOver Effect'); return false >
< img src="Hlpstep3.gif" alt="sample picture" width="342" height="15">
</a>

Another OnMouse effect is the status bar, move you mouse over to the link and check the Status Bar. Pretty neat isn't, to see the code see below.

PCTechPH.com

Example Javascript #4
<a href="HTTP://www.pctechph.com" onMouseOver="window.status='DHTML/HTML - References and Resources'; return true" onMouseout="window.status=' ';return true" > PCTechPH.com < /a >

Also use this command if you want a flip image effect, there are two ways in doing this, one using the " on Mouse Over" and the second one is "function" command script. First, we have to use the "on Mouse Over" flip image, we will use the method "Hlpstep1.gif and Hlpstep2.gif" as our images for this tutorial.

The source code for this command as follow:

Example Javascript #5
<a href="" onMouse Over="document.Hlpstep2.src='Hlpstep2.gif' "onMouseOut="document.Hlpstep1.src='Hlpstep1.gif'">
< img src="Hlpstep1.gif" border=1 name="Hlpstep2" > </a>

We have tackle onMouse Over Image flip, now let's proceed with the next Script using the "function" command.

An example of function Image onMouse Roll over using JAVA :

This is the SOURCE:

Example Javascript #6
<SCRIPT Type="Text/JavaScript" LANGUAGE="JavaScript" >
< !--
function on()
{ document.mypic.src="Hlpstep2.gif"}
function off()
{document.mypic.src="Hlpstep1.gif"}
//END of Roll Over onMouse effect -->
< /SCRIPT >
< BODY> <A HREF="index.html"
onMouseOver="on()" onMouseOut="off()">
<IMG SRC="C:/windows/Hlpstep1.gif" Alt="Windows Microsoft Picture File" NAME="mypic" BORDER=1>
< /A >
< /BODY >

Another example using the JavaScript is where you can change colors of a certain background. You can click on the Example button below to check the background effect.

The SOURCE:

Example Javascript #7: < A HREF=""onMouseOver="document.bgColor='#70DB93'" >Aqua </a>; < A HREF=""onMouseOver="document.bgColor='#B5A642'" >Brass </a>; < A HREF=""onMouseOver="document.bgColor='#FFFF00'" >Yellow </a>; < A HREF=""onMouseOver="document.bgColor='#FF0000'" >Red </a>; < A HREF=""onMouseOver="document.bgColor='#0000FF'" >Blue </a>; < A HREF=""onMouseOver="document.bgColor='#7093DB'" >Turquoise</a>; < A HREF=""onMouseOver="document.bgColor='#C0C0C0'" >Grey </a>; < A HREF=""onMouseOver="document.bgColor='#F5CCB0'" >Flesh </a>

The Example Background effect using onMouse:

Javascript is the most commonly use when using Mouse Over, it will help you to customize the body of your webpage. You can use the JavaScript if you want to open a certain window that control the size and height in a separate window. Command that let the browser to read the script to Open Window. It will Open Window in a pop up form that you have specified on the Javascript command tag.

Here is an example about a pop up JavaScript:

Example Javascript #8
<Head>
<script type="text/JavaScript" language="JavaScript">
function open Window() {
var page = "index.html";
windowprops = "height=480,width=640,location=no,"
+ "scrollbars=yes,menubars=no,toolbars=no,resizable=no";
window.open(page, "Pop up", windowprops);
}
// End -->
</script >
< /Head>

To activate the JavaScript you have to include this command at the < Body > of your webpage.


<FORM>
<input type=button name=link onClick="openWindow()" value="PCTechPH.COM">
</FORM>

To see the effect, click on this button

In our example, have you notice the < FORM > tag that we used? Yes, you can also use that command to be able to have an open window, very neat isn't?

Some webpage developer doesn't want their "Source Code" to be view by others using the right click function and the VIEW SOURCE. They use this command tag to prevent surfers from easily saving your webpage and viewing its source code.
A trick for this is to use this JavaScript tag:

Example Javascript #9
<script language=JavaScript>
< !--
var message="This Function has been disabled by the Webmaster!";
function clickIE() {if (document.all) {alert(message);return false;}}
function clickNS(e)
if (document.all) {
if (event.button==2||event.button==3)
alert(message)
return false;
}}
if (document.layers){
if (e.which == 3) { alert(message);
}}}
if (document.layers) { document.capture Events(Event.MOUSE DOWN);
} document.onmousedown=click;
</script>

When you press the right mouse key, a pop up message that will tell you that "this function is disabled by the webmaster". You can change the Text message on the pop up window with your own style. I have just put mine as it show in your screen when you right click on it.

Some web pages have this Pop Up window where in you have to enter your Name or any information to be able to enter the web page. This command is another method we use to prompt you to enter your NAME. We use the VARIABLE command to call the method. Once you refresh the page you will see the pop up message on the web site. Try the script below:

Example Javascript #10
< Script Language="JavaScript">
var Name = prompt("Please enter your Name here");
document.write("Hello!" + Name + ". Welcome to this tutorial");
< Script/>

This command Prompt read the variable in a method and display it as a prompt when you enter the page. The next command is more on checking on your Windows version, Internet Explorer or application you are using. I read this script on Dr Joe web sites and I just wanted to share it to you. You can visit his website that really help you with regard to JavaScript Command. His site has all the information you needed and to learned. Visit

HTML Goodies.com by Dr Joe.

Source Code for the above EXAMPLE:

Example Javascript #11
< Script type="text/JavaScript" language="JavaScript">
var M = navigator.app Name;
var I = navigator.app Version;
var L = navigator.app CodeName;
var A = navigator.user Agent;
document.write("Your are currently using, " + M + ", version " + I + " Returns the code name given to the brower. (i.e. " + L + ") , returns the hypertext transfer protocol header used by the browser when working with servers so the servers knows what it is dealing with. " + A + "")
< /Script>

That's all I can share about JavaScripts!

[ Table Tutorial ] [ Keyboard Shortcut ] [ Cascading Style Sheet ] [ List Tutorial ]
[ DIV tag Tutorial ] [ Filter Effect ]

Please visit www.doteasy.com to have your own domain!

Quick Study

Learn the JavaScript Basics