javascript
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 同じフォルダに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コードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 現在時刻を表示する。 <input type="button" onclick="f()" value="現在時刻を表示"> <script language="JavaScript"> function f(){ alert( getNow() ); } // 現在時刻の文字列を返します。 function getNow(){ var d = new Date(); // 1:23…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： tenki.htmlの中に，天気が書かれている。 index.htmlのインラインフレーム内に tenki.html を表示して，その内容を解析する。 ※２つのHTMLは，同…
HTML要素の背景にグラデーションをかけたい場合，色つきの画像をそのボックス要素の大きさに合わせて作り，背景として指定する方法がある。 しかし画像をいちいち個別に作るのは面倒だ。 （CSSで背景画像のサイズを自動調整する方法は無い。貼る個所のサイズ…
前回，下記の記事で，Firefox の簡単なアドオンの作り方を述べた。 画面上の邪魔なものを自動ブロックする Firefox プラグインの作り方 （XPI アドオンを自作しよう） http://language-and-engineering.hatenablog.jp/entry/20081129/1227955571 これを使え…
Webサイトを閲覧しているとき， 広告が邪魔だ， 画像がけばけばしい，表示したくない と感じる事がある。 もしページ読み込み時に，「現在表示中のサイトと関係のない要素」をブラウザが自動判別して，非表示にしてくれたら便利だ。 では，そのような Firefo…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 右図のような「クリックゲーム」を作る。 赤い部分をクリックしたらゲームオーバー。 <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コードが意図した動作をしないのは，なぜですか。（制限時間１分） 何かキーを押すと，キーコードを表示します。 <script language="JavaScript"> // キー押下時のイベントリスナを設定 document.onkeydown = f; function f( e ) { // キーコードを表示 alert( </script>…
スクラップブックとは，Javaのソースコードの「断片」を，その場ですぐ実行できるというツール。Eclipseに付属しており，ちょっとしたメソッドの動作確認をしたい時に重宝する。 ちょっと動かすだけじゃない、eclipseスクラップブックページのとても便利な使…
JavaScriptプログラミングのTOPへ JavaScriptを使って，ブラウザ上でグラフチャートを作成する事ができる。 折れ線グラフ 棒グラフ 点だけでプロット のようにグラフの種類を変えたり，色を付けたり，プロットした点をマウスで操作したりすることもできる。I…
JavaScriptプログラミングのTOPへ 現在，当サイトのリンク元は，googleだけで１日300件ぐらい。 目を通しきれなくなってしまった。 使い慣れたアクセス解析を導入する事も考えたのだが，はてなの詳細編集画面以外にさらに別の画面を開くのが面倒くさい。 そ…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 画面を開いているとき，何かキーボードを押すと，別のページにジャンプする。 <body> 何かキーを押すと，Yahooにジャンプします。 <script language="JavaScript"> function f() { // </script></body>…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） <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コードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 「はい」ボタンと「いいえ」ボタンの押下を区別して応答する。 ボタンのトータルの押下回数も表示する。 <input type="button" value="はい" onClick="f(1)"> <input type="button" value="いいえ" onClick="f(0)"> <script language="JavaScript"> function f( num ) // 引数が 1 :「は…
JavaScriptプログラミングのTOPへ JavaScript(JScript)のコードから，.exe形式のアプリケーションを簡単に作成することができる。
JavaScriptプログラミングのTOPへ 問JavaScriptで，100以下の素数を列挙するコードを作成し実行しなさい。ただし １ミリでもマウスポインタを動かしてはいけません。 １バイトでも新規ファイルを作成してはいけません。 さあ，どうぞコーディングを始めて下…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） <input type="button" value="「１」と表示" onClick="f()"> <script language="JavaScript"> function f() { var str = "{x:1}"; // JSONオブジェクトにする var obj = eval(str); // プロパティを表示 alert( obj.x ); } </script>
バッチのまとめTOPへ テキストファイル中の文字列を置換する場合， 普通はエディタの置換機能を使うだろう。 しかし，それが何度も行なうルーティンになっている場合，手作業をしてはいけない。 ミスが混入しないように，毎回の置換作業をバッチに任せるべき…
qUnitは，JavaScriptコードを単体テストするためのライブラリ。qUnitはjQueryプロジェクトから派生して誕生した。jQueryを使わない普通のコードであっても，回帰テストの対象にできる。 このテストツールの初歩を，今から３分で習得するための記事。
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： ボタン押下時に， 2 と表示する。 そのために，０に１足す操作を２回行なう。 <input type="button" value="「2」と表示" id="my_button"> <div id="my_div"></div> <script language="JavaScript"> // 初期化 var a = 0; // a に１足して表示 function f(){ a++;…
JavaScriptプログラミングのTOPへ 前記事では下記のような事を述べた。 Firefoxのイベントリスナーが複数ある場合，追加された順に実行される。 IEのイベントリスナーが複数ある場合，追加順には実行されないし，追加順の逆順でもない。実行順序を予測する事…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： ボタンへ動的にイベントリスナを追加する。 ボタン押下時に，0, 1, 2 とアラート表示する。 <input type="button" value="「0, 1, 2」と表示" id="my_button"> <script language="JavaScript"> function f0(){ alert( 0 ); } function f1(){ aler…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） <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プログラミングのTOPへ 数日前の わずか1.7キロバイトのJavaScript マリオ風のゲーム （脱力系） http://language-and-engineering.hatenablog.jp/entry/20081006/1223209263 という記事では，JavaScriptのショートコーディングを少し試みた。 そ…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： Ajaxを使って，a.htmlに外部ページ(b.php)を読み込む。 下の例ではjQueryを使っているが，べつにprototype.jsでも，素のXMLHttpRequestでもよい。…
1.7キロバイトのJavaScriptで，一応，右画像のようなスーパーマリオ風のゲームができた。 (１．３キロバイトに改良されました。) こちらからプレーできます http://www.name-of-this-site.org/coding/game/aamario.html 遊び方： 右・左キーで移動，上キーで…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： innerHTMLに「終了タグ」と「開始タグ」を書き込むことにより，元からあったタグを２分割する。 <div id="div0"> <div id="div1"> 分割前 </div> </div> <input type="button" value="divを分割して2つに" onClick="f()"> <script language="JavaScript"> function f() { // タグを2つに分割…
JavaScriptプログラミングのTOPへ jQueryオブジェクトを，まるでSQLのselect文のような呼び出し方で使える関数を作成した。 面白いだろうと思ってやっつけで作ってみたのだが，下記のようなコードが書ける。 jselect( "select * from document where id = p1…
多言語を学ぶ目次へ ハワイ語は，ハワイ諸島先住民の言語で，アルファベットがたった１２文字しかない。自分の名前をハワイ語に変換すると，どうなるだろうか？ 文字が少ないので音も少ない ページはこちら ソースコードは下記 コードの解説 太平洋の言語に…
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 同じアルファベットの連続した並びを，それぞれ１文字にまとめる。 例： "good apple" → "god aple" <script language="JavaScript"> function matomeru( str ) { // 正規表現を…
