JavaScript - Three Chapters
Another tutorial I wrote for my website. It's a three-chaptered JavaScript tutorial.
JavaScript Chapter One by Jethro
--------------------------------
Index:
o introduction
o variables
o arithmetic
o conditional
o loops
o source code
Introduction
------------
Welcome to the first in my three chapter tutorial on JavaScript. By the
end of this tutorial, you will (hopefully) have quite a good grip on
the basics of JavaScript. In this chapter, we will deal with the basic
layout of JavaScript.
This text is ideally based towards people already with experience in
programming previously. If you have no experience with programming
read one of the many (of my ;)) tutorials on C++ or PHP or something...
JavaScript is a client-side language, which basically means that your
browser works as the language interpreter (unlike server-side
languages like PHP and CGI which make the actual web server itself do
all the work).
Instead of giving you a big long lecture on the history of JavaScript,
I'll just tell you that it's very big in the world of web design and
creation. The syntax itself has many resemblences to languages such as
C++ and PHP. It is a relatively high-level language also.
JavaScript is integrated seamlessly into HTML. To indicate the opening
and closing of a JavaScript, we use the <SCRIPT>...</SCRIPT> tags:
---------------------------------
Code:
<SCRIPT LANGUAGE="JavaScript">
JavaScript code in here
</SCRIPT>
---------------------------------
A lot of programmers put their whole JavaScript in HTML <!-- comments
-->, in case a person viewing that page has a browser *so* old, that
it doesn't understand JavaScript. If you want to do this, you can do
it, like so:
-------------------------------
Code:
<SCRIPT LANGUAGE="JavaScript">
<!-- Optional Text in here
Actual JavaScript code in here
// Optional Text in here -->
</SCRIPT>
-------------------------------
That's enough of the syntax, here's how you actually use it!
Variables
---------
Unfortunately (in my opinion), in JavaScript, you cannot declare what
*type* of variable you want it to be, whether you want it to be a
string, integer...etc. There is only one variable declaration keyword
(which might be hard to grasp for all you C++ gurus ;).
var variable_name = value;
var is the *only* way to declare a variable, unfortunately. I suppose
the people who made it, wanted it to be *very* easy to write.
However, if there variable you wanted to declare was a number, you
would declare the value without quotation marks, unlike if it as a
string. Here's an example:
----------------------
var number = 3;
var string = "three";
---------------------
Arithmetic
----------
To perform arithmetic, like in any other language, it's just simply:
x operator y
Here is a table of common operators and their respective descriptions:
Quote:
___________________________________
LIST - Description |
----------------------------------- |
= - Equals |
+ - Add |
- - Subtract |
* - Multiply |
/ - Divide |
% - Remainder |
^ - XOR |
> - Bigger Than |
< - Smaller Than |
>= - Bigger or Equal to |
<= - Smaller or Equal to |
-----------------------------------
Conditional
-----------
The conditional statements in JavaScript are the same as in languages
such as C++ and PHP.
The syntax is:
-------------------
if (condition) {
statements
}
else {
statements
}
-------------------
If the condition is true, then the statements inside the "if" brackets
will be executed, if not, the statements inside the "else" brackets
will be.
Here is a working example:
Code:
---------------------
if (variable >= 6) {
alert("Your variable is bigger or equal to 6!");
}
else {
alert("Your variable is smaller than 6!");
}
---------------------
====
Note: The alert() function will be explained in Chapter Two.
====
Loops
-----
The two loops in JavaScript are FOR and WHILE.
Again, the syntax is identical to C++, PHP and other such languages. As
you can see, many parallels can be drawn between these languages.
The FOR syntax is as follows:
--------------------
for (i=0; i>=100; i++) {
statements;
}
--------------------
As you can see, the statements enclosed in the brackets will be
executed until the condition is met. i=0 can actually work as the
declaration of that variable in JavaScript, you don't need to declare
it already, before hand.
The i++ segment increments (adds one) to the i variable. It has the
function: i=i+1.
The WHILE syntax is as follows:
---------------------
while (i=5) {
statements;
}
---------------------
If you have experience in programming, you will know that the
statements will continually be executed *while* the variable 'i'
equals 5.
==========
Note: Of course, you don't have to choose 'i' as the variable name, but
it's an age-old tradition to use 'i' as the variable name when using
loops, whatever the language.
==========
Source Code
------------
Here is a working example of the processes we have just covered in this
chapter:
All functions included in this code will be explained in the next
chapter....
Code:
*** javascript1.html ***
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from old browsers
var age = 5;
if (age==10) {
alert("Age equals 10");
}
else {
alert("Age doesn't equal 10");
}
for (i=0; i>=10; i++) {
alert(i);
}
while (age==5) {
age = prompt("Please enter an age OTHER than 5","");
}
alert("5 x 6 = "+5*6);
//--></SCRIPT>
*********************
Until the next chapter, happy programming!
Jethro
JavaScript Chapter Two by Jethro
--------------------------------
Index:
o User Functions
o JavaScript Functions
o Input Methods
o Objects
o External JavaScripts
o Source Code Examples
Welcome to the second chapter in my three-part series of web
programming and design with JavaScript.
User Functions
--------------
Functions exist in JavaScript, just like in other languages. JavaScript
functions are pretty similar to C++ functions, only instead of having
to declare a return type of the function like in C++, we only have to
declare JavaScript functions with the keyword "function". This is
probably because there is only one way of declaring variables in
JavaScript (var).
Here is an example of a JavaScript function which returns a value:
Code:
function askName() {
var name = prompt("What is your name?","");
return name;
}
var yourname = askName();
alert("Your name is: "+yourname)
Here is an example of a function which doesn't return a value.
Code:
function doBoxes() {
var name = prompt("What is your name","");
alert(name);
}
doBoxes();
And here is an example of a function which accepts arguments.
Code:
function addNumers(num1, num2) {
return num1+num2;
}
alert(addNumbers(3, 5));
As you can see, the arguments are passed to the function through the
function's parenthesis (brackets).
JavaScript Functions
--------------------
Here are some functions already available in JavaScript. Here is a list
of the most common ones.
Quote:
alert(text) - This pops up a message which the text.
confirm(text) - This gives a confirm box with the text.
prompt(text1, text2) - This prompts the user for input and then RETURNs that value
window.close() - This closes the window. If the window was opened
with JavaScript, then it will close automatically, if not, it will
close with a confirm prompt.
window.open(url) - This opens a window.
history.back(1) - This gos to the first page back in the history.
math.Random() - This makes a random number.
math.Floor(number) - This rounds off a number to an integer.
document.write(text) - This writes text to the page.
string.substring(number) - This cuts off a string.
string.substr(number) - Another method off cutting a string.
Input Methods
-------------
Of course, as I've said in Chapter One, JavaScript can be added
seamlessly (almost) to normal HTML pages. So, JavaScript can interact
with a lot of HTML objects and properties. Here's an example of
getting input from a form. I just decided to make a complete HTML
page.
Code:
<HTML><HEAD>
<TITLE>JavaScript with a Form</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function showName(form) {
alert(form.name.value);
}
//-->
</SCRIPT></HEAD>
<BODY>
<form>
Name: <input type=text name=name><input type=button value="Show Name!" onClick="showName(this.form)">
</form>
</BODY></HTML>
As you can see, we passed 'this.form' as an argument to the showName()
function. Basically, this is a quick pointer to the form object.
Then we sent the "form.name.value" to the alert() function. This way of
gaining input from a form, works with any type of HTML input form,
such as radio, text, textarea, select, checkboxes, buttons...etc.
I will have to write another chapter of its own for HTML objects in my
"Advanced HTML" tutorial.
Objects
-------
There are many objects which we can use in JavaScript.
Here's an example of some, along with some of their properties.
Code:
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDay()+1;
alert(year+" - "+month+" - "+day);
As you can see, the Date object controls everything to do with the
date. Here is an example of another object.
var names = new Array("Jethro", "Fred", "Jones", "Flintstone", "Jimmy", "Sam");
alert(name[3]);
The Array object is what we use to create arrays in JavaScript.
We can also create our own objects and properties in JavaScript.
Basically we create a function and then assign it with properties.
Then we assign that function to a variable, with the keyword "new".
Code:
function customer(name, age, product) {
this.name = name;
this.age = age;
this.product = product;
}
var jethro = new customer("Jethro Jones", 167, "Stolen Keyboard");
var freddie = new customer("Fred Flintstone", 43, "Rock Monitor");
var mary = new customer("Mary Black", 12, "Ripped Mouse Mat");
alert(jethro.name);
alert(freddie.age);
alert(mary.product);
As you can see, the object and its respective properties are assigned
to the variable.
External JavaScripts
--------------------
External JavaScripts are great if you want to ``hide`` your precious
JavaScripts or (for some reason) you want to shorten or clear up the
source code of a certain HTML page. Here's how you do it:
Code:
<SCRIPT LANGUAGE="JavaScript" src="myfuntions.js"></SCRIPT>
This will have to effect of putting whatever is in "myfunctions.js"
into the <SCRIPT>...</SCRIPT> tags.
*****
Note: In the actual .js file itself, you don't need to actually add the
<SCRIPT>...</SCRIPT> tags and if you like adding
from the start to the end of your JavaScripts, so they won't spit up
an error in older or text-based browsers, they are useless in external
JavaScripts. But if you want to, it doesn't matter
*****
Source Code Examples
--------------------
Code:
<SCRIPT LANGUAGE="JavaScript">
function groceries(form) {
this.customer = form.customer.value;
this.product = form.product.value;
this.price = form.price.value;
}
function getGroceries(form) {
var groceryList = new groceries(form);
alert("The Price is: "+groceryList.price);
}
</SCRIPT>
<form>
Customer Name: <input type=text name=customer>
Product: <input type=text name=product>
Price: <input type=text name=price>
<input type=button value="Check!" onClick="getGroceries(this.form)"></form>
Here's a script I wrote called "change2weird.html". It basically messes up a string,
putting letters here, there and everywhere. You might find something useful there...
Code:
<html><head>
<title>Change2Weird</title>
<style><!--
input{border-color:white; background-color:black; font-family:Verdana; color:white;}
.newname{border-color:black;}
//--></style>
<script language=javascript>
<!-- Weird name script by Jethro
// ________________________
function getNewName(form) { // Declare the function //
var urname = form.urname.value; // Get the original name //
var letters = new Array(urname.length); // open a new array //
var weird = ""; // Declare the variable //
for (i=1; i<=urname.length; i++) // The loop //
letters[i] = urname.substring(i,i-1); // Seperate all the letters //
for (i=1; i<=letters.length-3; i++) // Another loop //
weird += letters[i]+letters[i+2] // Mess them all around //
form.newname.value = weird; // Print the new name //
// -----------------------------
}
//-->
</script></head><body bgcolor=black>
<form name=changename><center>
<input type=text name=urname value="Your Name" size=30 onClick=this.value=''></p>
<input type=button value="Change" onClick="getNewName(this.form)"><input type=reset></p>
<input type=text name=newname size=70 readonly class=newname></center></form>
</body></html>
And again, here is another script I wrote. It basically tells you whether an argument is a string or a
number...
Code:
<HTML>
<HEAD>
<TITLE>Check Number</TITLE>
<style><!--
input{text-decoration:none; font-family:Verdana; border-color:black; background-color:black; color:white}
.ageplace{border-color:gray;}
//--></style>
<script language=javascript>
function isNumber(num1) {
if ((num1 == "")||(num1 == " ")||(num1 == " ")||(num1.length==0))
return false
else if ((num1 / 2 >= 0)||(num1 / 2 < 0))
return true
else
return false
}
function getAge(form) {
var age = form.age.value;
var ageboolean = isNumber(age);
if (ageboolean)
form.answer.value = "Okay"
else
form.answer.value = "Nope"
}
</script>
</HEAD>
<body bgcolor=black onLoad="alert('This script tells you whether a value is a number...')">
<form name=getage>
<input type=text size=2 maxlength=3 name=age class=ageplace>hthyhhtyhtyty
<input type=button value="Check Age" onClick=getAge(this.form) class=ageplace>
<input type=text name=answer size=4 readonly maxlength=4>
</form>
</BODY>
</HTML>
That's all for this Chapter. We'll wrap up all this stuff in the next
and final chapter, ``Chapter Three!``
Happy coding,
Jethro
[b]JavaScript Chapter Three by Jethro[/code]
-----------------------------------
Index:
o Incorporating JavaScript With Other Languages - VBScript & PHP
o Browser support
o Conclusion
Welcome to the final installment in my three part guide to programming
with JavaScript. If you have found this guide confusing, I'm sorry,
but you have to remember that it was specifically directed towards
programmers.
However, if you have found it helpful and if you have learnt anything
from it, or if you remembered something you had forgotten,
congratulations. That's the whole point of this text.
In this chapter, I hope to tie up some loose ends. If you have any
comments/queries/suggestions, please drop me a line, at
jethrojones@gmx.net
Incorporating JavaScript With Other Languages
---------------------------------------------
JavaScript doesn't have to be the only language on your webpage of
course. Because it is a browser-orientated language, it can be wrapped
around other languages, client or server.
In this section, I am going to (briefly) comment on two languages,
VBScript (client/browser) and PHP (server).
VBScript.
This language, unfortunately *only* runs on Microsoft Internet
Explorer, because it is made by Microsoft. So if you are trying to
make a website for everybody, you have to take into consideration,
that *a lot* of people use Netscape Navigator. Most people use
Internet Explorer though, that's why I'm commenting on it.
VBScript runs in much the same way as JavaScript, interpreted by the
browser. However, the syntax is quite different (the language itself
has its roots in the *old* BASIC language), so it uses SUBs, different
variables...etc.
However, a cool thing with VBScript, is that it can use JavaScript
variables. Here's an example of JavaScript and VBScript intermingling.
Code:
<SCRIPT LANGUAGE="JavaScript">
var name = prompt("What is your name?","");
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
msgBox name,64,"You rock my world!"
</SCRIPT>
Here, we are using VBScript to avail of something we can't get in
JavaScript, the wonderful "msgBox".
*****
Note: By the time you read this, I probably will have released a text
on VBScript.
*****
PHP.
PHP is a server-side language. This means that the browser doesn't
interpret the PHP statements, the http (web) server installed on the
server does.
PHP has many similarities in syntax to JavaScript, however their
functions are entirely different.
Here's an example of a .php page using JavaScript.
Code:
<?php
echo "<SCRIPT LANGUAGE=/"JavaScript/">";
echo "alert(/"Welcome to my page $name!/")";
echo "</SCRIPT>";
?>
And here's an example of PHP *inside* JavaScript, instead of vica
versa, like the example I've shown you before.
Code:
<SCRIPT LANGUAGE="JavaScript">
document.write("Your IP Address: ");
document.write("<?php echo $REMOTE_ADDR; ?>
");
</SCRIPT>
Both pages use another language to do something which they can't.
*****
Note #1: Don't trying running these examples (the .php pages) on your
computer. They must be run on a server with PHP installed.
*****
Note #2: Like I said for VBScript, you'll probably be able to find a
tutorial in PHP written by me on the TechnoRats site.
*****
Browser Support
---------------
Here's a list of common browsers (old versions and new) and whether
they support JavaScript.
*****
Note: All the new versions do, of course.
*****
Quote:
____________________________________
Browser - Is JavaScript supported?
------------------------------------
Explorer 6.0 - Yes
Explorer 5.5 - Yes
Explorer 5.0 - Yes
Explorer 4.0 - Yes
Explorer 3.0 - Yes
Explorer 2.0 - No
Explorer 1.0 - No
Netscape 6.1 - Yes
Netscape 6.0 - Yes
Navigator 4.7 - Yes
Navigator 4.5 - Yes
Navigator 3.0 - No
Navigator 2.0 - No
Navigator 1.1 - No
Mosaic 3.0 - No
Mosaic 1.0 - No
Mozilla - Yes
AOL Browser 5.0 - No
AOL Browser 4.0 - No
AOL Browser 3.0 - No
AOL Browser 1.0 - No
Opera 5.11 - Yes
Opera 4.02 - Yes
Opera 3.60 - Yes
Opera 3.5 - No
Lynx - No
------------------------------------
Conclusion
-----------
Thank you for bearing with me and reading this text on JavaScript.
Hopefully you've learnt (or remembered) something.
Happy JavaScripting,
Jethro.
