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

JavaScriptの動かないコード(中級編)正規表現をwhile内で定義すると無限ループで固まるエラー (execでグローバルなマッチだと,処理がフリーズ)

連載目次へ 以下のJavaScriptコードが,意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 複数の文字列がある。 それぞれの文字列から,URLのトップレベルドメイン(TLD)を全て抜き出す。 抽出のために,RegExp.exec() メソッドで,正…

JavaScriptの動かないコード(中級編) 正規表現の括弧キャプチャを,グローバルで繰り返しmatchできない (gオプションを付けると部分文字列の抽出が無効)

連載目次へ 以下のJavaScriptコードが,意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: (試行1)では,文字列からトップレベルドメインを1つだけ抽出する。 これは上手くいく。 (試行2)では,文字列からトップレベルドメインを…

JavaScriptの動かないコード(中級編) forループ内でイベントリスナを定義したら,動作がおかしい。(クロージャや関数オブジェクトの性質を理解していないために発生するエラー)

連載目次へ 以下のJavaScriptコードが,意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ・ボタンごとに,0, 1, 2 という異なる数を表示したい。 <h3>ボタンごとに異なる数字をアラート表示するサンプル</h3> <input type="button" id="id0" value="0"> <input type="button" id="id1" value="1"> <input type="button" id="id2" value="2"> <script> for (var i = 0; i < 3; i ++ …

JavaScriptの動かないコード(中級編) 配列のsort結果がおかしい …評価関数が正数か負数以外の値を返す場合の挙動のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)やりたい事: オブジェクトの配列を,年齢の若い順に並び替える。 // WSHの場合はalertを定義しておく if( typeof alert == "undefined" ){ var alert = functio…

Webページの「コピペ禁止」を解除・回避するJavaScriptコード。スクリプト有効のまま,ブラウザ上で右クリック・テキスト選択の禁止タグを迂回する

Webページ上で,「コピペ禁止」を解除するJavaScriptコード。 ブラウザ上で,マウスで文章を選択して,右クリック→コピー という操作は,HTML側で禁止できる。Webサイトの内容が, コピペで無断転載されるのを防ぐためだ。 しかし,その禁止をかいくぐる方法…

