JavaScript

2011年06月29日

HTMLエンコード

JavaScriptには標準でHTMLエンコード用の関数がないので作ってみました。

function htmlencode(s){
s = s.replace(/&/g, '&');
s = s.replace(/</g, '&lt;');
s = s.replace(/>/g, '&gt;');
s = s.replace(/"/g, '&quot;');
s = s.replace(/ /g, '&nbsp;');
return s;
}


2010年03月21日

html5のCanvasを使ってみた。

HTML5のCanvasを使って、アニメーションを作成してみた。FlashやJavaAppletと比べて性能はかなり落ちる感じ。SafariやChromeだと、Flashと比べて10分の1ぐらい、IEだと100分の1ぐらいの性能しかでないみたい。

http://php7.jp/html5/phy_001.html

ゲームを作ったりするには厳しいけど、eラーニング教材で、簡単なアニメーションを入れるぐらいなら使えそうかな。

2009年06月25日

flowplayer - FLVプレイヤーの決定版

flowplyaerを使ってみた。

まだ、flvを再生させるだけの単純な使い方しかしていないが、外部からの再生制御などもできそうだ。eラーニングでは、最初から最後まで再生したことを確認したい、という要望が大きいので、どうやれば実現できるか調べてみようと思う。

2008年09月09日

名前がかぶらないように

ブログの記事に埋め込むJavaScriptを書くときは、名前が重複しないように気をつけなければならない。なぜなら、1つのページに複数の記事が表示されることがあるからだ。

単純に変数名や関数名だけが重複しなければ言い訳ではない。JavaScriptが操作するHTML要素のIDが重複してもだめなのだ。JavaScriptの採点プログラムでは、関数に対してSingletonパターンを適用している。これは、デザインパターンの1つで、同じオブジェクト(関数や変数)を1度しか生成しない仕組みだ。この仕組みを使うことで、textareaタグや、Divタグに一意なIDを与えて、JavaScriptから操作できるようにしている。

2008年09月07日

JavaScript3

関数とは、引数と呼ばれる値を受け取り、定められた通りの処理を実行して結果を返すプログラムの構成要素である。下記の関数は、引数としてxを取り、1を加算して関数の呼び出し元に返す。returnは、値を呼び出し元に返すための命令で、その直後に書かれているx+1が、呼び出し元に返す値である。


2008年09月05日

JavaScriptの採点システム2

簡単に問題を作成できるように改良した。



JavaScriptの採点システム

JavaScriptでJavaScriptのプログラムを採点するプログラムを作った。
プログラミングのeLearningをするならこういった仕組みが必要だろう。


1〜xまでの総和を求める関数を書け。但しxは1〜10000の整数とする
function f(x){

}


2008年09月01日

表示/非表示 の切り替え





この文が消えたり表示されたりします。



<input type="button" value="表示" onClick="document.getElementById('div_none').style.display='inline'">
<input type="button" value="非表示" onClick="document.getElementById('div_none').style.display='none'">
<input type="button" value="スイッチ" onClick="if(document.getElementById('div_none').style.display=='none'){document.getElementById('div_none').style.display='inline';}else{document.getElementById('div_none').style.display='none';}">


HTMLを部分的に非表示にすることで、折りたたんだような表現をすることができます。

2008年08月31日

数値計算

JavaScriptでは、変数の型を明示的に指定しなくてよい。だが、変数の型を意識せずにプログラムを書けるわけではない。この記事では、2つのフォームフィールドの値を合計して出力するJavaScriptを紹介するが、型を意識せずに作成したプログラムでは「数値加算」ではなく、「文字列連結」になってしまっている。これは、フォームフィールドから取得した値は文字列だからである。

function add(){
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = num1+num2;
document.getElementById("result").innerHTML=result;
}
+ =

文字列を数字に変換する方法として以下の方法がある。

+ eval(文字列を数式として評価する)
+ parseInt(文字列を整数に変換する)
+ parseFloat(文字列を実数に変換する)

function add_parseInt(){
var num1 = document.getElementById("num1_parseInt").value;
var num2 = document.getElementById("num2_parseInt").value;
var result = parseInt(num1)+parseInt(num2);
document.getElementById("result_parseInt").innerHTML=result;
}
+ =
function add_parseFloat(){
var num1 = document.getElementById("num1_parseFloat").value;
var num2 = document.getElementById("num2_parseFloat").value;
var result = parseFloat(num1)+parseFloat(num2);
document.getElementById("result_parseFloat").innerHTML=result;
}
+ =

邪道ではあるが、0を引くことで文字列を数値に変換できる。

function add_minus0(){
var num1 = document.getElementById("num1_minus0").value;
var num2 = document.getElementById("num2_minus0").value;
var result = (num1-0)+(num2-0);
document.getElementById("result_minus0").innerHTML=result;
}
+ =



document.write

せっかくJavaScriptの本を読んでいるので、ブログで試してみる。Livedoorブログでは、JavaScriptを含んだ記事を投稿できるが、通常モードだと、改行がbrタグに変換されてしまい、JavaScriptが正常に実行されない。

投稿モードを「改行を反映しない」にしておくと、記事内にJavaScriptを埋め込むことができる。

document.write
ソース
<script language="JavaScript">
document.write("Hello JavaScript");
</script>

実行結果


Recent Comments
アクセスカウンター
  • 今日:
  • 昨日:
  • 累計:

「最新トラックバック」は提供を終了しました。