Java javascript logo Script

Home-^- Java-Sun

Javascript Basics

What can you do after the HTML data arrives in the client browser? Well, with JavaScript almost anything ;-)) Here is the java code for a simple 'hello world' script -

<script type="text/javascript" language="javascript">
document.write ('Hello World'); // welcome to the Java World! ;-))
</script>

It seems some older browsers will not understand the line document.write(...), and coders provide protection by tell the browser it is all an HTML comment, thus can be skipped, by adding -

<script type="text/javascript" language="javascript">
<!-- Begin
document.write ('Hello World');
// end -->
</script>

For a start javascript, like other client side scripts, like MS VB Script, allows coders to quickly see and change HTML effects. For example, how can you see each of the table borders, 0 to 6, one after the other, just be able to see and judge the different effects? Well with java, see here. There is literally miles of sample javascript out there, and part of knowing Java is to have browsed through, and where needed copied, tried, modified, some sample javascript, or written own ... Try below, first -

Free JavaScripts provided
by The JavaScript Source
javascript logo

I have some samples on the site, sometimes where I have taken the code, from say the above, and modified it, to hopefully add to the rich work that had already been done. One in pure simple form, it already being delightful in its display. Try these -
* a mouse chasing, analogue clock, with circling day, date information, seeing is believing, an anoclk.htm. Or 
* paint phases of the moon, a Java Moon 1, or Java Moon 2, or Moon Phases, or
* a sample library type Java Include or
* Multiple Images on mouse over, a Java Menu, or
* Set of five (5) Java (flying) Planes! or Clock and Planes combined!
* Javascript stopwatch.
* A simple page visit counter, using cookies.

top


From java.net

... java.net is the realization of a vision of a diverse group of engineers, researchers, technologists, and evangelists at Sun Microsystems, Inc. to provide a common area for interesting conversations and innovative development projects related to Java (™) technology. ...

Looking for some references -
 http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/
 http://www.webreference.com/js/
<appears broken!>http://doc.h9d.com/javascript/refp_01.htm
 http://www.htmlhelp.org/reference/html40/forms/select.html ...

top


Javascript and HTML

Of course, to work well with javascript, you must also know HTML, DHTML, and Intrinsic HTML Controls. Each browser, like Internet Explorer, supports a set of controls that are built into the browser itself. These controls, called intrinsic HTML controls, do not have to be downloaded across the Internet to be used on the client machine. Intrinsic controls are not defined with the <OBJECT> </OBJECT> tags, as ActiveX controls are. Instead, they are defined either with the <INPUT> tag or such special tags as the <SELECT></SELECT> tags or <TEXTAREA></TEXTAREA> tags. The intrinsic controls are used with these tags because these tags support the original HTML specification for controls on a web page. Prior to the introduction of ActiveX controls and downloadable objects, HTML supported several controls through these special HTML tags. For example, inserting a button into a web page is done with the <INPUT> tag, as shown here:

<INPUT TYPE="BUTTON" NAME="Command1">
The intrinsic controls are often used in conjunction with an HTML form. Forms are created with the <FORM></FORM> tags. Controls are subsequently defined inside the form. The following code defines two text fields and a button inside a form:

<FORM NAME="frmOne">
<INPUT TYPE="TEXT" NAME="Text1">
<INPUT TYPE="TEXT" NAME="Text2"><BR>
<INPUT TYPE="BUTTON" NAME="Command1">
</FORM>
When controls are defined inside a form, the Internet Explorer automatically supports their events in VBScript code. In the above case, the button supports an OnClick event that the Internet Explorer will fire, executing code in a VBScript event-handling subroutine, shown here, but this could just as well be a javascript: handler ...

<SCRIPT type="text/VBScript" LANGUAGE="VBScript">
Sub Command1_OnClick
MsgBox "Event Routine Fired!"
End Sub
</SCRIPT>

top


World Wide Web Consortium (W3C)

Lots of information is documented on the W3C sites, Here is the W3C FORM reference - http://www.w3.org/TR/html4/interact/forms.html#h-17.3 - where you can read -

17.3 The FORM element

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- server-side form handler --
  method      (GET|POST)     GET       -- HTTP method used to submit the form--
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #IMPLIED  -- list of MIME types for file upload --
  name        CDATA          #IMPLIED  -- name of form for scripting --
  onsubmit    %Script;       #IMPLIED  -- the form was submitted --
  onreset     %Script;       #IMPLIED  -- the form was reset --
  accept-charset %Charsets;  #IMPLIED  -- list of supported charsets --
  >

Start tag: required, End tag: required

