Ok well i've been doing javascript for around 2 months. I love it and i'm pretty good at it so i decided to write this tutorial to share my knodladge.
HTML is recommended in this tutorial but is not nercersary. As long as you know basics about tables <Br>'s and the basic tags you'll be fine. In this tutorial you will learn.
. How to make your own javascripts
. Variables
. JS Operators
. How to use the if statement
. The else and else if statement
. All about javascript loops
. Functions and how there used.
. Arrays and how they work
This will teach you everything you need to know to make nice simple and useful scripts. It doesn't cover everything but it covers most need to know things about javascript.
Learn javascriptJavascript is used alot with HTML. It's also very easy to combine with HTML. The downsides of it our it's hard to debug. It's helpful with forms buttons and many things. Once you know javascript you can move on to do over coding languages and understand them better. So you start a javascript with the <script> tags. Normally in an HTML webpage javascripts are put within the <Head></head> tags but can vary. As long as you have the <script> </script> tags round it it's fine.
VariablesVariables are used alot in javascript. A variable is basicly something that can hold a value. Here's an example.
<script>
var one = 1
var two = 2
var sum = one + two
document.write(sum)
</script>
If you put that into a webpage the number 3 will appear. Basically we start with the script tags. Then we decalre the variables. To declare a variable you put var name = the name can be anything. After the = is what the variable is. So in our example var one is the number 1 and var two is the number 2. Then we say var sum is one + two. Which will add the variables together. Then to write text in javascript you must always use document.write(stuff here). Thats a pretty simple script but there are a few things you must remember about variables.
Normally i would use quotation marks if it was text e.g
var name = 'jack'
It's the same with document.write("Hello") if your writing text directly use quotation marks. When adding a variable or using it you don't have to use quotation marks. Here's another example.
<script>
var name = 'jack'
var age = 17
document.write("Hello my name is" + name + ",i am" + age + "years old")
</script>
That one prints out:
Hello my name is jack, i am 17 years old.
The document.write may look complicated. Just note you can not + variables within quotations. Thats why i did it in seperate parts. e.g
document.write("Hello my name is" + name)
Notice how + name is not within the quotation marks.
That concludes variables. They are used alot so you will get used to them very quickly. You may want to read that section over to get a better under standing of variables.
Javascript OperatorsBasically javascript operaters are.. well here this will make sense.
+ = addition
- [= subtraction
* = multiply
/ = division
% = Modulus (division remainder)
++ = Increment
-- = Decrement
== = is equal to
=== = is equal to (checks for both value and type)
!= = is not equal too
> = greater than
< = less than
>= = is greater than or equal to
<= = is less than or equal too
&& = and
|| = or
! = not
Read through those we will use them alot.
The if statementThe if statement is proboly the most important part in javascript. It's used to tell it what to do. Here's an example it proboly wont make sense at the present but i will explain what it's doing.
<script>
var one = 1
var two = 2
if(one + two == 3){
alert("The number is equal too 3!")
}
</script>
Basically it's doing to variables then we move onto the if statement. Basically an if statment is done. if(condition){ in the condition bit you say if the condition. e.g in mine the condition is if the variable one (which is 1) and variable two (which is 2). So if the two variables added together are equal to 3 then it will do an alert saying. The number is equal to 3. Basically alert(" ") pops up an alert box on the page. Here's another example.
<script>
var name = 'jack'
if(name == 'jack')
document.write(" The name is jack ")
}
</script>
Basically in this one if the variable name is equal to jack then it writes the name is jack. But if the name isn't equal to jack then it wont carry on and do the statement. So it wont write anything. Please note when you use the ifstatement it's done like. if(condition){ note that on the end it has { thats basically saying if the condition is true then do the following. You must close it like } after the if statement. Look to my examples. So now we're moving on to the else and else if statement that can be used with the if statement.
The else and else if statementThe else statement goes with the if. Basically here's a simple example.
Again notice how when i'm opening the { with the if statement and the if i am also closing them }. Make sure you do this otherwise you will get a syntax error and your script will not work.
So basically the else statement is easy to understand it's saying if the condition of the if statement is not true then it will peform the else statement. So in the example if var one + var two is equal to 3 then it will write the number is equal to 3. But if the number isn't equal to 3 it will write the number is not equal to 3. But in this example the number is equal to 3 so it will write the number is equal to 3.
So thats the else statement. Now i'll explain the if else if else statement.
Here's an example on the if else if else statement it's pretty much self explantionary and isn't used much. But it will be good to pay attention to do anyway.
<script>
var one = 1
var two = 2
var three = 3
if(one + two == 3){
document.write("The number is equal to 3!")
}
else if(one + three == 4){
document.write("The number is equal to 4!")
}
</script>
So it's pretty much self explationary. So we'll move on.
Javascript loopsAlot when you write a javascript (or other codes) you want the same block of code to run over and over again in a row. Instead of doing the same line again and again in the script we can use loops. There's are two different types of loops in javascript. The for loop which loops through code a specified number of times and the while loop which loops through code when a condition is true. So first we'll disscuss the for loop.
The javascript for loop
<script>
var n = 0
for (n=0;n<=10;n++)
{
document.write(i)
document.write("<br />")
}
</script>
Basically this loop is saying n =0 and it the number will keep going up as long as n is equal or less than 10. In the for loop parameters you notice n++ this is just making it go up 1 every time. The script will output:
1
2
3
etc
Up to 10. So thats the javascript for loop. Now we'll move on to the javascript while loop.
The javascript while loopThe while loop is used when you want the loop to execute and continue executing while the specified condition is true.
<script>
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
</script>
Result:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
etc..
It's fairly like the for loop, the while loop isn't used as much as the for but still good to study up on.
So thats the end of the chapter on loops, now we move onto functions that are used
alot.
Javascript FunctionsJavascript functions can be called from anywhere in a script to execute a block of code.Javascript functions are normally put inside the <head> tags of an HTML page. Here's a basic example to make it clearer.
Ok dont look at the function at first. Go down and look side the <body> tags, notice how i have a button and in red i have shown that the button has an onclick of alert. This is 1 way to call functions. Give things an onclick. When calling a function have the function name and () next to it. Now look at the top of the script. It has function aler(){ which says whats going to be done inside the function and it simpley alerts "This is a function". So there fairly simple to understand. Remember when you use a function do function NAME{ make sure you have a { and make sure you close it after the function has finished }.
So thats the basics of functions. Now last of all we will move onto working with javascript arrays.
Javascript ArraysJavascript arrays are used to store a set of values in a single variable name. They can be easily set up and easily accessed.
Here's a basic example of an array.
var quote = new Array()
quote[0] = "Hello there"
quote[1] = "From"
quote[2] = "Zelnen"
document.write(quote[0] + quote[1] + quote[2])
That will give me "Hello there From Zelnen". So basically you start an array by going
var NAME = new Array()
NAME can be anything, you then put values into the array like so. (Remember 0 is the first number not 1).
NAME[0] = "whatever"
NAME[1] = "whatever"
Then as i showed in the array example you can easily display the single values of the array. There are lots of things you can do with arrays and lots of ways you can do them. I've just shown you the basics.
So that somes up my Beginners guide to javascript. Hope you enjoyed it. Issue #2 will come soon.
Thanks for reading
Last Edit: Jun 25, 2006 3:45:44 GMT by Zelnen
