Rikeku
09-18-2006, 03:32 PM
First you will need to know the tag to enter any kind of script into a
web page: <script>. For Javascript, you add <script language="javascript">,
the current standard seems to be changing to <script type=”text/javascript”>,
however. Of course, when your script is finished, you add </script>.
It's not always required, but for older browsers give you an
will error if you not comment your Javascript. So what you will
have to do is type: <script language=”javascript”> </script>.
Ok now you know how to add the code to your page, let's start
with a simple hello world program.
<script language="javascript">
<!--
document.write("hello world");
//-->
</script>
You will notice how I used document.write() to add text to the screen. When you
put somthing into a write function document.write() with quotes,
it will type exactly what you have between them including spaces.
Now that you can type simple text on the screen, let’s set some
variables. (I will be leaving out the <script> tags from now on).
var First_Variable = 34;
var Second_Variable = "hello";
To create a variable, which is just a place in memory for a piece of
data, you type var. You may set a value of whatever you wish to a
variable, it can be a number, letter, or string of letters. When
declaring variables that are more then one letter, make sure to put it
into quotations. To display a variable’s value on the screen, do the
same thing you did with document.write(), but leave out the quotations.
Typing:
var one = “hello world”;
document.write(one);
will produce:
hello world
in the browser.
Now, lets say you want to put two variables on the same write() line.
This is done like this:
var one = “hello”;
var two = “world”;
document.write(one + two);
You’ll get exactly the same results of hello world in the browser.
Alerts:
An alert is the little annoying box that pops up in the middle of your
screen with an ‘ok’ button in the middle and a message for you. To do
this, just type:
alert(“hello new user”);
Or if you want to have an ok and a cancel button on the alert, type:
confirm(“are you sure you want to come”);
Next we begin to get into the more advanced programming. Lets start out
with arrays and dates. An array is a piece of data that has more than
one value contained in it. While a variable called ‘one’ may only be
set to ‘1’, array_1 may be set to ‘1’, ‘2’, and ‘3’. To create an
array, you use a pre-built function of JS, new Array().
var SixMonthCalander = new Array(“jan”,”feb”,”mar”,”april”,may”,”june”);
This statement will set the array to equal the names of the first six
months. To display the array, you type the standard document.write()
function, but after the variable name you add [] with a number. The
number resembles the order you typed the values in. So, [0] would mean
“jan”, because computers start counting at zero ^^.
document.write(SixMonthCalander[0]);
This would, of course, output jan. Since this is “client side”
scripting, you can’t just take a date off your server and send it to
the viewer of the page. To grab a date from the inquiring computer’s
clock, use the get Date() function of JS. However, before grabbing the
date, you have to set a variable to become the value of the date with
new Date().
var the_date = new Date();
var the_hour = the_date.getHour();
var the_minute = the_date.getMinute();
document.write(the_hour + “:” + the_minute);
I’m sure that’s probably not making any sense to some of the newbs out
there, so I’ll do my best to explain further. In JS, periods connect
everything. Think of the_date as what JS grabbed from the computer’s
clock. Also, think of the_hour as the numerical number of the hour
contained in the date on the computer’s clock. So, even more simply,
document is the name of the current HTML document, and write is one
level lower than that. Let’s talk about Boolean statements. Boolean was
some logic-ridden theologian that thought about different values
equaling each other all day.
The if() statement and the else statement are the only two I’m going
to deal with, because they are all that really matter. This is simple
algebra, you have a variable, (call it x), so x currently equals 10,
but the user inputted this number, and you want to make sure it is ten.
if(x == 10) {
Do something
}
else {
do something else
}
Make sure you use two equals signs, when checking the value of a
variable. Here are some other ways of checking if the variable is in
the range you want it:
Equal to: x == 10;
Not equal to: x != 10;
Less than or equal to: x <= 10;
Greater than or equal to: x >= 10;
Greater than: x > 10;
Less than: x < 10;
Form handling:
Lets say you want to make a simple calculator using a form and
javascript. This is going to require understanding how the periods
work in JS. So if you didn’t understand the previous, this is going to
be more difficult. I seem to be digging myself into more and more
explaining. -.- Anyways, functions are declared with function. so this
will be the add() function that we are writing. To start a function,
use {, to end it use }.
<html>
<head>
<script language=”javascript”>
<!--
Function add() {
var total = one + two;
alert(total);
}
//-- >
</script>
</head>
<body>
<form name=”the_form”>
<input type=”text” name=”one”> <input type=”text” name=”two”>
<input type=”button” “value=”add them” onClick=”add()”>
</form>
</body>
</html>
onClick will do the selected action when you click on the button, what
a thought [there are also onBlur(), onFocus(), onMouseOver(), and
onMouseOut()]. Alert() will pop up with one of those annoying alert
boxes with an ‘ok’ button in the middle.
Loops:
Sometimes in programming you’ll have a repetitive, menial task that
you don’t want to type out yourself, so you use a loop to do it for
you. The most important of these loops is the for loop. To declare the
for loop, use this syntax:
for(var counter = 0; counter < 5; counter++) {
document.write(counter);
}
This particular loop isn’t going to do you any good at all, but we have
to take it one step at a time here. Instead of typing var somewhere in
the script, you declare the variable inside the parenthesis. So far we
have for(var variable = value;), the second set of numbers sets the
number of times you want to do the loop. For(var variable=value;
variable < value;), notice the number has to be less than for this
type of counting loop. Finally, the counter++ means each time it loops,
add one to the value of counter. A different way to express this would
be counter = counter + 1. So the above program would output 01234,
since it goes around 5 times (zero up until less than 5, aka 4).
Since the previous loop was completely useless, here’s a more practical
reason for using this type of loop:
for(var counter = 0; counter < 5; counter++) {
document.write(SixMonthCalendar[counter]);
}
This will write out the entire array for you, janfebmaraprilmayjune
without having to manually type it out. It types out the number of the
array, which is 0 for the first cycle, 1 for the second, etc. you’re
sending that value out to the browser so it shows up on the screen.
There are two other types of loops in JavaScript (as well as any other
language), the do while, and the while loop.
do{
document.write(“owned”)
something++;
}while(something < something_else);
document.write(“owned”)
while(something < something_else) {
document.write(“owned”)
something++;
}
I don’t feel like getting into these two loops because they rarely are
ever useful for anything but error catching and infinite loops. So, yes
if you want to make an infinite number of anything, you can just make a
statement that will always be met like while(var==1); or something like
that (leave out something++).
Pop-up windows:
These are becoming almost completely obsolete do to the amount of
pop-up blocking that is present in newer browsers. However, window
manipulation can be fun, and you can disable the pop-up protection
yourself if you want to play around with it.
To open a new window using JS, type window.open();. This command will
launch a blank window, set to the default size of the browser on that
computer when it’s not maximized. (say your browser window is half its
normal size when you click the maximize button, that’s the size the
default JS window will be.
To make a window that actually has something in it, you’ll need to
make a different page to fill the space, say you name that page
‘little.html’. There are several things you can mess with when opening
windows, but to just add the page in there type window.open(“little.html”).
if you want to manipulate the size of the window, you’ll have to add
some parameters to the open function: window.open(‘little.html’,’width=50,height=50’);
There are lots of parameters you can add to this window function to do
whatever you want. Toolbar, statusbar, noresize, titlebar, windowbar,
addressbar, etc.
If you want to write to the window from your default page, you can make
that window into a varible.
var mini_win = window.open();
lil_win.document.write("this is my little window");
This will create the window and write: "this is my little window" into the
small window space.
web page: <script>. For Javascript, you add <script language="javascript">,
the current standard seems to be changing to <script type=”text/javascript”>,
however. Of course, when your script is finished, you add </script>.
It's not always required, but for older browsers give you an
will error if you not comment your Javascript. So what you will
have to do is type: <script language=”javascript”> </script>.
Ok now you know how to add the code to your page, let's start
with a simple hello world program.
<script language="javascript">
<!--
document.write("hello world");
//-->
</script>
You will notice how I used document.write() to add text to the screen. When you
put somthing into a write function document.write() with quotes,
it will type exactly what you have between them including spaces.
Now that you can type simple text on the screen, let’s set some
variables. (I will be leaving out the <script> tags from now on).
var First_Variable = 34;
var Second_Variable = "hello";
To create a variable, which is just a place in memory for a piece of
data, you type var. You may set a value of whatever you wish to a
variable, it can be a number, letter, or string of letters. When
declaring variables that are more then one letter, make sure to put it
into quotations. To display a variable’s value on the screen, do the
same thing you did with document.write(), but leave out the quotations.
Typing:
var one = “hello world”;
document.write(one);
will produce:
hello world
in the browser.
Now, lets say you want to put two variables on the same write() line.
This is done like this:
var one = “hello”;
var two = “world”;
document.write(one + two);
You’ll get exactly the same results of hello world in the browser.
Alerts:
An alert is the little annoying box that pops up in the middle of your
screen with an ‘ok’ button in the middle and a message for you. To do
this, just type:
alert(“hello new user”);
Or if you want to have an ok and a cancel button on the alert, type:
confirm(“are you sure you want to come”);
Next we begin to get into the more advanced programming. Lets start out
with arrays and dates. An array is a piece of data that has more than
one value contained in it. While a variable called ‘one’ may only be
set to ‘1’, array_1 may be set to ‘1’, ‘2’, and ‘3’. To create an
array, you use a pre-built function of JS, new Array().
var SixMonthCalander = new Array(“jan”,”feb”,”mar”,”april”,may”,”june”);
This statement will set the array to equal the names of the first six
months. To display the array, you type the standard document.write()
function, but after the variable name you add [] with a number. The
number resembles the order you typed the values in. So, [0] would mean
“jan”, because computers start counting at zero ^^.
document.write(SixMonthCalander[0]);
This would, of course, output jan. Since this is “client side”
scripting, you can’t just take a date off your server and send it to
the viewer of the page. To grab a date from the inquiring computer’s
clock, use the get Date() function of JS. However, before grabbing the
date, you have to set a variable to become the value of the date with
new Date().
var the_date = new Date();
var the_hour = the_date.getHour();
var the_minute = the_date.getMinute();
document.write(the_hour + “:” + the_minute);
I’m sure that’s probably not making any sense to some of the newbs out
there, so I’ll do my best to explain further. In JS, periods connect
everything. Think of the_date as what JS grabbed from the computer’s
clock. Also, think of the_hour as the numerical number of the hour
contained in the date on the computer’s clock. So, even more simply,
document is the name of the current HTML document, and write is one
level lower than that. Let’s talk about Boolean statements. Boolean was
some logic-ridden theologian that thought about different values
equaling each other all day.
The if() statement and the else statement are the only two I’m going
to deal with, because they are all that really matter. This is simple
algebra, you have a variable, (call it x), so x currently equals 10,
but the user inputted this number, and you want to make sure it is ten.
if(x == 10) {
Do something
}
else {
do something else
}
Make sure you use two equals signs, when checking the value of a
variable. Here are some other ways of checking if the variable is in
the range you want it:
Equal to: x == 10;
Not equal to: x != 10;
Less than or equal to: x <= 10;
Greater than or equal to: x >= 10;
Greater than: x > 10;
Less than: x < 10;
Form handling:
Lets say you want to make a simple calculator using a form and
javascript. This is going to require understanding how the periods
work in JS. So if you didn’t understand the previous, this is going to
be more difficult. I seem to be digging myself into more and more
explaining. -.- Anyways, functions are declared with function. so this
will be the add() function that we are writing. To start a function,
use {, to end it use }.
<html>
<head>
<script language=”javascript”>
<!--
Function add() {
var total = one + two;
alert(total);
}
//-- >
</script>
</head>
<body>
<form name=”the_form”>
<input type=”text” name=”one”> <input type=”text” name=”two”>
<input type=”button” “value=”add them” onClick=”add()”>
</form>
</body>
</html>
onClick will do the selected action when you click on the button, what
a thought [there are also onBlur(), onFocus(), onMouseOver(), and
onMouseOut()]. Alert() will pop up with one of those annoying alert
boxes with an ‘ok’ button in the middle.
Loops:
Sometimes in programming you’ll have a repetitive, menial task that
you don’t want to type out yourself, so you use a loop to do it for
you. The most important of these loops is the for loop. To declare the
for loop, use this syntax:
for(var counter = 0; counter < 5; counter++) {
document.write(counter);
}
This particular loop isn’t going to do you any good at all, but we have
to take it one step at a time here. Instead of typing var somewhere in
the script, you declare the variable inside the parenthesis. So far we
have for(var variable = value;), the second set of numbers sets the
number of times you want to do the loop. For(var variable=value;
variable < value;), notice the number has to be less than for this
type of counting loop. Finally, the counter++ means each time it loops,
add one to the value of counter. A different way to express this would
be counter = counter + 1. So the above program would output 01234,
since it goes around 5 times (zero up until less than 5, aka 4).
Since the previous loop was completely useless, here’s a more practical
reason for using this type of loop:
for(var counter = 0; counter < 5; counter++) {
document.write(SixMonthCalendar[counter]);
}
This will write out the entire array for you, janfebmaraprilmayjune
without having to manually type it out. It types out the number of the
array, which is 0 for the first cycle, 1 for the second, etc. you’re
sending that value out to the browser so it shows up on the screen.
There are two other types of loops in JavaScript (as well as any other
language), the do while, and the while loop.
do{
document.write(“owned”)
something++;
}while(something < something_else);
document.write(“owned”)
while(something < something_else) {
document.write(“owned”)
something++;
}
I don’t feel like getting into these two loops because they rarely are
ever useful for anything but error catching and infinite loops. So, yes
if you want to make an infinite number of anything, you can just make a
statement that will always be met like while(var==1); or something like
that (leave out something++).
Pop-up windows:
These are becoming almost completely obsolete do to the amount of
pop-up blocking that is present in newer browsers. However, window
manipulation can be fun, and you can disable the pop-up protection
yourself if you want to play around with it.
To open a new window using JS, type window.open();. This command will
launch a blank window, set to the default size of the browser on that
computer when it’s not maximized. (say your browser window is half its
normal size when you click the maximize button, that’s the size the
default JS window will be.
To make a window that actually has something in it, you’ll need to
make a different page to fill the space, say you name that page
‘little.html’. There are several things you can mess with when opening
windows, but to just add the page in there type window.open(“little.html”).
if you want to manipulate the size of the window, you’ll have to add
some parameters to the open function: window.open(‘little.html’,’width=50,height=50’);
There are lots of parameters you can add to this window function to do
whatever you want. Toolbar, statusbar, noresize, titlebar, windowbar,
addressbar, etc.
If you want to write to the window from your default page, you can make
that window into a varible.
var mini_win = window.open();
lil_win.document.write("this is my little window");
This will create the window and write: "this is my little window" into the
small window space.