Erik Østergaard - Distributed JScript - Inline Script & Style

Distributed JScript - Inline Script and Distributed Style - Cascading Style Sheets (CSS)

Distributed JScript - Inline Script

Format Number: The test-button formats the digit two to be shown as a three digits number with leading zero's based on a distributed JScript (Inline Script).

Distributed Style - TEST

Distributed Style - Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) are sets of HTML document style sheets (CSS) that enable HTML writers to change a document's format and look - and the Style you use may be distributed across several documents.

Samples:

Save the file as: "eoepkey.pgp".

Test af 'P.first' med 'CLASS="first"'.

Test af 'P.heading' med 'CLASS="heading"'.

Test af 'P.text' med 'CLASS="text"'.

Test af 'P.redtext' med 'CLASS="redtext"'.

Test af 'P.local' med 'CLASS="local"'.

Image's border-color - and "Style"

Test of setting an image's border-color with "Style"
	Image with no border.
	Image with a border.
	Image with a link and no border.
	Image with a link and a border.
	Image with a link with target="_self" and a border.

Unordered List / Ordered List - and "Style"

Test of setting (and not at the same time unintended setting) an "Unordered (bulleted) List" and "Ordered (numbered) List" with "Style"

• Headingtext Text.
• Headingtext Text.
• Text.
• Headingtext Text.
• Text.
• Text.
• Text.

Tips:

• Headingtext Text:
• Text Bold-Text Text.
• Text Bold-Text Text.
• Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
• Text.
• Headingtext Text.
• Text.
• Headingtext Text.
• Text.
• Text.
• Headingtext Text.
• Text.
• Text.
• Headingtext Text.
• Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.

• Headingtext Text.
• Headingtext Text.
• Text.
• Headingtext Text.
• Text.
• Text.
• Text.

1. Headingtext Text.
1. Headingtext Text.
2. Text.
1. Headingtext Text.
2. Text.
2. Text.
3. Text.

Mark as new and Mark as update / Marker som ny og Marker som opdatering

1. Text. / Tekst.
2. Text. / Tekst.
3. Text. / Tekst.
4. Text. / Tekst.
5. Text. / Tekst. New! 
6. Text. / Tekst. Updated 

<span class="markAsNew" title="New / Ny">&nbsp;New!&nbsp;</span>
<span class="markAsUpdate" title="Updated / Opdateret">&nbsp;Updated&nbsp;</span>

Conventions used for: Source code syntax highlighting. / Regler brugt til: Kildekode syntaks fremhævning.

If you use 'text' instead of graphic files saying "new" and "updated" on a website the user can then, depending on what text is displayed, for example search the page for the word "new" or "updated" instead of having to scroll down the page. This should be much more easy to use for a visitor on a page. It is not possible for a visitor to search for the graphic file on a page. Note that the tip-text are showing just as if you use a graphic file when you place the mouse pointer over the text. / Hvis man bruger 'tekst' i stedet for grafiske filer, som viser "ny" og "opdateret" på en hjemmeside, så kan brugeren derefter, afhængig af hvilken tekst der vises, for eksempel søge siden for ordet "ny" eller "opdateret" i stedet for at skulle rulle ned på siden. Dette skulle være meget lettere at bruge for en besøgende på en side. Det er ikke muligt for en besøgende at søge efter den grafiske fil på en side. Bemærk, at tip-teksten vises, ligesom hvis man bruger en grafisk fil, når man placerer muse-markøren over teksten.

See example number 5 and 6 above. / Se eksempel nummer 5 og 6 ovenfor.

Style source code without Distributed "Style source code"

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript Applet and hide from old browsers -----

alert('Hello World!');

// - End of JavaScript code and done hiding -->
</SCRIPT>

Conventions used for: Source code syntax highlighting.

Style source code with Distributed "Style source code"

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript Applet and hide from old browsers -----

alert('Hello World!');

// - End of JavaScript code and done hiding -->
</SCRIPT>

Conventions used for: Source code syntax highlighting.

Distributed JavaScript (JScript) - Inline Script and
Distributed Style - Cascading Style Sheets (CSS)

Loading an external JavaScript or CSS file

The conventional way to loading external JavaScript (ie: .js) and CSS (ie: .css) files on a page is to stick a reference to them in the <HEAD></HEAD> section of your page, for example:

<HEAD>

<LINK REL="StyleSheet" HREF="./cssheets/inlinejs.css" TYPE="text/css" TITLE="Style inlinejs"></LINK>

<SCRIPT SRC="./jscode/inlinejs.js" LANGUAGE="JavaScript" TYPE="text/javascript"></SCRIPT>

</HEAD>

Conventions used for: Source code syntax highlighting.

