比较版本

起步(Javascript 教程)

更改版本

修订版 628741:

由 reygreen1 在 进行的修订 628741

修订版 629739:

由 reygreen1 在 进行的修订 629739

标题:
起步(Javascript 教程)
起步(Javascript 教程)
网址缩略名:
Web/JavaScript/Getting_Started
Web/JavaScript/Getting_Started
标签:
"bug-840092"
"bug-840092"
内容:

修订版 628741
修订版 629739
n14      The primary advantage to JavaScript, which is also known asn14      JavaScript(通常称为ECMAScript)最大的优势在于,它基于浏览器,但是通过浏览器的支持可以在不同平台上
> ECMAScript, centers around the web browser, thus having the abil>生产出相同结果。 本文举出的例子是 Google Maps,它几乎可以无差别的运行在 Linux、Windows和Mac OS系统
>ity to produce the same results on all platforms supported by the>中。 伴随大量javascript类库的出现,你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发Ajax
> browser. The examples on this page, just like Google Maps, run o>应用。同其他因各种利益目的而推动的技术不同,JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。
>n Linux, Windows and the Mac OS. With the recent growth of numero 
>us javascript libraries it is now easier to navigate a document,  
>select DOM elements, create animations, handle events, and develo 
>p Ajax applications. Unlike the hype around other technologies pu 
>shed by various proprietary interests, JavaScript is really the o 
>nly cross-platform, client-side programming language that is both 
> free and universally adopted. 
n20      JavaScript is a very easy language to start programming witn20      JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 
>h. All you need is a text editor and a web browser to get started 
>. 
21    </p>
22    <p>21    </p>
23      There are many other technologies that can be integrated in22    <p>
>to and developed along with JavaScript that are beyond the scope  
>of this document. Don't expect to make a whole application like G 
>oogle maps all on your first day! 
23      在使用 JavaScript进行开发的过程中,可能还会涉及很多其他技术,这不在本文讨论的范围之内。 所以,不要期望在学
 >习的第一天就能开发出一个类似 Google maps 这样的应用程序。
n29      Getting started with JavaScript is very easy. You don't havn29      JavaScript的起步非常简单。你不需要进行复杂的程序安装,不需要去了解如何使用shell、打包器或编译器。它是通
>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 
>avaScript 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 
>eb browser. That's it! 
30    </p>
31    <p>30    </p>
32      JavaScript is a great programming language for introductory31    <p>
> computer languages. It allows instant feedback to the new studen 
>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 
> are really only useful for dedicated software developers. 
32      JavaScript非常适合作为入门级的编程语言。它直观形象,并且教会学生认识到这是一个在实际生活中非常有用的工具。 
 >对比C、C++和 Java等语言会发现有很大不同,它们只对那些专业的软件开发者来说是有价值的。
n38      There are variations between what functionality is availabln38      不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Op
>e in the different browsers. Mozilla, Microsoft IE, Apple Safari >era 在行为上有很多差异。 我们计划在此记录这些差异&nbsp;<a href="/en-US/docs/JavaScript/
>and Opera fluctuate in the behavior. We intend on <a href="/en-US>Compatibility" title="en-US/docs/JavaScript/Compatibility">docume
>/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Comp>nting these variations</a>。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。
>atibility">documenting these variations</a>. You can mitigate the>这些API隐藏了浏览器之间的各种差异,提供了通用性的功能函数来方便调用。
>se issues by using the various cross platform JavaScript APIs tha 
>t are available. These APIs provide common functionality and hide 
> these browser fluctuations from you. 
n44      The examples below have some sample code. There are many wan44      下面的例子都有相同的代码。要执行它们有多种方法,如果你有自己的个人站点,你还可以在站点上把这些例子保存为新的页面。
>ys to try these examples out. If you already have your own websit 
>e, then you should be able to just save these examples as new web 
> pages on your website. 
45    </p>
46    <p>45    </p>
47      If you do not have your own website, you can save these exa46    <p>
>mples as files on your computer and open them up with the web bro 
>wser you are using now. JavaScript is a very easy language to use 
> for beginning programmers for this reason. You don't need a comp 
>iler or a development environment; you and your browser are all y 
>ou need to get started! 
47      如果你没有自己的个人站点,你可以在电脑上把这些例子保存下来,并使用你自己的浏览器来执行它们。这就是JavaScript
 >简单的地方,也是它适合做入门语言的原因。你不需要编译器或者开发环境,你只需要一个浏览器就可以开始起步了。
