[Simple JavaScript Tutorial]

[Simple JavaScript Tutorial] - Computers

Search Tech-Forums - link takes you to our Forum's search page.

Note: The following is only a text archive!

To view the actual forum discussion, please visit our website at http://www.tech-forums.net

Pages:1

Simple JavaScript Tutorial
(Click here to view the original thread with full colors/images)

Posted by: OutThere

JAVA TUTORIAL

Java... What can I say about Java? well really, this will be a JavaScript tutorial, but

there really isn't much differnce.

First, let me explain to you what java is and why I prefer not to use it.

Java was created to teach how to use C++ to students, and for that purpose, it's a good

language. It is simple, easy to learn and translates well when you learn other programming

languages. Java was never ment to be an actual programming language on its own, but, it

does have some usefull applications in webdesign.

the first thing to learn in any programming language is how to begin the document or begin

the code. JavaScript will, in most cases, start like this:

<script type="text/javascript">

This will begin your script. A script works just like any other program, it has variables,

input and output. Scripts are used to control your website. This can be done in many

ways, but before we learn how to do that, lets learn a very basic function.

We are going to do something that you will learn at the begining of EVERY programming

tutorial or lesson. It is called "HELLO WORLD" and it is extremely simple.

First step in this is to open up a notepad, because this will be a script that will be

saved as a html document. I am going to assume that you already have a solid understanding

of HTML throughout this tutorial, so if you haven't already read my html tutorial, I

suggest you do.

After opening up notepad, begin a HTML document, include the body tag. Then type this into

the body.

<script type="text/javascript">

document.write("hello world");

</script>

Save this as a HTML file and open it.

what this should produce is the words 'hello world' on a blank background in internet

explorer. Congratulations, you have now created your first JavaScript.

In this example, the variable was what was going to be writen on the screen, you entered

the input when you made the code (input=hello world) and the output equaled the input. I

know, it seems so complicated, well, lets separate it up a bit.

The way we are going to separate it up is we are going to declare a variable. A variable

is something within a program that can change. a variable is declared like this:

var table1

That is the simple syntax for a variable. Now, in order to use a variable, you also must

create a function. The syntax for a function looks like this:

Function this_function()
{
Incert function task here
}

This would produce a function. A variable can either be gathered by you presetting the

variable, or by setting the variable information to come from somewhere else. This is how

you preset a variable:

Var table1

table1 = 'Hello World'

Now, lets try the 'hello world' again, this time using a variable. Yours should look like

this.

<script type="text/javascript">

Var hello

hello='hello world'

document.write(hello);

</script>

You will notice that in this script I didn't us quotation marks around hello in the

brackets. You only need the brackets if what you are typing is litterally what you want to

by displayed on the screen. a variable takes the place of the actual object you want to be

placed there. you can have more than one variable displayed as well. We could separate

hello and world into two seperate variables and have then put together when the script is

activated. That would look something like this.

<script type="text/javascript">

var good
var day

good='hello'
day='world'

document.write(good + day);

</script>

This has separated the two variables and put them together. This is usefull when you have

to gather a mass amount of information and then assemble it later on (you will learn the

applications later on in your learning of Javascript.)

now lets learn how to do the exact same thing, but this time we are going to set it up so

that it happens when you push a button. ok, for this you will have to know a little bit

about creating forms in html, that tutorial isn't untill later, so you will get a sneak

peak now. This is how your form is going to look like:

<form method="POST">

<input type="Button" onClick="Myfunction()">

</form>

Now that you have created your form, this time we are going to put our script in the head

of the html document. Your script and form put together should look like this:

<html>
<head>
<title> My First Form Script </title>

<script type="text/javascript">

function Myfunction()

{

document.write("Hello World!")

}

</script>

</head>
<body>

<form method="POST">

<input type="Button" onClick="Myfunction()">

</form>

</body>
</html>

Now lets try using a promt box. We can use a promt box to gather information. This is very

simple to apply, the syntex for this is incredibly simple, it looks like this:

Prompt("Enter name","enter area code")

Isn't that simple?

Now lets put it to use. Lets use a prompt box to gather information and print it onto the

screen.

It should look something like this.

<html>
<head>
<title> Test </title>

<script type="text/javascript">

function myfun()
{
var name=prompt("please enter your name", "");
var phone=prompt("please enter your phone number","")
var addr=prompt("please enter your street address","")

document.write("<b>"+name+"<br>")
document.write(phone+"<br>")
document.write(addr+"</b>")
}

</script>

</head>
<body onload="myfun()">
</body>
</html>

You will also notice that I added html tags into my document.write code. This works the

same way as the html code would if you did it in the notepad. This should display this

information in paragraph form.

Now try making a couple of scripts, you can also use a code called alert(""). This will

create an alert box, just like the prompt bot. Play a little bit with it.

You can get more tutorials like this one on [url]www.outtheregraphics.com[/url]

Posted by: darkninja

Nice tutorial, but remember that "Java" and "JavaScript" are two different languages as you seem to use them interchangeably