JavaScript « 夢茶爺＆空茶爺のPC奮戦備忘録

クラス -> Utilities -> Utilities -> formatDate（日付フォーマット）

Posted by muchag | Google Apps Script |
初回投稿：2015-03-05 (木) 18:19:43 | 最終更新：2015-03-05 (木) 18:19:43

日付フォーマットメソッド。

書式

formatDate(date, timeZone, format)

formatDate(date, timeZone, format)

引数１：Date オブジェクト
引数２：タイムゾーン。日本の場合は ‘Asia/Tokyo’
引数３：フォーマット
返り値：指定フォーマット文字列
　

例

[gas language=”js” firstline=”” highlight=””] var formattedDate = Utilities.formatDate(new Date(), “GMT”, “yyyy-MM-dd’T’HH:mm:ss’Z'”);
Logger.log(formattedDate);
[/gas] 　

参考サイト

Qiita：GASの怖い話と対策となんか

Posted by muchag | Google Apps Script |
初回投稿：2015-03-05 (木) 18:19:43 | 最終更新：2015-03-05 (木) 18:19:43

Comments (0)

クラス -> 内部関数

Posted by muchag | JavaScript |
初回投稿：2015-02-28 (土) 0:27:09 | 最終更新：2015-02-28 (土) 0:38:35

内部関数は、ちょっと特殊みたい。

内部関数とは

クラス内に設置したローカルメソッド。
外部からは呼べない。

var hoge = ( function() {
// constructor
var hoge = function() {
this.x = 5;
};
// 内部関数（クラス内メソッド）
function moge() {}　← これ
var p = hoge.prototype;
p.f1 = function() {
return true;
};
return hoge;
})();

呼び出し

コンストラクタからでも、公開メソッドからでも関数名（メソッド名）で呼び出せた。

p.f2 = function() {
moge();
};

特殊なところ

this

内部関数内では、this を使えない。
解決策は後述。
　

引数

引数があると、通常通りでは呼び出せなかった。

function moge( arg ) {}
p.f2 = function() {
moge( arg );
};

これでは、syntax error にはならないけど、値が渡らない。
　

解決策

上記２点を一度に解決。
（解決法はわかったけど、まだあまりよく理解できていない）

apply メソッド、または call メソッドを利用する。

つまり、下記のように呼び出す。

function moge( arg ) {}
p.f2 = function() {
moge.apply( this, arg );
moge.call( this, arg );
};

誰それ

参考サイトを見ると

callはFunction.prototypeの中にあります。

あと味：applyとcallの使い方を丁寧に説明してみる

と書いてあるので、プロパティ・オブジェクトからの呼び出しだから、というなのかもしれないけど、今はまだよくわかっていない。
　

this はどこへいった・・・

引数に指定した this。
でも、内部関数側は受け取っていない。

どうも、自動的に（強制的に？暗示的に？）受け取るらしく
これで、内部関数内で this を利用できる。

また、何も this を渡さなければいけないわけではなく
要は内部関数内で this と記述して利用したいオブジェクトを指定すればよいらしい。
　

両者の違いは？

apply

var args = [ 1, 2, 3 ];
moge.apply( this, args );

apply は、this 以外の引数を、配列にまとめて渡す。
本当に配列を渡すときとか、引数が多い時、または変更が頻繁にあるときなどには便利。
　
call

moge.call( this, 1, 2, 3 );

call は、this 以外の引数を列挙して渡す。
　

参考サイト

あと味：applyとcallの使い方を丁寧に説明してみる

Posted by muchag | JavaScript |
初回投稿：2015-02-28 (土) 0:27:09 | 最終更新：2015-02-28 (土) 0:38:35

Comments (0)

クラス -> グレートなつくりかた

Posted by muchag | JavaScript |
初回投稿：2015-02-27 (金) 21:27:25 | 最終更新：2015-02-28 (土) 0:03:11

JavaScript は滅多に使わないので、今までクラスとは無縁できたけど、これからは是非クラスを利用していきたい。

以前、つかみという JavaScript クラスの基本について書いたけど、今回はグレートなつくりかたという記事を見つけたので、改めて基本記事を作成。

グレートなつくりかた

var hoge = (function() {
var FOOFOO = 777; // クラス内定数
// constructor
var hoge = function(arg) {
this.x = 5;
this.y = 10;
this.z = arg;
};
var p = hoge.prototype;
p.f1 = function() {
return true;
};
p.f2 = function() {
return false;
};
return hoge;
})();
var instance = new hoge(1);
// hoge {x: 5, y: 10, z: 1, f1: function, f2: function}

Qiita：【javascript】やさしいクラスの作り方
より引用。
　
この書き方だと、１クラス１ブロックになって、見やすい。 😎
　
せっかくなので、覚書用に改変。

var hoge = ( function() {
var FOOFOO = 777; // クラス内定数
var foo = 777; // クラス内変数
// constructor
var hoge = function( arg ) {
this.x = 5;
this.y = 10;
this.z = arg;
};
// 内部関数（クラス内メソッド）
function moge() {}
var p = hoge.prototype;
p.f1 = function() {
return true;
};
p.f2 = function() {
return false;
};
return hoge;
})();
var instance = new hoge(1);
// hoge {x: 5, y: 10, z: 1, f1: function, f2: function}

参考サイト

Qiita：【javascript】やさしいクラスの作り方
Qiita：[JavaScript]クラス、関数、オブジェクトクラス

Posted by muchag | JavaScript |
初回投稿：2015-02-27 (金) 21:27:25 | 最終更新：2015-02-28 (土) 0:03:11

Comments (0)

pjax（defunkt） -> フォームの値の受け渡し

Posted by muchag | jQuery,Library & PlugIn & AddIn,困ったTT |
初回投稿：2015-02-18 (水) 12:44:50 | 最終更新：2015-02-18 (水) 13:33:45

フォームの値の受け渡しについて。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4

GET

GET 渡しはすんなりできた。

var url = 'index.php';
var data = {
name : $( 'input[name = "name"]' ).val(),
value : $( 'input[name = "value"]' ).val()
};
$.pjax({
url: url,
type: 'GET',
data: data,
container: '#container',
});

// print_r( $_GET ); 結果
Array
(
[name] => hoge
[value] => 1
)

JSON

dataType を json にしても、結果は同じ。

$.pjax({
url: url,
type: 'GET',
data: data,
dataType: 'json',
container: '#container',
});

JSONP

dataType を jsonp にすると、２つばかり $_GET の値が増えた。。。

$.pjax({
url: url,
type: 'GET',
data: data,
dataType: 'jsonp',
container: '#container',
});

// print_r( $_GET ); 結果
Array
(
[callback] => jQuery21309920695357463317_1424227516871
[name] => hoge
[value] => 1
[_] => 1424227516872
)

まぁ、JSON と JSONP のお勉強は今度ということで。 🙄
　

POST

var url = 'index.php';
var data = {
name : $( 'input[name = "name"]' ).val(),
value : $( 'input[name = "value"]' ).val()
};
$.pjax({
url: url,
type: 'POST',
data: data,
container: '#container',
});

// print_r( $_POST ); 結果
Array
(
)

$_POST を取得できていない。
そして通信時間が長くなった。

dataType を text にしても、結果は同じ。
　

serialize()

data を serialize() にしても結果は同じ。

var url = 'index.php';
$.pjax({
url: url,
type: 'POST',
data: $( 'form' ).serialize(),
container: '#container',
});

JSON, JSONP

dataType を json にしたら、通信すら行われなくなった。
JSONP にしても、通信は行われない。

$.pjax({
url: url,
type: 'GET',
data: data,
dataType: 'json',
container: '#container',
});

　
困った
仕方ないので、今回は GET で対応。

Posted by muchag | jQuery,Library & PlugIn & AddIn,困ったTT |
初回投稿：2015-02-18 (水) 12:44:50 | 最終更新：2015-02-18 (水) 13:33:45

Comments (0)

フォームの値処理

Posted by muchag | jQuery |
初回投稿：2015-02-17 (火) 18:55:45 | 最終更新：2015-02-17 (火) 18:55:45

フォームの値の取得と設定。
一覧サイトをめっけたので、参考サイトのみ。

参考サイト

JavaScript好き：jQueryにおけるフォーム値の取得と設定

Posted by muchag | jQuery |
初回投稿：2015-02-17 (火) 18:55:45 | 最終更新：2015-02-17 (火) 18:55:45

Comments (0)

タブメニュー　横その１

Posted by muchag | jQuery |
初回投稿：2015-02-17 (火) 18:10:40 | 最終更新：2015-02-17 (火) 18:11:33

横並びのタブメニューその１。

【環境】
jQuery:1.11.2

HTML

<div id="tab">
<ul>
<li>tab_1</li>
<li>tab_2</li>
<li>tab_3</li>
</ul>
</div>

CSS

#tab ul li {
float: left;
height:20px;
margin:0px 0px 0px 10px;
padding:5px 15px 5px 15px;
border:1px solid #ddd;
color: #999;
background-color:#ddd;
cursor:pointer;
}
#tab ul li.selected {
color: #000;
background-color:#fff;
cursor:default;
}