n53      The specifics of event handling (event types, handler regisn53      事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题,这个简单的例子并不能说明所有的问题。然而,如果我
>tration, propagation, etc) are too extensive to be fully covered >们不涉及JavaScript事件系统,我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件
>in this simple example. However this example cannot demonstrate c>系统里非常表象的一些东西,如果你想要了解更多的内部细节,那你可以去查找更详细的相关资料。
>atching a mouse click without delving a little into the JavaScrip 
>t event system. Just keep in mind that this example will only gra 
>ze the full details about JavaScript events and that if you wish  
>to go beyond the basic capabilities described here to read more a 
>bout the JavaScript event system. 
54    </p>
55    <p>54    </p>
56      'Mouse' events are a subset of the total events issued by a55    <p>
> 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: 
56      鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件:
n59      <li>Click - issued when a user clicks the mousen59      <li>Click - 用户点击鼠标时触发
n61      <li>DblClick - issued when a user double-clicks the mousen61      <li>DblClick - 用户双击鼠标时触发
n63      <li>MouseDown - issued when a user depresses a mouse buttonn63      <li>MouseDown - 用户按下鼠标键触发 (click事件前半部分)
> (the first half of a click) 
n65      <li>MouseUp - issued when a user releases a mouse button (tn65      <li>MouseUp - 用户释放鼠标键触发 (click事件后半部分)
>he second half of a click) 
n67      <li>MouseOut - issued when the mouse pointer leaves the gran67      <li>MouseOut - 当鼠标指针离开对象物理边界时触发
>phical bounds of the object 
n69      <li>MouseOver - issued when the mouse pointer enters the grn69      <li>MouseOver - 当鼠标指针进入对象物理边界时触发
>aphical bounds of the object 
n71      <li>MouseMove - issued when the mouse pointer moves while wn71      <li>MouseMove -当鼠标指针在对象物理边界内移动时触发
>ithin the graphical bounds of the object 
n73      <li>ContextMenu - issued when the user clicks using the rign73      <li>ContextMenu - 用户点击鼠标右键时触发
>ht mouse button 
n77      The simplest method for capturing these events, to registern77      捕获事件并注册处理函数最简单的办法就是使用HTML,你可以把事件当成元素属性来使用。例子:
> event handlers - using HTML - is to specify the individual event 
>s as attributes for your element. Example: 
n83      The JavaScript code you wish to execute can be inlined as tn83      要执行的JavaScript代码既可以作为属性值写在行内位置,也可以写成函数并用&lt;script&gt;包裹后放到
>he attribute value or you can call a function which has been defi>HTML页面中:
>ned in a &lt;script&gt; block within the HTML page: 
n94      Additionally, the event object which is issued can be captun94      另外,事件对象是可以被捕获和引用,开发者可以通过访问事件对象来获取更多信息,如捕获事件的对象、事件类型、哪个鼠标按键被
>red and referenced; providing the developer with access to specif>点击等。我们还用上面的例子来说明:
>ics about the event such as which object received the event, the  
>event's type, and which mouse button was clicked. Using the inlin 
>e example again: 
n111      In addition to registering to receive events in your HTML yn111      对于事件的注册和接收还用一些注意的是,你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作
>ou can likewise set the same attributes of any HTMLElement object>。下面的例子展示了一个这样的过程:生成span对象,添加到页面中的body,给span注册mouse-over、mouse-out
>s generated by your JavaScript. The example below instantiates a >、mouse-down和 mouse-up事件。
>span object, appends it to the page body, and registers the span  
>object to recieve mouse-over, mouse-out, mouse-down, and mouse-up 
> events. 
n153      Similar to the "Catching a mouse event" example above, catcn153      同上面的例子类似,键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候出发键盘事件。
>hing a keyboard event relies on exploring the JavaScript event sy 
>stem. Keyboard events are fired whenever any key is used on the k 
>eyboard. 
154    </p>
155    <p>154    </p>
156      The list of available keyboard events emitted in response t155    <p>
>o a keyboard action is considerably smaller than those available  
>for mouse: 
156      下面的列表展示了一些具体的键盘事件,同鼠标事件相比是很少的:
n159      <li>KeyPress - issued when a key is depressed and releasedn159      <li>KeyPress - 按键被按下并且释放后触发
n161      <li>KeyDown - issued when a key is depressed but hasn't yetn161      <li>KeyDown - 按键被按下但是还没有被释放时触发
> been released 
n163      <li>KeyUp - issued when a key is releasedn163      <li>KeyUp - 按键被释放时触发
n165      <li>TextInput (available in Webkit browsers only at time ofn165      <li>TextInput ( Webkit浏览器下可以使用,并且只在输入时有效) - 通过粘贴、语音或者键盘输入文本
> writing) - issued when text is input either by pasting, speaking>时触发。本文不介绍该事件。
> or keyboard. This event will not be covered in this article. 
n169      In a <a class="new" href="/en-US/docs/DOM/event/keypress" rn169      在一个&nbsp;<a class="new" href="/en-US/docs/DOM/event/keypres
>el="internal">keypress</a> event, the Unicode value of the key pr>s" rel="internal">keypress</a>&nbsp;事件中,键值的Unicode编码会存储到属性keyCode
>essed is stored in either the <code>keyCode</code> or <code><a hr>或者<code><a href="/en-US/docs/DOM/event.charCode" rel="internal">c
>ef="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></>harCode</a></code> 中,但是两者不会同时存在。按键会生成一个字母 (如 'a'),这时会把字母的编码存储到<co
>code> property; never both. If the key pressed generates a charac>de>charCode</code> 中,注意这里是区分大小写的(&nbsp;<code>charCode</code>&nbsp
>ter (e.g. 'a'), <code>charCode</code> is set to the code of that >;会判断shift键是否同时被按下)。其他情况下,编码会存储到&nbsp;<code>keyCode中。</code>
>character, respecting the letter case. (i.e. <code>charCode</code 
>> takes into account whether the shift key is held down). Otherwi 
>se, the code of the pressed key is stored in <code>keyCode</code> 
>. 
170    </p>
171    <p>170    </p>
172      The simplest method for capturing keyboard events is again 171    <p>
>to register event handlers within the HTML, specifying the indivi 
>dual events as attributes for your element. Example: 
172      捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数,在元素属性中处理相关事件。 举例:
n178      As with mouse events, the JavaScript code you wish to execun178      同鼠标事件类似,你的 JavaScript代码既可以写到属性值内,也可以作为函数用&lt;script包裹后写到HTM
>te can be inlined as the attribute value or you can call a functi>L页面中:
>on which has been defined in a &lt;script&gt; block within the HT 
>ML page: 
n190      Capturing the event and referencing the target (i.e. the acn190      捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似:
>tual key that was pressed) is achieved in a similar way to mouse  
>events: 
n205      Capturing any key event from the page can be done by registn205      要捕获页面上所有的键盘事件,可以在document上注册和绑定相关的处理函数:
>ering the event at the document level and handling it in a functi 
>on: 
n223      Here is a complete example that shows key event handling:n223      下面是一个完整的键盘事件处理过程:
n257      The two properties made available through the key events arn257      键盘事件中有两个可用的属性<code style="font-style: normal; line-height: 
>e <code>keyCode</code> and <code>charCode</code>. In simple terms>1.5;">keyCode</code><span style="line-height: 1.5;">&nbsp;和&nbsp;
>, <code>keyCode</code> refers to the actual keyboard key that was></span><code style="font-style: normal; line-height: 1.5;">charCo
> pressed by the user, while <code>charCode</code> is intended to >de。通常情况下,</code><code style="font-style: normal; line-height: 1.5
>return that key's ASCII value. These two values may not necessari>;">keyCode</code> <span style="line-height: 1.5;">指向的是用户按下的键盘上的那个
>ly be the same; for instance, a lower case 'a' and an upper case >键,而</span><code style="font-style: normal; line-height: 1.5;">cha
>'A' have the same <code>keyCode</code>, because the user presses >rCode</code> <span style="line-height: 1.5;">存储的是相应键的 ASCII 码值。这两
>the same key, but a different <code>charCode</code> because the r>个值不一定相同,如, 小写 'a' 和 大写 'A' 拥有相同的&nbsp;</span><code style="font-st
>esulting character is different.>yle: normal; line-height: 1.5;">keyCode,因为用户按下的是相同的按键,但是他们的</code
 >><code style="font-style: normal; line-height: 1.5;">charCode不同,因
 >为两个字母的码值不同。</code><span style="line-height: 1.5;">&nbsp;</span>
