Teknologi 3D pada Halaman WEB

Sabtu, 23 Mei 2026

Jumat, 22 Mei 2026

All About Scripting

Nancy Winnick Cluts
Microsoft Corporation

October 27, 1997

IntroductionWhat Scripting Is, and Why and When to Use ItVBScriptJScriptUsing Both VBScript and JScriptServer-Side ScriptingScriptletsIs Scripting Just for Browsers?Scripting Resources

Introduction

In the beginning, there was HTML.

And the hordes used HTML to produce Web pages.

And they looked at the Web pages, and saw that they were good.

But after a time, visitors to the Web sites grew restless and bored with the Web sites.

They clamored for more.

They wanted the page to interact with them.

They wanted dynamic content.

The hordes were also restless.

They wanted to be able to provide different content in different contexts.

Thus, the notion of scripting was born.

Okay, maybe I'm being just a tad dramatic. But it's a lot more poetic than telling you that scripting HTML is like creating a Microsoft Excel macro: You create your spreadsheet data and create a macro to dynamically update rows or columns based on a specified calculation. With scripting, you write your HTML code and create scripts to take action based on user input or variables.

In this article, I am going to talk about what scripting is and why you might want to use it. I'll give you some information about the different scripting languages (Visual Basic® Scripting Edition [VBScript] and JScript™) that are available and include examples of scripting. I'll also provide information about server-side scripting and, at the end of this article, a list of links to resources for more information about scripting.

What Scripting Is, and Why and When to Use It

Scripting enables you to set and store variables, and work with data in your HTML code. Many Web sites now employ scripting to check the browser a user is running, validate input, work with applets or controls, and communicate to the user. Let's say that you are creating a Web site that contains a form for ordering ballet tickets. Users can choose the ballet they want to see by entering the title. Now let's say a user types in "Swine Lake." Well, if she were looking for a version starring Miss Piggy, that might be correct, but most ballet companies actually perform "Swan Lake." You could use scripting to validate the name of the ballet and, if the name is not valid, you can display a message box alerting the user to type in a valid name (and even suggest what the correct name might be).

Scripts can be used in harmony with controls or applets, too. In the example above, you could write an applet that gathers the names of the ballets playing during the season and provide that information to the user in a list box. You could use scripting to validate the information once it was chosen or to confirm the order with the user.

Two of the most popular scripting languages today are ECMAScript (formerly known as JavaScript) and VBScript. You can use any scripting language you like as long as your audience's browsers support it. In fact, you can use a combination of scripting in your HTML source code. In the following sections of this article, I will give you more information about VBScript and JScript and provide you with a few examples of each scripting language.

VBScript

Visual Basic Scripting Edition, also known as VBScript, enables authors to create scripts using a subset of the Microsoft Visual Basic language. If you are already a Visual Basic programmer, or if you are not a programmer but are looking for a scripting language that is easy to learn, VBScript might be the right language for you. VBScript is implemented as a fast, portable interpreter for use in Web browsers and applications that use ActiveX™ controls, Java applets, and OLE Automation servers.

VBScript is a strict subset of the Visual Basic for Applications language that is used in popular applications such as Microsoft Excel, Microsoft Access, Microsoft Project, and the Visual Basic 4.0 development system. VBScript was designed to be fast, so it does not support the use of strict types—it only supports the use of Variants. It also must be safe for the World Wide Web, so it does not include functionality that directly accesses the client machine's operating system or file system. For example, you cannot do file I/O or read the registry on the client machine.

VBScript provides support for three separate classes of objects:

Objects provided by the VBScript engine (the core run-time functionality with a minimal set of basic Visual Basic objects)
Objects provided by Internet Explorer
Objects provided by the VBScript author (that the Web author creates and/or inserts herself through the <OBJECT> HTML tag)

Examples

These examples are all available for testing and viewing from the VBScript Web site in the samples section I'm showing you only a few of the samples the site has to offer.

Example 1: Hello World

Let's start with the classic Hello World example using VBScript. The following code shows you how simple it is to create a button (by using INPUT TYPE=BUTTON) that, when clicked (Sub BtnHello_OnClick), displays a message box (MsgBox) with the text, "Hello, world!":

<CENTER>
 <P>
 <H2>Hello, world sample</H2>

 <INPUT TYPE=BUTTON VALUE="Click me" NAME="BtnHello">
</CENTER>

<SCRIPT LANGUAGE="VBScript">
<!--
 Sub BtnHello_OnClick
  MsgBox "Hello, world!", 0, "My first active document"
 End Sub
-->
</SCRIPT>

That was pretty simple. Of course, many of us aren't going to use scripting to simply put up a box that says "Hello, world!" Let's move on to a more realistic example.

Example 2: Client-Side Validation

The Ordering Flowers example demonstrates how you can use VBScript to create a form and gather and validate data given by the user. This form can be used for ordering flowers It uses radio buttons (INPUT TYPE=RADIO NAME) to enable the user to choose which type of card to include with the flowers, text input fields (INPUT NAME=) to gather information on where to send the flowers, and a button (INPUT TYPE=BUTTON) to submit the request. Here is the HTML source code:

 <INPUT TYPE=RADIO NAME=OptOccasion CHECKED> Birthday

 <INPUT TYPE=RADIO NAME=OptOccasion> Anniversary

 <INPUT TYPE=RADIO NAME=OptOccasion> Get well soon