JavaScriptの動かないコード(中級編)大きな数字を表示できないエラー (2の53乗を超えると,IEEE754の精度保証外なので計算もalertも不可能)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 2の55乗を計算する。(正しい値は 36028797018963968 ) <input type="button" value="2の55乗を計算して表示" onclick="f()"> <script> function f(){ alert( "「2の55乗は36028797018963968」と表示します。\n\n" + "「2…

JavaScriptの動かないコード(中級編)Aタグがリンクとして機能しないエラー (URL・hrefの%エンコードがRFC違反だと,IEで例外が発生)

連載目次へ 以下のJavaScriptコード(というよりHTMLそのもの)が意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: HTML上で,Aタグによりリンクを表示する。 そのリンクのURLを, JavaScriptから取得する。 <a href="http://google.com/?q=%" id="a1">ブラウザは, このHTMLリン</a>…

JavaScriptのFunction.prototype.applyを,やさしいピュアJavaScriptだけで実装してみよう (call/applyの仕組みを理解するためのオレオレ実装)

JavaScriptプログラミングのTOPへ JavaScriptのcall/applyは, コンテキスト「this」を使いこなす中級プログラミングには必須だ。また,可変個の引数を渡したいなどの局面でも役に立つ。 もしcall/applyがないと,各種ライブラリ・フレームワークは実現不可…

JavaScriptの動かないコード(初級編)textareaの内容を読み書きする方法は,innerHTMLとvalueのどちらか?

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: テキストエリアに入力されている文字列をアラート表示する。 <textarea id="hoge">ここの文字列を書きかえてください。</textarea> <input type="button" value="入力内容を確認" onclick="f()"> <script> function f(){ // textareaを取得 var elem…

JavaScriptの動かないコード(初級編)varで変数宣言する位置が,関数内の先頭以外だと起こる「変数の巻上げ(ホイスティング)」

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 関数の内容をアラートしたあとで,1と表示する。 <script> function x(){ // この関数の中身を文字列として表示する alert( x ); } function y(){ // こ</script>…

JavaScriptの動かないコード(中級編)callで,コンテキスト引数にnull・undefinedや,falseなどプリミティブ型の値を渡した時のthisの挙動

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「真です。」と,一回だけ表示する。 関数オブジェクトをcallして,引数が真と評価されるものだけアラート。 <script> // 関数オブジェクト var func = fu…

迷路をウネウネと生成する,ライフゲーム的なJavaScript (アスキーアートで反復描画アニメーション)

「迷路をウネウネと生成する,ライフゲーム的なJavaScript」ができた。 ボタンを押すと,迷路が生成されてゆく途中経過を見れる。(ポコポコッ・・・ワサワサッ…) 巨大な迷路がアスキーアートで描画される。"┤┐├"みたいな罫線AAと,"■"によるブロックAAの2…

Windows XP等の,IE脆弱性の攻撃方法「ヒープ・スプレー」と「Use After Free」を,HTMLサンプルコードで理解しよう

HTMLとJavaScriptで,IEの脆弱性を攻撃できる。 (※具体的なサンプルコードも本記事に掲載) それが「Use After Free」および「ヒープスプレー」。 ちょうど2014年4月にWindows XPのサポート終了後すぐ,この脆弱性を攻撃するウィルスが発見され,大騒…

JavaScriptの動かないコード (初級編) DOM要素の配列を,forループで順番に全削除できない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: DOM操作により,div要素を全て削除する。 <body> <input type="button" value="DIV要素の削除を実行" onclick="f()"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <script> function f() { // 全要素を取得 var arr = document.getElementsByTagName("div"); for( </body>…

HTML5の「Web Workers API」を,別ファイルを使わずページ単体で利用するサンプル (createObjectURLがあれば,1ファイルでマルチスレッドのJSコーディングが可能)

JavaScriptプログラミングのTOPへ HTML5の「Web Workers API」(非同期処理の仕組み)を,外部スクリプトを使わずに,1ファイルだけで実行するサンプルコード。 ワンライナーで(たった1行で)Workerスレッドを起動できる。簡単に書くとこんな感じ。 // ス…

今から3分で,HTML5のドラッグ&ドロップAPIと File APIを習得しよう(JSの実装サンプル付き)

JavaScriptプログラミングのTOPへ 今から3分で,HTML5の JavaScript API の使い方を2つ覚えよう。 1:ドラッグ&ドロップAPI 画面上の要素を。 画面外から。 2:File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで…

Youtubeの動画playlistのリンク集を,Firebugワンライナーで生成しよう(consoleからXPATHでスクレイピング)

Firebugのコンソールを使って,Webページの情報を加工してみよう。 HTMLの中から,特定のclassを持ったDOM要素だけを抽出 という処理をしてみる。 こういう単一ページ内でのWebスクレイピングは,簡易なブックマークレットでも可能。 だが,もしfirefoxを使…

JavaScriptのコーディングTips集

JavaScriptのプログラミングに関するTips集。主に中級レベルの話題とノウハウを掲載する。 なお,JavaScript初級〜中級をクイズ形式で網羅的に学習するためには,下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-a…

はてなダイアリーに執筆した記事一覧を,表形式に整理するブックマークレット (アーカイブページを,Excelに貼り付けやすく整形加工)

JavaScriptプログラミングのTOPへ はてなダイアリーの「記事一覧(アーカイブ)」のWebページから情報を抽出して,Excelに貼り付けやすい,「タブ区切りの表形式」に変換してくれるブックマークレット。 javascript:(function(d,T,b,tb,L,U,byCN,arr,i,git,t…

はてブのマイページから,情報を一括して整形・抽出するブックマークレット

JavaScriptプログラミングのTOPへ 蓄積された「はてなブックマーク」の自分のエントリを,ブログに貼り付けやすい「はてな記法のリンク集」形式に変換してくれるブックマークレット。 自分のブックマーク(はてブのエントリ)のコレクションを,一発で「要約…

中国語でWeb技術を学ぶ(1)JavaScriptの紹介

中国語(北京語・簡体字)で、JavaScriptのプログラミングを勉強してみよう。 中国語でプログラミングの解説をしているWebページがあるから,そのページを少しずつ読み進めていくことにする。 JavaScript自体を学習するというより、システム開発に関する文書…

開いている全タブのURLとタイトルを,列挙して抽出するFirefoxアドオン (XUL形式プラグインのソースコード付)

注:このアドオンには,改良版があります。 「全タブを要約するアドオン」を改良。ページ内の選択部分を要約に反映 http://language-and-engineering.hatenablog.jp/entry/20140117/p1 全タブの「リンク集」を自動生成するアドオン。 ネットで調べ物をしてい…

Excelシートを読み取って,INSERT文SQLを生成するバッチ (Kingsoft SpreadsheetをWSH/JScriptで自動操作)

バッチのまとめTOPへ 「Excelの表データを読み取って,DBへのデータ投入SQLを生成するマクロ」 は,あちこちにある。 ExcelからSQLのINSERT文を作成するマクロ http://d.hatena.ne.jp/grachro/2011061... エクセルで作成したデータからinsertSQLを作成するマ…

JavaScriptの動かないコード (中級編) 文字数のカウントに失敗する

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 入力された文字列の長さ(文字数)を取得する。 ここに入力して下さい:<input type="text" id="hoge" value=""><br> <input type="button" onclick="c()" value="文字数を数える"> <script> function c() { // 入力内容の文字列 var str = hoge.value; // 普通に…

Javaの非同期処理を,シングルスレッドのようにシンプルにコーディングするための設計パターン (並列処理を逐次処理にする)

重要なお知らせ:この記事で公開した情報は,AndroidのMVCフレームワーク「Android-MVC」の機能の一部として取り込まれました。より正確な設計情報や,動作可能な全ソースコードを閲覧したい場合,「Android-MVC」の公式ページより技術情報を参照してくださ…

このブログの検索ワードのトップが,「Android」になってしまった - 今後数年とその先に求められる,デベロッパのスキルポートフォリオ

この4か月間の,本ブログにおける検索ワードの推移。(トップ12位) ※説明: このグラフの「検索ワード」は,Googleなどの検索エンジンから本ブログにジャンプしてきた場合の,検索エンジン側で入力してあった検索語。こういったリンク元情報は,アクセス解…

バッチで,画像を生成・加工・一括処理しよう (WSH/JScriptでImageMagickを呼び出す方法)

バッチのまとめTOPへ WSH JScriptのバッチで,画像を動的に生成・加工する。複数の画像ファイルを一括して処理する事も,かなり簡単にできる。 WSHから呼び出すActiveX コンポーネントとして,ImageMagickを使う。 ImageMagickとは? http://tuka.s12.xrea.c…

JavaScriptで,ランダムな日付情報を取得・表示する関数(うるう年などを加味し,期間の範囲も指定可能)

JavaScriptプログラミングのTOPへ JavaScriptで,特定の期間内のランダムな日付を得る関数のサンプルコード。

WebアプリとAndroidアプリのアナロジー (「Androidのアレは,Webで例えるなら○○だ」)

AndroidプログラミングのTOPへ Webアプリの開発者が,初めてAndroidアプリを作るとする。Android SDKの使い方など,新しく覚える事が多い。学習には時間がかかる。 そこで,効率的に学ぶため,Webを使った「例え話(アナロジー)」で覚えてみるのはどうか? …

たった50行のソースコードで,「関数電卓」のAndroidアプリを作成する方法

AndroidプログラミングのTOPへ 「Hello, World」のAndroidアプリが作れるなら,「関数電卓」のプログラムを今すぐリリースできる。実装に必要なソースコードは,たった50行。 計算画面のキャプチャ(関数計算として,2の10乗を計算しようとしている): 結…

JavaScriptの動かないコード (中級編) 重いページで,onloadのイベントリスナが実行されない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)やりたい事: サーバサイドで、画面上のフォーム内に、大量のhiddenデータを描画する。 描画が終わったら、自動的にフォームを送信(submit)する。 <body> ↓このフォ</body>…

システム開発で,「あればいいのに」と思う7つのもの

以下のものが,あればいいのに。 「レガシーJavaScript」に関する情報が完全に除去された,Google検索結果。 Windowsのウィンドウ部品を,jQueryのように操作できる,セレクタAPI。 COM経由で,マウスを自動操作するAPI。 「アプリケーションとしてのコマン…

JavaScriptでの例外設計 (throw,try-catch-finally構文のイメージと利用パターン)

JavaScriptプログラミングのTOPへ JavaScriptの例外(throw, try-catch-finally構文)の使い方について,以下の点を論じる。 (A)breakとreturnとthrowの比較 (B)throwを利用した設計のイメージ (C)throwの使いどころ (D)例外処理のサンプルコー…

JavaScriptで,クラスを継承する方法 (複数のサブクラスから共通クラスのプロトタイプを参照する)

JavaScriptプログラミングのTOPへ JavaScriptのコーディングでオブジェクトを扱う際,「インスタンスがちょっとずつ異なっている」という場合は,その自由度に見合ったクラス(=プロトタイプ)を1つだけ定義してやれば事足りる。 しかし,それに加えて「ク…

JavaScriptで,オブジェクトやクラスの初歩を理解しているか,実力を確かめるための7つの質問 (サンプルコード付き)

スキルチェックの目次へ JavaScriptはオブジェクト指向のスクリプト言語。オブジェクトやクラスの扱い方の基礎を理解していない場合,開発の戦力にならない。 JavaScriptの業務スキルレベル 判別表 (5段階) http://language-and-engineering.hatenablog.j…

JavaScriptの動かないコード (初級編) switch文で,数値以外の変数を評価した時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 氏名を選択して,ボタンを押す。 ⇒氏名に対応する苗字と,苗字に対応するメッセージが表示される。 <body> 氏名を選んでください。 <select id="hoge"> <option>鈴木</option> <option>鈴木 太郎</option> <option>鈴</option></select></body>…

alert() と書くために,わざわざ行頭に戻らなくてもすむ方法

JavaScriptプログラミングのTOPへ JavaScriptで,文字列の内容を確認するためには alert( str ); のようなコードを書く。 しかし,本当は str.alert(); のような書き方をしたい。 そう思うのでは。 文字列(「str」とか 「"hoge"」 )を書いてから,そのあと…

ブラウザ上で,Officeのヘルプキャラクターを動かしてみよう (IE上でJavaScriptからMS Agentを呼び出す方法)

JavaScriptプログラミングのTOPへ Officeのヘルプキャラクタ(例えば「マーリン」とか,「カイル君」とか,「冴子先生」)を,ブラウザのHTML上で表示する。IE上だけでなく,WSHでバッチとしてデスクトップで呼び出す事も可能。 サンプル(IEで閲覧) http:/…

ブラウザ上でVB.NETのコードを動かす (IE上で.NETアプリケーションをホストする方法の続き)

以下の記事では,IE上で,C#のDLLを動かす方法を述べた。 今から3分で,IE 上で .NET のDLLを動かそう (ブラウザ上で C# のコードを動かす方法) http://language-and-engineering.hatenablog.jp/entry/20100705/p1 今回は,同じものをVB.NETでも作ってみ…

今から3分で,IE 上で .NET のDLLを動かそう (ブラウザ上で C# のコードを動かす方法)

今から3分で,Webページ上で,Microsoft .NET のコードを動かそう。JavaScriptにできない事も,.NETなら可能になる。 今回は,Windowsアプリ用のUI部品(カレンダー)を,Webページ上で使ってみる。 メモ帳さえあればよい。 Visual Studioは不要。 .NETの詳…

JavaScriptの業務スキルレベル 判別表 (5段階)

スキルチェックの目次へ JavaScript の簡易スキルチェックのための調査表。印刷用。 レベルは,0から4までの5段階。 (0) 非 JavaScript開発者 (1) 初学者(入門書を学習してゆく段階) (2) ノーマル(基礎的な知識があり,ある程度の動くものを…

Prototype.js + Script.aculo.us のはまり所

もはやレガシー*1となりつつある,時代を作ったJavaScriptフレームワーク Prototype.js の盲点,注意点を書きためてゆく。 ※「JavaScriptの動かないコード(JavaScriptエラー集)」のprototype.js版,という位置づけである。ただしネタは多くない。 Download P…

JavaScriptの動かないコード (中級編) ラジオボタンとプルダウンのonchangeイベントがおかしい

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ラジオボタンのチェック状態によって,表示文言を切り替える。 <input type="radio" name="msg_type" id="radio1">Aと表示<br> <input type="radio" name="msg_type" id="radio2">Bと表示<br> <br> <div id="div_msg1" style="display:none">A</div> <div id="div_msg2" style="display:none">B</div>

JavaScriptの動かないコード (中級編) イベント強制発生までの遅延時間をなくしたい

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「フォーカスを外す(blur)とメッセージを表示する」という,テキストボックスがある。 このテキストボックスの動作テストをしたい。blurのイベ…

JavaScriptの動かないコード (中級編) clickイベントを強制的に発生させたい (fireEvent/createEventの使い方)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「クリックするとメッセージを表示する」という,テキストボックスがある。 このテキストボックスの動作テストをしたい。クリックのイベントを自…

JavaScriptの動かないコード (中級編) nullが0以上0以下と認識されてしまう

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ラジオボタンの中で,どれかボタンが選択されたかを検証する。 何も選択されていない場合,警告のメッセージを表示。 <body> どれか選択して下さい。<br> <input type="radio" name="hoge" value="0"> 0 <br></body>…

JavaScriptの動かないコード (中級編) innerHTMLを追記するとイベントハンドラが消える

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「追加」ボタンを押すと,「メッセージ表示」ボタンが追加される。 どの「メッセージ表示」ボタンを押しても,メッセージが表示される。 <body> <input type="button" onclick="f()" value="ボタンを追加する"> <br> <div id="hoge"><input type="button" id="btn1" value="メッセージ表示"></div> <style type="text/css"> .bl</body>…

マウスでソートできるリストを作るためのJavaScriptライブラリ(行追加・削除・固定行の設定が可能)

JavaScriptプログラミングのTOPへ 下記のようなUIを実現するための,クロスブラウザなJavaScriptライブラリ。 マウスのドラッグドロップで,行を入れ替え可能。 行の追加・削除ができる。 リストの中に,ドラッグ不可能かつ順序不動の「固定行」を作れる。(…

UWSCでIEを自動操作し,回帰テスト/JavaScript実行/ファイル保存 などができるライブラリ

バッチ・マクロのTOPへ ※これより新しいバージョンがリリースされています。 http://language-and-engineering.hatenablog.jp/entry/20090826/p1 下記の「IEを自動操作するライブラリ」の改良版ができた。 UWSCで,IEを自動操作するためのライブラリ (ファ…

Selenium 中級者になろう (変数+XPath+JavaScriptを,テストケース中で利用する方法)

回帰テストツール「Selenium」の中級 Tips。 初級の使い方については 今から3分で selenium の使い方を身に付ける (回帰テスト自動化) http://language-and-engineering.hatenablog.jp/entry/20081016/1224080409 selenium 主なコマンド一覧 http://languag…