/**
* SELECTのOPTION要素部分を再作成する
* @param <jquery-object> selElm SELECT要素
* @param <object> list OPTIONリスト: リストのキーはOPTIONのvalue属性、リストの値はOPTIONのテキスト（inner)にセットされる
* @param selected_value 選択値: 作成時にデフォルト選択にする値
*/
function _recreateSelect(selElm,list,selected_value){
// OPTION要素群をクリアする
selElm.html('');
var opts_str = '';
for(var value in list){
var text = list[value];
var selected = '';
if(value == selected_value){
selected = 'selected';
}
opts_str += "<option value='" + value + "' " + selected + ">" + text + "</option>¥n";
}
selElm.html(opts_str);
}
$(function(){
var tree =
{'x':1,'y':1,'childs':[
{'x':2,'y':1,'childs':[
{'x':3,'y':1,'childs':[]},
]},
{'x':2,'y':2,'childs':[
{'x':3,'y':1,'childs':[]},
{'x':3,'y':2,'childs':[]},
{'x':3,'y':3,'childs':[
{'x':4,'y':1,'childs':[]},
]},
]},
]};
// ツリーデータの各ノードの子孫数を数えて、ツリーデータにセットする。
_countDescendantsOfEachNode(tree);
$('#res1').html(JSON.stringify(tree));// ダンプ出力
});
/**
* ツリーデータの各ノードの子孫数を数えて、ツリーデータにセットする。
*
* @param ツリーデータ（ノード） 参照型引数であり返り値も兼ねる。
* @returns 内部で使うので実装側は仕様禁止
*/
function _countDescendantsOfEachNode(node){
var childs = node['childs'];
if (childs.length == 0){
node['descend'] = 0;
return 1;
}else{
var descend = 1;
for (var i in childs){
var cNode = childs[i];
var c_descend = _countDescendantsOfEachNode(cNode);
descend += c_descend;
}
node['descend'] = descend - 1;
return descend;
}
}
出力
{
"childs": [
{
"childs": [
{
"childs": [],
"descend": 0,
"x": 3,
"y": 1
}
],
"descend": 1,
"x": 2,
"y": 1
},
{
"childs": [
{
"childs": [],
"descend": 0,
"x": 3,
"y": 1
},
{
"childs": [],
"descend": 0,
"x": 3,
"y": 2
},
{
"childs": [
{
"childs": [],
"descend": 0,
"x": 4,
"y": 1
}
],
"descend": 1,
"x": 3,
"y": 3
}
],
"descend": 4,
"x": 2,
"y": 2
}
],
"descend": 7,
"x": 1,
"y": 1
}
$(function(){
var ary = [1,2,3,3,3,4,8,8,9];
$('#res1').html(JSON.stringify(ary));
ary = _serializeAndShift(ary);
$('#res2').html(JSON.stringify(ary));
});
/**
* 配列の重複を連番化しつつ昇順になるようシフトする
*
* @note
* あらかじめ配列は昇順でソートしておくこと。
* また配列の値は数値型にすること。（文字列型だとバグになる）
*
* @param ary 配列
* @returns 配列
*/
function _serializeAndShift(ary){
var last_index = ary.length - 1;
var loop_out = true; // ループアウトフラグ true:ループ抜け , false:ループ継続
var shift_diff; // シフト比較値
for(var n=0 ; n < 1000000 ; n++){
shift_diff = null; // シフト比較値をリセット
loop_out = true;
for(var i = last_index ; i >= 0 ; i--){
// 配列の値とシフト比較値が一致する場合
if(ary[i] === shift_diff){
ary[i+1] ++;
loop_out = false;
break;
}else{
shift_diff = ary[i];
}
}
if(loop_out == true){
break;
}
}
return ary;
}
[1,2,3,3,3,4,8,8,9]
[1,2,3,4,5,6,8,9,10]
var scroll_offset_x = window.pageXOffset; // 横スクロールの位置
var scroll_offset_y = window.pageYOffset; // 縦スクロールの位置
HTML
<select id="test1" size="5">
<option value="1">ゴリラ</option>
<option value="2">チンパンジー</option>
<option value="3">オランウータン</option>
<option value="4">スローロリス</option>
<option value="5">ワタボウシタマリン</option>
<option value="6">アジアゾウ</option>
<option value="7">アフリカゾウ</option>
<option value="8">インドゾウ</option>
<option value="9">マルミミゾウ</option>
<option value="10">モンゴルマーモット</option>
<option value="11">フサオネズミカンガルー</option>
<option value="12">フサオ</option>
<option value="13">ネズミカンガルー</option>
</select><br>
<input type="button" value="上スクロール" onclick="test1('#test1',-30)" />
<input type="button" value="下スクロール" onclick="test1('#test1',30)" />
JavaScript
function test1(slt,scroll_value){
var elm = $(slt);
if(typeof elm[0].scrollBy == 'function'){
elm[0].scrollBy( 0, scroll_value ) ;
}else{
console.log('スクロールはサポート外です');
}
}
window.open(遷移先url, '_blank');
location.href = 'http://amaraimusi.sakura.ne.jp/';
画面サイズによる識別方法
var device = 'pc';
if (screen.width <= 480) {
device = 'mobile';
}
console.log(device);
ユーザーエージェントによる識別方法
var device = 'pc';
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
device = 'mobile';
}
console.log(device);
HTML
<input type="button" value="SP化" class="btn btn-success" onclick="changeStyleByDevice('.test_tbl1','sp')" />
<input type="button" value="PC化" class="btn btn-success" onclick="changeStyleByDevice('.test_tbl1','pc')" />
<table class="tbl2 test_tbl1">
<thead><tr><th>id</th><th>name</th><th>value</th></tr></thead>
<tbody>
<tr><td>ネコ</td><td><input type="text" /></td><td>100</td></tr>
<tr><td>カニ</td><td><input type="text" /></td><td>200</td></tr>
<tr><td>サメ</td><td><input type="checkbox" />チェックボックス</td><td>300</td></tr>
<tr><td>シカ</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td><td>400</td></tr>
</tbody>
</table>
CSS
.tbl_sp{
display:block;
width:100%;
}
.tbl_sp thead{
display:none;
}
.tbl_sp tbody{
display:block;
width:100%;
}
.tbl_sp tr{
display:block;
width:100%;
}
.tbl_sp td{
display:block;
width:100%;
}
.tbl_sp td:last-child{
padding-bottom:16px;
}
.tbl_sp input[type="text"]{
width:100%;
}
.tbl_sp textarea{
width:100%;
}
JavaScript
/**
* デバイスタイプの切替
* @param tbl_slt テーブルセレクタ
* @param device_type デバイスタイプ pc / sp
*/
function changeStyleByDevice(tbl_slt,device_type){
var tblElm = jQuery(tbl_slt);
if(device_type == 'pc'){
tblElm.removeClass('tbl_sp');
tblElm.addClass('tbl2');
}else if(device_type == 'sp'){
tblElm.removeClass('tbl2');
tblElm.addClass('tbl_sp');
}
}
HTML
<progress id="prog1" max="100">progress要素非対応への代替表示</progress>
<button onclick="test1()" >TEST1</button>
JavaScript
function test1(){
var prog1 = $('#prog1');
var v = prog1.val();
if(v==null){
v=0;
}else{
v += 10;
}
prog1.val(v);
}
var a = undefined;
a = a + 0; // 暗黙的な数値変換
if(a==null){
alert('nullである');
}else{
alert('nullでない'); // ←ここに来る。nullとして扱われない。NaNとなっているため。
}
HTML
<div id="rect1">
<div id="rect2"></div>
</div>
CSS
<style>
#rect1 {
width:100px;
height:100px;
margin:5px;
border: solid 1px Crimson;
padding:5px;
overflow:auto;
background-color:LightCoral;
}
#rect2 {
width:160px;
height:160px;
padding:4px;
margin-left:3px;
margin-right:4px;
margin-top:6px;
margin-bottome:7px;
border: solid 1px LimeGreen;
overflow:auto;
background-color:LightGreen;
}
</style>
rect1
| メソッド | 記述例 | 値 | 説明 |
|---|---|---|---|
| width() | $('#rect1').width(); | 88 |
jQueryの関数。paddingとborderの幅を除外した幅を取得する。幅＝width(100px) - padding(5px × 2) - border(1px × 2) |
| height() | $('#rect1').height(); | 88 |
上記と同様幅＝height(100px) - padding(5px × 2) - border(1px × 2) |
| outerWidth() | $('#rect1').outerWidth(); | 100 | jQueryの関数。paddingとborderを含めた横幅を取得。marginは無視。位置や幅の計算処理を行いたい場合、この関数を使うことが多い。 |
| outerHeight() | $('#rect1').outerHeight(); | 100 | 上記と同様 |
| clientWidth | $('#rect1')[0].clientWidth; | 81 |
標準関数。スクロールバーの太さを含めた幅を取得する。スクロールバーの太さはブラウザごとに異なるので注意する。幅 = width(100px) - スクロールバーの太さ（17px※) - border(1px × 2)※スクロールバーの太さはChrome,FireFoxの場合17px、Operaは15px,Edgeは16pxである。 |
| clientHeight | $('#rect1')[0].clientHeight; | 81 | 上記と同様 |
| scrollWidth | $('#rect1')[0].scrollWidth; | 168 |
標準関数。基本的に子要素の幅を取得する。スクロール制御を行いたいときに利用する関数。幅 ＝ rect2のouterWidth(160px) + rect2のmargin-left(3px) + padding(5px) |
| scrollHeight | $('#rect1')[0].scrollHeight; | 176 |
標準関数。基本的に子要素の幅を取得する。ブラウザごとに異なるので注意。 ChromeとOperaの場合 幅＝rect2のouterWidth(160px) + rect2のmargin-top(6px) + padding(5px × 2) FireFoxとEdgeの場合 幅＝rect2のouterWidth(160px) + rect2のmargin-top(6px) + padding(5px) |
rect2
| メソッド | 記述例 | 値 | 検証 |
|---|---|---|---|
| width() | $('#rect2').width(); | 150 | width(160x) - padding(4px × 2) - border(1px × 2) |
| height() | $('#rect2').height(); | 150 | height(160px) - padding(4px × 2) - border(1px × 2) |
| outerWidth() | $('#rect2').outerWidth(); | 160 | width(160px) |
| outerHeight() | $('#rect2').outerHeight(); | 160 | height(160px) |
| clientWidth | $('#rect2')[0].clientWidth; | 158 | width(160x) - border(1px × 2) |
| clientHeight | $('#rect2')[0].clientHeight; | 158 | width(160x) - border(1px × 2) |
| scrollWidth | $('#rect2')[0].scrollWidth; | 158 | width(160x) - border(1px × 2) |
| scrollHeight | $('#rect2')[0].scrollHeight; | 158 | width(160x) - border(1px × 2) |
<table id="tbl1" class="table">
<thead>
<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
</thead>
<tbody>
<tr><td>0</td><td>neko</td><td>猫</td></tr>
<tr><td>1</td><td>yagi</td><td>山羊</td><td>草食</td></tr>
<tr><td>2</td><td>same</td><td>鮫</td></tr>
<tr><td>3</td><td>wasi</td><td>鷲</td></tr>
<tr><td>4</td><td>goki</td><td>御器</td></tr>
</tbody>
</table>
var m_id = 1000;
function test1(){
var tbl_slt = "#tbl1";
var row_index = $("#row_index").val();
var new_tr_html = '<tr><td>' + m_id + '</td><td>kamakiri</td><td>カマキリ</td></tr>';
m_id ++;
// TR要素をテーブルの指定行に挿入する
var newTr = insertTr(tbl_slt,row_index,new_tr_html);
console.log(newTr.html());
}
/**
* TR要素をテーブルの指定行に挿入する
* @note
* tbodyは必須
*
* @param string tbl_slt テーブル要素のセレクタ
* @param int row_index 挿入行インデックス (1行目に挿入する場合は0を指定する。末尾に追加する場合は行数以上の数字を指定）
* @param string tr_html 挿入TR要素
* @returns 新規追加TR要素
*/
function insertTr(tbl_slt,row_index,tr_html){
var tbody = $(tbl_slt + " tbody");
var trs = tbody.find("tr");
var tr_len = trs.length;
var new_index = null;
// 行数が1件以上である場合
if(tr_len > 0){
// 追加行番が行数未満である場合
if(row_index < tr_len){
// 行番にひもづくTR要素を取得
var tr = trs[row_index];
// TR要素の上に新TR要素を追加
$(tr).before(tr_html);// × → tr.before(tr_html);
new_index = row_index;
}
// 追加行番が行数以上である場合
else{
// 最後のTR要素を取得
var tr = trs[tr_len-1];
// TR要素の下に新TR要素を追加する
$(tr).after(tr_html);
new_index = tr_len;
}
}
// 行数が0件である場合,tbody要素にtr要素を追加する。
else{
tbody.append(tr_html);
new_index = 0;
}
trs = tbody.find("tr");
var newTr = trs[new_index];
return $(newTr);
}