java script入門
Post on 18-Dec-2014
6.458 Views
Preview:
DESCRIPTION
TRANSCRIPT
JavaScript入門
Daisuke Furukawa
http://mogya.com
最近の出来事
取引先が経営破綻
お仕事募集中
今日の話
JavaScript入門
よくあるやつ
うれしい?
実用的な話を
教材
実用的
JavaScriptの
書き方
JavaScriptの書き方
JavaScriptの書き方
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>
var output = document.getElementById("tu_output");output.value = "もぎゃ";
<textarea id="tu_output" cols="80" rows="5"></textarea>
JavaScript
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;
「っ」を消す
イベント
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;}
関数
<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>
まとめ
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>
まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね!
var output = document.getElementById("tu_output");
output.value="もぎゃ";
まとめ
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;}
まとめ
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>
まとめ
HTMLは、必要な部分にidをつけておく
getElementbyIdでタグの部分を取ってこれる。
関数。処理に名前をつける
イベント。ユーザーさんがキーを離したらこの処理をしてね!
ご静聴ありがとうございました
top related