UIでよく忘れること(メモ)

###言葉の定義

• 属性
  • ID, Classとかtypeとかdataとかのこと
• 属性値
  • Classとかの値。class="hoge"のhogeのこと
• タグ
  • Divとかh1とかのこと
• セレクタ
  • セレクタはjQueryを記述する際の$()の中のことを指します

###Javascript

• 配列に要素を加える

hoge.js

var Ary = [1,2];
Ary.push(3); // Ary = [1,2,3]

###Jquery

• クラス属性の値が"description t_hold"で、かつ、data-idが117のdivタグに、CSSを設定する

$('div[class="description t_bold"]').filter('[data-id="117"]').css('color', 'blue')

• クラス名が"label~"のlabelタグに入っているstyle属性の値を取得する
• 属性値を取得するにはattr()を使う！

$('label[class="label_color color1"]').attr('style')

• 最高に参考になる
  • http://www.hp-stylelink.com/news/2013/11/20131122.php

###乱数を作る

• https://www.sejuku.net/blog/22432

###各文章にランダムな色を設定する

mtmx.js

//色変数定義
var kiiro = "rgb(255, 165, 0)"
var murasaki = "rgb(128, 0, 128)"
var pink = "rgb(219, 112, 147)"
var akafukai = "rgb(165, 42, 42)"
var midori = "rgb(0, 128, 0)"
var ao = "rgb(0, 0, 205)"
var aka = "rgb(220, 20, 60)"
var kuro = "rgb(0, 0, 0)"

//連想配列の作成
var colorHash = {
  0: kiiro,
  1: murasaki,
  2: pink,
  3: akafukai,
  4: midori,
  5: ao,
  6: aka,
  7: kuro
}

//8以下の乱数生成
function getRdm(){
  return Math.floor(Math.random()*8);
}

//ランダムに色を取得する関数の定義
function getRdmColor(){
  return colorHash[getRdm()];
}

//レスコンテンツ数の取得
//ブラウザで対象のタグを読み出すことが必要
var lth = $('div[class="description"]').length

//レスコンテンツ数に対して、ランダムで色を設定する
for (var i = 0; i < lth; i++ ){
  $('div[class="description"]').eq(i).css('color', getRdmColor())
}

//追記実際に動くやつ

var pre = 'input[name=color_'
var afi = ']'
//var ctx = pre + num + afi

function getRdm(){
  return Math.floor(Math.random()*7);
}

var lth = parseInt($('#count').text()) + 1

for (var i = 1; i < lth; i++ ){

  $(pre + i + afi ).eq(getRdm()).click();

}

###即時関数

• 関数定義したと同時に実行する関数
• 書き方

hoge.js

//関数を()で囲み（）をつける。
(function(){})();
//これを変数に入れたりする。下は乱数を吐き出す変数を定義する例

var num = function getRdm(){
  return Math.floor(Math.random()*8);
}
//即時関数だと
var getRdm() = (function(){
  return Math.floor(Math.random()*8);
})();
//num だけで乱数が取得できる。

###参考

• forEach文は一気に吐き出す。