<FONT SIZE=3>
<B>When and where should the flowers be sent?</B>
</FONT>
<BR>

 Date <INPUT NAME=TxtDate  SIZE=60>
 Name <INPUT NAME=TxtName  SIZE=60>
 Address  <INPUT NAME=TxtAddress SIZE=60>
 City <INPUT NAME=TxtCity  SIZE=60>
 State <INPUT NAME=TxtState  SIZE=60>
 Zip code <INPUT NAME=TxtZip  SIZE=60>
 <INPUT TYPE=BUTTON VALUE="Submit" NAME="BtnSubmit">
 <INPUT TYPE=BUTTON VALUE="Clear" NAME="BtnClear">
 <INPUT TYPE=BUTTON VALUE="Init" NAME="BtnInit"><BR>

Now that we have a place to put the information, VBScript code is used to validate the data. The fields are initialized when the window is loaded (Sub Window_OnLoad()) in the BtnInit_OnClick() function.

<SCRIPT LANGUAGE="VBScript">
<!-- Option Explicit

 Dim strMsgBoxTitle
 Dim bValidOrder

 Sub Window_OnLoad
  strMsgBoxTitle = "MSFTD"
  Call BtnInit_OnClick
 End Sub

 Sub BtnInit_OnClick
  TxtName.Value = "Joe Smith"
  TxtAddress.Value = "1 Main Street"
  TxtCity.Value = "Springfield"
  TxtState.Value = "Washington"
  TxtZip.Value = "12345"

  TxtDate.Value = Date + 3
 End Sub

When the user clicks the Submit button, VBScript code is used again to validate the input. In the function BtnSubmit_OnClick(), each text field is checked for valid entry. The function CheckSpecified() checks for non-null entries and that the delivery date is reasonable. If it's not, a message box displays this message: "Not even we can deliver that fast!"

 Sub BtnSubmit_OnClick
  bValidOrder = True

  Call CheckSpecified(txtName.Value,  "Please specify a name.")
  Call CheckSpecified(txtAddress.Value,  "Please specify an address.")
  Call CheckSpecified(txtCity.Value,  "Please specify a city.")
  Call CheckSpecified(txtState.Value,  "Please specify a state.")
  Call CheckSpecified(txtZip.Value,  "Please specify a zip code.")
  Call CheckSpecified(txtDate.Value,  "Please specify a date.")
  Call ValidateDeliveryDate

  If bValidOrder Then
   MsgBox "Thank you for your order!", 0, strMsgBoxTitle

   ' TODO:  Actually send the order.
  End If
 End Sub

 Sub ValidateDeliveryDate
  Dim SoonestWeCanDeliver
  Dim RequestedDate

  If Not bValidOrder Then Exit Sub

  SoonestWeCanDeliver = Date + 2
  RequestedDate = CDate(TxtDate.Value)
  If RequestedDate < SoonestWeCanDeliver Then
   bValidOrder = False
   MsgBox "Not even we can deliver that fast!", 0, strMsgBoxTitle
  End If
 End Sub

 Sub CheckSpecified(ByVal strFieldValue, ByVal strMsg)
  If strFieldValue = "" And bValidOrder Then
   MsgBox strMsg, 0, strMsgBoxTitle
   bValidOrder = False
  End If
 End Sub

 Sub BtnClear_OnClick
  TxtName.Value = ""
  TxtAddress.Value = ""
  TxtCity.Value = ""
  TxtState.Value = ""
  TxtZip.Value = ""
  TxtDate.Value = ""
 End Sub
-->
</SCRIPT>

Example 3: Cookies

The last VBScript example I will show you is Maintaining State with Cookies This example shows you how easy it is to save values across Web pages using cookies. Users can click buttons to read a variable, save a variable, remove a variable, read a cookie, and flip Web pages. To use this example, go ahead and click the Save Variable Button. The following VBScript is run:

     Sub SetVariable(strVariableName, varVariableValue)
         Document.Cookie = strVariableName & "=" & varVariableValue
     End Sub

I am creative, so I picked test as the variable and 1 as the value. Then I clicked the Read Variable button to see that the right variable was set. It was. Then I checked to see if the value was actually saved across Web pages by clicking the Next Page button and clicking Read Variable on that page. The following VBScript reads the variable I entered on the previous page:

 Function ReadVariable(strVariableName)
  'these five variables are used in the string manipulation
  'code that finds the variable in the cookie.
         Dim intLocation
  Dim intNameLength
  Dim intValueLength
  Dim intNextSemicolon
  Dim strTemp

  'calculate length and location of variable name
  intNameLength = Len(strVariableName)
  intLocation = Instr(Document.Cookie, strVariableName)

  'check for existence of variable name
  If intLocation = 0 Then
      'variable not found, so it can't be read
      ReadVariable = NOT_FOUND
  Else
      'get a smaller substring to work with
      strTemp = Right(Document.Cookie, Len(Document.Cookie) - intLocation + 1)

      'check to make sure we found the full string, not just a substring
      If Mid(strTemp, intNameLength + 1, 1) <> "=" Then
          'oops, only found substring, not good enough
   ReadVariable = NOT_FOUND

   'note that this will incorrectly give a not found result if and only if
   'a search for a variable whose name is a substring of a preceding
   'variable is undertaken.  For example, this will fail:
   '
   'search for:  MyVar
          'cookie contains:  MyVariable=2;MyVar=1
      Else
   'found full string
   intNextSemicolon = Instr(strTemp, ";")

   'if not found, then we need the last element of the cookie
   If intNextSemicolon = 0 Then intNextSemicolon = Len(strTemp) + 1

   'check for empty variable (Var1=;)
   If intNextSemicolon = (intNameLength + 2) Then
       'variable is empty
       ReadVariable = ""
   Else
       'calculate value normally
             intValueLength = intNextSemicolon - intNameLength - 2
       ReadVariable = Mid(strTemp, intNameLength + 2, intValueLength)
   End If
      End If
        End if
    End Function

