xilica
05-23-2002, 10:36 PM
Hey everyone.
note: Before you begin using this tutorial I personally recommend you have a background knowledge in how HTML works. If you don't, you can read my "Into to HTML" tutorial that I wrote for the HTML section.
Also note: If you know about the <HEAD> "tag" this is very important. You must include this piece of code in the <HEAD> "tag" in order to use JavaScript. Here is the code:
<SCRIPT Language ="JavaScript">
Anyway, lets get started!
Adding Alert Boxes
First I will explain how Alert Boxes work. Then I will introduce and explain how to add buttons to your webpage.
This is not a link! (noplace)
This right here is an Alert Link. When you go over the link it pops up an alert. Here is what the code means:
1. onMouseOver="alert(' ')" - This means that when your mouse moves over the link the alert will pop up. That is why the code states "onMouseOver" because on MouseOvering the link the alert pops up.
2. alert(' ') - This is where you type what you want that alert to be. The alert is the box that pops up once you highlight over the link.
Here is how Alerts work if you want the Alert to load before the page loads.
<SCRIPT language ="JavaScript">
<!-- hide from old browsers
alert('Welcome to CoderForums!');
//-->
</SCIRPT>
Here is what the code means:
<!-- hide from old browsers - You put this hear just in case. This is because some older browsers cannot read JavaScript. If they don't read this as JavaScript and it is marked like this then you are fine. It will not display in the webpage because in the code you have stated do not display if it does not work. Note: This code has to be in the <HEAD> "tag."
1. alert(' '); - This is what you put for the text when your Alert Box displays.
2. //--> - This stops hiding the JavaScript from older browsers.
3. </SCRIPT> - Ends the JavaScript commands.
Also in order to add more then one Alert Box all you have to do is this:
alert(' ');
alert(' ');
Basically, the same way you added one except you just add more under one.
Adding Buttons
<FORM>
<INPUT type="button" value="Click here to hear about a good programming Forum!"
onClick="alert('www.CoderForums.net')">
</FORM>
Here is what each piece of the code does:
1. <FORM> - You have to add this in order for the code to run since it is a form.
2. value="" - This is where you type for the value of the button. Basically, what you want the button to say on it.
3. onClick - This states if you click it an alert will appear.
Well that about wraps this tutorial up. If you have any questions feel free to posts them.
Here is a sample program which will sum everything up that you learned through this tutorial:
<HTML>
<HEAD>
<TITLE>JavaScript Tutorial</TITLE>
<SCRIPT language="JavaScript">
alert('Welcome to CoderForums!');
</SCRIPT>
</HEAD>
<BODY>
<FORM>
This is not a link! (noplace)
<INPUT type="button" value="Click here to hear about a good programming Forum!"
onClick="alert('www.CoderForums.net')">
</FORM>
</BODY>
</HTML>
note: Before you begin using this tutorial I personally recommend you have a background knowledge in how HTML works. If you don't, you can read my "Into to HTML" tutorial that I wrote for the HTML section.
Also note: If you know about the <HEAD> "tag" this is very important. You must include this piece of code in the <HEAD> "tag" in order to use JavaScript. Here is the code:
<SCRIPT Language ="JavaScript">
Anyway, lets get started!
Adding Alert Boxes
First I will explain how Alert Boxes work. Then I will introduce and explain how to add buttons to your webpage.
This is not a link! (noplace)
This right here is an Alert Link. When you go over the link it pops up an alert. Here is what the code means:
1. onMouseOver="alert(' ')" - This means that when your mouse moves over the link the alert will pop up. That is why the code states "onMouseOver" because on MouseOvering the link the alert pops up.
2. alert(' ') - This is where you type what you want that alert to be. The alert is the box that pops up once you highlight over the link.
Here is how Alerts work if you want the Alert to load before the page loads.
<SCRIPT language ="JavaScript">
<!-- hide from old browsers
alert('Welcome to CoderForums!');
//-->
</SCIRPT>
Here is what the code means:
<!-- hide from old browsers - You put this hear just in case. This is because some older browsers cannot read JavaScript. If they don't read this as JavaScript and it is marked like this then you are fine. It will not display in the webpage because in the code you have stated do not display if it does not work. Note: This code has to be in the <HEAD> "tag."
1. alert(' '); - This is what you put for the text when your Alert Box displays.
2. //--> - This stops hiding the JavaScript from older browsers.
3. </SCRIPT> - Ends the JavaScript commands.
Also in order to add more then one Alert Box all you have to do is this:
alert(' ');
alert(' ');
Basically, the same way you added one except you just add more under one.
Adding Buttons
<FORM>
<INPUT type="button" value="Click here to hear about a good programming Forum!"
onClick="alert('www.CoderForums.net')">
</FORM>
Here is what each piece of the code does:
1. <FORM> - You have to add this in order for the code to run since it is a form.
2. value="" - This is where you type for the value of the button. Basically, what you want the button to say on it.
3. onClick - This states if you click it an alert will appear.
Well that about wraps this tutorial up. If you have any questions feel free to posts them.
Here is a sample program which will sum everything up that you learned through this tutorial:
<HTML>
<HEAD>
<TITLE>JavaScript Tutorial</TITLE>
<SCRIPT language="JavaScript">
alert('Welcome to CoderForums!');
</SCRIPT>
</HEAD>
<BODY>
<FORM>
This is not a link! (noplace)
<INPUT type="button" value="Click here to hear about a good programming Forum!"
onClick="alert('www.CoderForums.net')">
</FORM>
</BODY>
</HTML>