initial commit

1 files changed, 171 insertions, 0 deletions

diff --git a/files/zh-cn/web/guide/css/getting_started/javascript/index.html b/files/zh-cn/web/guide/css/getting_started/javascript/index.html
new file mode 100644
index 0000000000..c5ccd6e901
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/javascript/index.html
@@ -0,0 +1,171 @@
+---
+title: JavaScript 与 CSS
+slug: Web/Guide/CSS/Getting_started/JavaScript
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>本文是 <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">CSS tutorial</a> 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 </p>
+
+<p>第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。</p>
+
+<p>换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。</p>
+
+<p>上一章 (Part I)： <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br>
+ 下一章： <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
+
+<h3 id="Information:_JavaScript" name="Information:_JavaScript">相关知识： JavaScript</h3>
+
+<p>JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。</p>
+
+<p>JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 </p>
+
+<p>有三种方法可以实现这样的效果：</p>
+
+<ul>
+ <li>控制样式表—可以添加、删除、修改样式表。</li>
+ <li>控制样式规则—可以添加、删除、修改样式规则。</li>
+ <li>控制DOM中的单个元素—可以不依赖样式表来修改元素样式。</li>
+</ul>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
+ <caption>更多细节</caption>
+ <tbody>
+  <tr>
+   <td>要了解 JavaScript的更多细节，可以到这个wiki <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">范例： 一个JavaScript的实例</h3>
+
+<p>新建一个<code>doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：</code></p>
+
+<div style="width: 48em;">
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
+&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
+&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;JavaScript sample&lt;/h1&gt;
+&lt;div id="square"&gt;&lt;/div&gt;
+&lt;button&gt;Click Me&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>新建一个CSS文件<code>style5.css</code>，复制粘贴下面的样式代码到文件中：</p>
+
+<div style="width: 48em;">
+<pre class="brush:css;">  #square {
+
+      width: 20em;
+
+      height: 20em;
+
+      border: 2px inset gray;
+
+      margin-bottom: 1em;
+
+  }
+
+  button {
+
+      padding: .5em 2em;
+
+  }</pre>
+</div>
+
+<p>新建一个JavaScript文件<code>script5.js</code>，复制粘贴下面的代码到文件中：</p>
+
+<div style="width: 48em;">
+<pre class="brush: js">// JavaScript demonstration
+var changeBg = function (event) {
+    console.log("method called");
+    var me = event.target
+    ,   square = document.getElementById("square");
+    square.style.backgroundColor = "#ffaa44";
+    me.setAttribute("disabled", "disabled");
+    setTimeout(function () { clearDemo(me) }, 2000);
+}
+
+function clearDemo(button) {
+    var square = document.getElementById("square");
+    square.style.backgroundColor = "transparent";
+    button.removeAttribute("disabled");
+}
+
+window.onload = function() {
+    var button = document.querySelector("button");
+    button.addEventListener("click", changeBg);
+    console.log(button);
+}</pre>
+</div>
+
+<p>用浏览器打开HTML文件并点击按钮。</p>
+
+<p>这里有在线的示例：<a href="http://jsfiddle.net/diwanshi/Y4VPK/4/embedded/result/">Here is the Live Example</a></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><strong>JavaScript demonstration</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><strong>JavaScript demonstration</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>重要提示</strong> ：
+
+<ul>
+ <li>HTML文档中外链了CSS文件和JavaScript文件。</li>
+ <li>脚本直接修改了DOM元素的样式，通过修改属性值来改变按钮的样式。</li>
+ <li>在JavaScript中<code>document.getElementById("square")</code> 在功能上同 CSS 选择器 <code>#square的功能是类似的。</code></li>
+ <li>在 JavaScript代码中, <code>backgroundColor</code> 对应于CSS 属性<code>background-color</code>。因为JavaScript中不允许在命名中出现中划线，所以采用了驼峰式,的写法来做替代。</li>
+ <li>浏览器针对button有内置的CSS规则  <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> ，这会导致按钮在不可点击状态下的显示样式跟预期有出入。</li>
+</ul>
+</div>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;">
+ <caption>挑战</caption>
+ <tbody>
+  <tr>
+   <td>修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>这里有一个解决方案示例：<a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">See a solution to this challenge.</a></p>
+
+<h3 id="下一步做什么呢？">下一步做什么呢？</h3>
+
+<p>如果你对本页内容有疑问，或者有其他想法，欢迎到 <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Discussion</a> 页面进行讨论。</p>
+
+<p>在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： <strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p>