JScript

JScript is Microsoft's implementation of an ECMA-compliant scripting language (like JavaScript) that is targeted specifically to the Internet. Like VBScript, JScript is implemented as a fast, portable interpreter for use in Web browsers and applications that use ActiveX controls, Java applets, and OLE Automation servers. JScript is not Java and has nothing to do with Java. It is closer in syntax to C or C++. If you are a C or C++ developer, you will probably find JScript to be a very easy scripting language to learn (I know I did).

Also like VBScript, JScript supports three separate classes of objects for use within JScript:

Objects provided by the JScript engine
Objects provided by Internet Explorer (found in the Microsoft Scripting site.
Objects provided by the Web page author via the HTML <OBJECT> tag.

JScript? JavaScript? ECMAScript? What's the Deal Here?

You may be confused by the term ECMAScript that I've been using in this article. You're in good company. Here's the deal. ECMA (European Computer Manufacturers Association) is a European-based association for standardizing information and communications systems. The standard recently approved, known as ECMA-262, is based on joint submissions from Microsoft and Netscape. JScript 3.0 is Microsoft's implementation of the new ECMA-262 scripting language. JavaScript is a scripting language written by Netscape that preceded the ECMA standard. Basically, when talking about JScript or JavaScript, we are talking about implementations of the same standard scripting language, ECMA—the implementations are just marketed by different companies.

Examples

These examples are available for testing and viewing from the JScript Web site. As with the VBScript examples, I'm showing only a sampling of what they have to offer. You may experience a sense of déjà vu in this section because two of the JScript examples are the same as the VBScript examples. They are a bit different in how they work. I decided to show you examples that show off VBScript and JScript rather than trying to cobble together an example that shows only syntax variation (if I did that, I'd run the risk of showing you either VB-like JScript or C-like VBScript). Let's start with the perennially popular Hello World example.

Example 1: Hello World

The Hello World example is the bare-bones JScript example. It provides a button that, when clicked, displays a message box with the text, "Hello, world!"

<CENTER>
 <P>
 <H2>Hello, world sample</H2>

 <FORM Name="Form1" ACTION="">
 <INPUT TYPE=BUTTON VALUE="Click me"
  NAME="BtnHello"
  OnClick="sayhello()"
 >
 </FORM>

</CENTER>

<SCRIPT LANGUAGE="JavaScript">
<!--

    function sayhello ()
    {
        alert("Hello, world!")
    }

//-->
</SCRIPT>

Here again, HTML code is used to set up the button and JScript is used to perform an action (displaying the message box using the alert function) when the button is clicked.

Example 2: Client-Side Validation

The second ordering flowers example demonstrates client-side validation using JScript. As in the VBScript example, this example uses radio buttons to enable the user to choose which type of card to include with the flowers, text input fields to gather information on where to send the flowers, and a button to submit the request. The HTML source code is the same for this example as it is for the VBScript example, so I won't show it here. What is different, however, is the script. The following JScript code is used to do client-side validation:

<SCRIPT LANGUAGE="JavaScript">
<!--
 var bValidOrder
 var f = document.form1

 function Init()
 {
  var d
  document.form1.TxtName.value = "Joe Smith"
  document.form1.TxtAddress.value = "1 Main Street"
  document.form1.TxtCity.value = "Springfield"
  document.form1.TxtState.value = "Washington"
  document.form1.TxtZip.value = "12345"

  d = new Date()
  d.setDate(d.getDate() + 3)
  f.TxtDate.value = (d.getMonth() + 1) + "/" + d.getDate() +
   "/" + d.getYear()
 }

 function SubmitOrder()
 {
  bValidOrder = true

  CheckSpecified(f.TxtName.value,"Please specify a name.")
  CheckSpecified(f.TxtAddress.value,"Please specify an address.")
  CheckSpecified(f.TxtCity.value,"Please specify a city.")
  CheckSpecified(f.TxtState.value,"Please specify a state.")
  CheckSpecified(f.TxtZip.value,"Please specify a zip code.")
  CheckSpecified(f.TxtDate.value,"Please specify a date.")

  ValidateDeliveryDate()

  if (bValidOrder)
  {
   alert("Thank you for your order!")
   // TODO:  Actually send the order.
  }
 }

 function ValidateDeliveryDate()
 {
  var SoonestWeCanDeliver
  var RequestedDate
  var t

  if (bValidOrder)
  {
   SoonestWeCanDeliver = new Date()
   SoonestWeCanDeliver.setDate(SoonestWeCanDeliver.getDate() + 2)
   t = Date.parse(f.TxtDate.value)
   RequestedDate = new Date()
   RequestedDate.setTime(t)

   if (RequestedDate.getTime() < SoonestWeCanDeliver.getTime())
   {
    bValidOrder = false
    alert("Not even we can deliver that fast!")
   }
  }
 }

 function CheckSpecified(strFieldValue, strMsg)
 {
  if (strFieldValue == "")
  {
   if (bValidOrder)
   {
    alert(strMsg)
    bValidOrder = false
   }
  }
 }

 function Clear()
 {
  f.TxtName.value = ""
  f.TxtAddress.value = ""
  f.TxtCity.value = ""
  f.TxtState.value = ""
  f.TxtZip.value = ""
  f.TxtDate.value = ""
 }
//-->
</SCRIPT>

Using Both VBScript and JScript

