Compare Revisions

Getting Started (Javascript Tutorial)

Revision 355487:

Revision 355487 by saurabhx on

Revision 365287:

Revision 365287 by mplungjan on

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

Revision 355487
Revision 365287
nn77      Note that in the latest versions of HTML, the inline event 
 >handlers, i.e. the ones added as tag attributes, are expected to 
 >be all lowercase and that event handlers in script are always all
 > lowercase.
78    </p>
79    <p>
n87  function onclick_callback () {n90  function clickHandler () {
n91&lt;span onclick="onclick_callback();"&gt;Click Here&lt;/span&gt;n94&lt;span onclick="clickHandler();"&gt;Click Here&lt;/span&gt;
n98  function onclick_callback(event) {n101  function clickHandler(event) {
n108&lt;span onclick="onclick_callback(event);"&gt;Click Here&lt;/span111&lt;span onclick="clickHandler(event);"&gt;Click Here&lt;/span&gt
>n&gt;>;
n116  function mouseevent_callback(event) {n119  function mouseeventHandler(event) {
n128 function onload () {n131 function onloadHandler () {
n136   /* register the span object to receive specific mouse events *n139   /* register the span object to receive specific mouse events -
>/> 
140      notice the lowercase of the events but the free choice in t
 >he names of the handlers you replace them with. 
141   */
137   span.onmousedown = mouseevent_callback;142   span.onmousedown = mouseeventHandler;
138   span.onmouseup = mouseevent_callback;143   span.onmouseup = mouseeventHandler;
139   span.onmouseover = mouseevent_callback;144   span.onmouseover = mouseeventHandler;
140   span.onmouseout = mouseevent_callback;145   span.onmouseout = mouseeventHandler;
n146document.onload = onload();n151window.onload = onloadHandler; // since we replace the handler, w
 >e do NOT have () after the function name
n175  &lt;input type="text" onkeypress="alert ('Hello World!');"&gt;&n180  &lt;input type="text" onkeypress="alert ('Hello World!');" /&gt
>lt;/input&gt;>;
n182  function onkeypress_callback () {n187  function keypressHandler() {
n187&lt;input onkeypress="onkeypress_callback();"&gt;&lt;/input&gt;n192&lt;input onkeypress="keypressHandler();" /&gt;
n194  function onkeypress_callback(evt) {n199  function keypressHandler(evt) {
nn201      /* here we again need to use a cross browser method
202         mozilla based browsers return which and others keyCode.
203         The <a href="/en-US/docs/JavaScript/Reference/Operators/
 >Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Ope
 >rators/Conditional_Operator">Conditional operator</a> or ternary 
 >is a good choice */
204      var keyCode = evt.which?evt.which:evt.keyCode; 
196      var eCode = 'keyCode is ' + evt.keyCode;205      var eCode = 'keyCode is ' + keyCode;
197      var eChar = 'charCode is ' + evt.charCode;206      var eChar = 'charCode is ' + <span class="typ" style="backg
 >round-color: transparent; margin: 0px; padding: 0px; border: 0px;
 > vertical-align: baseline; color: rgb(43, 145, 175);">String</spa
 >n><span class="pun" style="background-color: transparent; color: 
 >rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-al
 >ign: baseline;">.</span><span class="pln" style="background-color
 >: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; bo
 >rder: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode
 >); // or evt.charCode
198 
n202&lt;input onkeypress="onkeypress_callback(event);"&gt;&lt;/input&n210&lt;input onkeypress="keypressHandler(event);" /&gt;
>gt; 
n209  document.onkeypress = key_event(event);n217  document.onkeypress = keypressHandler(event);
210  document.onkeydown = key_event(event);218  document.onkeydown = keypressHandle(event);
211  document.onkeyup = key_event(event)219  document.onkeyup =keypressHandle(event)
212 220 
213  function key_event(evt) {
214      var eType = evt.type;
215      var eCode = "ASCII code is " + evt.keyCode;
216      var eChar = 'charCode is ' + evt.charCode;
217 
218      alert ("Captured Event (type=" + eType + ", key Unicode val
>ue=" + eCode + ", ASCII value=" + eChar + ")"); 
219   }
t233      var key = event.keyCode || event.which;t234      var key = event.keyCode || event.which; // alternative to t
 >ernary - if there is no keyCode, use which

Back to History