Integrate JavaScript on webpages - Revision history

Michael: /* External JavaScript */

2009-11-18T20:36:49Z

External JavaScript

← Older revision		Revision as of 20:36, 18 November 2009
Line 56:		Line 56:
	</head>		</head>
	</source>		</source>

			Another great advantage of this approach is that the JavaScript source file can be cached by the browser. If you host e.g. a content management system on your web server with some fancy JavaScript in it, you definitely don't want the web server to deliver the whole JavaScript code on every page load. If you put it in an external file accessible on every page of your home page the browser can cache it. Hence, the pages can be loaded faster, traffic on server and client side is reduced.

	==Inline JavaScript==		==Inline JavaScript==

Michael at 18:09, 14 July 2009

2009-07-14T18:09:28Z

← Older revision		Revision as of 18:09, 14 July 2009
Line 1:		Line 1:
			{{JSTuTToC}}
	There are several ways to integrate JavaScript-Code in a webpage: JavaScript integrated directly in the webpage, but in a separate HTML script-tag, an external .js file loaded with a tag, and inline JavaScript which is put directly in other HTML tags. Every method has it's advantages and may be used only under certain circumstances.		There are several ways to integrate JavaScript-Code in a webpage: JavaScript integrated directly in the webpage, but in a separate HTML script-tag, an external .js file loaded with a tag, and inline JavaScript which is put directly in other HTML tags. Every method has it's advantages and may be used only under certain circumstances.

Michael: /* Inline JavaScript */

2009-07-14T17:43:34Z

Inline JavaScript

← Older revision		Revision as of 17:43, 14 July 2009
Line 59:		Line 59:
	To link HTML tags with JavaScript one can use inline JavaScript. Inline JavaScript is given in certain attributes in HTML tags, e.g. '''onclick''', '''onmouseup''', ...:		To link HTML tags with JavaScript one can use inline JavaScript. Inline JavaScript is given in certain attributes in HTML tags, e.g. '''onclick''', '''onmouseup''', ...:
	<source lang="xml">		<source lang="xml">
	<script type="text/javascript">		<script type="text/javascript">
	/* <![CDATA[ */		/* <![CDATA[ */
	function click() {		function click() {
Line 65:		Line 65:
	}		}
	/* ]]> */		/* ]]> */
	</script>		</script>
	<a href="http://www.example.com" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>		<a href="http://www.example.com" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>
	</source>		</source>
	See this example in action:		See this example in action:

Michael: /* Inline JavaScript */

2009-07-14T17:42:28Z

Inline JavaScript

← Older revision		Revision as of 17:42, 14 July 2009
Line 92:		Line 92:
	</body>		</body>
	</html>		</html>

			Examples for such attributes are (they are pretty self-explanatory): ''onchange, onmouseover, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onunload''

Michael at 17:29, 14 July 2009

2009-07-14T17:29:10Z

← Older revision		Revision as of 17:29, 14 July 2009
Line 57:		Line 57:

	==Inline JavaScript==		==Inline JavaScript==
			To link HTML tags with JavaScript one can use inline JavaScript. Inline JavaScript is given in certain attributes in HTML tags, e.g. '''onclick''', '''onmouseup''', ...:
			<source lang="xml">
			<script type="text/javascript">
			/* <![CDATA[ */
			function click() {
			alert("mouse clicked");
			}
			/* ]]> */
			</script>
			<a href="http://www.example.com" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>
			</source>
			See this example in action:

			<html>
			<body>
			<script type="text/javascript">
			/* <![CDATA[ */
			function click() {
			alert("mouse clicked");
			}
			/* ]]> */
			</script>
			<a href="http://www.example.com" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>
			</body>
			</html>

			To use a link just for JavaScript, simply put '''#''' into ''href'' attribute:
			<source lang="xml">
			<a href="#" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>
			</source>
			<html>
			<body>
			<a href="#" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>
			</body>
			</html>

Michael at 05:28, 14 July 2009

2009-07-14T05:28:54Z

