Download JavaScriptLesson01

JavaScript 101
Lesson 01: Writing Your First
JavaScript
Topics




Use the <script> </script> tag
Including JavaScript code in a Web
page
Hiding your JavaScript code from older
browsers
Using document.write to display text in
a Web document
Topics (cont.)



Using embedded HTML to format
output
Displaying the date and time using the
Date object
Using comments to document code
The script tag



JavaScript code is embedded in HTML
documents
Use script tag for JavaScript code
<script language=“JavaScript”>
JavaScript code goes here
</script>
Similar format to other html tags
Where to put your JavaScript


Script tag can be inserted into body or
head of your document
Most examples for CIS101 will go in the
body of your document
Hiding JavaScript from Old
Browsers



JavaScript is a recent addition to Web
pages
Browsers that pre-date JavaScript can’t
run its code
Can use special symbols to hide
JavaScript code from old browsers

(this is less important as time goes on)
JavaScript hiding code

Insert this code in the body of your
HTML document:
<script language=“JavaScript”>
<!-- start hiding
JavaScript code goes here
//finish hiding -->
</script>
Using document.write




document.write is your first JavaScript
statement
Syntax:
document.write(“text goes here”);
Text within quotes will be displayed
Semi-colon is optional
document.write cont.



“dot notation” common to object based
and object oriented languages
dot means “belongs to”
write method “belongs to” the
document object
Comments



Text inside a code file not intended to
be executed is called a comment
Comments are useful in order to include
information or explanations
Designated with either
// this is a one line comment
/* this is the start of a comment
until this symbol is encountered */
In the lab




Your first JavaScript will use document.write
Open Notepad and create a new HTML
document named lesson0101.html
Enter code from p. 1-4 exactly as you see it
Save the file and open it using either Internet
Explorer or Netscape
Mistakes and JavaScript



If your output does not match p. 1-5
you made a mistake
In programming tiny mistakes make big
problems
You must eliminate all mistakes before
code will run (called debugging)
Add more code


Common development method in
programming is to try out a little piece
of code, get it working, then start
adding more code
Add code that writes in color (p. 1-7)
Add the Date

Computers keep an internal clock that
with the current date and time
Use Date() to include the date on your
page
Add the following code:

document.write(“Today is “,Date(),”<br>”);


Student Modifications



Each lab exercise starts with code you enter
and run
Then you will add modifications and additions
To your lesson0101 file add the following:




Display your favorite singer or band
Display your e-mail address in your favorite color
Display your favorite movie
Include a comment in your code file
Lesson Summary






The script tag
How to hide JavaScript from old browsers
Used document.write to display text
Used HTML embedded within JavaScript to
format text for display
Used comments to document your code
Added the Date object to display the current date
and time