JavaScript
Advanced HTML
Creswell High School
Mr. Nickelson
JavaScript is a programming language that is used to make web pages more interactive.
JavaScript can only be used in a web page. It cannot be a stand alone program like “C”, “C++”
or JAVA. JavaScript can be used to control objects, such as images, verify forms, ask and
retrieve information about people and more. You can add many exciting features to your web
pages!
JavaScript is an “interpreted” language. That means the “Source Code” is read line by
line and immediately turns the source code into the language that the CPU (central processing
unit) will understand. Almost all browsers have the JavaScript interpreter built in so that is not a
problem.
Computer languages may seem strange at first glance. They contain words and symbols
that are hard to understand. Computer languages were written by software engineers and
mathematicians and these people live in a world of strange words and symbols! JavaScript, like
all languages (spoken, written & computer) has a set of rules that it must follow. This set of
rules is known as the language’s syntax. This is a set of reserve words that it most commonly
uses. Below is the JavaScript Keywords.
abstract
break
case
char
const
default
double
extends
final
float
function
if
import
instanceof
int
long
new
package
protected
return
static
switch
this
throws
true
var
while
boolean
byte
catch
class
continue
do
else
false
finally
for
goto
implements
in
interface
native
null
private
public
short
super
synchronized
throw
transient
try
void
with
It is not necessary to know at this time what each code word does. You will use them later. It
would be good to find a JavaScript pocket reference sheet. This will help you when you need to
use these keywords on a regular basis.
Below are good reference sites.
JavaScript Kit
JavaScript Language Reference
JavaScript Syntax
Here are some basic rules for JavaScript;
1. Case Sensitive – JavaScript like other programming languages is case sensitive! This means
if you declare a variable as MyName it is not the same as myname! Just as the “Keywords”
mentioned above must be spelled in upper and lower case just as shown or the program with
crash! It is not necessary to understand why the rules are the way they are, just make certain that
you pay attention to them.
2. White Space – The extra space between words and letters is called “White Space”. JavaScript
ignores white space with only a few exceptions. White Space should be used to make the
program more readable, so it is encouraged. The one major exception is that a line of code can
not be broken by line breaks!
Document.write(“
Hello World!”);
NOT GOOD! It is not a valid line code!
Document.write(“Hello World!”);
Valid code and it is all good!
You should never split line code as it could cause program errors. Use the White Space correctly
so it will be easier to read your source code.
3. Semi-colons- JavaScript statements are terminated by a semi-colon. You can terminate a
statement with a line break (pressing the “Enter” Key) as in the example above, but using a semicolon leads to less confusion and errors. The only exceptions to the use of semi-colons is when
you add a “Comment” (see below). JavaScript is nothing more than a collection of statements.
Var X = 5; is a JavaScript statement.
4. Comments – Comments are used to inform yourself or another programmer who is looking at
your code. Comments are ignored by the JavaScript interpreter and are really intended for
humans to see.
5. Identifiers – Variable, function and label names are JavaScript identifiers. You use identifiers
to name variables and functions. Valid identifiers are listed below:
MyName
_myname
Name01
Number2
X
Identifiers cannot begin with a number such as 6MyName. You will get a better look at vaiables
and functions later on.
Writing Your First Web Page with JavaScript!
Using “Notepad”, type in the following code and save as Hello.html. Remember that HTML is
not “Case Sensitive” but JavaScript is!
When you open the Hello.html file you should see.....
Not much but you’ll see more complicated JavaScript as we go along.
Formatting Your JavaScript and Choosing Your Style
When you begin looking at source code you’ll begin to see different patterns and style form the
different programmers. You too must come up with a style to your code writing. Some
programmers add extra lines between sections of code, indent or add Comments. This makes it
easier for them to go back and make changes or to debug a program. Whatever you do make it
so that you can easily understand the code. Look at the examples of source code below. Which
would you prefer to go back into and try and debug? Both examples are the same program and
both will run exactly the same.
Example A
<html>
<head>
<title>More HTML Tags</title>
</head>
<body>
<h1>More HTML Tags</h1>
<h3>Ordered List</h3>
<ol>
<li>alpha</li>
<li>beta</li>
<li>charlie</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>alpha</li>
<li>beta</li>
<li>charlie</li>
</ul>
<h3>Hyperlink</h3>
<a href="http://www.cs.iupui.edu/~aharris">Andy's Home page</a>
<h3>Image</h3>
<img src="silly.gif" height = 100 width = 100>
</body>
</html>
Example B
<html><head><title>More HTML Tags</title></head><body><h1>More HTML Tags</h1>
<h3>Ordered List</h3><ol><li>alpha</li><li>beta</li><li>charlie</li></ol><h3>Unordered
List</h3><ul><li>alpha</li><li>beta</li><li>charlie</li></ul><h3>Hyperlink</h3>
<a href="http://www.cs.iupui.edu/~aharris">Andy's Home page</a><h3>Image</h3>
<img src="silly.gif" height = 100 width = 100></body></html>
Glossary
Bugs: Errors in computer programs are referred to as bugs!
Code: Refers to the “source code”, is the program that is written by the programmer.
DeBugger: A debugger: is a special program that aids the programmer in tracking down and
eliminating bugs.
Source Code: The programming instructions written by a computer programmer in the
programming language.
Implementing JavaScript
There are three different ways you can place JavaScript into your web pages.
A. Embedding.
When you embed JavaScript, you are placing the code with-in the HTML code. You
should place the JavaScript. Here’s the example below.
<html>
<title>My 1st JavaScript Page using embedding</title>
<body>
<script language = “javascript”>
<! - document.write(“Hello World”);
// - - >
</script>
</body>
</html>
B. Inline Method
Sometimes you need to use JavaScript in a minimal sense. When you only need to add
something very short in your HTML, you can use this “Inline Method”. The next example
shows how to add javaScript in each line of code. Below is a good use of the Inline Method.
<html>
<title>Inline JavaScript Method</title>
<body>
<a herf = “home.html” onMouseOver = status = ‘This is a link to the Home Page!’;
return true;” onMouseOut = ‘’;”>Click Here!</a>
</body>
</html>
You should recognize most of the above code. The line that contains the “Link” to the Home
page is the one line that you need to focus on. As you can see, the JavaScript is very short and
included in the line of HTML code! You would not want to use this method with long lines of
javaScript.
3. External Files
Adding JavaScript programs to your HTML using external files add more benefits than
having to remember to add the HTML Comment Tags. The main reason you would want to use
External JavaScript files is to save you a lot if extra work. Suppose you have several web pages
that you want to add the same programming functionality to. You do not have to worry about
having to copy and paste all of the code into each page. Then you’ll have to teat each page to
make certain that you copied everything correctly. All you need to do is write the JavaScript
code once and then save it using the extension .js. This JavaScript file can then be referenced
within the HTML script tags.
Here’s the example. Place the code in Notepad and save as Hello.js.
var hello = 'Hello World';
document.write(hello);
Now you need to add the source code into your HTML code. Below is the code lines to add the
JavaScript into the web page.
<script language="javascript" type="text/javascript"
src="hello.js">
</script>
Assignment #2 – Find the JavaScript!
In the CHS Home Web Page you can find all three examples of
JavaScript. Your job is to identify them! List them on a piece of paper and
turn it in to Mr. Nickelson! :)
Assignment #3 – Create the JavaScript!
Now it is your turn to create a Web Site that uses all three JavaScript
examples. On one page you’ll use the Embed method, the second page using
the Inline method and finally the last page using the External method. Use
Engine Searches to find examples to use in your pages!