JavaScript DHTML/Development/JavaScript in HTML

Материал из Web эксперт
Перейти к: навигация, поиск

A Basic JavaScript Starter Document

<html>
<head>
  <title>My first HTML page</title>
  <script type="text/javascript">
  <!-- Hide
   
    //Your code will go here
   
  // End hide-->
  </script>
</head>
<body>
  <!-- Your page content will go here -->
</body>
</html>



Embedding a JavaScript Function

<html>
<head>
  <title>JavaScript Unleashed</title>
  <script type="text/javascript">
  <!--
    function displayMessage() {
      document.write("JavaScript functions<br>");
   
    }
  // -->
  </script>
</head>
<body>
  <script type="text/javascript">
  <!--
    document.write("Calling a JavaScript function...<p>");
    displayMessage();
    document.write("</p>Done. ");
  // -->
  </script>
</body>
</html>



Embedding JavaScript in HTML

<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script language="JavaScript">
document.write("Hello World!");
</script>
</body>
</html>



HTML comment that hides the script.

/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
<script language="JavaScript">
<!-- Begin HTML comment that hides the script.
        // JavaScript statements go here.
        //              .
        //              .
// End HTML comment that hides the script. -->
</script>



Inserting Source JavaScript Files

<html>
<head>
<title>Using the SRC attribute of the script tag.</title>
</head>
<body>
<script language="JavaScript" SRC="src.js">
</script>
</body>
</html>

//File:src.js
alert("Hi");



JavaScript Embedded in an HTML File

<html>
<head>
    <title>Status Bar</title>
    <script type="text/javascript">
    <!--      window.defaultStatus = "Welcome to the large URL page."
   
      function changeStatus() {
        window.status = "Click me to go to the Unleashed home page."
     }
   
     function changeDefaultStatus() {
        window.defaultStatus = window.document.statusForm.messageList. 
                               options[window.document.statusForm.messageList. 
                               selectedIndex].text
     }
    //-->
    </script>
</head>
   
<body>
  <p>&#160;</p>
  <p>&#160;</p>
  <p align="center">
    <font size="7" color="#008040">
      <strong>http://www.samspublishing.ru</strong>
    </font>
  </p>
  <p align="center">
    <a href="http://www.samspublishing.ru" onmouseover="changeStatus();return true">Go...</a>
  </p>
  <p align=center>
    <font size="1">
      To change the default status bar message, select a message from the 
      list below and click the Change button. 
    </font>
  </p>
  <form name="statusForm" method="POST">
    <select name="messageList" size="1">
      <option selected>Welcome to the large URL page.</option>
      <option>On route to Sams Publishing</option>
      <option>This page intentionally left (nearly) blank.</option>
      <option>An exciting example of changing status bar text.</option>
    </select>    <input type="button" name="Change" value="Change"
       onclick="changeDefaultStatus()">
  </form>
</body>
</html>



JavaScript Template File

<html>
<head>
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <title>My First JavaScript Script</title>
  <script language="JavaScript">
  <!--
   
  // Your code will go here...
   
  //-->
  </script>
</head>
<body>
   
<!-- Content starts here -->
   
</body>
</html>



Using HTML Comments to Hide JavaScript Code

<html>
<head>
<title>Using HTML comments to hide JavaScript code</title>
</head>
<body>
<script language="JavaScript">
<!-- Begin hiding JavaScript
document.write("Hello World!");
// End hiding JavaScript -->
</script>
</body>
</html>



Using the Head for Definitions

<HTML>
<HEAD>
<TITLE>Using the HEAD for definitions</TITLE>
<SCRIPT language="JavaScript">
<!--
    greeting = "Hi Web surfers!"
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
    document.write(greeting)
// -->
</SCRIPT>
</BODY>
</HTML>