JavaScript入門
       Daisuke Furukawa
       http://mogya.com
最近の
出来事
取引先が
経営破綻
お仕事
募集中
今日の話
JavaScript
   入門
よくあるやつ
うれしい?
実用的な
 話を
教材
実用的
JavaScript
    の
  書き方
JavaScriptの書き方
JavaScriptの書き方
HTML
<h1>小さい“つ”が消えるマシーン JavaScript版</h1>
<p>
入力した文章の「小さい“つ”」を消してくれるマシーンを
JavaScriptで書いてみたものです。
</p>
<script type=quot;text...
JavaScript


var output = document.getElementById(quot;tu_outputquot;);
output.value = quot;もぎゃquot;;


     <textarea id=...
「っ」を消す
var input = document.getElementById(quot;tu_inputquot;);
var output = document.getElementById(quot;tu_outputquot;);...
イベント
関数
function update_tu(){
       var input = document.getElementById(quot;tu_inputquot;);
       var output = document.getE...
<h1>小さい“つ”が消えるマシーン JavaScript版</h1>
<p>
入力した文章の「小さい“つ”」を消してくれるマシーンをJavaScriptで書いてみたもので
す。
</p>
<script type=quot;text/java...
まとめ

 HTMLは、必要な部分にidをつけておく

         <form>
         <textarea id=quot;tu_inputquot; cols=quot;80quot; rows=quot;5quot;>
...
まとめ

 HTMLは、必要な部分にidをつけておく




 getElementbyIdでタグの部分を取ってこれる。

     var output =
          document.getElementById(quot;t...
まとめ

 HTMLは、必要な部分にidをつけておく
    function update_tu(){
             var input = document.getElementById(quot;tu_inputquot;)...
まとめ

 HTMLは、必要な部分にidをつけておく


    <form>
    <textarea id=quot;tu_inputquot; cols=quot;80quot; rows=quot;5quot;quot;>
    ...
まとめ

 HTMLは、必要な部分にidをつけておく




 getElementbyIdでタグの部分を取ってこれる。




 関数。処理に名前をつける




 イベント。ユーザーさんがキーを離したらこの処理をしてね!
ご静聴ありがとうございました
Prochain SlideShare
Chargement dans…5
×

Java Script入門

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

×