JavaScript Tutorial Basics

What is JavaScript?
First and foremost, JavaScript is NOT HTML. JavaScript is a scripting language used to manipulate certain aspects of a web page. This can include writing to it, changing form fields, or just graphical effects like positioning and background color changes. JavaScript on a WebTV does not work the same way as it does on a computer browser. WebTV uses a script language called JellyScript, but I will refer to it as JavaScript for simplification purposes.

How do I start a script?

JavaScript may not be HTML, but since it's used on web pages, you use an HTML tag to start and end a script:

<<>script<>>
<<>/script<>>

Your script will go between the <<>script<>> and <<>/script<>> tags. The most basic syntax to perfom in JavaScript is document.write(). Here is an example:

<<>script<>>
document.write("<<>body bgcolor='black' text='white'<>>Hello World!<<>/body<>>");
<<>/script<>>

This will write the code between the quotes (" ") onto a new page. Here, give it a try! Do NOT put any double quotes between the double quotes.

Test Script

Errors

The biggest downside to JavaScript on WebTV is that, unlike a PC, WebTV will not show you errors. If there are errors, then the script will break and not work at all. What's troubling is that you will not know where to look. Keep this in mind for later use.

Rules-1

JavaScrpt is a language and just like HTML, you have to adhere to certain rules. WebTV's JavaScript is a lot looser on your scripts, but many rules still do apply. Here are a list of basic rules for now. There are many, many more to come:

1 - Semicolons
You have to put semicolons at the end of every line code. Many lines of code will go on to another line. This is ok because the WebTV will keep reading the syntax until it reaches a semicolor ';'. If one is never found, there is an error.
2 - Case Sensitive
This does not mean much quite yet, but it soon will. JavaScript is case sensitive, meaning DOCUMENT is not the same as document. This is very important when using variables, functions and methods.
3 - End all parenthesis and brackets
There is no use for () and {} or [] quite yet, but there soon will be. As may you have already seen in the document.write(), If you forget a ), the script breaks. Its the same with []s and {}s. End everything
4 - Quotation marks
Anything in quotations is a string literal meaning its not a command, its not code, it means what it literally says. So if you were to forget a quotation in document.write(); you would get an error. Try it! document.write("<<>body<>>); will keep printing until it sees another " but it never will so it never gets to the ); because it's still part of the string literal. Another case is this. document.write("<<>body bgcolor="black"<>>"); This is so wrong. Why? Because the string literal is ended at "black" then everything after it JavaScript tries to run, and there is no black command so there is another error. To use quotations in string literals either use singe quotes ' or a backslash \" Either one will prevent errors.

These are very basic rules to adhere to for now. Now lets get into variables!

Variables

A variable stores information. Simple as that. It can be a number, a string, an object, almost anything you want! Variables help make a script dynamic. To declare or set up a variable, use this syntax.

var variable_name = "Stuff here";

This sets variable_name to "Stuff here" Remember the semicolon at the end. The '=' sign means "get". 'var' tells the WebTV that we are about to declare a variable. Once we have changed a variable, we can change it without the 'var'. We do not need to give it a value at declaration either. Example:

var user_name;
user_name = "Bob";

This creates user_name then on the next line, sets it as Bob. Remember your rules about quotationes. Bob is a string literal, so we if we wanted to make it "Mr." Bob, we would set it as "\"Mr.\" Bob". This is fine and dandy, but what are variables good for? Tons! To use a variable, just put the name of the variable. You can set variables to equal the same things. Example:

var user_name, user_pass;
user_name = "\"Mr.\" Bob";
user_pass = user_name;

Now user_name and user_pass both are "Mr." Bob. What if we were to switch it around like this:

var user_name, user_pass;
user_pass = user_name;
user_name = "\"Mr.\" Bob";

user_name is "Mr." Bob, but user_pass is undefined. Why? JavaScript works in order. It first declares user_name and user_pass then sets user_pass to user_name, but user_name hasn't been set yet, so it's undefined. The second way to use a variable is in string literals. To do this, you squeeze in a "+ var_name +" inbetween two quotes which is the point you want the variable. Example:

var user_first_name = "Bob";
var user_formal_name = "Mr. " + user_first_name + " Lee";

That name makes user_formal_name to Mr. Bob Lee. Let's look how we did that. We first set user_first_name to Bob. In user_formal_name, we first had "Mr.". This tells WebTV: Ok, Mr. is what I literally mean, stop at the 2nd ". So it does. Then the + user_first_name says append or add to this the variable user_first_name which is Bob. Then the + " Lee"; says append another string literal which is what we end up with: Mr. Bob Lee. Here's a test.

Assign two variables body_color and font_color and write a small webpage using the variables as code for bgcolor and text. Here's an example:

<<>script<>>
var body_color = "black";
var font_color = "white";
document.write("<<>body bgcolor="+body_color+" text="+font_color+"> Text here");
<<>/script<>>

Test Script

Next Time

Make sure you get practice with the use of document.write(); and variables. These are very necessary to learn basic JavaScript. We will look at objects in the next lesson that will allow you to change background colors and other things on a webpage!
1
Hosted by www.Geocities.ws