Java Script入門

6 976 vues

Publié le

webteko vol.05 JavaScirptElementarySchool.

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
6 976
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 390
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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. ご静聴ありがとうございました

×