このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。
中断ボタンをクリックした際に要素を消して確認ボックスを表示する。
$( '#interrupt' ).click( function () {
$( 'p' ).css( 'opacity', '0' );
setTimeout( function () {
if ( window.confirm( '○○を中断しますか。' ) ) {
// ここに中断時の処理を記述
}
$( 'p' ).css( 'opacity', '1' );
} , 250 );
return false;
} );
PCは問題ないけどiOS 9.2（確認時）で確認ボックスを表示するとその前のcss操作が効かない場合は、setTimeout関数のコールバックに確認ボックス表示以降の処理を記述する。
小数点以下2桁の文字列を取得する。
$( '#progress' ).text( ( pos*100/total ).toFixed(2) );
var num = 12.3456789;
alert( num.toFixed() ); // 12
alert( num.toFixed(1) ); // 12.3
alert( num.toFixed(2) ); // 12.35
alert( num.toFixed(3) ); // 12.346
alert( num.toFixed(4) ); // 12.3457
数値オブジェクトのtoFixedメソッドは、パラメータで小数点以下の桁数（0～20：省略時は0）をすることでその桁数までを含んだ文字列を返す。参考）Math.floorメソッドは小数点第1位を四捨五入した整数値を返す。
ボタンがクリックされたらファイルをダウンロードする。
$( '#download-button' ).click( function () {
var content = "ファイルの中身";
var link = document.createElement( 'a' );
link.href = window.URL.createObjectURL( new Blob( [content] ) );
link.download = "filename.txt";
link.click();
} );
a要素を動的に生成し、そのclickメソッドでダウンロードを開始している。Blobオブジェクト生成時のパラメータにファイル内容を指定し、a要素のdownload属性にダウンロード時のファイル名を指定する。
今日の日付を書式yyyymmdd（月と日を必要に応じて0埋め）で取得する。
var now = new Date();
var yyyymmdd = now.getFullYear()+
( "0"+( now.getMonth()+1 ) ).slice(-2)+
( "0"+now.getDate() ).slice(-2);
getMonthメソッドで取得できる月の値は0～11、getDateメソッドで取得できる値は1～31になる。それぞれの先頭に”0″を付け、それらの文字列に対してsliceメソッドで-2に指定して最後から2文字分を取得。0埋めを実現している。桁数が大きい場合は、希望桁数-1の”0″を付け、sliceメソッドに-の希望桁数を指定すればよい（例：4桁の場合は”000″を付けてsliceメソッドのパラメータには-4を指定）。
マーカーを1文字ピンにする。
/* 標準影なしの1文字マーカー */
var marker= new google.maps.Marker( {
position: pos, map: map, title: title,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+encodeURI(title.substr(0,1))+'|FF0000|000000' } );
/* 標準影付きの1文字マーカー */
var marker= new google.maps.Marker( {
position: pos, map: map, title: title,
icon: { anchor: { x:10, y:34 }, url: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld='+encodeURI(title.substr(0,1))+'|FF0000|000000' } } );
/* 左傾き星なし影なしの1文字マーカー */
var marker= new google.maps.Marker( {
position: pos, map: map, title: title,
icon: { anchor: { x:22, y:32 }, url: 'http://chart.apis.google.com/chart?chst=d_map_xpin_letter&chld=pin_sleft|'+encodeURI(title.substr(0,1))+'|FF0000|000000' } } );
/* 右傾き星なし影なしの1文字マーカー */
var marker= new google.maps.Marker( {
position: pos, map: map, title: title,
icon: { anchor: { x:10, y:34 }, url: 'http://chart.apis.google.com/chart?chst=d_map_xpin_letter&chld=pin_sright|'+encodeURI(title.substr(0,1))+'|FF0000|000000' } } );
ピンに指定する1文字には日本語（UTF-8）にも対応し、その後にピンの塗りつぶし色、文字色を指定する。影や傾きを指定する場合はピン先がずれるので、’anchor’でズレを補正すること（上記は参考で必要に応じて調整を）。傾きなしの☆ありにする場合は’chst=d_map_xpin_letter&chld=pin_start’を指定。このほかにもいろいろタイプのピンタイプがある。詳しくは「Dynamic Icons」を参照。
天気レイヤーを消す（非表示）。
/* 変数mapにはGoogle Mapsオブジェクト、weatherLayerには天気レイヤーオブジェクトが入っている */
weatherLayer.setMap( null );
/* 表示と非表示を交互に切り替える場合 */
weatherLayer.setMap( weatherLayer.getMap()? null: map );
Google MapsのレイヤーはsetMapメソッドでnullを指定すると非表示となる。getMapメソッドで指定されているGoogle Mapsオブジェクトを取得できるので、その内容を調べて表示と非表示を交互に切替できる。
天気レイヤー（摂氏表示）を追加する。
/* 変数mapにはGoogle Mapsオブジェクトが入っている */
var weatherLayer = new google.maps.weather.WeatherLayer( {
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
} );
weatherLayer.setMap( map );
Google Maps APIのJavaScript読み込み時にlibraries=weatherパラメータの指定を忘れないこと。サンプルで紹介されていたのは華氏表示（FAHRENHEIT）だったので、ここでは摂氏表示（CELSIUS）にしてみた。
現在の要素のid属性が指定されているか調べる。
if ( typeof $( this ).attr( 'id' ) != 'undefined' ) {
/* 値が定義されている場合の処理 */
}
// 変数valを調べる場合は
if ( typeof val != 'undefined' ) {
/* 値が定義されている場合の処理 */
}
typeof演算子で値の型を取得できる。未定義の場合は’undefined’、文字列は’string’、数値は’number’、nullまたはオブジェクトは’object’となる。
文字列は入った変数lineを’,’（カンマ）で分割して配列に格納する。
var term = line.split( ',' );
// term.length 分割された個数
// term[0]、term[1]、...、term[n]にアクセス
split関数のパラメータには分割したい区切り文字列を指定する。PHPのexplode関数に近い。
文字列の5文字目以降を切り出す
var str = 'JavaScript';
alert( str.slice(0, 4) ); // 'Java'を切り出し
alert( str.slice(4) ); // 'Script'を切り出し
PHPのsubstr関数と同等で、第1パラメータで指定したところから第2パラメータで指定した範囲を切り出して返す。第2パラメータを省略した場合は、文字列の最後までが切り出される。
2つの日付（文字列）から日数を計算する
var date1 = '2012/11/28', date2='2012/11/30';
alert( ( new Date( date2 ) - new Date( date1) )/86400000 );
JavaScriptのDateクラスを使ってDateオブジェクトを生成し、それを引き算すると、両者の差がミリ秒単位で求められる。それを1日のミリ秒数の86400000で割り、日数を算出している。
‘%name’というキーワードが入った文字列を置き換える
var text = '%name%様、おはようございます。本日の%name%様の予定をお知らせいたします。';
/* 1つ目のみ置き換え */
alert( text.replace( '%name%', '山田' ) );
/* すべてを置き換え */
alert( text.replace( /%name%/g, '山田' ) );
replace関数は、通常最初に見つかったもののみを置き換えるが、/○○/gのパターンを使用することで、マッチするものすべてを置き換えることができる。
数値が格納された変数を文字列に変換する。
/* 負数も大丈夫 */
var int_val = -123;
var str = int_val.toString();
/* 浮動小数点も大丈夫 */
var float_val = 123.456;
var str = float_val.toString();
文字列を数値に変換するparseInt関数やparseFloat関数の逆の働きをする。なお変数の値が文字列の場合は、そのまま文字列が返る。
INPUT要素の値を取得し、浮動小数点数に変換して変数valに格納する。
var val = parseFloat( $( 'input' ).val() );
浮動小数点数はこのparseFloat関数を、整数の場合はparseInt関数を使用する。なお、”や文字から始まる文字列は NaN になる（’.12’のように、’.’から始まる場合は正しく変換される）。
0から100までの範囲の乱数を取得し、変数valに格納する。
/* 0から100の範囲 */
var val = Math.round( Math.random()*100 );
/* 1から100の範囲 */
var val = Math.ceil( Math.random()*100 );
/* 0から99の範囲 */
var val = Math.floor( Math.random()*100 );
Math.random関数で、0から1の範囲の不動小数点数のランダムな値を取得し、100を乗算して、Math.round関数で小数点第1位の値を四捨五入している。また、Math.ceil関数は小数点数を切り上げ（繰り上げ）、Math.floor関数は小数点数を切り捨てる（繰り下げる）。
INPUT要素の値を取得し、整数に変換して変数valに格納する。
var val = parseInt( $( 'input' ).val() );
/* 第2パラメータには基数（2、8、10、16）を指定できる */
var val = parseInt( $( 'input' ).val(), 16 );
parseInt関数は、PHPのintval関数みたいなもの。基数を省略した場合は原則10進数として解釈されるが、文字列が’0’から始まる場合は8進数、’0x’また’0X’で始まる場合は16進数として解釈される。なお、”や文字から始まる文字列は NaN になる。
リクエストURLのページ内アンカーが’#tab1’か調べる。
if ( location.hash == '#tab1' ) {
/* アンカーが'#tab1'の場合の処理を記述する */
}
locationのhashプロパティには’#’付きでアンカーの値が格納されている。なお、アンカーがない場合は”になる。
‘index.html’へ遷移させる。
location.href = 'index.html';
遷移の際、ページの状態を保持するブラウザと保持しないブラウザがあるため、ブラウザのヒストリバックで戻った際の表示内容に差異が生じる。
