【JavaScript】子画面から親画面へ値を渡す
子画面を開き、その画面で入力された値を親画面に返してやるというJavaScriptのサンプルです。 これは、PHP（＋ＤＢ）なんかと併せてうまく使うと、たとえば・・ 顧客一覧を出力させて、選択した顧客についての情報をメイン画面に出力する・・というようなガイド画面的に使えそうです。 がんばって応用してみようっと(*^^*ゞ ※ちなみに右側の女の子は、アクセス数のテスト用ですｗ 〇親側ソース（ファイル名は何でもＯＫ！） <html> <title>親ウィンドウ</title> <SCRIPT LANGUAGE="JavaScript"> <!-- function openWin(url) { return false; } // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1"> <!-- var w = window; function open
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
ブラウザでストレージ？ Web Storageを使いこなそう
sessionStorageオブジェクトの型を参照することで、「Web Storageを利用できるかどうか」を確認できる。条件分岐することで、利用できる場合だけではなく、利用できない場合に対処することも可能だ。 では、順に使用方法を見てみよう。 ●セッション状態を管理する「sessionStorageグローバル変数」 最初に、ブラウザのウィンドウまたはタブの中でデータを共有するサンプルを記述する。 ……省略…… <script type="text/javascript"> // （1）Web Storageの実装確認 if (typeof sessionStorage === 'undefined') { window.alert("このブラウザはWeb Storage機能が実装されていません"); } else { window.alert("このブラウザはWeb Storage機能を
吉川徹さん（@yoshikawa_t）の「DOM操作の最適化によるJavaScriptチューニング」問題解説記事 #javascript｜CodeIQ MAGAZINE
吉川徹さんによる「DOM操作の最適化によるJavaScriptチューニング」問題解説記事です。JavaScriptのDOM操作について基本的なパフォーマンスチューニングができるかどうかを評価する問題でした。 チューニングを行うことで、具体的にどういった形のコードになるかを中心に解説していただきましたので、ぜひ参考にしてくださいね！ by 馬場美由紀 （CodeIQ中の人） 吉川徹です。 少し前になりますが、私の方から以前、JavaScriptのパフォーマンスチューニングについての問題を出題しました。今回は、その問題の解説をしていきたいと思います。 また、この問題は、HTML5 Experts.jpとの連動企画となっており、こちらの記事を読んで頂くとおおよそのチューニング方法について理解できるというものになっています。ぜひ、合わせてご覧頂ければと思います。 問題文 あるHTMLファイルに記述
iFrameの高さをjsで自動取得する | Hack
jQueryを使わないでできる方法がないか探していたところ、こちらのサイトで発見しました。 http://www.geocities.jp/eijispace/2012/0220.html JS function iframeResize(){ var PageHight = document.body.scrollHeight + 0; // ページの高さを取得 window.parent.document.getElementById('disp').style.height = PageHight + 'px'; // iframeの高さを変更 } window.onload = iframeResize; iFrameは外から制御できないことが多いので、色んなパターンで実装できるのは助かりました。
ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ - JavaScript TIPSふぁくとりー
《2018年2月9日 2:30 PM 公開/更新》 ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ [イベント] JavaScriptを使って、ウェブページの読み込み完了と同時に何らかの処理をしたい場合など、ページの読込動作とタイミングを合わせて処理を実行したいことがあります。このとき、「ページの読み込み前」・「HTMLの読み込み直後」・「ページの読み込み完了後」など実行タイミングは複数あり、それぞれでJavaScriptの書き方はいくつかあります。それらの記述方法を解説してみます。 ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ 3(完了後): ウェブ上のあらゆるオブジェクトの読み込みがすべて完了した後で処理をする方法 (A) HTMLでbody要素に「onload」属性を指定することで、読み込み完了時に処理をする方法 (B) JavaScript
IFrameオブジェクト | JavaScript プログラミング解説
Properties - HTMLIFrameElement - Web APIs | MDN contentDocument IE8より前はcontentDocumentをサポートしないため、それにも対応させるためにはIFrame.contentWindow.documentを使用します。よってクロスブラウザとするには、 var contentDocument = IFrame.contentDocument || IFrame.contentWindow.document; とします。contentDocument property (Internet Explorer) | MSDN body要素へのアクセス IFrameのbody要素へは、Iframe.contentDocument.bodyでアクセスできます。 取得タイミング contentDocumentは、IFrameオブジ
hello! window.postMessage()
Twitter @Anywhereを学んでいると、もうそろそろクロスドメインのアクセスを正攻法でやって良い時代なんじゃないかと思ったのでwindow.postMessage()について書いておこうと思いまして。いや、普通に使い方のメモなんですが。 クロスドメインとは何かについては検索して調べてもらうとして。Ajaxで何かのWebサービスのAPIを触りたい時に良くこのクロスドメイン制約で利用出来ない事があります。その為サーバーサイドプログラミングに頼る事になりちょっと面倒くさい。気軽にマッシュアップしたい！と思っても出来なかった訳です。今までは。 そういう状況はやっぱり何とかしたいよね、と実装されたのがwindow.postMessage()。2010年？頃から所謂モダンブラウザには実装されていたのですが、昨今のモダンブラウザの普及率やモバイル機器でのウェブブラウザ利用増加で、気がつけばpo
Window.postMessage() - Web API | MDN
HTML DOM APIWindowインスタンスプロパティclosedconsolecookieStore (en-US) Experimental credentialless (en-US) Experimental customElementsdevicePixelRatiodocumentdocumentPictureInPicture (en-US) Experimental event 非推奨 external (en-US) 非推奨 fence (en-US) Experimental frameElementframesfullScreen Non-standard historyinnerHeightinnerWidthlaunchQueue (en-US) Experimental lengthlocalStoragelocationlocationbarmenubar
JavaScriptで位置情報を取得する方法(Geolocation API)
ユーザーの現在位置を取得現在位置を取得するサンプルデモを見るには、下記ページにアクセスして下さい。このブログがあなたの位置情報を取得してもいいか、という確認が表示されるので、許可すると、あなたの現在位置(緯度、経度の座標)の取得を開始、表示します。 サンプルデモを見る 現在位置を取得するには、ユーザーのブラウザが、Geolocation APIという機能に対応している必要があります。Geolocation APIとは、簡単に言うと、端末の位置情報をやり取りするシステムです。GPSに対応しているスマホだけでなく、現在位置を設定できるデスクトップPCでも利用可能です。 判別方法は簡単です。Geolocation APIに対応している端末の場合、navigator.geolocationというオブジェクトが最初から存在するので、これの有無で判別すればいいだけです。 JavaScript // G
地図のコントロール｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room
コントロールの種類と表示設定 コントロールの無効化 ナビゲーションコントロール〔※廃止〕 地図タイプコントロール〔MapTypeControlOptions / MapTypeControlStyle〕 外観地図コントロール〔OverviewMapControlOptions〕 移動コントロール〔PanControlOptions〕 回転コントロール〔RotateControlOptions〕 スケールコントロール〔ScaleControlOptions / ScaleControlStyle〕 ストリートビューコントロール〔StreetViewControlOptions〕 ズームコントロール〔ZoomControlOptions / ZoomControlStyle〕 コントロールの表示位置〔ControlPosition〕 カスタムコントロールの指定〔描画、イベント処理〕 コントロー
JavaScriptでOAuth認証を使ってTwitterのTimeLineを表示する – 渡邉研究室
watanabe 6月, 28, 2013 Web関連 JavaScriptでOAuth認証を使ってTwitterのTimeLineを表示する はコメントを受け付けていません （サーバトラブルで記事が消えてしまったので、再度書き直しました） Twitter REST API 1.0 → 1.1の仕様変更で、全てのAPIの使用にはOAuth認証が必要になり、1.0系は2013/6/12をもって完全停止となりました。クライアントサイドのJavaScriptでユーザのタイムラインを表示する必要があり、OAuthに対応したコードを書いてみたのですが、jQueryのajax関数で嵌ったので、メモとして残しておきます。consumerKeyなどのキーが丸見えなので、用途は限られると思います。 ＊用意するもの jQuery http://jquery.com/ oauth.js, sha1.js htt
JavaScriptでSVGを使うまとめ
細々とまとめてみる。 何か表示が崩れるけどまあいいや。 SVGを動的に配置する 下記で100x100サイズのSVGを、IDがaaaaaのエレメントに追加できる。 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); svg.setAttribute("width" , 100); svg.setAttribute("height", 100); svg.setAttribute("viewBox", "0 0 100 100"); document.getEl
JavaScriptの配列を特定の順番にソートする方法
JavaScriptで作った配列の順番を特定の順番に入れ替えたい時があったので、ソートして入れ替える方法を調べました。 sort関数 ソートする関数が用意されていますので、sort関数を使います。パラメーターを入れないとアルファベット順になります。 //配列 var station = ["Shinjyuku","Ikebukuro","Shibuya","Ueno"] //配列をソート station.sort(); //出力用 alert(station); // Ikebukuro,Shibuya,Shinjyuku,Ueno ちなみに配列の中身が数字の場合だと・・・ var number = [50000,40,900,3000] number.sort(); alert(number); // 3000,40,50000,900 アルファベット順なので、このような並びになります。
JavaScriptの関数とメソッド
はじめに JavaScriptはオブジェクト指向言語です。しかし利便性のために、C言語などと同じようにグローバルな関数を定義し、構造化的な手法でプログラミングすることも可能です。 この記事では、JavaScriptにおける関数の基本的な性質を見ていくと共に、関数の正体、および関数の使用方法について解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JScript、ActionScript）でも通じる内容になっています。 対象読者 プログラミングの基本的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて理解をしている人を対象としています。 この記事は、
JavaScript Command Design Pattern
The objects participating in this pattern are: Client -- In example code: the run() function references the Receiver object Receiver -- In example code: Calculator knows how to carry out the operation associated with the command (optionally) maintains a history of executed commands Command -- In example code: Command maintains information about the action to be taken Invoker -- In our example code
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
【JavaScript】デザインパターンを知ってみる。シングルトン編 | バシャログ。
桜を見ながら飲み食いしたいminamiです。 前回に引き続きJavaScriptで書くデザインパターンです。今回はシングルトンパターンについて調べてみました。 なぜ使うの？ シングルトン(Singleton)パターンは、以下のような特徴があります。 あるクラスのインスタンスを一つだけにする つまり同じクラスを使って新しいオブジェクトを再度作成すると、最初に作ったオブジェクトの参照になる。 作られたオブジェクトへのグローバルなアクセス方法を提供する 機能の重複する新規のインスタンスを作ることなく、一つのオブジェクトを使いまわすことができるのでリソースを無駄にしません。また、インスタンスを一つだけにすることでグローバルな関数や変数を無駄に増やすことがなくなるので競合の危険をなくします。このあたりは前回のモジュールパターンの考え方と同様です。 簡単な書き方 var Single = { myNa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Memento Design Pattern