SDSU Emerging Technology
Fall Semester, 2004
Client-side JavaScript
Previous     Lecture Notes Index     Next     
© 2004, All Rights Reserved, SDSU & Roger Whitney
San Diego State University -- This page last updated 09-Sep-04

CS 683 Emerging Technologies Fall Semester, 2004 Doc 6 Client-side JavaScript

Contents

References

Embedding JavaScript in Web Pages

<script>

Files

Event Handler

URL

alert, confirm & prompt

Window object

Document

Copyright ©, All rights reserved. 2004 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent ( http://www.opencontent.org/opl.shtml) license defines the copyright on this document.

References

JavaScript: The Definitive Guide, 4th Ed., David Flanagan, O’Reilly, 2002

Reading for Tuesday Sept 14

XSLT tutorial http://www.w3schools.com/xsl/default.asp

Embedding JavaScript in Web Pages

<script>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title>Sample</title>
   <script>
   var name = 'Roger Whitney';
   </script>
</head>
<body>
<script type="text/javascript" language="javascript1.5">
document.writeln( "Hello from ", name, '<br/>');
document.write( 'Today is ' + new Date());
</script>
</body>
</html>

<script> tags are run in the order they are placed in the document while the document is being rendered. So your users are waiting while the script is run, so make them short. Once a document is rendered you can not modify it using document.write();

Files

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title>Sample</title>
   <script>
   var name = 'Roger Whitney';
   </script>
</head>
<body>
<script src="sample.js" language="javascript1.5">
</script>
</body>
</html>

sample.js

document.writeln( "Hello from ", name, '<br/>');
document.write( 'Today is ' + new Date());

Event Handler

<html>
<head>
   <title>Sample</title>
   <script defer="defer" type="text/javascript">
   function greetings()
      {
      var message = "Hello World\nToday is" + new Date();
      alert(message);
      return false;
      }
   </script>
</head>
<body>
<a href="http://www.sdsu.edu" onclick="return greetings();">
   Try Me
</a>
</body>
</html>

Try Me

URL

<html>
<head>
   <title>Sample</title> 
</head>
<body>
<a href="javascript:alert('Hi');"  >Try Me</a> 
</body>
</html>
Try Me

alert, confirm & prompt

alert – dialog window with text

confirm – dialog window with text & yes no buttons

prompt – dialog window with text and input area

<html>
<head>
   <title>Sample</title> 
   <script defer="defer" type="text/javascript">
   function reallyGo()
      {
      var message='Do you really wish\n to leave this page?';
      if (confirm(message))
         return true;
      else
         return false;
      }
   </script>
</head>
<body>
<a href="http://www.sdsu.edu" onclick="return reallyGo();">
   Try Me
</a>
</body>
</html>

Try Me

Window object

Global object for client-side JavaScript

Provides access to page objects

Some Window objects

Location

<html>
<head>
   <title>Sample</title> 
   <script defer="defer" type="text/javascript">
   function go()
      {
      var message='Where do you wish to go?';
      location = prompt(message, 'http://www.sdsu.edu');
      }
   </script>
</head>
   
<body>
<a href="http://www.sdsu.edu" onmouseover="go(); return false">
   Try Me
</a>
   
</body>
</html>

Try Me

Some Window Methods

<html>
<head>
   <title>Sample</title> 
   <script defer="defer" type="text/javascript">
   function go()
      {
      var message='Where do you wish to go?';
      var url = prompt(message, 'http://www.sdsu.edu/');
      window.open(url, 'ObjectNameGoesHere', 'resizable=no');
      }
   </script>
</head>
   
<body>
<a href="http://www.sdsu.edu" onmouseover="go()">
   Try Me
</a>
   
</body>
</html>

Try Me

Document

Represents the HTML document displayed in the window

Methods

Properties

Accessing HTML Elements

<html>
<head>
</head>
<body onload="document.forms[0].elements[0].focus()">
   
<form action="foo" method="get" id="catId" name="cat">
   <input type="text" id="addressId" name="address" size="40" /> 
   <input type="text" id="firstNameId" name="firstName" 
      size="40" /> 
</form>
<form action="bar" method="get" id="dogId" name="dog">
   <input type="text" id="addressId2" name="address" size="40" /> 
   <input type="text" id="lastNameId" name="lastName" 
         size="40" /> 
</body>
</html>

Alternatives

<body onload="document.dog.lastName.focus()">

<body onload="document.getElementById('addressId2').focus()">

Some CSS

<html>
<head>
</head>
<body>
<h1>Hi</h1>
<h1>Bye</h1>
<script type="text/javascript">
   var h1 = document.getElementsByTagName("h1");
   h1[0].style.visibility = 'hidden';
   h1[1].style.fontSize = '48pt';
   h1[1].style.color = 'gray';
</script>
</body>
</html>

Previous     visitors since 09-Sep-04     Next