Although there are two different scripting languages, they can peacefully coexist on the same Web page. There's an example on the Internet Explorer Web site that demonstrates a mortgage calculator implemented with VBScript or JScript. Just click the button to choose which script to run and view the source for all of the details. It's interesting to see what code that performs identical tasks looks like in two different languages.

Server-Side Scripting

Server-side scripting is scripting done on the server. Well, that's the easy definition. It enables you to run scripts on the server rather than on the client machine. This works well for information that can be stored in a central place (like a database). With server-side scripting, you can enable visitors to your site to have personalized views of the content you offer. The script on the server can conditionally show or not show content that the user has requested, based on information kept in a database on the server.

To implement server-side scripting, you use Active Server Pages (ASP). ASP technology is built directly into Microsoft Web servers. It is supported on Windows NT® running Internet Information Services (IIS) 3.0, Windows NT Workstation 4.0 running Peer Web Services, and Windows® 95 Personal Web Server. If you want to use Active Server Pages with either Personal Web Server on Windows 95 or Peer Web Services on Windows NT Workstation 4.0, you must install the Active Server Pages components after installing your server software. These components are not distributed with the Setup programs for Personal Web Server or Peer Web Services. To register and download the Setup program for these components, go to the Internet Information Server 3.0 page and click the Download link.

To use server-side scripting, create a file with an ASP extension, for example, filename.asp. The file may contain any combination of HTML, scripting (such as VBScript or JScript), and calls to components (ActiveX controls or Java applets written by yourself or bought off the shelf). ASP files on the server can be updated at any time. Simply save the changes to the file and the script will be automatically compiled the next time the Web page is loaded.

ASP includes five standard objects for global use:

Request—To get information from the user
Response—To send information to the user
Server—To control the Internet Information Server
Session—To store information about and change settings for the user's current Web-server session
Application—To share application-level information and control settings for the lifetime of the application

Like scripting in HTML, which uses  as delimiters, ASP uses delimiters too. ASP uses <% and %> to enclose script commands. The scripting languages supported by ASP include VBScript and JScript and enable you to provide some real logic to the HTML code that your ASP script sends to the browser. The following example (from the troubleshooting techniques provided by the IIS team) demonstrates how ASP can be used with VBScript to process a logon request:

<%@ LANGUAGE="VBSCRIPT" %>
<!-- FILE: login.asp -->
<HTML>
<HEAD>
<TITLE>Login Example</TITLE>
</HEAD>
<BODY>

<% IF IsEmpty(Request.Form("Name")) THEN
 Response.Write "Please enter your Name"
%>
 <FORM ACTION="login.asp" METHOD=POST>
  <INPUT NAME="Name"
  TYPE=TEXTBOX MAXLENGTH=20>
 <INPUT TYPE="SUBMIT" VALUE="Submit">
 </FORM>
<%
 ELSE
'User verification code goes here Response.Write "Welcome " & Request.Form("Name") & "!"
END IF
%>

</BODY>
</HTML>

Scriptlets

One new technology (with a name that sounds amazingly like a type of candy) is scriptlet technology. Scriptlet technology enables Web authors create reusable objects using Dynamic HTML. The concept of scriptlets is simple: they are Web pages that contain script written according to specified conventions. To use a scriptlet, insert an <OBJECT> tag into another Web page and invoke the scriptlet by its standard URL. In Internet Explorer 4.0, the syntax for marking an object as a scriptlet is the MIME type text/x-scriptlet.

Is Scripting Just for Browsers?

I've talked a lot about scripting in the context of a Web browser, but you can also use the Windows Script Host to use script outside of a browser. The Microsoft Script Host is a language-independent scripting host for ActiveX scripting engines on 32-bit Windows platforms. In the future, the Windows Script Host will be integrated into Windows 98, Windows NT Workstation version 5.0, and Windows NT Server version 5.0. Currently, the VBScript and JScript engines are provided with the Windows Script Host. It can be run either from the command line (cscript.exe) or through Windows (wscript.exe). The Windows Script Host is ideal for non-interactive scripts that perform administrative tasks. Full documentation for the Windows Script Host is available from the Microsoft Scripting site.

Scripting Resources

This article is designed to provide you with some background information about scripting in general and to give you pointers to more information. There's plenty of information on the Internet that covers scripting, including technical articles, documentation, Web sites, and samples. This list contains the promised pointers (in the form of links) to some of these resources. With these links in hand, you should be able to start your scripting today.

Microsoft's Scripting site (the first place you should go for the latest on scripting)
What's New in JScript 3.0
An ASP You Can Grasp: The ABCs of Active Server Pages
25+ ASP Tips to Improve Performance and Style
ASP Troubleshooting Tips and Techniques
Write Yourself into the Script

Flyout Menu With HTML COMPONENT, JScript, and XML (No SubMenu)

default.html

<style>

.flyoutMenu {

BACKGROUND-COLOR: #f1f1f1; BEHAVIOR: url(default.htc); BORDER-BOTTOM: #999999 1px solid; BORDER-LEFT: #999999 0px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 0px solid

}

.flyoutHeading {

BACKGROUND-COLOR: #f1f1f1; CURSOR: default; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 80%; FONT-WEIGHT: bold; PADDING-BOTTOM: 4px; PADDING-LEFT: 2px; PADDING-TOP: 2px

}

.flyoutLink {

BORDER-BOTTOM: #f1f1f1 1px solid; BORDER-LEFT: #f1f1f1 1px solid; BORDER-RIGHT: #f1f1f1 1px solid; BORDER-TOP: #f1f1f1 1px solid; CURSOR: hand; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 80%; PADDING-LEFT: 6px; PADDING-RIGHT: 25px; PADDING-TOP: 1px

}