where "./cssheets/inlinejs.css" is the name and location URL (Uniform Resource Locator) of your external Cascading Style Sheets file and "Style inlinejs" is the title name of your choice to match and where "./jscode/inlinejs.js" is the name and location URL (Uniform Resource Locator) of your external JavaScript (JScript) file.

Files that are called this way are added to the page as they are encountered in the page's source.

Distributed JScript - Inline Script

Notes from 1997

While we tend to think of a program in terms of a single block of code contained within <SCRIPT></SCRIPT> tags, the JScript you use may be distributed across several documents.

The <SCRIPT> tag allows SRC as an attribute. This means that rather than including the text of your script within the HTML document in which you want it to run, you can store the script in a separate file and reference that file location in the <SCRIPT> tag. Think of it as an inline script being loaded automatically, just as HTML loads inline images automatically from the SRC attribute of the IMG tag:

<SCRIPT LANGUAGE="JavaScript" SRC="myscript.js">

Don't use this means of loading scripts gratuitously. Each script loaded this way requires an extra call to the server, and the delivery of an extra file. Your documents will load more slowly, and you'll increase the load on the server. On the other hand, if you find yourself using the same script on several documents, it can make sense to keep the script in a single file that is referenced in each document. This is particularly true if the script is reasonably short.

For example, some pages on your Web site may contain material that is frequently updated, and users may need to know when a page was last changed. If you have a script for generating a "last updated" message on a Web page called "update.js", then this could be included on each Web page simply by including this line:

<SCRIPT LANGUAGE="JavaScript" SRC="update.js">

NOTE: The SRC attribute for the <SCRIPT> tag suffers from buggy implementation at present. Various reports indicate that it may not work "off-line" on your local hard drive, but only on a Web server; that even on a server, your system administrator may have to configure .js as a recognized file type to serve; that implementation does not work the same under Netscape Navigator as under Internet Explorer. Your experience may vary, and certainly with new versions of Navigator and Explorer coming in the next few months (1996) the implementation should improve, but use this feature with care.

Syntax of the SCRIPT Tag

JScript code is introduced with the SCRIPT tag. Everything between this tag and the closing /SCRIPT tag is assumed to be some kind of client-side script code such as JScript. The syntax for the SCRIPT tag is:

<SCRIPT LANGUAGE="LangName" [SRC="URL"]>

The element LangName gives the language that is used in the subsequent script code; this should be JavaScript. Internet Explorer will also accept JScript and VBScript (for scripts written in the Visual Basic Scripting language). For maximum portability, you should specify your script language as JavaScript. This will give it a fighting chance of running on other browsers that support some version of JavaScript such as Netscape Navigator.

Obsolete: VBScript is no longer supported in Internet Explorer IE11+. / Forældet: VBScript er ikke længere understøttet i Internet Explorer IE11+.

If the SRC attribute is specified, it should reference an URL containing code in the script language. For JScript, this should be a valid URL for a file containing the JScript code. The file name should have the suffix .JS. If the SRC attribute is given, then the <SCRIPT> can be immediately terminated by a </SCRIPT> directive. A <SCRIPT> block that loads JScript code from a file named CLICK.JS in a directory jscode relative to the document base would look like this:

<SCRIPT LANGUAGE="JavaScript" SRC="jscode/click.js">
</SCRIPT>

If the SRC attribute is not given, it is expected that all the code between <SCRIPT> and </SCRIPT> is the script source itself. In the glorious future, when the overwhelming majority of browsers understand the SCRIPT tag, or at least benignly ignore it, the JScript source may be given literally. Until then, it is recommended that source included between <SCRIPT> and </SCRIPT> be enclosed within the HTML comment delimiters <!-- and -->.

Use of HTML Comments

Example:

<SCRIPT LANGUAGE="JScript">
<!--
some JScript code
<!-- end script -->
</SCRIPT>

The important thing to notice about this example is the paradoxical but important use of HTML comments. The entire script body is enclosed with a comment, and the comment close --> is also paired with a second, seemingly redundant, comment start <!-- on the last line. At present (1997), you should structure your script according to the following rules:

• Place the comment start (<!--) on a line of its own.
• Follow it with your JScript code.
• Terminate the code with <!-- and --> on its own line.

It is also possible to terminate the script code with a line like // -->, but the preceding method suggested is a bit more general. You should use this magic incantation not because it makes sense, but because it works. Note that JScript code referenced through an SRC URL should also follow these rules, as if it had literally been included in the <SCRIPT> block. Note also that you may have both a JScript SRC URL and literal JScript between <SCRIPT> and </SCRIPT>. In this case, the URL referenced by the SRC attribute is read and processed before the literal JScript.

NOTE: For Netscape to be able to properly use external JavaScript files, the server on which the files are to reside must have the MIME type application/x-javascript mapped into its list of MIME types (with a suitable extension mapped to it - Netscape recommend ".js") for Netscape to properly respond to the script when it is loaded.