Hi! Welcome to this tutorial. Before we start we must first check this tutorial is right for you. Please fill in the questionaire below and then click 'Check It' to find out.
You should be able to say yes to all of the above before commencing this tutorial.
Welcome to my Javascript tutorial! Before we begin we must first understand what Javascript is.
Its a language, like HTML, which you can use to spice your webpages up a bit. The form above,
asking you the three questions was a short Javascript I wrote. Javascript is my favourite website
language, because it is reasonably powerful, easy to use and almost everybody's computer will work
with it. It requires no plugins, downloads or extra work for the visitor. Its also very flexible.
It would take ages (It really would!) for me to write a complete Javascript tutorial, for javascript
is such a large language. However in this tutorial I will teach you the following:
- How to implement Javascript in a webpage.
- How to create, call and modify strings and variables.
- How to make forms and event handlers.
- A simple Login Script
IMPORTANT: You should try out all scripts on this page to help you learn this.
Implementation:
<![CDATA[
Example 1:
<html>
<head>
<title>Wiggy Web: Javascript Tutorial!
</title>
<script language="javascript">
function alert() {
name = prompt("What is your name","Benjamin");
document.write("Welcome " + name + ", to my website!");
}
</script>
</head>
<body onLoad="alert()">
]]>
If you look at Example 1 you will notice how the Javascript is surrounded by the 'script' tags. All Javascript must be placed in these tags. You will also notice how the Javascript was
placed after the title and before the closing head of the page. Generally Javascripts go there. But if the javascript is writing content directly to the page the script should go
in the appropriate place in the body. If in doubt place it in the head.
External scripts allow you to create a .js file with the javascript in it and then only put one line of javascript coding in your html page - this makes it neater and is more efficient if one
javascript is being used on more than one page.
<![CDATA[
.html file:
<html>
<head>
<title>Title
</title>
</head>
<body>
.js file:
age = prompt("How old are you?","13");
alert("You are " + age + " years old!);
]]>
By the way you can shorten the opening Javascript tag, without any problems.
<![CDATA[
Instead of: <script language="javascript"></script>
Use: <script></script>
]]>
The reason this works fine is because Javascript is the default scripting language for browsers.
Strings and Variables
Strings are blocks of text, e.g. 'made of cheese'. Variables are numbers, like '15' or '200'.
Defining them: (I am merely putting down the script)
<![CDATA[
Example 2:
<script language="javascript">
phrase1="made of cheese";
a=3
b=4
c=a+b
d=1
go();
function go() {
alert(phrase1);
d=d+1;
if (d<c) {
go();
}
}
document.write("You just saw <b>Phrase 1</b> " + c + " times!");
</script>
]]>
The above script shows how you can use one variable for multiple things.
Also, instead of a=3, you could use the method shown in Example 1, a = prompt(...
Forms:
Forms are used to allow the client (visitor) to input data.
Form items include: Text boxes, textareas, buttons, radio boxes, check boxes, password boxes and pulldown menus.
<![CDATA[
Example 3:
<form name="testform" action="#" method="post" onSubmit="submitdata()">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
<input type="submit" name="submit" value="Submit!">
</form>
]]>
The form action attribute usually specifies a cgi, asp or php file to handle the data. In this case however Javascript is selected, and although I have not written the submitdata() function by the end
of this tutorial you should be able to do so. In fact, I am now going to show you how to write a simple username and password login script.
The way this script will work is the entrance page will have a form on it asking for the visitor's username and password. When they click a submit button the contents will be verified by a
javascript and if the information is correct the user will be able to enter.
Here is the complete page:
<![CDATA[
<HTML>
<HEAD>
<TITLE>Password script
</TITLE>
<script>
//Passcheck script - www.wigoder.com
function passcheck() {
//Set login success to bad to prevent refreshes of page affecting login
document.entranceform.login.value="bad"
//Define the username and password variables
username = document.entranceform.username.value.toLowerCase();
password = document.entranceform.password.value.toLowerCase();
//Check each username and password in turn
if (username=="benjamin" && password=="password1") {
document.entranceform.login.value="good";
}
if (username=="john" && password=="letmein") {
document.entranceform.login.value="good";
}
if (username == "matthew" && password=="iamdumb") {
document.entranceform.login.value="good";
}
//Sends them to pagepassed.html if successful
if (document.entranceform.login.value == "good") {
window.location="pagepassed.html";
}
//Gives them an error message if login is incorrect
if (document.entranceform.login.value != "good") {
alert("Incorrect username and/or password");
}
}
</script>
</HEAD>
<body>
<form name="entranceform">
<input type="text" name="username">
<input type="text" name="password">
<input type="button" onClick="passcheck()" value="Submit!">
<input type="hidden" name="login">
</form>
]]>
The above script first defines a function. It then creates two variables, username and password and makes them lowercase to prevent capitals making a problem.
It then checks the username to see if there is a matching password and if yes defines what happens (in this case moving to page 'pagepassed.html').
Congratulations! You have successfully completed this tutorial. Hopefully you have understood most of what we have covered.
There is definetely room for more and one day I may update this tutorial!
← ← Website Building Home ← ←