webteko vol.5 JavaScript elementary school.

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

2. 最近の
出来事

3. 取引先が
経営破綻

4. お仕事
募集中

5. 今日の話

6. JavaScript
入門

7. よくあるやつ

8. うれしい？

9. 実用的な
話を

10. 教材

11. 実用的

12. JavaScript
の
書き方

13. JavaScriptの書き方

14. JavaScriptの書き方

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

16. JavaScript
var output = document.getElementById(quot;tu_outputquot;);
output.value = quot;もぎゃquot;;
<textarea id=quot;tu_outputquot; cols=quot;80quot; rows=quot;5quot;>
</textarea>

17. 「っ」を消す
var input = document.getElementById(quot;tu_inputquot;);
var output = document.getElementById(quot;tu_outputquot;);
var text_in = input.value;
var text_out = quot;quot;;
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;

18. イベント

19. 関数
function update_tu(){
var input = document.getElementById(quot;tu_inputquot;);
var output = document.getElementById(quot;tu_outputquot;);
var text_in = input.value;
var text_out = quot;quot;;
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;
}

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

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

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

23. まとめ
HTMLは、必要な部分にidをつけておく
function update_tu(){
var input = document.getElementById(quot;tu_inputquot;);
var output = document.getElementById(quot;tu_outputquot;);
var text_in = input.value;
var text_out = quot;quot;;
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;
}

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

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

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