How JavaScript and HTML Work Together


The JavaScript language was developed to work with HTMLto be written into an HTML document and interpreted by a browser. JavaScript statements can be inserted into an HTML document using the <script> tag, like this:

 <script language="JavaScript">  [JavaScript statements go here]  </script> 

The <script> tag can go just about anywhere in the HTML code, in the <head> or <body> section, and will be executed as soon as the browser loads the <script> tag.

The following exercise shows how this works.

Practice Session #1

In this exercise, you'll insert a <script> tag containing a simple JavaScript statement into an HTML document, experimenting with placing the tag in various places in the document. The JavaScript statement, when executed, causes an alert window to appear.

  1. In the text editor of your choice, or in Dreamweaver Code view, open a new document. Save the document as practice1.htm.

  2. Enter the basic HTML framework code (unless your program enters it for you). Your code should look like this:

     <html>  <head>  <title>Practice Session 1</title>  </head>  <body>  </body>  </html> 
  3. Enter a block of JavaScript code in the <body> section of the document (new code is in bold):

     <html>  <head>  <title>Practice Session 1</title>  </head>  <body>  <script language="JavaScript">   alert("Hello world!");   </script>  </body>  </html> 
  4. Open this page in a browser. As soon as the browser loads the page, an alert window should pop up with the "Hello world!" message showing (see Figure A.1). If this doesn't happen, double-check your codeit must look exactly like the code shown here. JavaScript doesn't allow typos!

    Figure A.1. The practice1.htm file, containing a JavaScript alert statement set to execute when the <body> loads.

    graphics/apafig01.gif

    note

    When you're extending Dreamweaver, it will be the Dreamweaver application itself that interprets your JavaScript code. For the purpose of learning JavaScript, though, it's easier to test your code in a browser. That's what you'll be doing throughout this appendix.

  5. Now move the <script> tag from the <body> to the <head> of your HTML document. Your code should look like this (new code in bold):

     <html>  <head>  <title>Practice Session 1</title>  <script language="JavaScript">   alert("Hello world!");   </script>  </head>  <body>  </body>  </html> 
  6. View the page in a browser again. You'll see that the result isn't much different from what you had before. The alert statement is actually being executed slightly sooner than it was before, because it's occurring slightly earlier in the codebut the entire page is loaded so quickly that there is essentially no difference.

  7. Finally, add comments to your HTML code and to your JavaScript code for future reference:

     <html>  <head>  <title>Practice Session 1</title>  <!The script can be placed in the head or body of the document >  <script language="JavaScript">  //The following statement will execute as soon as this part of the page loads  alert("Hello world!");  </script>  </head>  <body>  </body>  </html> 

Remember, everything outside the <script> tag is normal HTML. HTML comments are coded using the <! and > characters . Everything inside the <script> tag must be in JavaScript syntax. In JavaScript, the // characters indicate that the rest of the line (until the next hard return) is a comment.



Dreamweaver MX Extensions
Dreamweaver MX Extensions
ISBN: 0735711828
EAN: 2147483647
Year: 2001
Pages: 141
Authors: Laura Gutman

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net