java script入門

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でタグの部分を取ってこれる。

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

イベント。ユーザーさんがキーを離したらこの処理をしてね！

ご静聴ありがとうございました