感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery Ajaxで手元のテキストファイルを表示する。

スポンサーリンク

イベントバブリングとは、DOMの子要素で発生したイベントがDOMの階層を伝わり、親要素へ、またその親要素へと伝搬していくこと。
bubblingとは、水の深いところから沸き上がってくるイメージ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery Sample</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script>
	$(document).ready(function() {
		$('a').click(function(e) {
			alert('リンクがクリックされました!');
			e.preventDefault();   //イベントのデフォルトの動作をキャンセルする
			e.stopPropagation();  //イベンドバブリングによって、親要素にイベントが伝搬することを停止する
			alert('でも、飛ばないよ');
		})
	})
</script>
</head>
<body>
<a href="http://www.yahoo.co.jp/">yahooへのリンク</a>
</body>
</html>

jQueryAjax

テキストファイルを読み込んでみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでAjax基礎</title>
<script src="jquery-1.10.0.js"></script>

<script>
	$(function() {
		$("#b1").click(function() {
			$("#topicBox").load("tetsuji.txt");
			$("#topicBox").fadeIn(2000);
		});
	});
</script>

</head>
<body>
<h1>Ajaxでテキストファイルを読み込むサンプル</h1>
<p>ボタンクリックを契機に、テキストファイルを画面遷移なしに読み込む</p>
<button id="b1">テキストの内容を表示</topic>

</br>
<div id="topicBox" style="display:none"></div>

</body>
</html>

同じディレクトリにtetsuji.txtを用意して、中にこんなテキストを用意する。

桑野哲司はすごくかっこよくて、テニスがうまい。

ボタンを押すと、桑野哲司はすごくかっこ良いという表示が出てくる。
ちなみに、これは事実だ。

読んだ本

jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ

jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ

感謝のプログラミング

今回で感謝のプログラミングは【404時間目】
10000時間まで、あと【9596時間】