Java Script入門
description
Transcript of Java Script入門
![Page 1: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/1.jpg)
JavaScript入門
Daisuke Furukawa
http://mogya.com
![Page 2: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/2.jpg)
最近の出来事
![Page 3: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/3.jpg)
取引先が経営破綻
![Page 4: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/4.jpg)
お仕事募集中
![Page 5: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/5.jpg)
今日の話
![Page 6: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/6.jpg)
JavaScript入門
![Page 7: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/7.jpg)
よくあるやつ
![Page 8: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/8.jpg)
うれしい?
![Page 9: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/9.jpg)
実用的な話を
![Page 10: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/10.jpg)
教材
![Page 11: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/11.jpg)
実用的
![Page 12: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/12.jpg)
JavaScriptの
書き方
![Page 13: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/13.jpg)
JavaScriptの書き方
![Page 14: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/14.jpg)
JavaScriptの書き方
![Page 15: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/15.jpg)
HTML<h1>小さい“つ”が消えるマシーン JavaScript版</h1> <p>入力した文章の「小さい“つ”」を消してくれるマシーンをJavaScriptで書いてみたものです。</p> <script type="text/javascript" src="tu.js"></script> <form><textarea id="tu_input" cols="80" rows="5">ニッポン の ヘッド である 総理 の グッズ</textarea><p>↓↓↓ 小さい“つ”が消えた!?↓↓↓</p><textarea id="tu_output" cols="80" rows="5"></textarea></form>
![Page 16: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/16.jpg)
var output = document.getElementById("tu_output");output.value = "もぎゃ";
<textarea id="tu_output" cols="80" rows="5"></textarea>
JavaScript
![Page 17: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/17.jpg)
var input = document.getElementById("tu_input");var output = document.getElementById("tu_output");
var text_in = input.value;var text_out = "";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;
「っ」を消す
![Page 18: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/18.jpg)
イベント
![Page 19: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/19.jpg)
function update_tu(){var input = document.getElementById("tu_input");var output = document.getElementById("tu_output");
var text_in = input.value;var text_out = "";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;}
関数
![Page 20: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/20.jpg)
<h1>小さい“つ”が消えるマシーン JavaScript版</h1> <p>入力した文章の「小さい“つ”」を消してくれるマシーンをJavaScriptで書いてみたものです。</p> <script type="text/javascript" src="tu.js"></script> <form>
<textarea id="tu_input" cols="80" rows="5" onkeyup="update_tu();">
ニッポン の ヘッド である 総理 の グッズ</textarea><p>↓↓↓ 小さい“つ”が消えた!? ↓↓↓</p><textarea id="tu_output" cols="80" rows="5"></textarea></form>
![Page 21: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/21.jpg)
まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね!
<form><textarea id="tu_input" cols="80" rows="5">ニッポン の ヘッド である 総理 の グッズ</textarea><p>↓↓↓ 小さい“つ”が消えた!?↓↓↓</p><textarea id="tu_output" cols="80" rows="5"></textarea></form>
![Page 22: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/22.jpg)
まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね!
var output = document.getElementById("tu_output");
output.value="もぎゃ";
![Page 23: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/23.jpg)
まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね!
function update_tu(){var input = document.getElementById("tu_input");var output = document.getElementById("tu_output");
var text_in = input.value;var text_out = "";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;}
![Page 24: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/24.jpg)
まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね!
<form><textarea id="tu_input" cols="80" rows="5"">ニッポン の ヘッド である 総理 の グッズ</textarea><p>↓↓↓ 小さい“つ”が消えた!?↓↓↓</p><textarea id="tu_output" cols="80" rows="5"
onkeyup="update_tu();"></textarea>
</form>
![Page 25: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/25.jpg)
まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね!
![Page 26: Java Script入門](https://reader033.fdocument.pub/reader033/viewer/2022061211/5491e8cdb47959324b8b4853/html5/thumbnails/26.jpg)
ご静聴ありがとうございました