JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,150 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,692 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Beginning JavaScript

Beginning JavaScript, How to integrate simple JS into HTML

Options

kewlkreator
Group Icon

27 Jun, 2009 - 01:34 PM

Post #1

What is JS?
JavaScript was at first used to embed applets into webpages. Hence the name "Java"Script. Learning JS is really easy, you just need a little experience in HTML.
Go!
To start, we need our HTML document:

CODE

<html>
   <head>
      <title>JS tester</title>
   </head>
   <body>
   </body>
</html>

This is the basic form that we'll use. Now, JS code goes between the <script> tags. The script tags can go either between the head tags or the body. For example, JS in the head elements:

CODE

<html>
   <head>
      <title>JS tester</title>
      <script>
//Code
      </script>
   </head>
   <body>
   </body>
</html>

See? Now, notice my //Code? The double slashes shows that the string after it is a comment. The web browser that views the page won't process the comment.
Basics
There are many statements that execute things in the browser window. However, there are a few that I want to cover here.
The first is the document.write("String"); statement. That writes the "String" string to the page. Notice that after that statement, I placed a semi-colon. That signals to the web browser to execute the next line of code.
The next is the window.alert("String"); code. This sends the string to the browser and it pops up as a window alert with the exclamation point in the left part.
Lets try this:

CODE

<html>
   <head>
      <title>JS tester</title>
   </head>
   <body>
      <script>
document.write("My first actual JS statement!");
      </script>
   </body>
</html>

This should write "My first actual JS statement!" to the page.
Now YOU try the window.alert statement. Did it work?
Functions
Functions are containers for JS code. An example:

CODE

function new_function() {
//Code
}

Functions can be called to be executed when you use executors like onClick or onLoad. The executors are placed inside HTML elements like so:

CODE

<html>
   <head>
      <title>JS tester</title>
   </head>
   <body onLoad="greetings()">
      <script>
function greetings() {
   window.alert("Greetings!");
}
      </script>
   </body>
</html>

When the page loads, a pop up box will show saying "Greetings!". See the executor in the body element?
Variables
Variables are... variable. They can be anything from a object to a string. A variable is declared like so:

CODE

var new_variable = "New variable string!";

So now, lets use what we've learned all together:

CODE

<html>
   <head>
      <title>JS tester</title>
   </head>
   <body onLoad="say_name()">
      <script>
var my_name = "Kewl";
function say_name() {
window.alert("My name is " + my_name + ".");
}
//Look at how I used the window.alert statement. First I said My name is, then I used + to use my variable.
      </script>
   </body>
</html>

This should say "My name is Kewl."
Now that you've ran this, try building a program that says your name and writes your name to the page. Have fun!
Resources
http://www.w3schools.com/JS/default.asp