Your SlideShare is downloading. ×
0
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Java Script入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Java Script入門

1,325

Published on

webteko vol.5 JavaScript elementary school.

webteko vol.5 JavaScript elementary school.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,325
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×