.flyoutMenu TD.flyoutLink {

}

.flyoutLink A {

COLOR: black; TEXT-DECORATION: none

}

.flyoutLink A:hover {

COLOR: black; TEXT-DECORATION: none

}

.flyoutLink A:visited {

COLOR: black; TEXT-DECORATION: none

}

.flyoutLink A:active {

COLOR: black; TEXT-DECORATION: none

}

.flyoutSubHeading {

BACKGROUND-COLOR: #f1f1f1; CURSOR: default; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 90%; FONT-WEIGHT: bold; PADDING-BOTTOM: 4px; PADDING-LEFT: 7px; PADDING-TOP: 2px

}

.flyoutSubLink {

BORDER-BOTTOM: #f1f1f1 1px solid; BORDER-LEFT: #f1f1f1 1px solid; BORDER-RIGHT: #f1f1f1 1px solid; BORDER-TOP: #f1f1f1 1px solid; CURSOR: hand; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 90%; PADDING-BOTTOM: 3px; PADDING-LEFT: 11px; PADDING-RIGHT: 15px; PADDING-TOP: 1px

}

.flyoutSubLink A {

COLOR: black; TEXT-DECORATION: none

}

.flyoutSubLink A:hover {

COLOR: black; TEXT-DECORATION: none

}

.flyoutSubLink A:visited {

COLOR: black; TEXT-DECORATION: none

}

.flyoutSubLink A:active {

COLOR: black; TEXT-DECORATION: none

}

</style>

</head>

<h1>FLYOUT MENU</H1>

<TABLE border=0 cellPadding=2 cellSpacing=0 class=flyoutMenu

width=180 xmlns:msxsl="urn:schemas-microsoft-com:xslt"

menudata="menu.xml">

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD class=flyoutLink handle="pt"><A

href="metacreations.html">Metacreations

</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle=""><A

href="directx.html">Direct X

</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle=""><A

href="kode.html">Code Center</A>

</TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle="dl"><A

href="dhtml.html">DHTML</A>

</TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle="ht"><A

href="javascript.html">Java Script

</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle="mg"><A

href="animation.html">Animation 3D

</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle="col"><A

href="dom.html">DOM

</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle=""><A

href="css.html">CSS</A>

</TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle="devcom"><A

href="xml.html">XML

</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle="train"><A

href="http://msdn.microsoft.com/tce/">Training, Career

& Events</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle="subscr"><A

href="http://msdn.microsoft.com/subscriptions/">Subscriptions</A>

</TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle=""><A

href="http://msdn.microsoft.com/partners/">Partners

& Certification</A>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

<TABLE border=0 cellPadding=2 cellSpacing=0 class=flyoutMenu

width=180 xmlns:msxsl="urn:schemas-microsoft-com:xslt"

menudata="/menu.xml">

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD class=flyoutLink handle=""><A

href="http://msdn.microsoft.com/isapi/gomscom.asp?target=/technet/">IT

Professionals</A> </TD></TR></TBODY></TABLE>

<TBODY>

<TR>

<TD class=flyoutLink handle=""><A

href="http://msdn.microsoft.com/architecture/">Architects</A>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

</body>

</html>

===================================================

File : default.htc

<PUBLIC:COMPONENT>

<PUBLIC:PROPERTY NAME="menudata" />

<PUBLIC:METHOD NAME="show_flyout" />

<PUBLIC:METHOD NAME="kill_flyout" />

<PUBLIC:METHOD NAME="scroll" />

<PUBLIC:METHOD NAME="event_oncontentready" />

<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="event_oncontentready()" />

// modified by Dudi Gunawan graduated from UNIVERSITAS PENDIDIKAN INDONESIA, Bandung/////

// file name default.htc///

var IMAGES = ""

var MENU_WIDTH = 180

var MENU_BORDER_COLOR = '#999999'

var MENU_BACKGROUND_COLOR = '#ffffff'

var MENU_CURRENTPAGE_COLOR = '#ffffff'

var MENU_MOUSEOVER_COLOR = '#ffffff'

var MENU_MOUSEDOWN_COLOR = 'rgb(111,183,255)'

var MENU_SHADOW_COLOR = '#666666'

var FLYOUT_DELAY = 200

var KILL_DELAY = 300

var SCROLL_DELAY = 35

var SCROLL_PXPERSEC = 150

var MIN_FLYOUT_WIDTH = 100

var MAX_FLYOUT_WIDTH = 410

var global = window.document

global.fo_currentMenu = null

global.fo_shadows = new Array

global.fo_killTimer = null

var flyoutTimer = null

var scrollTimer = null

var flyoutCount = 0

var flyouts = new Array

var rowHeight = 0

var menuToShow = null

var scrollDelta = 0

var scrollStart = 0

var scrollTime = 0

var scrollArea = null

var contentReady = 0

var hideIFrames = true

function newid()

{

var id

id = 'id' + Math.random().toString().substr(2, 10)

while (global.all(id))

return id

}

function new_XML_document()

