Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java Script入門

1,598 views

Published on

webteko vol.5 JavaScript elementary school.

Published in: Technology
  • Be the first to comment

Java Script入門

  1. 1. JavaScript入門 Daisuke Furukawa http://mogya.com
  2. 2. 最近の 出来事
  3. 3. 取引先が 経営破綻
  4. 4. お仕事 募集中
  5. 5. 今日の話
  6. 6. JavaScript 入門
  7. 7. よくあるやつ
  8. 8. うれしい?
  9. 9. 実用的な 話を
  10. 10. 教材
  11. 11. 実用的
  12. 12. JavaScript の 書き方
  13. 13. JavaScriptの書き方
  14. 14. JavaScriptの書き方
  15. 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. 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. 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. 18. イベント
  19. 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. 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. 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. 22. まとめ HTMLは、必要な部分にidをつけておく getElementbyIdでタグの部分を取ってこれる。 var output = document.getElementById(quot;tu_outputquot;); 関数。処理に名前をつける output.value=quot;もぎゃquot;; イベント。ユーザーさんがキーを離したらこの処理をしてね!
  23. 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. 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. 25. まとめ HTMLは、必要な部分にidをつけておく getElementbyIdでタグの部分を取ってこれる。 関数。処理に名前をつける イベント。ユーザーさんがキーを離したらこの処理をしてね!
  26. 26. ご静聴ありがとうございました

×