Basics of Writing JavaScript Code

The JavaScript Skeleton

JavaScript code can go inside the head or the body of an HTML document. In the first couple of weeks you will write JavaScript code in the body of HTML documents.

Use the <script> HTML tag to tell the browser that you are about to write JavaScript code (just as the <style> tag introduced CSS code):

<html>
<head>

<script type="text/JavaScript">
</script>

</head>
                  
<body>
</body>
</html>

<html>
<head>
</head>
                  
<body>

<script type="text/JavaScript">
</script>

</body>
</html>

Two Simple JavaScript Examples

<body>
<script type="text/JavaScript">
     document.write("Basketball rules!");
</script>
Dribble dribble dribble.
</body>

Click here for a demo of the dribble code.

You can use document.write(something) to put some text into your HTML page. FYI, we call document.write() a method, but don't worry about what that means for now.

<body>
<script type="text/JavaScript">
    alert("Hey you there -- wake up!");
</script>
</body>

Click here for a demo of the alert code.

You can use alert(something) to pop up a window that says something. alert() is much more “in your face” than document.write().

Writing HTML from Javascript

Let's take a closer look at one useful method: document.write()

document.write("this text will show up on your page");

quoted text in a write() statement is inserted into the HTML document when the statement is executed
within a write() statement, you can use HTML tags
The text in quotation marks must be all on one line

Placing the following JavaScript code in the BODY of a Web page

<SCRIPT TYPE="text/JavaScript">
      document.write("Welcome to <B>CS 110</B>.<BR>");
      document.write("The Web is at your fingertips!");
</SCRIPT>

is equivalent to directly placing the following text in your web page:

   Welcome to <B>CS 110</B>.<BR>
   The Web is at your fingertips!

Q: Why use write statements when we know how to put stuff on a web page using HTML?

A: JavaScript can make our pages interactive and dynamic by computing the text on the fly. HTML alone cannot.

Here is an example using prompt()

 <body>
 <script type="text/JavaScript">
      var firstName = prompt("Please tell me your name");
      document.write("Hello " + firstName + "!");
 </script>
 </body>

Click here to run the "prompt" code above.

Comments

Like HTML, you can (and should) add comments to your JavaScript code. However, JavaScript does comments differently from HTML; it does them the same way as CSS. The syntax for adding a comment to JavaScript is shown in red below.

 <html>
                  
 <head>
 </head>
                  
 <body>
 <script type="text/JavaScript">
                  
    /* This script pops up an alert box with a message making sure that you
    all are awake because at this time of day, certain people can be very
    sleepy. Of course, a lot of it depends on what you were doing last
    night...  */
    
                  
    alert("Hey you there -- wake up!");
</script>
</body>

</html>

JavaScript is Case-Sensitive

That means document.Write() is not the same thing as document.write() and only the latter one works.

Summary

We learned that

We can switch to the JavaScript language by using the SCRIPT tag with the TYPE attribute set to text/JavaScript. This may remind you of the type="text/css" attribute of the STYLE tag in document-level CSS. Note that an older way to switch to JavaScript is to use the LANGUAGE attribute set to "JavaScript". You'll see some uses of that in the CS110 site where we haven't updated the code.
The JavaScript document.write() method lets us put some text on our web page. The text can be customized.
The JavaScript alert() function lets us pop up a window to tell the user something.
The JavaScript prompt() function lets us ask the user a question and get back a response.
We can do comments in JavaScript using /* and */.
Warning! JavaScript is case-sensitive!

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Sunday, 30-Sep-2007 15:27:26 EDT