Contents

Embedding and including

Let's first see a simple example:
<html>
<head>
<title>This is a JavaScript example</title>
<script language="JavaScript">
<!--
document.write("Hello World!");
//-->
</script>
</head>
<body> Hi, man! </body>
</html>
Usually, JavaScript code starts with the tag <script language="JavaScript"> and ends with the tag </script>. The code placed between <head> and </head>. Sometimes, people embed the code in the <body> tags:
<html>
<head></head>
<body>
<script>
.....// The code embedded in the <body> tags.
</script>
</body>
</html>
Why do we place JavaScript code inside comment fields <!-- and //-->? It's for ensuring that the Script is not displayed by old browsers that do not support JavaScript. This is optional, but considered good practice. The LANGUAGE attribute also is optional, but recommended. You may specify a particular version of JavaScript:
<script language="JavaScript1.2">
You can use another attribute SRC to include an external file containing JavaScript code:
<script language="JavaScript" src="hello.js"></script>
For example, shown below is the code of the external file hello.js:
document.write("Hello World!")
The external file is simply a text file containing JavaScript code with the file name extension ".js". Note:
  1. Including an external file only functions reliably across platforms in the version 4 browsers.
  2. The code can't include tags <script language...> and </script>, or you will get an error message.

write and writeln

In order to output text in JavaScript you must use write() or writeln(). Here's an example:
<HTML>
<HEAD>
<TITLE> Welcome to my site</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
document.write("Welcome to my site!");
// -->
</SCRIPT>
</BODY>
</HTML>
Note: the document object write is in lowercase as JavaScript is case sensitive. The difference between write andwriteln is: write just outputs a text, writeln outputs the text and a line break.

Document object

The document object is one of the most important objects of JavaScript. Shown below is a very simple JavaScript code:
document.write("Hi there.")
In this code, document is the object. write is the method of this object. Let's have a look at some of the other methods that the document object possesses.

lastModified



how to write javascript

If you have ever used CSS before, you will find the whole part about including JavaScript will be a lot simpler to grasp. Here are Tizag's three important steps you should always follow when creating or using someone else's JavaScript code:
  1. Use the script tag to tell the browser you are using JavaScript.
  2. Write or download some JavaScript
  3. Test the script!
There are so many different things that can go wrong with a script, be it human error, browser compatibility issues, or operating system differences. So, when using JavaScript, be sure that you test your script out on a wide variety of systems and most importantly, on different web browsers.

your first javascript script

To follow the classic examples of many programming tutorials, let's use JavaScript to print out "Hello World" to the browser. I know this isn't very interesting, but it will be a good way to explain all the overhead required to do something in JavaScript.

HTML & JavaScript Code:

<html>
<body>
<script type="text/JavaScript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>

Display:

Hello World!
Our first step was to tell the browser we were using a script with the <script> tag. Next we set the type of script equal to "text/JavaScript". You may notice that doing this is similar to the way you specify CSS, which is "text/css".
Next, we added an optional HTML comment that surrounds our JavaScript code. If a browser does not support JavaScript, it will not display our code in plain text to the user! The comment was ended with a "//-->" because "//" signifies a comment in JavaScript. We add that to prevent a browser from reading the end of the HTML comment in as a piece of JavaScript code.

javascript document.write

The final step of our script was to use a function called document.write, which writes a string into our HTML document. document.write can be used to write text, HTML, or a little of both. We passed the famous string of text to the function to spell out "Hello World!" which it printed to the screen.
Do not worry if you don't completely understand how document.write works, as we will be discussing functions in a later lesson.

syntax

Looking at our JavaScript code above, notice that there is no semicolon at the end of the statement "document.write(Hello World!)". Why? JavaScript does not require that you use semicolons to signify the end of each statement.
If you are an experienced programmer and prefer to use semicolons, feel free to do so. JavaScript will not malfunction from ending semicolons. The only time it is necessary to use a semicolon is when you choose to smash two statements onto one line(i.e. two document.write statements on one line).




Javascript TUTORIAL for beginners and programmers


This tutorial by ReferenceDesigner.com is primarily intended for beginners who understand HTML and basic webpage designs and who want to enhance the "interactive features" of webpage using Javascript. The tutorial can also be used by programmers and experts as reference material. 

If you are a mathematical kind of person and want jump coding, skip this introduction and go directly to the next page . Otherwise go ahead and read on. 

Pre Requisite


If you are not accustomed to HTML, we suggest that you take a quick beginnners HTML Tutorial . It does not take much time. 

Practice programming as you learn


One of the key characteristics of this tutorial is that, it will allow you to make changes in the code online, while you read. To understand what we mean, take a look at the two window panes below. The left side window pane has the javascript code and the right side window pane shows the web page that will be rendered by the code. For now, just change the Hello World inside the quotes ( on left window pane) to something else, like, "learning javascript is fun at referencedesigner.com" and then, click on the button that says "Edit Text and Click Here". Do not worry about understanding the code for now. We will cover it in the next page onwards. 



INTRODUCTION


Javascript is an easy-to-use programming language that can be embedded within your web pages. Assume that you want to create a web page that calculates and displays the Body Mass Index (BMI) for a person of given height and weight. A simple HTML will not be able to do that. Javascript will come handy in such situation. Javascript can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more. 

What is JavaScript? 

* JavaScript adds interactivity to HTML pages 
* JavaScript is a lightweight scripting programming language 
* A JavaScript is usually embedded directly into HTML pages 
* JavaScript is an interpreted language. The scripts execute without preliminary compilation. 
* No License is required to use Javascript 

Drifference between Java and Javascript 

Java and Javascript have almost nothing in common except for the name. Java was developed by Sun Microsystems.Javascript was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996. Java is a powerful and much more complex programming language - in the same category as C and C++. If you are interested in Java tutorial, you may like to check it here . 

Java is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java has been generating a lot of excitment because of its unique ability to run the same program on IBM, Mac, and Unix computers. Java is not considered an easy-to-use language for non-programmers. 






Theory and Drop Down List URL Jump Box

Basic JavaScript Theory


Just a note, my new tutorials on JavaScript will be found at HTML+2 - a web site that encourages people to use HTML, CSS, and JavaScript together.

JavaScript won't work in *all* web browsers, although it will work in most. It's a good idea not to make a web page dependent on JavaScript.
There are three important basic concepts you *must* understand to make any sense of JavaScript: objects,events, and functions.
Let's run through a simple explanation, and then get on to a real world example.
Imagine you have a pencil (object) and you wish to sharpen it (function). You place the pencil in the sharpener (event), and wham, the sharpener performs the function of sharpening it.

<pencilsharpener OnPencilEntry="SharpenPencil()">

Of course, pencilsharpener doesn't exist in JavaScript, nor does the event OnPencilEntry or the function SharpenPencil. But programming in JavaScript is just as simple as following these basic concepts.
Lots of things are objects: forms, buttons, lists, windows, documents, etc.
There are also plenty of events: OnClick, OnChange, OnMouseOver, etc.
So let's stop with the theory and get to work.