{

try

{

var doc = new ActiveXObject("MSXMl.DOMDocument")

return doc

}

catch(err)

{

return null

}

function event_oncontentready()

{

if (!global.firstFlyoutInstance)

{

global.firstFlyoutInstance = true

global.body.attachEvent("onmousemove", body_onmousemove)

}

if (this.id == '')

this.id = newid()

if (navigator.appVersion.indexOf("MSIE 5.0") == -1)

hideIFrames = false

var mdd = null

if (menudata)

if (menudata.substr(0, 1) == '#')

{

try

{

mdd = eval(menudata.substr(1)).XMLDocument.documentElement

}

catch(ex)

{

window.setTimeout(this.id + ".event_oncontentready()", 100, "JScript")

return

}

else

{

var md = new_XML_document()

if (md)

{

md.async = false

md.load(menudata)

if (md.parseError.errorCode == 0)

mdd = md.documentElement

}

else

mdd = null

}

var items = this.all.tags("TD")

var i

var nParentItem = 0

var nParentLen = -1

var lhref = normalized_href(location.href)

for (i=0; i<items.length; i++)

{

var item = items[i]

if (item.className == "flyoutLink" || item.className == "flyoutSubLink")

{

var disabled = false

var anchors = item.all.tags("A")

if (anchors.length > 0)

{

var anchor = anchors.item(0)

var ahref = normalized_href(anchor.href)

if (ahref == lhref)

{

anchor.outerHTML = anchor.innerHTML

item.style.borderColor = MENU_BORDER_COLOR

item.style.backgroundColor = MENU_CURRENTPAGE_COLOR

item.style.cursor = 'default'

disabled = true

nParentItem = 0

nParentLen = 9999

}

else

{

var slash = ahref.lastIndexOf("/")

if (slash == ahref.length - 1)

if (lhref.substr(0, slash + 1) == ahref)

if (ahref.length > nParentLen)

{

nParentItem = i

nParentLen = ahref.length

}

item.defaultBorder = item.style.borderColor

item.defaultBackground = item.style.backgroundColor

item.attachEvent("onmouseover", item_onmouseover)

item.attachEvent("onmouseout", item_onmouseout)

if (!disabled)

{

item.attachEvent("onmousedown", item_onmousedown)

item.attachEvent("onmouseup", item_onmouseup)

}

if (item.handle && mdd)

{

var sm = mdd.selectSingleNode("//submenu[@handle='" + item.handle + "']")

if (sm)

{

var fa = document.createElement("div")

fa.width = 4

fa.height = 7

fa.style.position = "absolute"

fa.style.left = MENU_WIDTH - 15

fa.style.marginTop = 4

fa.style.fontSize = "1px"

fa.style.backgroundImage = "url(" + IMAGES + "flyout_arrow.bmp)"

fa.style.width = "4px"

fa.style.height = "7px"

item.insertAdjacentElement("afterBegin", fa)

var table = document.createElement("table") //submenu

table.attachEvent("onmouseover", submenu_onmouseover)

table.attachEvent("onmouseout", submenu_onmouseout)

table.width = MAX_FLYOUT_WIDTH + 6

table.cellPadding = 0

table.cellSpacing = 0

table.className = "flyoutMenu"

table.style.border = "solid 1px " + MENU_BORDER_COLOR

table.style.position = "absolute"

table.style.left = MENU_WIDTH - 4

table.style.top = 0

table.baseTop = element_top(item) - 3

cell = table.insertRow().insertCell()

cell.style.padding = "2px 0px"

scrollArea = document.createElement("div")

scrollArea.id = newid()

cell.insertAdjacentElement("afterBegin", scrollArea)

upScroller = create_sublink('<center><div style="width: 15px; height: 16px; font-size: 1px"></div></center>')

upScroller.style.display = 'none'

upScroller.rows[0].cells[0].scroller = scrollArea

cell.insertAdjacentElement("afterBegin", upScroller)

downScroller = create_sublink('<center><div style="width: 15px; height: 16px; font-size: 1px"></div></center>')

downScroller.style.display = 'none'

downScroller.rows[0].cells[0].scroller = scrollArea

cell.insertAdjacentElement("beforeEnd", downScroller)

scrollArea.upScroller = upScroller

scrollArea.downScroller = downScroller

var it = sm.firstChild

var ic = 0

var j

var mi //menu item

while (it)

{

ic++

var tn = it.tagName

var att = it.attributes

if (tn == 'item')

{

var h = '<a href="' + att.getNamedItem("href").value + '">' + att.getNamedItem("label").value + '</a>'

mi = create_sublink(h)

}

else if (tn == 'heading')

mi = create_sublink(att.getNamedItem("label").value, "flyoutSubHeading")

else if (tn == 'separator')

mi = create_separator()

else

mi = create_sublink("", "flyoutSubHeading")

scrollArea.insertAdjacentElement('beforeEnd', mi)

it = it.nextSibling

}

global.body.insertAdjacentElement('afterBegin', table)

item.flyoutid = flyoutCount

flyouts[flyoutCount++] = table

var maxWidth = MIN_FLYOUT_WIDTH

for (j=0; j<ic; j++)

{

mi = scrollArea.childNodes(j)

if (mi.offsetWidth > maxWidth)

maxWidth = mi.offsetWidth

}

if (maxWidth > MAX_FLYOUT_WIDTH)

maxWidth = MAX_FLYOUT_WIDTH

table.width = ''

rowHeight = scrollArea.childNodes(0).offsetHeight

for (j=0; j<ic; j++)

{

mi = scrollArea.childNodes(j)

mi.style.width = maxWidth + mi.widthAdjust

}

upScroller.style.width = maxWidth

downScroller.style.width = maxWidth

table.style.display = "none"

}

if (nParentItem != 0)

{

items[nParentItem].style.borderColor = MENU_BORDER_COLOR

items[nParentItem].defaultBorder = MENU_BORDER_COLOR

}

function normalized_href(href)

{

href = href.toLowerCase();

var slash = href.lastIndexOf("/");

if (-1 != slash)

{

var filename = href.substr(slash + 1);

if ("default.htm" == filename || "default.asp" == filename)

href = href.substr(0, slash + 1);

}

return href;

}

function image_load(src)

{

var img = new Image()

img.src = src

return img

}

function item_onmouseover()

{

var e = whichItem()

if (e.contains(window.event.fromElement))

return

if (e.style.backgroundColor != MENU_CURRENTPAGE_COLOR)

{

e.style.borderColor = MENU_BORDER_COLOR

e.style.backgroundColor = MENU_MOUSEOVER_COLOR

}

if (e.submenu == null)

{

if (e.handle)

{

menuToShow = flyouts[e.flyoutid]

if (menuToShow)

menuToShow.baseTop = element_top(e) - 3

}

else

menuToShow = null

flyoutTimer = window.setTimeout(this.id + ".show_flyout()", FLYOUT_DELAY, "JScript")

}

else if (scrollArea = e.scroller) //not a "==" typo

{

if (e.offsetParent.offsetTop > scrollArea.offsetTop)

scrollDelta = +1

else

scrollDelta = -1

scrollStart = scrollArea.scrollTop

scrollTime = current_time()

scrollTimer = window.setInterval(this.id + ".scroll()", SCROLL_DELAY, "JScript")

}

var a = e.all.tags("A")

if (a.length > 0)

window.status = a[0].href

}

function current_time()

{

var temp = new Date()

return temp.valueOf()

}

function item_onmouseout()

{

var e = whichItem()

var te = window.event.toElement

if (te)

if (e.contains(te))

return

e.style.borderColor = e.defaultBorder

e.style.backgroundColor = e.defaultBackground

if (flyoutTimer)

{

window.clearTimeout(flyoutTimer)

flyoutTimer = null

}

if (gs = scrollTimer)

{

window.clearInterval(gs)

scrollTimer = null

}

window.status = ""

}

function whichItem()

{

var e = event.srcElement

while (e.tagName != "TD")

e = e.parentElement

return e

}

function item_onmousedown()

{

if ((event.button & 1) == 0)

return;

var e = whichItem()

e.style.backgroundColor = MENU_MOUSEDOWN_COLOR

e.mouseIsDown = 1

}

function item_onmouseup()

{

if ((event.button & 1) == 0)

return;

var e = whichItem()

if (e.mouseIsDown != 1)

return

e.mouseIsDown = false

e.style.backgroundColor = MENU_MOUSEOVER_COLOR

var a = e.all.tags("A")

if (a.length > 0)

top.location.href = a[0].href

}

function scroll()

{

var temp = scrollStart + Math.round((current_time() - scrollTime) * 0.001 * SCROLL_PXPERSEC) * scrollDelta

scrollArea.scrollTop = temp

upImg = scrollArea.upScroller.all.tags("DIV").item(0)

dnImg = scrollArea.downScroller.all.tags("DIV").item(0)

if (temp <= 0)

upImg.style.backgroundImage = "url(" + IMAGES + "ico_wir_xp1.bmp)"

else

upImg.style.backgroundImage = "url(" + IMAGES + "ico_support_xp.bmp)"

if (temp >= scrollArea.scrollHeight - scrollArea.offsetHeight)

dnImg.style.backgroundImage = "url(" + IMAGES + "ico_wir_xp.bmp)"

else

dnImg.style.backgroundImage = "url(" + IMAGES + "ico_support_xp1.bmp)"

if (scrollArea.scrollTop != temp)

{

window.clearInterval(scrollTimer)

scrollTimer = null

}

function remove_flyout()

{

if (global.fo_currentMenu)

{

var i

for (i=0; i<global.fo_shadows.length; i++)

global.fo_shadows[i].removeNode(true);

global.fo_shadows = new Array();

global.fo_currentMenu.style.display = 'none'

show_elements("SELECT")

show_elements("OBJECT")

if (hideIFrames) show_elements("IFRAME")

}

function show_flyout()

{

flyoutTimer = null

if (global.readyState != 'complete')

{

flyoutTimer = window.setTimeout(this.id + ".show_flyout()", 50, "JScript")

return

}

if (global.fo_currentMenu == menuToShow)

return

remove_flyout()

global.fo_currentMenu = menuToShow

if (menuToShow)

{

var menuChildren = menuToShow.rows[0].cells[0].childNodes

var upScroller = menuChildren(0).style

var scrollArea = menuChildren(1).style

var downScroller = menuChildren(2).style

upScroller.display = 'none'

downScroller.display = 'none'

scrollArea.overflow = 'visible'

var menuStyle = menuToShow.style

menuStyle.zIndex = 10

menuStyle.top = menuToShow.baseTop

menuStyle.display = ''

var docBody = global.body

var docTop = docBody.scrollTop

var screenHeight = docBody.clientHeight

if (menuStyle.posTop - docTop + menuToShow.offsetHeight > screenHeight)

{

menuStyle.posTop -= menuToShow.offsetHeight - 25

if (menuStyle.posTop < docTop)

{

menuStyle.posTop = (screenHeight - menuToShow.offsetHeight) / 2 + docTop - 2

if (menuStyle.posTop < docTop)

{

upScroller.display = '';

menuChildren(0).all.tags("DIV").item(0).style.backgroundImage = "url(" + IMAGES + "ico_wir_xp1.bmp)"

downScroller.display = '';

menuChildren(2).all.tags("DIV").item(0).style.backgroundImage = "url(" + IMAGES + "ico_support_xp1.bmp)"

scrollArea.overflow = 'hidden';

var vrows = Math.floor((screenHeight - 8) / rowHeight) - 2

if (vrows <= 0)

{

remove_flyout()

return

}

scrollArea.height = vrows * rowHeight

menuStyle.posTop = (screenHeight - menuToShow.offsetHeight) / 2 + docTop - 2

menuChildren(1).scrollTop = 0

}

makeRectangularDropShadow(menuToShow, MENU_SHADOW_COLOR, 4)

menuToShow.focus()

global.fo_muLeft = menuToShow.offsetLeft

global.fo_muRight = global.fo_muLeft + menuToShow.offsetWidth

global.fo_muTop = menuToShow.offsetTop

global.fo_muBottom = global.fo_muTop + menuToShow.offsetHeight

hide_elements("SELECT")

hide_elements("OBJECT")

if (hideIFrames) hide_elements("IFRAME")

}

function element_top(el)

{

var et = 0

while (el)

{

et += el.offsetTop

el = el.offsetParent

}

return et

}

function makeRectangularDropShadow(el, color, size)

{

var i;

for (i=size; i>0; i--)

{

var rect = document.createElement('div');

var rs = rect.style

rs.position = 'absolute';

rs.left = (el.style.posLeft + i) + 'px';

rs.top = (el.style.posTop + i) + 'px';

rs.width = el.offsetWidth + 'px';

rs.height = el.offsetHeight + 'px';

rs.zIndex = el.style.zIndex - i;

rs.backgroundColor = color;

var opacity = 1 - i / (i + 1);

rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';

el.insertAdjacentElement('afterEnd', rect);

global.fo_shadows[global.fo_shadows.length] = rect;

}

function submenu_onmouseout()

{

var gc = global.fo_currentMenu

if (!gc) return

var event = window.event

if (!gc.contains(event.toElement))

{

if (event.x < MENU_WIDTH)

return

global.fo_killTimer = window.setTimeout(this.id + ".kill_flyout()", KILL_DELAY, "JScript")

event.cancelBubble = true

}

function submenu_onmouseover()

{

if (kt = global.fo_killTimer) //not a == typo

{

window.clearTimeout(kt)

global.fo_killTimer = null

}

function kill_flyout()

{

global.fo_killTimer = null

remove_flyout()

global.fo_currentMenu = ''

}

function body_onmousemove()

{

if (!global.fo_currentMenu)

return

if (global.fo_killTimer)

return

if (global.fo_currentMenu.contains(window.event.srcElement))

return

if (window.event.x < MENU_WIDTH)

return

kill_flyout()

}

function create_sublink(html, className)

{

var sublink = document.createElement("table")

sublink.cellPadding = 0

sublink.cellSpacing = 0

sublink.style.margin = "0px 2px"

sublink.widthAdjust = 0

var td = sublink.insertRow().insertCell()

if (!className) className = "flyoutSubLink"

td.className = className

td.submenu = "1"

td.innerHTML = html

return sublink

}

function create_separator()

{

var sep = document.createElement("table")

sep.cellPadding = 0

sep.cellSpacing = 0

sep.style.margin = "2px 0px"

sep.widthAdjust = 4

var td = sep.insertRow().insertCell()

td.width = "100%"

td.height = "1"

td.bgColor = MENU_BORDER_COLOR

return sep

}

function hide_elements(tagName)

{

windowed_element_visibility(tagName, -1)

}

function show_elements(tagName)

{

windowed_element_visibility(tagName, +1)

}

function windowed_element_visibility(tagName, change)

{

var els = global.all.tags(tagName)

var i

for (i=0; i < els.length; i++)

{

var el = els.item(i)

if (elements_overlap(el))

{

if (el.visLevel)

el.visLevel += change

else

el.visLevel = change

if (el.visLevel == -1)

{

el.visibilitySave = el.style.visibility

el.style.visibility = "hidden"

}

else if (el.visLevel == 0)

el.style.visibility = el.visibilitySave

}

function elements_overlap(el)

{

var left = 0

var top = 0

var width = el.offsetWidth

var height = el.offsetHeight

while (el)

{

left += el.offsetLeft

top += el.offsetTop

el = el.offsetParent

}

return ((left < global.fo_muRight) && (left + width > global.fo_muLeft) && (top < global.fo_muBottom) && (top + height > global.fo_muTop))

}

</SCRIPT>

</PUBLIC:COMPONENT>

====================================================

menu.xml

<?xml version="1.0"?>

<menu>

</submenu>

</submenu>

</submenu>

</submenu>

</submenu>

</submenu>

</submenu>

<item href="/subscriptions/prodinfo/overview.asp

" label="JScript"/>

<item href=" /subscriptions/prodinfo/subscribe.asp

" label="XML"/>

<item href=" /subscriptions/resources/highlights.asp

" label="Style Sheet"/>

</submenu>

</menugroup>

</menugroup>

</menu>

Teknologi 3D pada Halaman WEB

Sabtu, 23 Mei 2026

From Developer Intel (2005)

Jumat, 22 Mei 2026

All About Scripting

All About Scripting

Contents

Introduction

What Scripting Is, and Why and When to Use It

VBScript

Examples

Example 1: Hello World

Example 2: Client-Side Validation

Example 3: Cookies

JScript

JScript? JavaScript? ECMAScript? What's the Deal Here?

Examples

Example 1: Hello World

Example 2: Client-Side Validation

Using Both VBScript and JScript

Server-Side Scripting

Scriptlets

Is Scripting Just for Browsers?

Scripting Resources

Flyout Menu With HTML COMPONENT, JScript, and XML (No SubMenu)

Mengenai Saya