JavaScript

end()メソッドを使う場合と使わない場合

jQueryの公式リファレンスによると、end()メソッドはこんな説明があります。 jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻します。 http://semooh.jp/jquery/api/traversing/end/_/これだけだと微妙にわかり…

配列操作を簡単にするJavaScriptのイテレーションメソッド一覧

JavaScriptの配列を回したいときは、イテレーションメソッドを使うとけっこう便利だ。 ES5で追加されたイテレーションメソッドを見ていく。・forEach 各要素に対して、任意の処理を逐次実行する。 var numbers = [1,2,3,4,5]; numbers.forEach(function(val)…

JavaScriptのオブジェクト

1.ポイント ・JavaScriptの単純な変数型は、数値、文字列、真偽値、null、undefinedがある ・それ以外は全てオブジェクト ・JavaScriptのオブジェクトは参照渡し ・JavaScriptのオブジェクトはミュータブル。すなわち、変更可能なデータの集合体 ・オブジェ…

jQueryでlistの中のhrefの値を取得して、クラスを追加

以下のようなナビゲーションメニューがあるとする。 <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="test1">テスト1</a></li> <li><a href="test2">テスト2</a></li> <li><a href="test3">テスト3</a></li> <li><a href="test4">テスト4</a></li> <li><a href="test5">テスト5</a></li> </ul> </div> これはbootstra…

jQuery find()とfilter()の違い

id:buzzword111さんが以下の記事で、「jQueryで、HTML文字列をDOM変換したDOMオブジェクトをfindで検索が出来ない・・・・・。」と悩んでおられた。 http://buzzword111.hatenablog.com/entry/2014/02/20/021433 ちょっと調べてみたんだけど、結論からいうと…

jQuery news tickerでRSSのリンクをティッカー表示する。

1.前提 以下の画像のように、左から右に流れるような帯に、RSSフィードの内容を表示させたい。 クリックすると、そのタイトルの先に飛べれば、Webページのちょっとした飾りにも使えるかもしれない。こんな感じで、文字が左から流れてくる。 で、クリックする…

JavaScriptで、setTimeoutを使ってsleep処理

1.前提 Google Feed APIを使って、RSSフィードを読み込むのを待ってから、次の処理を開始したい。 要は、JavaScriptで処理を止めて、何かを待ちたいとき。これの次の記事にjQuery Deferredのサンプルを載せて、そっちの方がスマートなんだけど、まずは原始的…

JavaScript シングルトンパターン

1.基礎 シングルトンパターンは、作成されるクラスのインスタンスが1つのオブジェクトに制限されるもの。 シングルトンパターンの実装は、クラスのインスタンスが存在しなければ新規作成し、インスタンスが既存であれば単にそのオブジェクトへの参照を返す…

JavaScript 「this」のメリットと処理性能

1.基礎知識のまとめ ・処理のパフォーマンスを向上できる ・内側のコードを使いまわしやすくなる ・$()関数に複数のセレクタを指定した場合に処理の切り分けが可能になる 引用元)「jQuery最高の教科書 p.79」 2.処理パフォーマンスの比較 下のサンプルで700,…

JavaScriptでストップウォッチ作ろうとして心折れた

後で直すようにメモ。 検索で一番上に出てくるコレ↓に止めたところから再始動の機能をつけたかったんだが・・・ http://www.scollabo.com/banban/java/jvsample_014.html 結局ダメ。 時間の差分がうまくとれなかった。 21時から3時まで無駄に時間過ごしてし…

Deferredのdone(), fail(), always()

1.基礎 ・done() done()は状態がresolvedになった場合に実行する・fail() fail()は状態がrejected()の場合に実行する・always() always()で指定した処理はresolved,rejected両方で実行される・resolveWith(), rejectWith() 第一引数に後続関数内でthisが参照…

jQuery Deferredの基礎 then()メソッドの使用例

1.基礎 Deferredは非同期処理をわかりやすいソースコードとして読み書きするための仕組みである。Deferredはunresolved,resolved,rejectedのいずれかの状態を持つ。 初期状態はunresolvedで、状態がunresolvedである限り、皇後続の処理は実行されない。 2.サ…

jquery-webtickerを使って、文字が流れるティッカーを作ってみるサンプル

なんか株価が流れる電光掲示板みたいに、ブラウザ上で文字が右から左へと流れる仕組みを作りたい。 ニュースとか、ツイートとか、動きながら右から左へ流れていくとちょっとカッコ良さそうだ。で、そういうのを実装するのに適したライブラリがjquery-webtick…

jQuery Deferredを使って、2つのリクエストの結果を待ち合わせて後続の処理を実行する。

基礎知識 jQuery Deferredは、jQueryのバージョン1.5からサポートされた機能で、Ajaxのような非同期処理を監視することができる。下記の2つのリンクが非常に詳しい。 http://s3pw.com/qrefy/deferred.done/ 爆速でわかるjQuery.Deferred超入門defferedとは…

JavaScriptでオブジェクトを生成する方法。new演算子を使う場合と、オブジェクトリテラルを使う場合の説明。

new演算子とObjectコンストラクタを組み合わせて生成する JavaScriptで新しくオブジェクトを作るには、以下のようにnew演算子、Objectコンストラクタを組み合わせる。 var jObject = new Object(); これにプロパティを持たせるには以下のようにする。 //Java…

ブログで色々公開したら、恥をかいたけどすごく勉強になった。

http://b.hatena.ne.jp/entry/d.hatena.ne.jp/dropdb/20080115/p1@raf00 「ブロガーなら公開して恥をかけ、バカめ」公開しなければ始まらないですよ!— 加野瀬未友 (@kanose) 2012, 12月 42日前にsetInterval()を使って、JavaScriptでタイマーで設定した一定…

