Client-side JavaScript: Difference between revisions
Content deleted Content added
m Dating maintenance tags: {{Neologism}} |
Thumperward (talk | contribs) redirect to main article. insufficient sourced material to warrant a split here |
||
| Line 1: | Line 1: | ||
#REDIRECT [[JavaScript#Uses outside web pages]] |
|||
{{neologism|date=November 2011}} |
|||
'''Client-side JavaScript''' ('''CSJS''') is [[JavaScript]] that runs on the [[client-side]]. While JavaScript was originally created to run this way, the term was coined because the language is no longer limited to just client-side, since [[server-side JavaScript]] (SSJS) is now available. |
|||
==Environment== |
|||
The most common [[Internet media type]] attribute for JavaScript source code is <code>text/javascript</code>, which follows [[HTML 4.01]] and [[HTML 5]] specifications and is supported by all major browsers. In 2006, <code>application/javascript</code> was also registered, though [[Internet Explorer]] versions [[Internet Explorer 6|6]] through [[Internet Explorer 8|8]] do not recognize scripts with this attribute. When no type attribute is specified in a script tag, the type value is by default "text/javascript" per HTML 5 specification. |
|||
To embed JavaScript code in an [[HTML]] document, it must be within a {{tag|script|open}} element. |
|||
<source lang="html4strict"> |
|||
<script type="text/javascript"> |
|||
...JavaScript code here... |
|||
</script> |
|||
</source> |
|||
In the 1990s and early 2000s, HTML comment marks within the {{tag|script|open}} tags (<tt><!--</tt> ... <tt>--></tt>) was sometimes required to ensure that the code was not rendered as text by old browsers that did not recognize the {{tag|script|open}} tag at all. The [[Deprecation|deprecated]] HTML attribute <tt>language="javaScript"<tt> was also required for some such browsers.<ref>{{cite web|title=Scripts|url=http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html|work=HTML 4.01 Specification|publisher=[[W3C]]|accessdate=12 March 2011|author=Dave Raggett|coauthors=Arnaud Le Hors, Ian Jacobs|date=24 December 1999}}</ref> |
|||
JavaScript in [[XHTML]] and [[XML]] documents should be in XML [[CDATA]] sections, as follows |
|||
<source lang="html4strict"> |
|||
<script type="text/javascript"> |
|||
//<![CDATA[ |
|||
...JavaScript code here... |
|||
//]]> |
|||
</script> |
|||
</source> |
|||
(A double-slash <code>//</code> at the start of a line marks a JavaScript comment, which prevents the <code><nowiki><![CDATA[</nowiki></code> and <code><nowiki>]]></nowiki></code> from being parsed by the script.)<ref>{{cite web|title=Script and Style elements|url=http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8|work=XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)|publisher=W3C|accessdate=12 March 2011|date=26 January 2000, revised 1 August 2002}}</ref> |
|||
It is best practice for various reasons to reference JavaScript in external script files, e.g.: |
|||
<source lang="html4strict"> |
|||
<script type="text/javascript" src="hello.js"></script> |
|||
</source> |
|||
To write valid HTML 4.01, the web server should return a 'Content-Script-Type' with value 'text/javascript'. If the web server cannot be so configured, the website author can optionally insert the following declaration for the default scripting language in the header section of the document. |
|||
<source lang="html4strict"> |
|||
<meta http-equiv="Content-Script-Type" content="text/javascript" /> |
|||
</source> |
|||
==Hello World example== |
|||
For an explanation of the tradition of programming "Hello World", as well as alternatives to this simplest example, see [[Hello world program]]. |
|||
This is the easiest method for a Hello world program that involves using popular browsers' support for the ''javascript'' [[URI scheme]] to execute JavaScript code. Enter the following as an Internet address (usually by pasting into the address box): |
|||
<source lang="javascript"> |
|||
javascript:alert('Hello, world!'); |
|||
</source> |
|||
==DOM binding== |
|||
===User interaction=== |
|||
Most interaction with the user is done by using [[HTML]] forms which can be accessed through the HTML [[Document Object Model|DOM]]. |
|||
However there are also some very simple means of communicating with the user: |
|||
*[[Alert dialog box]] |
|||
*Confirm [[dialog box]], prompt dialog box |
|||
*[[Status bar]] |
|||
*[[Console]] |
|||
=== Events === |
|||
Element nodes may be the source of various [[Event-driven programming|event]]s which can cause an action if a JavaScript [[event handler]] is registered. These event handler functions are often defined as anonymous functions directly within the element node. |
|||
See also [[DOM Events]] and [[XML Events]]. |
|||
==Incompatibilities== |
|||
{{Unreferenced section|date=June 2011}} |
|||
Most incompatibilities are not JavaScript issues but [[Document Object Model]] (DOM) specific. The JavaScript implementations of the most popular web browsers usually adhere to the [[ECMAScript]] standard, such that most incompatibilities are part of the DOM implementation. Some incompatibility issues that exist across JavaScript implementations include the handling of certain primitive values like "undefined", and the availability of methods introduced in later versions of ECMAScript, such as the .pop(), .push(), .shift(), and .unshift() methods of arrays. |
|||
JavaScript, like HTML, is often not compliant to standards, instead being built to work with specific web browsers. The current ECMAScript standard should be the base for all JavaScript implementations in theory, but in practice the [[Mozilla]] family of browsers ([[Mozilla]], [[Mozilla Firefox|Firefox]] and [[Netscape Navigator]]) use ''JavaScript'', Microsoft Internet Explorer uses ''JScript'', and other browsers such as [[Opera (web browser)|Opera]] and [[Safari (web browser)|Safari]] use other ''ECMAScript'' implementations, often with additional nonstandard properties to allow [[compatibility]] with JavaScript and JScript. |
|||
JavaScript and JScript contain several properties{{Clarify|date=June 2011}} which are not part of the official ECMAScript standard, and may also miss several properties. As such, they are in points incompatible, which requires script authors to work around these bugs. JavaScript is more standards-compliant than [[Microsoft]]'s JScript, which means that a script file written according to the ECMA standards is less likely to work on browsers based on Internet Explorer. |
|||
This also means every browser may treat the same script differently, and what works for one browser may fail in another browser, or even in a different version of the same browser. As with HTML, it is thus advisable to write standards-compliant code. |
|||
==Combating incompatibilities== |
|||
{{Unreferenced section|date=June 2011}} |
|||
There are two primary techniques for handling incompatibilities: ''[[browser sniffing]]'' and ''object detection''. When there were only two browsers that had scripting capabilities (Netscape Navigator and Microsoft Internet Explorer), browser sniffing was the most popular technique. By testing a number of "client" properties, that returned information on computer platform, browser, and versions, it was possible for a scripter's code to discern exactly which browser the code was being executed in. Later, the techniques for ''sniffing'' became more difficult to implement, as Internet Explorer began to "spoof" its client information, that is, to provide browser information that was increasingly inaccurate (the reasons why Microsoft did this are often disputed). Later still, browser sniffing became something of a difficult art form, as other scriptable browsers came onto the market, each with its own platform, client, and version information. |
|||
Object detection relies on testing for the existence of a property of an object. |
|||
<source lang="JavaScript"> |
|||
function setImageSource(imageName, imageUrl) { |
|||
// a test to discern if the 'document' object has a property called 'images' |
|||
// which value type-converts to boolean true (as object references do) |
|||
if (document.images) { |
|||
// only executed if there is an 'images' collection |
|||
document.images[imageName].src = imageUrl; |
|||
} |
|||
} |
|||
</source> |
|||
A more complex example relies on using joined boolean tests: |
|||
<source lang="JavaScript"> |
|||
if (document.body && document.body.style) { |
|||
// ... |
|||
} |
|||
</source> |
|||
In the above, the statement "<code>document.body.style</code>" would ordinarily cause an error in a browser that does not have a "<code>document.body</code>" property, but using the boolean operator "<code>&&</code>" ensures that "<code>document.body.style</code>" is never called if "document.body" doesn't exist. This technique is called [[minimal evaluation]]. |
|||
Today, a combination of browser sniffing, object detection, and reliance on standards such as the ECMAScript specification and [[Cascading Style Sheets]] are all used to varying degrees to try to ensure that a user never sees a JavaScript error message. |
|||
==Frameworks== |
|||
{{main|List of web application frameworks#JavaScript|l1=List of client-side JavaScript frameworks}} |
|||
==See also== |
|||
* [[JavaScript syntax]] |
|||
* [[Bookmarklet]] |
|||
* [[Document Object Model]] (DOM) |
|||
* [[Comparison of JavaScript frameworks]] |
|||
* [[SWFObject]], a JavaScript library used to embed [[Adobe Flash]] content into webpages. |
|||
==References== |
|||
{{reflist|2}} |
|||
==External links== |
|||
===Resources=== |
|||
*[http://www.hotajax.org Examples and demo of JavaScript] |
|||
*[http://www.quirksmode.org QuirksMode - for all your browser quirks] |
|||
*[http://groups-beta.google.com/group/comp.lang.javascript comp.lang.javascript newsgroup] |
|||
*[http://www.html-world.de/program/js_obj.php HTMLWorld - JavaScript Objects - Overview on all JavaScript objects] (German) |
|||
*[http://www.seehowitruns.net seehowitruns.net - queryable database of browser JavaScript support] |
|||
*[http://modp.com/release/jsmodaldialogs/ Examples of Modal Dialog boxes with JavaScript] |
|||
===Libraries=== |
|||
*[http://www.javascripttoolbox.com/ The JavaScript Toolbox]: A collection of libraries solving common problems such as date pickers, color pickers, dynamic option lists, tree structures, date formatting and validation, form utils, etc. |
|||
*[http://javascript.internet.com/ Free JavaScript tutorials, reference, code, and help] |
|||
*[http://www.javascript-2.com/ JavaScript Search Engine] |
|||
*[http://www.scriptomizers.com/scripts/javascript JavaScript Code Generators] |
|||
===Tools=== |
|||
* [http://modp.com/release/jsstrip/ JavaScript whitespace stripper] |
|||
* [http://jsc.sourceforge.net/ c# to javascript (source generator)] |
|||
* [http://seewah.blogspot.com/2009/11/javascript-tester-igoogle-gadget.html Simple JavaScript Tester iGoogle Gadget] |
|||
===Cooperation with=== |
|||
*[http://pear.php.net/package-info.php?pacid=93 PHP] |
|||
*[http://tcllib.sourceforge.net/doc/javascript.html TCL] |
|||
*[http://search.cpan.org/dist/Data-JavaScript/JavaScript.pm Perl] |
|||
{{ECMAScript}} |
|||
{{Use dmy dates|date=June 2011}} |
|||
[[Category:JavaScript]] |
|||
[[ar:جافا سكربت-جهة المستخدم]] |
|||
Revision as of 12:52, 9 December 2011
Redirect to: