Javascript Lesson 1

1.1 What do I need to start JavaScript?

First of all it is important that you are famyliar with HTML, without any knowledge of HTML it is pointless to start learning JavaScript. The JavaScript will always be used inside a HTML document.

1.2 What's JavaScript?

JavaScript is one of the most popular languages on the web It can be used to create menus, validate forms, post the current day's headlines, provide interactive calendars, post the current day's headlines, produce background effects on a web page, and track a visitor's history on your site, among many other things.

1.3 The history of JavaScript

Netscape created JavaScript, originally called "LiveScript," it was designed to make Web pages more interactive. In the beginning the language was plagued with security problems which, for the most part, have been overcome. Netscape changed the name to JavaScript in 1995 as a result of an agreement with Sun, the developer of Java.

1.4 Is JavaScript the same as Java?

NO! Java is a compiled language, i.e. put into machine language before it gets to your computer. The coding in JavaScript is somewhat similar to Java but it is much less restrictive. For example, JavaScript allows you to assign any type of value to your variables. Java does not. Java is a language that experienced programmers use to develop applications. JavaScript can only be used on the web.

1.5 About Internet Explorer

Microsoft Internet Explorer browsers have what is called jScript. The results from a browser that has jScript is basically the same as one that has JavaScript. The documentation that Microsoft provides makes it look a little different. Call it what you want to, the bottom line is that JavaScript works on the Internet Explorer browsers, but you need to keep in mind that your scripts may work different, or not at all in other browsers than your own.

1.6 Your first script

First of all we will start with a rather useless script, but it will be nice to show you something JavaScript can do.

<html>
<head>
<title>My first Script</title>
</head>
<body>
<center><h3>My first Script</h3></center>
<script language="JavaScript">
var today = new Date()
document.write(today)
</script>
</body>
</html>

The HTML code shouldn't be any problem, but the code between the <script> tags will be explained soon.

1.7 The <script> tags

The HTML tags that are used to identify JavaScript are <script language="JavaScript"> and </script>. All text between these two tags is interpreted as JavaScript code by the browser. Most browsers in use today have some version of JavaScript built in. However, there are still a few in use that don't understand JavaScript. These browsers will ignore the <script> tag but will display the text between the tags. To prevent this, the JavaScript code is enclosed by a combination of the HTML comment tag

<!--       -->

and the double slash ( //) that is used in JavaScript to identify a comment. The result looks like this:

<!--    //-->

Therefore the complete template for JavaScript is:

<script language="JavaScript"> 
<!-- hide from old browsers

   (The JavaScript code)

//--> 
</script>

Now we now all this, we should add those two little lines to our first script code.


<html> 
<head> 
<title> My first Script</title> 
</head> 
<body> 
<center> <h3> My first Script</h3> </center> 
<script language="JavaScript"> 
<!--
var today = new Date()
document.write(today)
//--> 
</script> 
</body> 
</html>

1.8 A little about the JavaScript code in our first Script

Look closer at the completed version or our first Script. You should now be able to identify the <script> tags and the text that is used to hide our code from the older browsers. The remaining two lines between the <script> tags is JavaScript code. The first line initializes a date object. Date objects will be discussed in future lessons. The other line of our code is a method of the document object which will also be discussed later. For now, all you need to know about it, is that you can use this method to write information to the document contained in your browser.

1.9 Where to put Scripts?

We already know that we can put scripts between the <body> tags because that is where we put our first script. You can also put JavaScript in the Head section of your HTML code, but here we will use a lot of functions in the JavaScript code. A function is something that we will learn later on. As you learn more about JavaScript, you will understand when you should put the script code in the Head section and when the script code should go in the Body of the document. You will also learn that JavaScript can also be placed inside other tags, such as the <body> tag.

1.10 Document.write()

The document.write() method is one that you will be using a lot. For now, don't worry too much about what a method is, we will explain that and why you see the period between the words document and write later in this tutorial. The syntax for the document.write() method is as follows:

document.write("string")

A string is nothing more than a series of characters. You put the characters in quote marks, except when the string is something that is returned by another method (like Date), which was the case in our first script, or is a variable which you will learn about later in this tutorial.
So if you wanted to write "Welcome to my personal web page" using document.write(), this is how you should do it:

document.write("Welcome to my personal web page")

You can include HTML tags in this string if you want. This way you can underline your welcome by doing the following. I will add a second and a third line too.

document.write("<u>Welcome to my Web Page</u>")
document.write("<br>Have a nice stay!")
document.write("<br>Hope you will be back soon!")

Now suppose you want to use document.write() to insert an image in the document. Normally we would use the <img> tag to do this. The tag would look something like this if you were inserting a picture of Saturn named saturn.jpg.

<img src="saturn.jpg">

We will need to put quotes around this when we use it with the document.write() method. This will mean that we will have quotes within quotes. This will not work but there is a solution. You alternately use single quotes and double quotes in JavaScript if you need to put quotes within quotes. Here is how you should do your image:

<script language="JavaScript">
<!-- hide from old browsers
 document.write("<img src='saturn.jpg'>")
//-->
</script>

Now, the use of this document.write() method looks rather difficult and pointless if you can just write it all in the document with HTML. You will learn to know the importance of this method later in this tutorial, even if you already saw a little example with the Date method in your first JavaScript.

1.11 What you need to know to move on to the next lesson.

Look at someone's HTML code and be able to tell where the JavaScript starts and ends.
Know how to hide your scripts from older browsers.
Know that you can use the document.write() method to write to the document as it is loading.
Understand that the results you get from JavaScript may be different for different browsers and in fact may not work in some cases.

JavaScript