JavaScript

JavaScriptのstrictモードの呼び出し方。

JavaScriptとは JavaScriptとは、型指定の弱いスクリプト言語である。 JavaScriptはオブジェクト指向のプログラミング言語である。 JavaScriptはクラスベースではなく、プロトタイプベースの言語である。 DOCTYPEとは DOCTYPEとは、ページで使用するHTMLのバ…

jQueryで属性を操作するサンプル

attrメソッドで属性を設定する attr(属性の名前,値);サンプルはこちら。 <html> <head> <meta charset="utf-8"> <title>jQueryサンプル</title> <script src="js/jquery.min.js"></script> <script> $(document).ready(function() { $('#button').click(function() { $('input[type="text"]').attr( { value: 'valueを設定するでござる!', title:'value!!…</meta></head></html>

jQueryプラグインを使ってJavaScriptオブジェクトをJSONに変換するサンプル

jquery-jsonプラグイン jQueryを使って、JavaScriptのオブジェクトをJSONに変換し、サーバ側に送信したい。 そういうときに便利なのが、jquery-jsonというライブラリだ。 「jquery-json」 https://code.google.com/p/jquery-json/このライブラリを使うと、Ja…

jQueryでボタンの二重送信を防止するために二度目からボタンを無効化する方法。

チェックされた状態にあるすべてのチェックボックスを選択したい場合 $('input[type=checkbox][checked]') eachメソッド each(iterator) マッチした集合の全部の要素を走査し、それぞれの要素について渡された反復処理関数iteratorを呼び出す。 $('img').eac…

jQueryで要素を追加したり、属性値を取得するサンプル

jQueryで要素を追加する HTMLの断片を動的に生成し、bodyに追加したいときがある。 jQueryのメソッドを使って、要素を作成して追加するサンプルを以下に示す。 jQueryのすごいところは、いとも簡単に要素を作成し、それにcssを設定したり、clickしたときのク…

jQueryのセレクタについてまとめ。

でしゃばらないJavaScript(Unobstrusive JavaScript) jQueryの開発者の中で注目された「でしゃばらないJavaScript(Unobstrusive JavaScript)」とは、 「HTML文書は、「スタイル」と「振る舞い」と「構造」を適切に分離させようという手法のことである。 具体…

jQueryでボタンをクリックした時に、フォームに入力した値を取得する。

入力画面(フォーム)を作るHTML フォームを構成するのは <form>〜</form> である。 method属性にはデータの送信方法、action属性には入力データを処理するプログラムのURLを指定する。 以下はbodyタグの部分の記述だが、表示するとこんな感じになる。 <form method="post" action="" id="formtest"> <p> <label for="user">名前</label> <input type="text" id="user" name="username" /> </p> <p> <label for="gender">性別</label></p></form>

片方のHTMLファイルから他のHTMLファイルをjQueryで読み込んで表示させる。

jQueryを使って、一方のHTMLファイルから別のHTMLファイルの内容を読み込んで表示するサンプル 読み込む側のHTML(test1.html)は以下の通り。 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script type="text/javascript"> $(f…</head></html>

jQueryでtextareaの値やテキストボックスの値を取得するサンプル

jQueryで要素を指定する jQueryは多くのセレクタをサポートしていて、セレクタに適合した要素が指定の対象となる。 これはCSSセレクタの例。CSSっぽく要素を指定することができる。 名称 指定の対象 書式など 型セレクタ 同じ名前の要素 $('div);とか$('a');…

JavaScriptの設定オブジェクトパターンやコールバックパターンについて。

JavaScriptの関数の引数にアクセスする JavaScriptで実引数にアクセスするには、argumentsオブジェクトを使う。 以下のサンプルのように、引数の値にアクセスすることができる。 function hoge() { console.log(arguments.length); console.log(arguments[0]…

JavaScriptの関数の勉強 その1

JavaScriptパターンと、パーフェクトJavaScriptで勉強したことのまとめ ver.01 JavaScriptの関数 JavaScriptの関数の2つの特徴 第一級のオブジェクトであること スコープを提供すること JavaScriptの関数はオブジェクトである、と。 それはどういうことなの…

JavaScriptでオブジェクトリテラルを使ったり、配列リテラルを使うサンプル。

JavaScriptのthis参照 this参照はオブジェクトを参照する。参照先はトップレベルコードと関数内で異なる。 基本的な規則は以下の通り。 トップレベルコードのthis参照はグローバルオブジェクトを参照 関数内のthis参照は関数雨の呼び出し方法で異なる 詳しく…

JavaScriptの基礎の復習。

JavaScriptの基礎をもう一度復習する。 一度こなれてからやることで、より深く基礎を理解できる。 JavaScriptの変数 JavaScriptは実はvarを省略して変数を宣言することができる。 var無しで宣言する変数を、「暗黙の宣言をした変数」と呼ぶ。関数の外部でvar…

jQueryのフィルタなどのメモ。

jQueryでテキストボックスの値を取得する。 jQueryでテキストボックスの値を取得するためのフィルタは「:text」というもの。 陳腐なサンプルだが、ボタンクリックでテキストの値をアラートで表示する。 <html> <head> <meta charset="utf-8"> <title>タイトル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(…</meta></head></html>

JavaScriptの関数の使い方の基礎 復習。

関数について すべての関数は常に値を返す。 return文を記述子ない場合やreturn文で戻り値を明示的に指定していない場合に返される値はundefinedになる var sayHello = function() { return "Hello"; } // > undefined console.log(sayHello()); // > Hello …

jQueryでHTML要素を取得するサンプル

jQueryでHTMLコンテンツを取得するサンプル $('p').html(); とすることで、p要素のHTMLコンテンツを取得して表示することができる。 たとえば、以下の実行結果は、 <html> <head> <meta charset="utf-8"> <title>Webページに含まれるHTMLコンテンツを取得する</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> </meta></head></html>

初めて夏バテなるものを経験した。

私記 今日は暑かったですね。私は昼にカレーを食べに行って、なんと1時間待ちでした。 行列を見た瞬間方向転換すればよかったものを、一度並んでしまってはなかなか脱出できず、延々と並ぶハメに。 並んだ時間がサンクコストになることを恐れつつ、ここまで…

jQueryでXMLを読み込んで、画面に表示するサンプル

以下のようなXMLファイルを読み込みたい。 <friend_list> <friend gender="male"> <name>sho322</name> <job>Engineer</job> <interests> <interest>programming</interest> <interest>swimming</interest> <interest>jogging</interest> </interests> </friend> <friend gender="female"> <name>han…</name></friend></friend_list>

GoogleのMap Chartsを使って、日本地図や各都道府県の画像を表示するURLの使い方のまとめ

$(document).readyと$(windo).loadの違い $(document).readyはHTMLページのコードの読み込みが完了したときに実行する処理を指定する。 しかし、このときに画像の読み込みが終わっている保証はない。 $(document).ready 一方で、$(window).loadは画像を含め…

Atomやクロスオリジン制限について学んだことのメモ。

APIとは、アプリケーション・プログラムとシステムの間の境界を指す言葉で、Application Programming Interfaceの略。 新人の時はAPIの意味がよくわからなかったのだけれど、TwitterのWeb APIなんかを自分で使うようになってやっと実感できた。 Web APIが想…

jQueryでHTMLのテキストの値を書き換えるサンプル。

jQueryでは特定の要素を選択するのに、$関数を利用する。 要素を選択するために記述する$関数の引数をjQueryセレクターあるいは、単にセレクターと呼ぶ。 基本的なセレクターの書式 タグ名を使って選択する $("タグ名")id名を使って選択する $("#id名")class…

jQueryメモ。

JavaScriptのライブラリ JavaScriptは誕生から約15年が経過した「枯れた言語」で、誕生時から大きな仕様変更も無い。 仕様が枯れているため、書籍やネットの情報が陳腐化しにくい。 この「枯れる」というのは「使われない」という意味ではなく、仕様が固まっ…

JavaScriptメモ

たいしたこと書いてないからタイトルは適当。 「作りながら覚えるHTML5 + JavaScript」を勉強していて、 JavaScriptでJSONをParseするところを学んだので、その処理部分だけメモする。 こんな感じ。 function requestSearch(uri) { var xhr = new XMLHttpReq…

Queryのイベント操作いろいろ

jQueryのイベント操作のまとめ ユーザーの操作を「イベント」といい、イベントに対して個別に処理を割り当てる。 割り当てられた処理プログラムのことを「イベントハンドラ」という。 イベントバブリングとは、イベントが泡のように親要素に伝搬することを表…

Flickr APIを使って、取得した写真を表示するJavaScriptのサンプル

Flickr APIを取得するための手続き(手順) ■アメリカ版のYahooアカウントを作成する 1.以下のURLを開く。 http://www.flickr.com/services/developer/2.左上の「Sign Up」をクリックする。3.Create New AccountよりYahooアメリカのアカウントを作成する。4.Fl…

CSVファイルをテーブル付きのグラフにするjQuery plugin

準備 以下のプラグインをダウンロードする。 ■ccchart.js ccchart.jsは以下のURLからダウンロードできる。 http://ccchart.com/■csv2table.js csv2table.jsは以下のURLからダウンロードできる。 https://code.google.com/p/leocenter/downloads/detail?name=…

データをExcel風の表にして表示するjQueryプラグイン

データをExcel風の表にして表示するjQueryプラグイン JavaScriptで、ブラウザにキレイな表を表示させたいとずっと思っていた。 で、色々と探していたんだけど、jQuery Grid Pluginなるものがあった。 以下からダウンロードできる。 http://paramquery.com/デ…

jQuery & AjaxでサーバからのJSONレスポンスを読み込んでブラウザに表示させる。

Ajaxとは AjaxというのはAsynchronous JavaScript and XMLの略で、Webブラウザで実行されるJavaScriptプログラムとWebサーバとの間でデータを送受信する仕組みのこと。 Ajaxの処理を始めるために必要な設定項目は以下の通り。 処理を開始するきっかけ Webサ…

jQueryで手元のHTMLを読み込んで表示するサンプル。

Ajaxとは AjaxとはAsynchronous JavaScript+XMLの略で、ページを移動せずにWebサーバと通信を行い、表示内容を書き換えていく仕組みのこと。 jQueryを使って、手元にあるHTMLファイルを読み込んでみる ・ボタンクリックで、手元のHTMLを読み込んで表示するサ…

jQueryでCSVを読み込んでテーブルに表示させることができずにハマる。

こんな感じでサンプルを作っていたんだけれど、ハマる。 <html lang="ja"> <head> <title>jQueryでCSVデータを読み込んで表示させる</title> <meta charset="utf-8"> <link rel="stylesheet" href="jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.css"> </link></meta></head></html>