258    </p>
259    <p>258    </p>
260      The way in which browsers interpret the charCode is not a c
>onsistently-applied process. For example, Internet Explorer and O 
>pera do not support <code>charCode</code>. However, they give the 
> character information in <code>keyCode</code>, but only onkeypre 
>ss. Onkeydown and -up <code>keyCode</code> contains key informati 
>on. Firefox uses a different word, "which", to distinguish the ch 
>aracter. 
261    </p>259    <p>
260      不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持&nb
 >sp;<code>charCod,他们把字母信息写到了</code><code>keyCode</code>中,而且只在 onke
 >ypress下有效。在 Onkeydown 和Onkeyup的事件中,&nbsp;<code>keyCode</code> 存储的
 >仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.
262    <p>261    </p>
262    <p>
263      Refer to the Mozilla Documentation on <a href="/en-US/docs/263      可以到 Mozilla 文档 <a href="/en-US/docs/DOM/Event/UIEvent/Keybo
>DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla>ardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Eve
>.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> f>nt/UIEvent/KeyEvent">Keyboard Events</a> 去了解关于键盘事件的更多信息。.
>or a further treatment of keyboard events. 
t272      The following example allows moving the image of firefox art272      下面的例子展示了firefox浏览器下如何实现拖动图片:
>ound the page. 

返回历史