jQuery

$( '#tab ul' ).on( 'click', 'li', function() {
$( 'li.selected' ).removeClass( 'selected' );
$( this ).addClass( 'selected' );
})
$( '#tab ul li' ).first().trigger( 'click' );

　
ソースはほぼ参考サイトからいただいてきた。
　

参考サイト

jQuery 入門：タブメニュー(1)

Posted by muchag | jQuery |
初回投稿：2015-02-17 (火) 18:10:40 | 最終更新：2015-02-17 (火) 18:11:33

Comments (0)

.first()

Posted by muchag | jQuery |
初回投稿：2015-02-17 (火) 17:50:13 | 最終更新：2015-02-17 (火) 17:52:15

エレメントセットの中の最初のエレメントを拾ってくるメソッド。

jQuery：.first()

【環境】
jQuery:1.11.2

書式

.first()

Reduce the set of matched elements to the first in the set.
勝手意訳：合致するエレメントセットから、セット内の最初のオブジェクトを捕まえる

引数：なし
返り値：jQuery オブジェクト
　

例

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

$( "li" ).first().css( "background-color", "red" );

li というエレメントセット（５個）の最初のオブジェクト

<li>list item 1</li>

を捕まえて CSS を設定する。
　
child 系ではないので、ul に対する first ではない。

