読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

javascript

JavaScriptの動かないコード (中級編) IEでスコープチェインにdocumentが補完されるように見える不思議

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: alertとかgetElementByIdなどの関数を,1文字の変数に代入して利用する。(つまり,ショートコーディングを試みる。) <html> <body> <input type="button" onclick="f()" value="1文字関数のテスト"> <div id="my_div">fuga</div> <script language="JavaScript"> function f(){ v</body></html>…

JavaScriptの動かないコード (中級編) オブジェクトのメソッドを変数代入でコピーできない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: hello,world! と,2回表示したい。その際,出力用の処理を簡単に呼び出せるように,関数を変数に代入してから利用する。 <html> <body> <input type="button" onclick="f()" value="「hello,world」と2回表示"> <script language="JavaScript"> function f(){ var </body></html>…

JavaScriptの動かないコード (中級編) setTimeoutのタイマーが指定時刻に動かないエラー (JavaScriptがマルチスレッドだという誤解)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 0から20000までループする。 そのループの途中にタイマーを設定して,ループの進捗を表示する。 <input type="button" value="ループを開始する" onClick="f()"> <div id="div_counter"></div> <div id="div_comment"></div>

JavaScriptの単体テストフレームワーク "simpleJsUnit" で,テスト駆動開発をしよう

simpleJsUnitは,JavaScriptのコードを単体テストするためのライブラリ。 シンプルさが特徴。(たった5キロバイト) コマンドラインでも ブラウザ上でも テストを実行可能。 以下は,このツールを使って,テストファーストなJavaScript開発を進める方法。 …

JavaScriptで,グローバル変数の存在判定をする3つの方法 ("window"の定義状況を確認したい)

JavaScriptプログラミングのTOPへ JavaScriptで,グローバル変数が存在するかどうか判定するための3つの方法。 3つのうち1つはよく使う。残りの2つは,特殊な状況(WSHとの使い分けなど)で役立つ。

JavaScriptを,その場ですぐ実行するためのブックマークレット

JavaScriptプログラミングのTOPへ Web上で見つけたJavaScriptのコードを,その場ですぐに動かしてみたい時に。 javascript:(function(){var%20w=window.open('','w_code', 'width=280,height=220,resizable=no,scrollbars=no,status=no'); w.document.body.i…

JavaScriptの動かないコード (初級編) parseIntで返り値が0になるエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「2008年12月から何か月経ったか」を計算する。 <input type="button" value="期間を表示" onClick="f()"> 月を選択してください。 → 2009年の <select id="select_month"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option></select>

JScript.NET でのプログラミングを習得するための4ステップ (開発環境つき)

.NET Frameworkが入っていれば,JScriptで本格的なアプリケーション開発ができる。その名もJScript.NET。JavaScriptの知識を生かしながら,.NETプログラミングをする。 これを習得するために必要な,4つのステップを考えてみる。

テキストボックス内のカーソル(キャレット)位置や選択範囲を,JavaScriptで取得・設定する方法

JavaScriptプログラミングのTOPへ input や textarea などのテキストボックスをフォーカスした際に表示される,「|」の形をしたカーソルの事をキャレットという。また,Shiftキーを押しながらキャレットを移動させると,文字列が選択状態になる。 キャレッ…

JavaScriptの動かないコード (中級編) オブジェクトのプロパティ定義にthisを使って失敗するエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 文字列が改行やスペースを含むかどうか,正規表現で調べる。 <input type="button" value="クリックして表示" onClick="f()"> <script language="JavaScript"> // 文字列が特殊文字を含むかどうか判定するためのオブジェクト。 var obj = { /* …

JavaScriptの動かないコード (中級編) iframe内のDOM要素を別フレームにコピーできないエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 同じフォルダにtenki.htmlがあり,天気が書いてある。その情報を,DOM要素ごと抜き出す。 index.html <body> <input type="button" value="クリックして表示" onClick="f()"><br> <iframe id="ifr" src="tenki.html"></iframe><br> <table> <tbody> <tr id="my_tr"> <td>上のページの情報によれば,今日の…</td></tr></tbody></table></body>

JavaScriptの動かないコード (初級編) 関数が返り値を return できないエラー (セミコロンの罠)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 現在時刻を表示する。 <input type="button" onclick="f()" value="現在時刻を表示"> <script language="JavaScript"> function f(){ alert( getNow() ); } // 現在時刻の文字列を返します。 function getNow(){ var d = new Date(); // 1:23…

JavaScriptの動かないコード (中級編) iframe内にDOMアクセスできないエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: tenki.htmlの中に,天気が書かれている。 index.htmlのインラインフレーム内に tenki.html を表示して,その内容を解析する。 ※2つのHTMLは,同…

 グラデーションや影を,JavaScriptで付ける方法 (画像を使わず jQuery だけでクロスブラウザなWebデザイン)

HTML要素の背景にグラデーションをかけたい場合,色つきの画像をそのボックス要素の大きさに合わせて作り,背景として指定する方法がある。 しかし画像をいちいち個別に作るのは面倒だ。 (CSSで背景画像のサイズを自動調整する方法は無い。貼る個所のサイズ…

Firefoxのサイドバーを作ろう (XUL形式のアドオンでbrowser要素を設定する方法)

前回,下記の記事で,Firefox の簡単なアドオンの作り方を述べた。 画面上の邪魔なものを自動ブロックする Firefox プラグインの作り方 (XPI アドオンを自作しよう) http://language-and-engineering.hatenablog.jp/entry/20081129/1227955571 これを使え…

画面上の邪魔なものを自動ブロックする Firefox プラグインの作り方  (XPI アドオンを自作しよう)

Webサイトを閲覧しているとき, 広告が邪魔だ, 画像がけばけばしい,表示したくない と感じる事がある。 もしページ読み込み時に,「現在表示中のサイトと関係のない要素」をブラウザが自動判別して,非表示にしてくれたら便利だ。 では,そのような Firefo…

JavaScriptの動かないコード (中級編) 不要なイベントが連鎖で発生してしまう  (バブリングの対処)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 右図のような「クリックゲーム」を作る。 赤い部分をクリックしたらゲームオーバー。 <div id="jirai" style="background-color:red; width:200px; height:200px;" > 地雷源 <div id="goal" style="background-color:green; width:50px; height:50px; position:relative; top:50px; left:50px;" > 安全地帯 </div></div>

JavaScriptの動かないコード (中級編) イベントの詳細情報を第一引数で取得できない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) 何かキーを押すと,キーコードを表示します。 <script language="JavaScript"> // キー押下時のイベントリスナを設定 document.onkeydown = f; function f( e ) { // キーコードを表示 alert( </script>…

Java のスクラップブックを HTML + JScript で作る (HTAで子プロセスを操作)

スクラップブックとは,Javaのソースコードの「断片」を,その場ですぐ実行できるというツール。Eclipseに付属しており,ちょっとしたメソッドの動作確認をしたい時に重宝する。 ちょっと動かすだけじゃない、eclipseスクラップブックページのとても便利な使…

JavaScript で,クリックした座標に点を追加できるグラフチャートを描画する方法 (jQuery のプラグイン jquery.sparklines / jquery.flotの使い方)

JavaScriptプログラミングのTOPへ JavaScriptを使って,ブラウザ上でグラフチャートを作成する事ができる。 折れ線グラフ 棒グラフ 点だけでプロット のようにグラフの種類を変えたり,色を付けたり,プロットした点をマウスで操作したりすることもできる。I…

はてなダイアリー編集画面のリンク元を集計するブックマークレット (簡易アクセス解析)

JavaScriptプログラミングのTOPへ 現在,当サイトのリンク元は,googleだけで1日300件ぐらい。 目を通しきれなくなってしまった。 使い慣れたアクセス解析を導入する事も考えたのだが,はてなの詳細編集画面以外にさらに別の画面を開くのが面倒くさい。 そ…

JavaScriptの動かないコード (中級編) onKeydownイベントが認識されない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 画面を開いているとき,何かキーボードを押すと,別のページにジャンプする。 <body> 何かキーを押すと,Yahooにジャンプします。 <script language="JavaScript"> function f() { // </script></body>…

JavaScriptの動かないコード (中級編) DOMで子要素を指定する際のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <body> <table border=1> <tbody id="my_tbody"> <tr><td>この行がコピーされます。</td></tr> </tbody> </table> <input type="button" value="行をコピー" onClick="f()"> <script language="JavaScript"> function f() { // tbody中の最初の行を取得 var old_element = my_tbody.childNodes[0]…</body>

JavaScriptの動かないコード (初級編) with文にまつわるエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「はい」ボタンと「いいえ」ボタンの押下を区別して応答する。 ボタンのトータルの押下回数も表示する。 <input type="button" value="はい" onClick="f(1)"> <input type="button" value="いいえ" onClick="f(0)"> <script language="JavaScript"> function f( num ) // 引数が 1 :「は…

JavaScriptで .exe ファイルを作る方法  (jsc.exeの使い方)

JavaScriptプログラミングのTOPへ JavaScript(JScript)のコードから,.exe形式のアプリケーションを簡単に作成することができる。

JavaScript をコマンドラインで実行する方法  (mshta.exeの使い方)

JavaScriptプログラミングのTOPへ 問JavaScriptで,100以下の素数を列挙するコードを作成し実行しなさい。ただし 1ミリでもマウスポインタを動かしてはいけません。 1バイトでも新規ファイルを作成してはいけません。 さあ,どうぞコーディングを始めて下…

JavaScriptの動かないコード (中級編) jsonオブジェクトをevalできないエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" value="「1」と表示" onClick="f()"> <script language="JavaScript"> function f() { var str = "{x:1}"; // JSONオブジェクトにする var obj = eval(str); // プロパティを表示 alert( obj.x ); } </script>

バッチで文字列を置換する (JScriptでテキストファイル処理)

バッチのまとめTOPへ テキストファイル中の文字列を置換する場合, 普通はエディタの置換機能を使うだろう。 しかし,それが何度も行なうルーティンになっている場合,手作業をしてはいけない。 ミスが混入しないように,毎回の置換作業をバッチに任せるべき…

今から3分で qUnit の使い方を身に付ける (JavaScriptの単体テスト)

qUnitは,JavaScriptコードを単体テストするためのライブラリ。qUnitはjQueryプロジェクトから派生して誕生した。jQueryを使わない普通のコードであっても,回帰テストの対象にできる。 このテストツールの初歩を,今から3分で習得するための記事。

JavaScriptの動かないコード (中級編) イベントハンドラに同じ関数を2回以上追加したい

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ボタン押下時に, 2 と表示する。 そのために,0に1足す操作を2回行なう。 <input type="button" value="「2」と表示" id="my_button"> <div id="my_div"></div> <script language="JavaScript"> // 初期化 var a = 0; // a に1足して表示 function f(){ a++;…

JavaScriptで,動的に追加されたイベントリスナの実行順序を保証する方法

JavaScriptプログラミングのTOPへ 前記事では下記のような事を述べた。 Firefoxのイベントリスナーが複数ある場合,追加された順に実行される。 IEのイベントリスナーが複数ある場合,追加順には実行されないし,追加順の逆順でもない。実行順序を予測する事…

JavaScriptの動かないコード (中級編) 動的追加したイベントの実行順序 ( addEventListener vs attachEvent )

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ボタンへ動的にイベントリスナを追加する。 ボタン押下時に,0, 1, 2 とアラート表示する。 <input type="button" value="「0, 1, 2」と表示" id="my_button"> <script language="JavaScript"> function f0(){ alert( 0 ); } function f1(){ aler…

JavaScriptの動かないコード (初級編) 配列とオブジェクトの宣言エラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" value="クリックして表示" onClick="f()"> <script language="JavaScript"> function f() { // 配列 var a = new Array( "H","e","l", "l","o",",", "w","o","r", "l","d","!", ); // Hello,world! と表示 alert( a.join("") ); // オ…

JavaScript ショートコーディングの10のコツ (ブックマークレット作成時に重宝するテクニック集)

JavaScriptプログラミングのTOPへ 数日前の わずか1.7キロバイトのJavaScript マリオ風のゲーム (脱力系) http://language-and-engineering.hatenablog.jp/entry/20081006/1223209263 という記事では,JavaScriptのショートコーディングを少し試みた。 そ…

JavaScriptの動かないコード (中級編) Ajax読み込み時に「システムエラー -1072896658」

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: Ajaxを使って,a.htmlに外部ページ(b.php)を読み込む。 下の例ではjQueryを使っているが,べつにprototype.jsでも,素のXMLHttpRequestでもよい。…

わずか1.7キロバイトのJavaScript マリオ風のゲーム (脱力系)

1.7キロバイトのJavaScriptで,一応,右画像のようなスーパーマリオ風のゲームができた。 (1.3キロバイトに改良されました。) こちらからプレーできます http://www.name-of-this-site.org/coding/game/aamario.html 遊び方: 右・左キーで移動,上キーで…

JavaScriptの動かないコード (中級編) innerHTMLに閉じタグを書き込む時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: innerHTMLに「終了タグ」と「開始タグ」を書き込むことにより,元からあったタグを2分割する。 <div id="div0"> <div id="div1"> 分割前 </div> </div> <input type="button" value="divを分割して2つに" onClick="f()"> <script language="JavaScript"> function f() { // タグを2つに分割…

jQuery をSQLの「select文」のように使う方法

JavaScriptプログラミングのTOPへ jQueryオブジェクトを,まるでSQLのselect文のような呼び出し方で使える関数を作成した。 面白いだろうと思ってやっつけで作ってみたのだが,下記のようなコードが書ける。 jselect( "select * from document where id = p1…

ハワイ語表記への文字列変換フォーム (JavaScript)

多言語を学ぶ目次へ ハワイ語は,ハワイ諸島先住民の言語で,アルファベットがたった12文字しかない。自分の名前をハワイ語に変換すると,どうなるだろうか? 文字が少ないので音も少ない ページはこちら ソースコードは下記 コードの解説 太平洋の言語に…

JavaScriptの動かないコード (中級編) 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 同じアルファベットの連続した並びを,それぞれ1文字にまとめる。 例: "good apple" → "god aple" <script language="JavaScript"> function matomeru( str ) { // 正規表現を…

JavaScriptの動かないコード (中級編) cloneNodeで選択状態が変わるエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" onClick="f()" value="「cが選択済みでチェック有りの状態」をコピー" > <div id="div0"> <div id="div1"> <select id="select1"> <option>a</option> <option>b</option> <option selected>c</option> </select> </div></div>

JavaScriptの動かないコード (中級編) splitで文字列を分割する時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 言葉の間に句読点の無い文章中に「。」をつけたい。 お早う今日は今晩は今日はお早う。 → お早う。今日は。今晩は。今日は。お早う。 <script language="JavaScript"> // split()</script>…

JavaScriptで,文字列を反復する / 逆順に並び替える方法

JavaScriptプログラミングのTOPへ クイズ:JavaScriptで, "文字列".func() のような(メソッドチェーンができるような)形式で, 1. 文字列を逆順に並び変える方法は? ( PHPで言うと str_rev() 関数 ) 2. 文字列を n 回反復する方法は? ( PHPで言うと …

JavaScriptの動かないコード (中級編) scriptタグの中味を動的に書き換えた時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" onClick="f()" value="「変更後」と表示"> <script language="JavaScript" id="my_script"> function f(){ alert("変更前"); } // 関数を定義し直す my_script.innerHTML = "function f(){alert('変更後');}"; </script>

JavaScriptの動かないコード (中級編) オブジェクトのprototypeを変更した時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 1, a 2, b 3, b という,3種類の値のペアを生成する。 <script language="JavaScript"> // オブジェクトを定義する。 // 2つのメンバ変数 x, y を持つと想定。 var A = function…

JavaScriptの動かないコード (初級編) 関数に配列を渡すときのエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ["こんにち","は"] という配列を作って,配列の要素を結合して表示。 ["こんにち","わ"] という配列を作って,配列の要素を結合して表示。 <input type="button" value="あいさつを表示" onClick="f()"> <script language="JavaScript"> func…

JavaScriptの動かないコード (初級編) イベントハンドラを動的に追加できない / DOM要素の取得ができない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" value="「1」と表示" id="my_button"> <script language="JavaScript"> // イベントハンドラを設定 document.getElementsById( "my_button" ).onClick = f; function f() { alert( "1" ); } </script>

JavaScriptの動かないコード (中級編) evalでfunctionを作る時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 文字列で関数を定義し,eval() で実行する。 <input type="button" value="「1」と表示" onClick="f()"> <script language="JavaScript"> function f() { // 文字列を使って関数を定義 var str = "( function() { alert( 1 ); } )"; //ale…

JavaScriptの動かないコード (中級編) selectの中味を書き換えるときのエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <select id="my_select"> <option>変更前</option> </select> <input type="button" value="セレクトの中身変更" onClick="f()" > <script language="JavaScript"> function f() { //alert( my_select.innerHTML ); // 書き換え my_select.innerHTML = "<option>変更後</option>"; //alert…

JavaScriptの動かないコード (中級編) クロージャを使わない場合に起きるエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 変数の値を1増やして,表示する。 <input type="button" value="「1」と表示" onClick="f1()" > <input type="button" value="「2」と表示" onClick="f2()" > <script language="JavaScript"> function f1(){ var i = 0; // i の値を 1 増やす関数を, f1 の中に作成 var g = function() { i++; } // i…