Attributes defined elsewhere

The FORM element acts as a container for controls.

... and on to next ...

17.4 The INPUT element

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX |
    RADIO | SUBMIT | RESET |
    FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!-- attribute name required for all but submit and reset -->
<!ELEMENT INPUT - O EMPTY              -- form control -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %InputType;    TEXT      -- what kind of widget is needed --
  name        CDATA          #IMPLIED  -- submit as part of form --
  value       CDATA          #IMPLIED  -- Specify for radio buttons and checkboxes --
  checked     (checked)      #IMPLIED  -- for radio buttons and check boxes --
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED  -- for text and passwd --
  size        CDATA          #IMPLIED  -- specific to each type of field --
  maxlength   NUMBER         #IMPLIED  -- max chars for text fields --
  src         %URI;          #IMPLIED  -- for fields with images --
  alt         CDATA          #IMPLIED  -- short description --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  ismap       (ismap)        #IMPLIED  -- use server-side image map --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  accept      %ContentTypes; #IMPLIED  -- list of MIME types for file upload --
  >

Start tag: required, End tag: forbidden

Attribute definitions

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]
This attribute specifies the type of control to create. The default value for this attribute is "text".
name = cdata [CI]
This attribute assigns the control name.
value = cdata [CA]
This attribute specifies the initial value of the control. It is optional except when the type attribute has the value "radio" or "checkbox".
size = cdata [CN]
This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.
maxlength = number [CN]
When the type attribute has the value "text" or "password", this attribute specifies the maximum number of characters the user may enter. This number may exceed the specified size, in which case the user agent should offer a scrolling mechanism. The default value for this attribute is an unlimited number.
checked [CI]
When the type attribute has the value "radio" or "checkbox", this boolean attribute specifies that the button is on. User agents must ignore this attribute for other control types.
src = uri [CT]
When the type attribute has the value "image", this attribute specifies the location of the image to be used to decorate the graphical submit button.

Attributes defined elsewhere

17.4.1 Control types created with INPUT

The control type defined by the INPUT element depends on the value of the type attribute:

text
Creates a single-line text input control.
password
Like "text", but the input text is rendered in such a way as to hide the characters (e.g., a series of asterisks). This control type is often used for sensitive input such as passwords. Note that the current value is the text entered by the user, not the text rendered by the user agent.

Note. Application designers should note that this mechanism affords only light security protection. Although the password is masked by user agents from casual observers, it is transmitted to the server in clear text, and may be read by anyone with low-level access to the network.

checkbox
Creates a checkbox.
radio
Creates a radio button.
submit
Creates a submit button.
image
Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches:

reset
Creates a reset button.
button
Creates a push button. User agents should use the value of the value attribute as the button's label.
hidden
Creates a hidden control.
file
Creates a file select control. User agents may use the value of the value attribute as the initial file name.

... and on .. and on .. and on ...

top


Other HTML / Javascript References

A. Sample of information from -

JavaScript: The Definitive Guide
By David Flannagan; ISBN: 1-56592-235-2, 637 pages.
Second Edition, January 1997

<sample>
Synopsis
document.anchors.length
document.anchors[i]
HTML Syntax
An Anchor object is created by any standard HTML <A> tag that contains a <NAME> attribute:
<A
NAME="anchor_name" links may refer to this anchor by this name
[ HREF=URL ] an anchor may also be a link
[ TARGET="window_name" ] links may refer to other windows
>
link text
</A>
</sample>

B. Sample of information from

<quote>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings.
</quote>

<samples>

SELECT - Option Selector

Syntax <SELECT>...</SELECT>
Attribute Specifications
  • NAME=CDATA (key in submitted form)
  • MULTIPLE (allow multiple selections)
  • SIZE=Number (number of visible options)
  • DISABLED (disable element)
  • TABINDEX=Number (position in tabbing order)
  • ONFOCUS=Script (element received focus)
  • ONBLUR=Script (element lost focus)
  • ONCHANGE=Script (element value changed)
  • common attributes
Contents One or more OPTGROUP or OPTION elements
Contained in Block-level elements, inline elements except BUTTON

The SELECT element defines a form control for the selection of options. While SELECT is most useful within a FORM, HTML 4.0 allows SELECT in any block-level or inline element other than BUTTON. However, Netscape Navigator will not display any SELECT elements outside of a FORM.

</sample>

The references are, of course a mixture of HTML code, so you can know where javascript can alter the contents of a page ... ;=))

AJR INW = http://www.irt.org/script/window.htm

top


checked by tidy  Valid HTML 4.01 Transitional