← Older revision		Revision as of 05:28, 14 July 2009
Line 3:		Line 3:
	First let's take a look at the		First let's take a look at the
	==Internal JavaScript==		==Internal JavaScript==
	This method is good for small to medium sized programs, that are only to be included on a single webpage. For that script tags are used:		This method is good for small to medium sized programs, that are only to be included in a single webpage. For that script tags are used:
	<source lang="xml">		<source lang="xml">
	<script type="text/javascript">		<script type="text/javascript">
Line 9:		Line 9:
	</script>		</script>
	</source>		</source>
	The type attribute given tells the browser the mime type enclosed by the script tag. There are no rules about where to place a script tag on a HTML page. It's only important to put the JavaScript code '''after''' the HTML tags that are accessed by DOM functions in the ~~program~~. E.g.:		The type attribute given tells the browser the mime type of the data enclosed by the script tag. There are no rules about where to place a script tag on a HTML page. It's only important to put the JavaScript code '''after''' the HTML tags that are accessed by DOM functions in the script. E.g.:
	<source lang="xml">		<source lang="xml">
	<html>		<html>

Michael at 20:49, 10 July 2009

2009-07-10T20:49:51Z

@@ Line 9: / Line 9: @@
 </script>
 </source>
-The type attribute given tells the browser the mime type enclosed by the script tag. Some of you already may have seen such script tags and may wonder about the javascript code being enclosed by further characters inside the script tag.
+The type attribute given tells the browser the mime type enclosed by the script tag. There are no rules about where to place a script tag on a HTML page. It's only important to put the JavaScript code '''after''' the HTML tags that are accessed by DOM functions in the program. E.g.:
 <source lang="xml">
 <script type="text/javascript">
@@ Line 31: / Line 44: @@
 Another way to prevent the PCDATA issue in XHTML is to use
 ==External JavaScript==
 ==Inline JavaScript==

Michael: New page: There are several ways to integrate JavaScript-Code in a webpage: JavaScript integrated directly in the webpage, but in a separate HTML script-tag, an external .js file loaded with a tag, ...

2009-07-10T20:22:28Z

New page: There are several ways to integrate JavaScript-Code in a webpage: JavaScript integrated directly in the webpage, but in a separate HTML script-tag, an external .js file loaded with a tag, ...

New page

There are several ways to integrate JavaScript-Code in a webpage: JavaScript integrated directly in the webpage, but in a separate HTML script-tag, an external .js file loaded with a tag, and inline JavaScript which is put directly in other HTML tags. Every method has it's advantages and may be used only under certain circumstances.

First let's take a look at the
==Internal JavaScript==
This method is good for small to medium sized programs, that are only to be included on a single webpage. For that script tags are used:
<source lang="xml">
<script type="text/javascript">
// JavaScript code goes here
</script>
</source>
The type attribute given tells the browser the mime type enclosed by the script tag. Some of you already may have seen such script tags and may wonder about the javascript code being enclosed by further characters inside the script tag.
<source lang="xml">
<script type="text/javascript">

</script>
</source>
or
<source lang="xml">
<script type="text/javascript">
/* <![CDATA[ */
// JavaScript code goes here
/* ]]> */
</script>
</source>
The first one is from early browser days when not all browsers knew how to handle the script tags. To prevent the JavaScript program being visible to the user as part of the webpage the programmers enclosed their JavaScript program with HTML multi line comments <tt></tt> (end multi line comment, the <tt>//</tt> is for the JavaScript capable browsers to not interpret the <tt>--></tt> as JavaScript code). Nowadays these HTML comments are not needed because all major browsers know about script tags and know how to handle it's content.

The second enclosement is needed if you want to use the script tags in a XHTML page. In HTML the script tag may contain only CDATA (character data), that simply means the content of the script tag is not parsed by the HTML parser. In XHTML standard the script tags may contain PCDATA (parsed character data), that means the XHTML parser trys to interpret characters like <, >, and & which will appear very often in a JavaScript program possibly causing parser errors. To prevent the code being interpreted by the parser you have to declare the content of the script as a CDATA section which is done with the tags <tt><![CDATA[</tt> (open CDATA section) and <tt>]]></tt> (end CDATA section). The JavaScript comments <tt>/*</tt> and <tt>*/</tt> are used to prevent the JavaScript interpreter from parsing the CDATA tag.

Another way to prevent the PCDATA issue in XHTML is to use
==External JavaScript==

==Inline JavaScript==