mozilla

Compare Revisions

Getting Started (JavaScript Tutorial)

Change Revisions

Revision 44257:

Revision 44257 by cave on

Revision 44258:

Revision 44258 by raleighr on

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

Revision 44257
Revision 44258
n7    <h4 name="Why_JavaScript.3F">n7    <h4 id="Why_JavaScript.3F" name="Why_JavaScript.3F">
n16    <h4 name="What_you_should_already_know">n16    <h4 id="What_you_should_already_know" name="What_you_should_a
 >lready_know">
n25    <h4 name="Getting_Started">n25    <h4 id="Getting_Started" name="Getting_Started">
n34    <h4 name="Browser_Compatibility_Issues">n34    <h4 id="Browser_Compatibility_Issues" name="Browser_Compatibi
 >lity_Issues">
n40    <h4 name="How_to_try_the_Examples">n40    <h4 id="How_to_try_the_Examples" name="How_to_try_the_Example
 >s">
n49    <h4 name="Example:_Catching_a_mouse_click">n49    <h4 id="Example:_Catching_a_mouse_click" name="Example:_Catch
 >ing_a_mouse_click">
n86<code>&lt;script type="text/javascript"&gt;n86<code>&lt;script type="text/javascript"&gt;<br>  function onclick
 >_callback ()<br>  {<br>     alert ("Hello, World!");<br>  }<br>&l
 >t;/script&gt;<br>&lt;span onclick="onclick_callback();"&gt;Click 
 >Here&lt;/span&gt;</code>
87  function onclick_callback ()
88  {
89     alert ("Hello, World!");
90  }
91&lt;/script&gt;
92&lt;span onclick="onclick_callback();"&gt;Click Here&lt;/span&gt;
></code> 
n98<code>&lt;script type="text/javascript"&gt;n92<code>&lt;script type="text/javascript"&gt;<br>  function onclick
 >_callback(event)<br>  {<br>    var eType = event.type;<br>    /* 
 >the following is for compatability */<br>    /* Moz populates the
 > target property of the event object */<br>    /* IE populates th
 >e srcElement property */<br>    var eTarget = event.target || eve
 >nt.srcElement;<br><br>    alert ("Captured Event (type="+ eType +
 >", target="+ eTarget);<br>  }<br>&lt;/script&gt;<br>&lt;span oncl
 >ick="onclick_callback(event);"&gt;Click Here&lt;/span&gt;</code>
99  function onclick_callback(event)
100  {
101    var eType = event.type;
102    /* the following is for compatability */
103    /* Moz populates the target property of the event object */
104    /* IE populates the srcElement property */
105    var eTarget = event.target || event.srcElement;
106 
107    alert ("Captured Event (type="+ eType +", target="+ eTarget);
108  }
109&lt;/script&gt;
110&lt;span onclick="onclick_callback(event);"&gt;Click Here&lt;/spa
>n&gt;</code> 
n116<code>&lt;script type="text/javascript"&gt;n98<code>&lt;script type="text/javascript"&gt;<br>  function mouseev
 >ent_callback(event)<br>  {<br>    /* The following is for compata
 >bility */<br>    /* IE does NOT by default pass the event object 
 >*/<br>    /* obtain a ref to the event if one was not given */<br
 >>    if (!event) event = window.event;<br><br>    /* obtain event
 > type and target as earlier */<br>    var eType = event.type;<br>
 >    var eTarget = event.target || event.srcElement;<br>    alert(
 >eType +' event on element with id: '+ eTarget.id);<br>  }<br><br>
 > function onload () <br> {<br>   /* obtain a ref to the 'body' el
 >ement of the page */<br>   var body = document.body;<br>   /* cre
 >ate a span element to be clicked */<br>   var span = document.cre
 >ateElement('span');<br>   span.id = 'ExampleSpan';<br>   span.app
 >endChild(document.createTextNode ('Click Here!'));<br><br>   /* r
 >egister the span object to receive specific mouse events */<br>  
 > span.onmousedown = mouseevent_callback;<br>   span.onmouseup = m
 >ouseevent_callback;<br>   span.onmouseover = mouseevent_callback;
 ><br>   span.onmouseout = mouseevent_callback;<br><br>   /* displa
 >y the span on the page */<br>   body.appendChild(span);   <br>}<b
 >r>&lt;/script&gt;</code>
117  function mouseevent_callback(event)
118  {
119    /* The following is for compatability */
120    /* IE does NOT by default pass the event object */
121    /* obtain a ref to the event if one was not given */
122    if (!event) event = window.event;
123 
124    /* obtain event type and target as earlier */
125    var eType = event.type;
126    var eTarget = event.target || event.srcElement;
127    alert(eType +' event on element with id: '+ eTarget.id);
128  }
129 
130 function onload () 
131 {
132   /* obtain a ref to the 'body' element of the page */
133   var body = document.body;
134   /* create a span element to be clicked */
135   var span = document.createElement('span');
136   span.id = 'ExampleSpan';
137   span.appendChild(document.createTextNode ('Click Here!'));
138 
139   /* register the span object to receive specific mouse events *
>/ 
140   span.onmousedown = mouseevent_callback;
141   span.onmouseup = mouseevent_callback;
142   span.onmouseover = mouseevent_callback;
143   span.onmouseout = mouseevent_callback;
144 
145   /* display the span on the page */
146   body.appendChild(span);   
147}
148&lt;/script&gt;</code>
n153    <h4 name="Example:_Catching_a_keyboard_event">n103    <h4 id="Example:_Catching_a_keyboard_event" name="Example:_Ca
 >tching_a_keyboard_event">
