スポンサーリンク

javascript

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乗を計算しようとしている): 結…