String.prototype.trim()This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月. Learn more See full compatibility Report feedback
element.offsetParentプロパティ - JavaScript（ジャバスクリプト）リファレンス
サンプルの動作について 黄色のボックス要素をクリックすると、position属性がrelativeで、黄色のボックス要素から最も近い祖先要素であるのは、緑色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を緑色にする。 紫色のボックス要素をクリックすると、position属性がrelativeで、紫色のボックス要素から最も近い祖先要素であるのは、青色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を青色にする。 サンプルのソースコード <script> window.onload = function () { document.getElementById( "sample-div-yellow" ).onclick = offsetParentA; document.getElementById( "sample-div-purple" ).oncl
jQuery deferredの使い方 | 前編 deferredの基本
jQuery deferredの使い方 前編 deferredの基本 jQuery deferredをなんとなく知っているが使い方がよくわからない人のために短期シリーズでおさらいをします。第1回目は非同期処理の概念からdeferredの基本機能までをおさえます。 なぜ、今、jQuery deferred？ この短期シリーズでは、2回に分けてjQuery deferredについて解説します。 jQuery deferredは、jQuery1.5で追加された機能であり、特に新しいものではありません。 しかしながら、私が昔書いたjQuery deferredに関するブログ記事をブックマークする人が、いまだにちょこちょこいるのが見受けられるのです。 もしかして、deferredの存在はなんとなく知っているけれど、どのように使ったらいいのかよくわからないという人が多いのかもしれないと思い、改めてまと
$.post() | jQuery 1.9 日本語リファレンス | js STUDIO
$.postは$.ajaxの略記です。$.ajax関数で次のように指定した処理と同じ処理を実行します。 $.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType }); デモ test.phpにリクエストを送信します。サーバが返す値について、処理は行いません。 $.post("test.php"); test.phpにデータをリクエスト(POST)送信します。サーバが返す値について、処理は行いません。 $.post("test.php"); test.phpに配列データをリクエスト(POST)送信します。サーバが返す値について、処理は行いません。 $.post("test.php", { 'choices[]': ["Jon", "Susan"] } ); test.phpにフォームの
連想配列の使用方法 [Java Script - 配列 - Tips]
連想配列とは、キーを指定して値をセット出来る配列です。 JavaでいうところのHashMap、.Netでいうところのhashtableです。 ただし、JavaScriptではプロパティと同じ意味合いになっています。 内部では厳密には違うのかもしれませんが、少なくとも使い方は一緒です。 1. 連想配列に値をセットする方法 - その１ // 連想配列を生成する var myObj = { key1: 'value1' , key2: 'value2' }; 2. 連想配列に値をセットする方法 - その２ var myObj = new Object(); // 連想配列に値をセットする myObj['key1'] = 'value1'; myObj['key2'] = 'value2'; 3. キーを指定して値を取り出す方法 // value1 と表示される alert( myObj['key
Math - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback Math は名前空間オブジェクトで、数学的な定数と関数を提供する静的プロパティおよびメソッドがあります。 Math は Number 型で動作します。 BigInt 型では動作しません。
JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();
気になったら即調べるが吉、ということで。 数値→文字列 var num = 123; // わかりやすい String(num); // "123" num.toString(10); // "123" // この用途では使ったこと無い num.toFixed() // "123" // なるほど num + ''; // "123" 文字列→数値 var str = '123'; // わかりやすい Number(str); // 123 parseInt(str, 10); // 123 parseFloat(str); // 123 // なるほど str - 0; // 123 str * 1; // 123 str / 1; // 123 // すっきりやけど知らん人は読めない +str; // 123 -(-str); // 123 ~~str; // 123 str&-1;
LocalStorageとは？ その使い方を徹底解説！
今回はHTML5で新たに追加されたLocalStorageをご紹介します。今まではアクセスしたユーザの情報を永続的に保持するためには、クッキーやセッションを使用しなければなりませんでした。サーバサイドではこの方法で問題ないのですが、これをフロントエンドで実現するには一手間必要です。javascriptでクッキーを簡単に扱うためのプラグインのjquery.cookieなんかは割と有名かと思います。 SessionStorageの使い方はこちら→javascriptでセッション？HTML5 SessionStorageの使い方 LocalStorageとはWebStorageと呼ばれるものの一つで、javascriptを用いてクライアント側にデータを保存する仕組みです。ユーザのローカル(ブラウザ)にデータを保存することができるので、半永久的にデータを保持することができます。データの読み込み・更
typeof演算子
console.log(typeof 80); >> number console.log(typeof 80n); >> bigint console.log(typeof 'Pen'); >> string console.log(typeof true); >> boolean console.log(typeof null); >> object console.log(typeof NaN); >> number console.log(typeof undefined); >> undefined console.log(typeof Symbol('A')); >> symbol console.log(typeof [10, 20]); >> object console.log(typeof {a:'abc'}); >> object let func = functio
今さらながらJavaScriptのwindow.openについて調べてみた。 - 小さい頃はエラ呼吸
はじめに JavaScriptで新規ウインドウを表示するコードを書いていて、ちょっとつまづいたので、今さらながらJavaScriptのwindow.openや親子ウインドウの制御について調べてみました。※以下のコードはすべてIE7で検証しています。 ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)posted with amazlet at 13.01.23外村 和仁 技術評論社 売り上げランキング: 17,179 Amazon.co.jp で詳細を見る window.openメソッドの使い方 window.openメソッドの第１パラメタには、表示するファイルを指定します。第２パラメタにはウインドウの名前、第３パラメタには、子ウインドウに対するオプションを指定します。第１パラメタ以外は、省略可能です。（ちなみにwindow.の部分も省略可能です
Yahoo! UI Library 3（YUI3）の基本
「Yahoo! User Interface Library Ver.3」（YUI3）はYahoo!が開発した、Webのページを作成するための汎用ツールライブラリーです。オープンソースで無償で提供されており、アニメーション効果やドラッグ＆ドロップ、データ取得やイベントの応答など、多岐にわたる機能がサポートされています。今回はまずYUI3の全体像を紹介します。 はじめに Yahoo!は、米国時間9月29日に「Yahoo! User Interface Library Ver.3」（YUI3）をリリースしました。YUI3はJavaScriptやCSS（Cascading Style Sheet）で書かれた、Ajaxライブラリーです。 Yahoo!は今まで、インターネットによる情報提供のためのさまざまなツールを作成してきました。開発したツールの中でも、Webのページを作成するのに汎用的に使えるツ
Javascriptで開いた子画面から親画面の関数を呼び出す
Javascriptで開いた子画面（ポップアップウィンドウ）から、親画面の関数を呼び出します。 子画面から親画面を操作するにはwindow.openerを使う Javascript子画面から親画面を操作するにはwindow.openerを使います。 それを応用すると子画面から親画面の関数や変数が利用できるようになります。 (親画面のソース） <html> <head> <script language="JavaScript"> function parentFunc(myname) { var innerObj = document.getElementById( "my_name" ) ; innerObj.innerHTML = "私の名前は" + myname + "です。" } function childDsp() { window.open( "子画面のURL", "chil
jQuery UIのDraggableで快適なドラッグアンドドロップライフを！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。づやです。 さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。 そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。 5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。 便利なjQuery UIのDraggableを利用します と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。 ※コードは大事な所だけ抜粋しています <html> <head> <!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます --> <script src="//ajax.googleapis
Ajax - jQuery 入門
jQuery を利用することで Ajax (エイジャックス) のコードもかなり簡易化することが可能です。 一般には Ajax を利用するに際して jQuery を利用する動機としてはブラウザの違いを吸収するということに加えて、ネットワークを介する呼び出しとなることから煩雑になりがちなエラー処理をスマートに行うということがあげられます。 ここでは具体例を通して使い方をみていきます。 jQuery 1.8 以降でそれ以前の Ajax メソッド (success, error, complete) は deprecated というステータスになりました。 こちらの新しい Ajax 利用方法を参考にしてください。 サーバーから HTML を取得して、 div 要素にセットする ここではボタンをクリックした時に、バックエンドでサーバーから HTML 文書を取得し、その HTML をそのまま div
Mochaを使ってJavaScriptのテストをブラウザで実行してみよう
対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 JavaScriptのテスティングライブラリの分類 JavaScriptには、テストを記述するためのライブラリが多く用意されています。ライブラリには、大きく分けて「テスティングフレームワーク」と「アサーションライブラリ」があります。まずはこの2種類の違いについて説明します。 テスティングフレームワーク テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能を持ちます。ブラウザでのテストの場合、ブラウザ上でグラフィカルにテスト結果を表示することもありますし、サーバサイドのJavaScriptであるNode.js向けにはコマンドラインで実行し、結果を表示する機能も持ちます。 アサーションライブラリ テスティングフレームワークは、テスト
JavaScript/ウィンドウ/確認ダイアログを表示する - TAG index
確認ダイアログを表示するスクリプトです。 OKボタンとキャンセルボタンが付いたダイアログが表示されます。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function disp(){ // 「OK」時の処理開始 ＋ 確認ダイアログの表示 if(window.confirm('本当にいいんですね？')){ location.href = "example_confirm.html"; // example_confirm.html へジャンプ } // 「OK」時の処理終了 // 「キャンセル」時の処理開始 else{ window.alert('キャンセルされました'); // 警告ダイアログを表示 } // 「キャンセル」時の処理終了 } // --> </scrip
JavaScriptでスパイ、スタブ、モックなどのテストダブルを行う
本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義から、テスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなどテスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第4回目の本稿は、JavaScriptでのテストダブルの方法を、Sinon.jsというJavaScriptテストダブルモジュールを使って説明します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 テストダブルとは テストコードを実行する際に、次のような課題に直面したことはないでしょうか。 Ajaxへのサーバへの問い合わせのような外部リソースも含めた処理のテストを行う必要があるが、テストデ
「OK/キャンセル」ダイアログを表示して確認・分岐する方法 - JavaScript TIPSふぁくとりー
《2017年6月5日 4:30 PM 公開/更新》 「OK/キャンセル」ダイアログを表示して確認・分岐する方法 [機能] JavaScriptを使って「OK」ボタンと「キャンセル」ボタンのあるダイアログを表示して閲覧者に確認を取り、その結果に応じて処理を分岐させるには、confirmメソッドを使います。confirm(‘メッセージ’); のように記述して使い、返されたtrue/falseの値をチェックして条件分岐を作れば良いだけです。 「OK/キャンセル」ダイアログを表示して確認・分岐する方法 確認ダイアログから返される値がtrueかfalseかをif文で判別するだけ 「OK/キャンセル」ダイアログを表示して確認・分岐する方法 JavaScriptでは、[OK]ボタンと[キャンセル]ボタンの2つのボタンがあるダイアログボックスを表示して、ユーザに可否を選択させることができます。 例えば、ペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
Jasmine使い方メモ - Qiita
