Post by Gamoc on Jan 5, 2007 17:03:08 GMT -5
I noticed that there were no Basic JS tutorials so I am going to get one of the ones I made for a different forum and post it here.
Okay, this is my basic JS tutorial.
Before you start learning javascript, you need to have a basic understanding of HTML and CSS.
You may not redistribute this script without Pikablu's permission. ©
--------------------------------------------------------------------
Okay, first, you have to call the script before you can do anything. You do that between using the <script> and </script> tags.
When using Javascript to call a script you would put it as
I would like to point out that Javascript is a case sensitive language so document.getelementsbytagname is not the same as document.getElementsByTagName.
So now you know how to call the script, next, you would do something like this.
Well, I bet you're wondering what the <!-- and the --> mean. Well, what these do is keep your javascript script from being shown to older browsers that do not support javascript.
Okay, now let us go on. We shall talk about comments now. Well, there are two types of comments. A single line and a multi-line.
Now, the browser completely ignores a comment. A comment has no significant value to a browser. Now I bet you're asking "why have comments?". Well, this is simply for humans to be able to read a javascript. Most people don't know what an if else statement is, so people use comments for this. This isn't just for people who don't know how to javascript, this is also for the scripter him/herself. I say this because something that could seem as clear as crystal one day can seem as clear as mud two weeks later.
This is going to be an example of a single line comment
Single line comments are comments that are to be on only one line such as above, this one, will not work. In single line comments, two double slashes are used(//). Anything past that is ignored by the browser.
This will cause an error in the script
Here is the more recommended kind of comment. Not only is it a multi-line comment, it can also be used as a single line comment. Most scripters like to use it because it looks better. A multi-line comment is used like so(/* */)
That is an example of a multi-line comment. The good thing about multi-line comments is that they can go over more than one line, such as so.
Now, lets put all of what we've learned together so far.
If that didn't really make since for what you have learned, go back and reread it.
Now we are going into a basic document. document.write() will write what you have in between the parentheses. Such as so.
This will produce this result
Hi everyone
Now, notice that in the parentheses, there are quotes, if you do not have these double quotes(single quotes work as well) then the browser shows an error. You cannot use this without the double or single quotes. Now, say you want to put quotes using double quotes in there with using double quotes in that, you can either use single quotes instead, or use backslashes before each double quote, such as so.
This will produce this result.
hello "world"
Now look at the semicolon(. That semicolon is not needed unless you are going to write two objects, functions, arrays, etc... on the same line. Most scripters write it to make their code look good. Here is an example.
There is an example of the use of a semicolor. This would produce this result.
hello "world"How are you?
Now, you wonder why there is no space in between "world" and how. Well, that is the scripts fault. In order to change that, you either have to put a space after "world" or before How in the next statement, here are the two examples.
or
Using one of these will produce
hello "world" How are you?
You can do this with variables, functions, objects, etc.
Now, we will go into variables of javascript. Variables are like storage areas. They support data that can be used multiple times in many different ways. Let's let you look at what a line of script with variable can do.
This will produce the following result
hello world
Okay, here is where I tell you what it does. The var object stands for variable, the word after that can be anything, instead of hi, you can have x, or y, or anything you like. What is after the equal sign and in between the parentheses is what will be displayed when you used the variable. Now, if you want to use something along with the variable, you would do this.
This will produce this.
okay, hi
You cannot have double quotes around the variable name or else it will not produce the variable.
Note: There are certain words that cannot be used for a variable, these are because they are already used for objects, functions, etc.
Okay, I think that is enough about variables for now. Lets get into arrays.
Arrays are like variable, except that they save room. Here is a line that you would have to add to a line to make an array.
note, this is just an example
Now don't think that that is your limit, you can change array1 to anything that you wish to make it. You can change the things in quotes, take away quotes, and you can even add quotes to it.
Now we will try to make a code go through
Okay, this will produce this result
one
Okay, you will call the the array "one" from the array1 variable. Let me break this down for you. var array1=newArray("one","two",'three","four");
the blue part, which says newArray, tells that the stuff in parentheses will be variables for an array. The green part tells you what the arrays are going to be.
Now, when calling the array to work for you. In the document.write("array1[0]")
Now, the reason that it only writes the "one" part of the array is because all that you have stated is the first one to be displayed, 0.(Why it is 0 and not 1, I don't know)
Okay, I think that I have said a little to much about arrays, now let us go into alerts.
Well, an alert is a little pop up that comes up whenever a page loads. You can change this, but you'll have to get that in another tutorial. Let me give you an example of an alert code.
This will come up with this.
Example
Easy, isn't it.
Okay, I think that is time for if...else statements.
There are so many things that you can do with if...else statements. Declare if something is true and if it isn't, declare something else.
Here is an example that I will break down for you.
Okay, the if(time<12);{ document.write("It is before noon"); statement says that if time is before 12:00, then it will write "It is before noon", with else if(time=12);{document.write("It is noon"); means that if the time is 12:00, then it will write "it is noon" on the page. the else(time>12);{doument.write("It is afternoon"); write "It is afternoon" on the page if it is after 12:00
Okay, I know that that was long, but I wanted to make a basic javascript tutorial and post it here. One made by me.
If you read all of this, thank you for taking time to read it and I hope that it helped you.
[align=center]This is not copyright free[/align]
Pikablu
Okay, this is my basic JS tutorial.
Before you start learning javascript, you need to have a basic understanding of HTML and CSS.
You may not redistribute this script without Pikablu's permission. ©
--------------------------------------------------------------------
Okay, first, you have to call the script before you can do anything. You do that between using the <script> and </script> tags.
When using Javascript to call a script you would put it as
<script type="text/javasctipt">
I would like to point out that Javascript is a case sensitive language so document.getelementsbytagname is not the same as document.getElementsByTagName.
So now you know how to call the script, next, you would do something like this.
<script type="text/javascript">
<!--
some script...
-->
</script>
Well, I bet you're wondering what the <!-- and the --> mean. Well, what these do is keep your javascript script from being shown to older browsers that do not support javascript.
Okay, now let us go on. We shall talk about comments now. Well, there are two types of comments. A single line and a multi-line.
Now, the browser completely ignores a comment. A comment has no significant value to a browser. Now I bet you're asking "why have comments?". Well, this is simply for humans to be able to read a javascript. Most people don't know what an if else statement is, so people use comments for this. This isn't just for people who don't know how to javascript, this is also for the scripter him/herself. I say this because something that could seem as clear as crystal one day can seem as clear as mud two weeks later.
This is going to be an example of a single line comment
//some comment about a script
Single line comments are comments that are to be on only one line such as above, this one, will not work. In single line comments, two double slashes are used(//). Anything past that is ignored by the browser.
//some comment
about a script
This will cause an error in the script
Here is the more recommended kind of comment. Not only is it a multi-line comment, it can also be used as a single line comment. Most scripters like to use it because it looks better. A multi-line comment is used like so(/* */)
/*some comment about a code*/
That is an example of a multi-line comment. The good thing about multi-line comments is that they can go over more than one line, such as so.
/* this is
some comment
about a
code*/
Now, lets put all of what we've learned together so far.
<script type="text/javascript">
<!--
some script
//this is what this does
some more script
/*This is what this does*/
some more script
/*This is what
this part of the script does*/
--></script>
If that didn't really make since for what you have learned, go back and reread it.
Now we are going into a basic document. document.write() will write what you have in between the parentheses. Such as so.
<script type="text/javascript">
<!--
document.write("Hi everyone");
-->
</script>
This will produce this result
Hi everyone
Now, notice that in the parentheses, there are quotes, if you do not have these double quotes(single quotes work as well) then the browser shows an error. You cannot use this without the double or single quotes. Now, say you want to put quotes using double quotes in there with using double quotes in that, you can either use single quotes instead, or use backslashes before each double quote, such as so.
<script type="text/javascript">
<!--
document.write("hello \"world\"");
-->
</script>
This will produce this result.
hello "world"
Now look at the semicolon(. That semicolon is not needed unless you are going to write two objects, functions, arrays, etc... on the same line. Most scripters write it to make their code look good. Here is an example.
<script type="text/javascript">
<!--
document.write("hello \"world\""); document.write("How are you?")
-->
</script>
There is an example of the use of a semicolor. This would produce this result.
hello "world"How are you?
Now, you wonder why there is no space in between "world" and how. Well, that is the scripts fault. In order to change that, you either have to put a space after "world" or before How in the next statement, here are the two examples.
<script type="text/javascript">
<!--
document.write("hello \"world\" "); document.write("How are you?")
-->
</script>
or
<script type="text/javascript">
<!--
document.write("hello \"world\""); document.write(" How are you?")
-->
</script>
Using one of these will produce
hello "world" How are you?
You can do this with variables, functions, objects, etc.
Now, we will go into variables of javascript. Variables are like storage areas. They support data that can be used multiple times in many different ways. Let's let you look at what a line of script with variable can do.
<script type="text/javascript">
<!--
var hi="hello world"
document.write(hi);
-->
</script>
This will produce the following result
hello world
Okay, here is where I tell you what it does. The var object stands for variable, the word after that can be anything, instead of hi, you can have x, or y, or anything you like. What is after the equal sign and in between the parentheses is what will be displayed when you used the variable. Now, if you want to use something along with the variable, you would do this.
<script type="text/javascript">
<!--
var hi="hi"; var fifth="5"
document.write("okay, " + hi)
-->
</script>
This will produce this.
okay, hi
You cannot have double quotes around the variable name or else it will not produce the variable.
Note: There are certain words that cannot be used for a variable, these are because they are already used for objects, functions, etc.
Okay, I think that is enough about variables for now. Lets get into arrays.
Arrays are like variable, except that they save room. Here is a line that you would have to add to a line to make an array.
var array1=newArray("one","two","three","four");
note, this is just an example
Now don't think that that is your limit, you can change array1 to anything that you wish to make it. You can change the things in quotes, take away quotes, and you can even add quotes to it.
Now we will try to make a code go through
<script type="text/javascript">
<!--
var array1=newArray("one","two","three","four");
document.write("array1[0]")
-->
</script>
Okay, this will produce this result
one
Okay, you will call the the array "one" from the array1 variable. Let me break this down for you. var array1=newArray("one","two",'three","four");
the blue part, which says newArray, tells that the stuff in parentheses will be variables for an array. The green part tells you what the arrays are going to be.
Now, when calling the array to work for you. In the document.write("array1[0]")
Now, the reason that it only writes the "one" part of the array is because all that you have stated is the first one to be displayed, 0.(Why it is 0 and not 1, I don't know)
Okay, I think that I have said a little to much about arrays, now let us go into alerts.
Well, an alert is a little pop up that comes up whenever a page loads. You can change this, but you'll have to get that in another tutorial. Let me give you an example of an alert code.
<script type="text/javascript">
<!--
var hello="Hello, how are you";
alert(hello);
-->
</script>
This will come up with this.
Example
Easy, isn't it.
Okay, I think that is time for if...else statements.
There are so many things that you can do with if...else statements. Declare if something is true and if it isn't, declare something else.
Here is an example that I will break down for you.
<script type="text/javascript">
<!--
/*If time is before 12, then display that it is not noon yet.
If time is 12, then it is noon
if time is after 12, then it is after noon*/
var date=new date();
var time=date.getHours();
if(time<12);
{
document.write("It is before noon");
}
else if(time=12);
{
document.write("It is noon");
}
else(time>12);
{
document.write("It is afternoon");
}
-->
</script>
Okay, the if(time<12);{ document.write("It is before noon"); statement says that if time is before 12:00, then it will write "It is before noon", with else if(time=12);{document.write("It is noon"); means that if the time is 12:00, then it will write "it is noon" on the page. the else(time>12);{doument.write("It is afternoon"); write "It is afternoon" on the page if it is after 12:00
Okay, I know that that was long, but I wanted to make a basic javascript tutorial and post it here. One made by me.
If you read all of this, thank you for taking time to read it and I hope that it helped you.
[align=center]This is not copyright free[/align]
Pikablu