setInterval()を使って、JavaScriptでタイマーで設定した一定時間ごとに動作を繰り返す(定期更新/実行する)サンプル

今日は正月であまり食事に出る気にもならず、ピザを取ることにした。ドミノ・ピザはネットで注文ができる。 注文してみたところ、注文完了後、「オーダー状況追跡システム」なるものが。ドミノ・ピザはこちら↓ http://www.dominos.jp/楽しそうだから見てみる…

jQueryの基礎と、animate()メソッドやon()メソッドの使い方

jQueryって何? jQueryというのは、オープンソースのJavaScriptのライブラリのこと。 2006年にJohn Resig氏によって開発・発表された。ライブラリというのは、よく使用する機能や効果を実現するプログラムをあらかじめ作成しておき、再利用できる形にまとめ…

YoutubeのJavaScriptのAPIを使って、Youtube動画を検索して再生するサンプル

YouTube APIとかツールを使うと、ウェブページ、アプリケーション、デバイスなどにYoutubeを組み込むことができる。 Data APIでは通常ユーザがYoutubeのウェブサイト上で行う操作のほとんどを実行できる。 つまり、Youtubeを無限に1曲リピートしたりするのは…

jQueryでツールチップを自作&カスタマイズして表示させてみるサンプル

ツールチップって? ツールチップとは、補足情報を表示するための吹き出しのこと。 何か注意書きをするときに、カーソルを当てたときにフワッと浮き出る感じになる。 サンプルの画像のイメージはこんな感じ。 サンプルコード まずは、プラグイン風にツールチ…

JSONでサーブレットにリクエストを投げて、レスポンスのJSONにあるメッセージをブラウザに表示するサンプル

サーブレットとJavaScript間のメッセージのやり取りをJSONを使って行いたい場合。 つまり、リクエストをJSONで飛ばして、レスポンスとして返ってきたJSONをJavaScript側で解析するということ。 RESTfulなWebアプリケーションを作る一歩目になる。 では、ブラ…

jQueryプラグインballoon.jsを使って吹き出し表示したり非表示にする方法。入力値をチェックして、注意書きを吹き出しで表示するサンプルを作ってみる。

balloon.jsの使い方。 以下の公式サイトからballoon.jsをダウンロードする。 「The latest version of jquery.balloon.js」のところにあるリンクをクリックすればいい。 http://file.urin.take-uma.net/jquery.balloon.js-Demo.html で、適当なjsフォルダに…

jQuery-uiのカレンダー(datepicker)の日付フォーマットをyyyy/mm/ddに変更する

jQuery-uiのカレンダー Datepickerともいう。 http://jqueryui.com/datepicker/ 上記のURLにあるように、 CSSを <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> に設定。 あとは、以下のように、jqueryとjquery-uiを読み込むことが発動条件となる。 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </link>

JavaScriptの名前空間パターン

名前空間パターン JavaScriptでは、言語の構文としての名前空間は組み込まれていない。 名前空間というのは,Javaでいうと「java.lang.String」みたいに、ドットで区切ってある特定のクラスを一意に定義するためのものである。 たとえば、java.lang.Stringとc…

画像クリックで背景が暗くなって、拡大画像が表示されるようになるjQueryサンプル

読み込み中の「Now loading」のグルグルを手に入れるには 以下の「Loader Generator」を使えばいい。 http://loadergenerator.com/ 自分でグルグルを作って、それを好きにダウンロードすることができる。他にもCSSジェネレータなるものがある。 http://web-d…

show(),hide(),toggle()で要素を表示したり非表示にしたりする。

非表示に設定されている要素を表示する 要素選択.show(速度);非表示に設定されている要素を表示するにはshow()メソッドを使うが、アニメーションっぽく演出するには、引数に速度を指定する。 速度は"slow","normal","fast"かあるいは数値(1/1000秒=ミリ秒)で…

jQueryで要素を出したり閉じたりする(表示と非表示を演出する)

ボタンや画像をクリックしたら説明文を出したり、何か違う画像を出したいときがある。 そういうアニメーションを演出するには、jQueryのshow()メソッドやhide()メソッドを使えばいい。(1)ボタン(またはボタンとなる画像)を設置 (2)そこで開く要素を探しだす …

【JavaScript】スコープとグローバルオブジェクトについて

JavaScriptのグローバルオブジェクト windowオブジェクトや、他の環境でwindowと同等の働きをするオブジェクトは「グローバルオブジェクト」と呼ばれる。 すべてのJavaScriptの実行環境は、単一のグローバルオブジェクトを持たなければならない。 JavaScript…

テーブル形式のテキストに値を入力して、jQueryで中の値を取得する

テーブルにテキストボックスを配置する テーブル形式で値を取得するには、まずテーブルを用意して、そのtdにinput type="text"のボックスを埋め込んでいく。 イメージはこんな感じ。 HTMLはこうなる。 <body> <h2>テーブルっぽい箱に値を入力して、それを取得する</h2> <table class="memberTable" id="memberTable" > <tr><th>メ</th></tr></table></body>…

JavaScriptで変数の存在をチェックする。それがundefinedかどうか。グローバルに宣言されているか。

グローバル変数とローカル変数 グローバル変数とは、トップレベルコードで宣言する変数のこと。 トップレベルコードとは、関数の外に書いたコードのこと。 一方、ローカル変数とは、関数内で宣言する変数のこと。 グローバル変数とローカル変数は両者とも、…