From 1e548ca157861d80e5447962cc576f8681580f4e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 30 Jul 2021 13:27:16 +0900 Subject: conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents を削除 (#1599) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../manipulating_documents/index.html | 150 --------------------- 1 file changed, 150 deletions(-) delete mode 100644 files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html (limited to 'files/ja/conflicting') diff --git a/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html deleted file mode 100644 index a8a29ff6c8..0000000000 --- a/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: JavaScript and CSS -slug: conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -tags: - - CSS - - CSS:Getting_Started -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript -original_slug: Web/Guide/CSS/Getting_started/JavaScript ---- -
- {{CSSTutorialTOC}}
-

これは CSS チュートリアル 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。

-

第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。

-

代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。

-

前の章（第 1 部）: メディア
- 次の章: SVG

-

JavaScriptについて

-

JavaScript はプログラミング言語 です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。

-

JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。

-

3 つの方法があります:

- - - - - - - - -
- さらに詳しく
JavaScript, についてのさらに詳しい情報は、この wiki の JavaScript のページをご覧ください。
-

実習: JavaScript の実演

-

新規 HTML 文書 doc5.html を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:

-
- 
<!DOCTYPE html>
-<html>
-
-<head>
-<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
-<link rel="stylesheet" type="text/css" href="style5.css" />
-<script type="text/javascript" src="script5.js"></script>
-</head>
-
-<body>
-<h1>JavaScript sample</h1>
-
-<div id="square"></div>
-
-<button type="button" onclick="doDemo(this);">Click Me</button>
-
-</body>
-</html>
-
-
-

新規 CSS ファイル style5.css を作り、次の内容をコピー＆ペーストしてください:

-
- 
/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-}
-
-button {
-  padding: .5em 2em;
-}
-
-
-

新規テキストファイル script5.js を作り、以下の内容をコピー＆ペーストしてください:

-
- 
// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "#fa4";
-  button.setAttribute("disabled", "true");
-  setTimeout(clearDemo, 2000, button);
-}
-
-function clearDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "transparent";
-  button.removeAttribute("disabled");
-}
-
-
-

ブラウザで HTML 文書を開いて、ボタンを押してください。

-

この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:

- - - - - - - -
- - - - - - - - - -
-

JavaScript sample

-
 
- 		- - - - - - - - - -
-

JavaScript sample

-
 
-
-
- この実演についての重要な補足: - -
- - - - - - - -
- チャレンジ
スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。
-

チャレンジの解答を見る。

-

さて次は？

-

このページにわかりづらいところやご意見があれば Discussion ページに参加してください。

-

この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: XBL bindings

-- cgit v1.2.3-54-g00ecf