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.

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 2

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

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 3

Embedding JavaScript in Web Pages

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 4

<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();

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 5

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());

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 6

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

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 7

URL

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

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 8

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

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 9

Window object

Global object for client-side JavaScript

Provides access to page objects

Some Window objects

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 10

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

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 11

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

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 12

Document

Represents the HTML document displayed in the window

Methods

Properties

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 13

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()">

CS 683 Fall 04Doc 6, Client-side JavaScript Slide # 14

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>

Copyright ©, All rights reserved.

2004 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA.

OpenContent license defines the copyright on this document.

Previous     visitors since 09-Sep-04     Next