n196<code>&lt;script type="text/javascript"&gt;n146<code>&lt;script type="text/javascript"&gt;<br>  function onkeypr
 >ess_callback(evt) <br>  {<br>      var eType = evt.type; // Will 
 >return "keypress" as the event type<br>      <span class="sourceR
 >owText">var eCode = 'keyCode is ' + evt.keyCode;<br>      var eCh
 >ar = 'charCode is ' + evt.charCode;<br><br></span>      alert ("C
 >aptured Event (type=" + eType + ", key Unicode value=" + eCode + 
 >", ASCII value=" + eChar + ")");<br>   }<br>&lt;/script&gt;<br>&l
 >t;input onkeypress="onkeypress_callback(event);"&gt;&lt;/input&gt
 >;</code>
197  function onkeypress_callback(evt) 
198  {
199      var eType = evt.type; // Will return "keypress" as the even
>t type 
200      <span class="sourceRowText">var eCode = 'keyCode is ' + evt
>.keyCode; 
201      var eChar = 'charCode is ' + evt.charCode;
202 
203</span>      alert ("Captured Event (type=" + eType + ", key Unic
>ode value=" + eCode + ", ASCII value=" + eChar + ")"); 
204   }
205&lt;/script&gt;
206&lt;input onkeypress="onkeypress_callback(event);"&gt;&lt;/input&
>gt;</code> 
n212<code>&lt;script type="text/javascript"&gt;n152<code>&lt;script type="text/javascript"&gt;<br>  document.onkeypr
 >ess = key_event(event);<br>  document.onkeydown = key_event(event
 >);<br>  document.onkeyup = key_event(event)<br><br>  function key
 >_event(evt)<br>  {<br>      var eType = evt.type;<br>      var eC
 >ode = "ASCII code is " + evt.keyCode;<br></code><code><span class
 >="sourceRowText">      var eChar = 'charCode is ' + evt.charCode;
 ><br><br></span>      alert ("Captured Event (type=" + eType + ", 
 >key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");</c
 >ode><code><br>   }<br>&lt;/script&gt;</code>
213  document.onkeypress = key_event(event);
214  document.onkeydown = key_event(event);
215  document.onkeyup = key_event(event)
216 
217  function key_event(evt)
218  {
219      var eType = evt.type;
220      var eCode = "ASCII code is " + evt.keyCode;
221</code><code><span class="sourceRowText">      var eChar = 'charC
>ode is ' + evt.charCode; 
222 
223</span>      alert ("Captured Event (type=" + eType + ", key Unic
>ode value=" + eCode + ", ASCII value=" + eChar + ")");</code> 
224<code>   }
225&lt;/script&gt;</code>
n258    <h5>n185    <h5 id="Browser_bugs_and_quirks">
n273    <h4 name="Example:_Dragging_images_around">n200    <h4 id="Example:_Dragging_images_around" name="Example:_Dragg
 >ing_images_around">
274      Example: Dragging images around//如何改成随鼠标点击而移动的?201      Example: Dragging images around
n293  movMeId.style.top="80px";//相当于 style="top:80px"n220  movMeId.style.top="80px";
n296  document.onmousedown=coordinates;//鼠标点击下,启动coordinates函数n223  document.onmousedown=coordinates;
297  document.onmouseup=mouseup;//鼠标弹起,启动mouseup函数224  document.onmouseup=mouseup;
n301    var sender = (typeof( window.event ) != "undefined" ) ? e.srcn228    var sender = (typeof( window.event ) != "undefined" ) ? e.src
>Element : e.target;//e为发生的事件吗?比如onmousedown>Element : e.target;
n315  }//coordinates函数用于确认初始坐标,并启动moveImage函数n242  }
n322  }//moveImage函数用于移动图片,即随着按着的鼠标的移动而移动n249  }
n326    document.onmousemove=null;<span style="color:#008000;">//鼠标弹起n253    document.onmousemove=null;
>,移动停止</span> 
n339    <h4 name="Example:_Resizing_things">n266    <h4 id="Example:_Resizing_things" name="Example:_Resizing_thi
 >ngs">
n342    <h4 name="Example:_Drawing_Lines">n269    <h4 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines"
 >>
t346      <h4 name="Original_Document_Information">t273      <h4 id="Original_Document_Information" name="Original_Docum
 >ent_Information">

Back to History