mozilla

Compare Revisions

Getting Started (JavaScript Tutorial)

Change Revisions

Revision 464339:

Revision 464339 by sdpope on

Revision 465407:

Revision 465407 by kscarfone on

Title:
Getting Started (Javascript Tutorial)
Getting Started (Javascript Tutorial)
Slug:
Web/JavaScript/Getting_Started
Web/JavaScript/Getting_Started
Tags:
"NeedsContent", "Fixit", "script", "JavaScript"
"NeedsContent", "Fixit", "script", "JavaScript", "Tutorial"
Content:

Revision 464339
Revision 465407
n11      JavaScript is a powerful, complicated and often misunderston11      JavaScript is a powerful, complicated, and often misunderst
>od computer language. It enables the rapid development of applica>ood computer language. It enables the rapid development of applic
>tions in which users can enter data and view results easily.>ations in which users can enter data and view results easily.
12    </p>
13    <p>12    </p>
13    <p>
14      The primary advantage to JavaScript, which is also known as14      The primary advantage to JavaScript, which is also known as
> ECMAScript, centers around the Web browser, thus having the abil> ECMAScript, centers around the Web browser, thus having the abil
>ity to produce the same results on all platforms supported by the>ity to produce the same results on all platforms supported by the
> browser. The examples on this page, just like Google Maps, run o> browser. The examples on this page, just like Google Maps, run o
>n Linux, Windows and the Mac OS. With the recent growth of numero>n Linux, Windows, and Mac OS. With the recent growth of numerous 
>us javascript libraries it is now easier to navigate a document, >JavaScript libraries it is now easier to navigate a document, sel
>select DOM elements, create animations, handle events, and develo>ect DOM elements, create animations, handle events, and develop A
>p Ajax applications. Unlike the hype around other technologies pu>jax applications. Unlike the hype around other technologies pushe
>shed by various proprietary interests, JavaScript is really the o>d by various proprietary interests, JavaScript is really the only
>nly cross-platform, client-side programming language that is both> cross-platform, client-side programming language that is both fr
> free and universally adopted.>ee and universally adopted.
n23      There are many other technologies that can be integrated inn23      There are many other technologies that can be integrated in
>to and developed along with JavaScript that are beyond the scope >to and developed along with JavaScript that are beyond the scope 
>of this document. Don't expect to make a whole application like G>of this document. Don't expect to make a whole application like G
>oogle maps all on your first day!>oogle Maps all on your first day!
n26      Getting Startedn26      Getting started
27    </h2>
28    <p>27    </h2>
28    <p>
29      Getting started with JavaScript is very easy. You don't hav29      Getting started with JavaScript is very easy. You don't hav
>e to have complicated development programs installed. You don't h>e to have complicated development programs installed. You don't h
>ave to know how to use a shell, program Make or use a compiler. J>ave to know how to use a shell, program Make, or use a compiler. 
>avaScript is interpreted by your Web browser. All you have to do >JavaScript is interpreted by your Web browser. All you have to do
>is save your program as a text file and then open it up in your W> is save your program as a text file and then open it up in your 
>eb browser. That's it!>Web browser. That's it!
30    </p>
31    <p>30    </p>
31    <p>
32      JavaScript is a great programming language for introductory32      JavaScript is a great programming language for introductory
> computer languages. It allows instant feedback to the new studen> computer languages. It allows instant feedback to the new studen
>t and teaches them about tools they will likely find useful in th>t and teaches them about tools they will likely find useful in th
>eir real life. This is in stark contrast to C, C++ and Java which>eir real life. This is in stark contrast to C, C++, and Java whic
> are really only useful for dedicated software developers.>h are really only useful for dedicated software developers.
n35      Browser Compatibility Issuesn35      Browser compatibility issues
36    </h2>
37    <p>36    </h2>
37    <p>
38      There are variations between what functionality is availabl38      There are variations between what functionality is availabl
>e in the different browsers. Mozilla, Microsoft IE, Apple Safari >e in the different browsers. Mozilla, Microsoft IE, Apple Safari,
>and Opera fluctuate in the behavior. We intend on <a href="/en-US> and Opera fluctuate in behavior. We intend on <a href="/en-US/do
>/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Comp>cs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compati
>atibility">documenting these variations</a>. You can mitigate the>bility">documenting these variations</a>. You can mitigate these 
>se issues by using the various cross platform JavaScript APIs tha>issues by using the various cross-platform JavaScript APIs that a
>t are available. These APIs provide common functionality and hide>re available. These APIs provide common functionality and hide th
> these browser fluctuations from you.>ese browser fluctuations from you.
n41      How to try the Examplesn41      How to try the examples
n53      The specifics of event handling (event types, handler regisn53      The specifics of event handling (event types, handler regis
>tration, propagation, etc) are too extensive to be fully covered >tration, propagation, etc.) are too extensive to be fully covered
>in this simple example. However this example cannot demonstrate c> in this simple example. However, this example cannot demonstrate
>atching a mouse click without delving a little into the JavaScrip> catching a mouse click without delving a little into the JavaScr
>t event system. Just keep in mind that this example will only gra>ipt event system. Just keep in mind that this example will only g
>ze the full details about JavaScript events and that if you wish >raze the full details about JavaScript events and that if you wis
>to go beyond the basic capabilities described here to read more a>h to go beyond the basic capabilities described here, read more a
>bout the JavaScript event system.>bout the JavaScript event system.
54    </p>
55    <p>54    </p>
55    <p>
56      'Mouse' events are a subset of the total events issued by a56      'Mouse' events are a subset of the total events issued by a
> Web browser in response to user actions. The following is a list> Web browser in response to user actions. The following is a list
> of the the events emitted in response to a user's mouse action:> of the events emitted in response to a user's mouse action:
n97      Additionally, the event object which is issued can be captun97      Additionally, the event object which is issued can be captu
>red and referenced; providing the developer with access to specif>red and referenced, providing the developer with access to specif
>ics about the event such as which object received the event, the >ics about the event such as which object received the event, the 
>event's type, and which mouse button was clicked. Using the inlin>event's type, and which mouse button was clicked. Using the inlin
>e example again:>e example again:
n103    /* the following is for compatability */n103    /* the following is for compatibility */
n114      In addition to registering to receive events in your HTML yn114      In addition to registering to receive events in your HTML
>ou can likewise set the same attributes of any HTMLElement object>you can likewise set the same attributes of any HTMLElement objec
>s generated by your JavaScript. The example below instantiates a >ts generated by your JavaScript. The example below instantiates a
>span object, appends it to the page body, and registers the span > span object, appends it to the page body, and registers the span
>object to receive mouse-over, mouse-out, mouse-down, and mouse-up> object to receive mouse-over, mouse-out, mouse-down, and mouse-u
> events.>p events.
n120    /* The following is for compatability */n120    /* The following is for compatibility */
n170      <li>TextInput (available in Webkit browsers only at time ofn170      <li>TextInput (available in Webkit browsers only at time of
> writing) - issued when text is input either by pasting, speaking> writing) - issued when text is input either by pasting, speaking
> or keyboard. This event will not be covered in this article.>, or keyboard. This event will not be covered in this article.
n174      In a <a class="new" href="/en-US/docs/DOM/event/keypress" rn174      In a <a class="new" href="/en-US/docs/DOM/event/keypress" r
>el="internal">keypress</a> event, the Unicode value of the key pr>el="internal">keypress</a> event, the Unicode value of the key pr
>essed is stored in either the <code>keyCode</code> or <code><a hr>essed is stored in either the <code>keyCode</code> or <code><a hr
>ef="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></>ef="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></
>code> property; never both. If the key pressed generates a charac>code> property, never both. If the key pressed generates a charac
>ter (e.g. 'a'), <code>charCode</code> is set to the code of that >ter (e.g., 'a'), <code>charCode</code> is set to the code of that
>character, respecting the letter case. (i.e. <code>charCode</code> character, respecting the letter case (i.e., <code>charCode</cod
>> takes into account whether the shift key is held down). Otherwi>e> takes into account whether the shift key is held down). Otherw
>se, the code of the pressed key is stored in <code>keyCode</code>>ise, the code of the pressed key is stored in <code>keyCode</code
>.>>.
n195      Capturing the event and referencing the target (i.e. the acn195      Capturing the event and referencing the target (i.e., the a
>tual key that was pressed) is achieved in a similar way to mouse >ctual key that was pressed) is achieved in a similar way to mouse
>events:> events:
n262      The way in which browsers interpret the charCode is not a cn262      The way in which browsers interpret the charCode is not a c
>onsistently-applied process. For example, Internet Explorer and O>onsistently-applied process. For example, Internet Explorer and O
>pera do not support <code>charCode</code>. However, they give the>pera do not support <code>charCode</code>. However, they give the
> character information in <code>keyCode</code>, but only onkeypre> character information in <code>keyCode</code>, but only onkeypre
>ss. Onkeydown and -up <code>keyCode</code> contains key informati>ss. Onkeydown and onkeyup <code>keyCode</code> contain key inform
>on. Firefox uses a different word, "which", to distinguish the ch>ation. Firefox uses a different word, "which", to distinguish the
>aracter.> character.
n274      The following example allows moving the image of firefox arn274      The following example allows moving the image of Firefox ar
>ound the page.>ound the page:
n287  movMeId=document.getElementById("ImgMov");n287  movMeId = document.getElementById("ImgMov");
n292  document.onmouseup=mouseup;n292  document.onmouseup = mouseup;
n308      document.onmousemove=moveImage;n308      document.onmousemove = moveImage;
n340      Example of resizing an image. (PS: The actual image is not n340      Example of resizing an image (the actual image is not resiz
>resized, but only the image's rendering is.)>ed, only the image's rendering.)
t372          if (element.id=="resizeImage") {t372          if (element.id == "resizeImage") {

Back to History