JavaScript入門
Daisuke Furukawa
http://mogya.com

最近の
出来事

取引先が
経営破綻

お仕事
募集中

今日の話

JavaScript
入門

よくあるやつ

うれしい？

実用的な
話を

教材

実用的

JavaScript
の
書き方

JavaScriptの書き方

JavaScriptの書き方

HTML
<h1>小さい“つ”が消えるマシーン JavaScript版</h1>
<p>
入力した文章の「小さい“つ”」を消してくれるマシーンを
JavaScriptで書いてみたものです。
</p>
<script type=\"text/javascript\" src=\"tu.js\"></script>
<form>
<textarea id=\"tu_input\" cols=\"80\" rows=\"5\">
ニッポン の ヘッド である 総理 の グッズ
</textarea>
<p>↓↓↓ 小さい“つ”が消えた！？ ↓↓↓</p>
<textarea id=\"tu_output\" cols=\"80\" rows=\"5\"></textarea>
</form>

JavaScript
var output = document.getElementById(\"tu_output\");
output.value = \"もぎゃ\";
<textarea id=\"tu_output\" cols=\"80\" rows=\"5\">
</textarea>

「っ」を消す
var input = document.getElementById(\"tu_input\");
var output = document.getElementById(\"tu_output\");
var text_in = input.value;
var text_out = \"\";
var i=0;
for (i = 0; i < text_in.length; i++) {
if( text_in.charAt(i).match(/っ|ッ/) == null ){
text_out += text_in.charAt(i);
}
}
output.value = text_out;

イベント

関数
function update_tu(){
var input = document.getElementById(\"tu_input\");
var output = document.getElementById(\"tu_output\");
var text_in = input.value;
var text_out = \"\";
var i=0;
for (i = 0; i < text_in.length; i++) {
if( text_in.charAt(i).match(/っ|ッ/) == null ){
text_out += text_in.charAt(i);
}
}
output.value = text_out;
}

<h1>小さい“つ”が消えるマシーン JavaScript版</h1>
<p>
入力した文章の「小さい“つ”」を消してくれるマシーンをJavaScriptで書いてみたもので
す。
</p>
<script type=\"text/javascript\" src=\"tu.js\"></script>
<form>
onkeyup=\"update_tu();\">
<textarea id=\"tu_input\" cols=\"80\" rows=\"5\"
ニッポン の ヘッド である 総理 の グッズ</textarea>
<p>↓↓↓ 小さい“つ”が消えた！？ ↓↓↓</p>
<textarea id=\"tu_output\" cols=\"80\" rows=\"5\"></textarea>
</form>

まとめ
HTMLは、必要な部分にidをつけておく
<form>
<textarea id=\"tu_input\" cols=\"80\" rows=\"5\">
ニッポン の ヘッド である 総理 の グッズ
</textarea>
getElementbyIdでタグの部分を取ってこれる。
<p>↓↓↓ 小さい“つ”が消えた！？ ↓↓↓</p>
<textarea id=\"tu_output\" cols=\"80\" rows=\"5\">
</textarea>
関数。処理に名前をつける
</form>

イベント。ユーザーさんがキーを離したらこの処理をしてね！

まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
var output =
document.getElementById(\"tu_output\");
関数。処理に名前をつける
output.value=\"もぎゃ\";
イベント。ユーザーさんがキーを離したらこの処理をしてね！

まとめ
HTMLは、必要な部分にidをつけておく
function update_tu(){
var input = document.getElementById(\"tu_input\");
var output = document.getElementById(\"tu_output\");
var text_in = input.value;
var text_out = \"\";
getElementbyIdでタグの部分を取ってこれる。
var i=0;
for (i = 0; i < text_in.length; i++) {
if( text_in.charAt(i).match(/っ|ッ/) == null ){
関数。処理に名前をつける text_out += text_in.charAt(i);
}
}
イベント。ユーザーさんがキーを離したらこの処理をしてね！
output.value = text_out;
}

まとめ
HTMLは、必要な部分にidをつけておく
<form>
<textarea id=\"tu_input\" cols=\"80\" rows=\"5\"\">
ニッポン の ヘッド である 総理 の グッズ
</textarea>
getElementbyIdでタグの部分を取ってこれる。
<p>↓↓↓ 小さい“つ”が消えた！？ ↓↓↓</p>
<textarea id=\"tu_output\" cols=\"80\" rows=\"5\"
onkeyup=\"update_tu();\"></textarea>
関数。処理に名前をつける
</form>
イベント。ユーザーさんがキーを離したらこの処理をしてね！

まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね！

ご静聴ありがとうございました