Posted by muchag | jQuery |
初回投稿：2015-02-17 (火) 17:50:13 | 最終更新：2015-02-17 (火) 17:52:15

Comments (0)

prop メソッドと attr メソッドの違い

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 18:10:45 | 最終更新：2016-09-20 (火) 22:39:41

わかりやすい解説を見つけた。

attrは、HTML属性を取得する、propはjavascriptでの属性を取得する。

true か falseはjavascriptでの属性。

Qiita：jqueryでチェックボックスにチェックを入れるにはpropを使え。

参考サイト

BuildINSIDER：要素のプロパティを取得／設定するには？（prop）

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 18:10:45 | 最終更新：2016-09-20 (火) 22:39:41

Comments (0)

要素の指定記法

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 18:07:29 | 最終更新：2015-02-11 (水) 18:07:29

参考サイトのコードを、理解の浅いまま使い回してはまった。

文字列 -> 検索（部分一致
こちらの記事を書いているときに、問題が起きた
　

現象

<div id="test">
<button id="hoge_1"></button>
<button id="hoge_2"></button>
</div>

// 反応しない
$("button [id *= 'hoge_']").hide();
// 反応する
$("#test [id *= 'hoge_']").hide();

解決

よく見てみれば当たり前のことで
CSS と同じだから、スペースがあると別の DOM 要素と判定される。

$("button[id *= 'hoge_']").hide();

これで想定通りに動作した。

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 18:07:29 | 最終更新：2015-02-11 (水) 18:07:29

Comments (0)

ページの読込

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 16:34:22 | 最終更新：2017-01-04 (水) 10:45:14

参考サイトをメモ。

書式

Ajax(Low-Level Interface)
1.8 からこの書式。

$.ajax({
url: 'test.php'
})
.done(function(data, status, xhr) {
// 通信成功時の処理
})
.fail(function(xhr, status, error) {
// 通信失敗時の処理
}).always(function(arg1, status, arg2) {
// 通信完了時の処理
});

例

$.ajax({
url: 'test.php',
type: 'POST',
timeout: 10000
})
.done(function(data, status, xhr) {
$('#result').html(data);
})
.fail(function(xhr, status, error) {
$('#log').append('xhr.status = ' + xhr.status + '<br />'); // 例: 404
$('#log').append('xhr.statusText = ' + xhr.statusText + '<br />'); // 例: Not Found
$('#log').append('status = ' + status + '<br />'); // 例: error
$('#log').append('error = ' + error + '<br />'); // 例: Not Found
});

返却値の利用

$.ajax({
url: 'test.php'
})
.done(function(data, status, xhr) {
// これで JSON Object として扱える
var response = $.parseJSON(data);
})
.fail(function(xhr, status, error) {
// 通信失敗時の処理
})
.always(function(arg1, status, arg2) {
// 通信完了時の処理
});

参考サイト

とほほのWWW入門：jQuery入門　Ajax
→いつもいつもお世話になっております！

Crunchtimer：[jQuery] Ajaxの.loadと.post(.get)の違いについて

Designup：jQueryでAjax 画面遷移なしでデータを読み込む方法
→現在のページの指定箇所へ読み込む方法が載っている

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 16:34:22 | 最終更新：2017-01-04 (水) 10:45:14

Comments (0)

ブログ内検索

Main Menu

カテゴリー

最近のコメント

アーカイブ

メタ情報

クラス -> Utilities -> Utilities -> formatDate（日付フォーマット）

クラス -> 内部関数

クラス -> グレートなつくりかた

pjax（defunkt） -> フォームの値の受け渡し

フォームの値処理

タブメニュー　横その１

.first()

prop メソッドと attr メソッドの違い

要素の指定記法

ページの読込