再び学ぶ分量が増えてきたけど、ちょっと理解は無理だな。
メンターに聞いてもとりあえず今はわからなくてもそう書けばそう動くの理解で十分だと言われる。私は動くかどうかではなく、理解したくてやってるんだが。
この辺は教室の主旨が私の希望とは違うので高望みか。
知識の深い人が欲しい。
Ruby
Rangeクラス
eachが使える。
範囲指定は文字でもOK。
1..5 1,2,3,4,5
1…5 1,2,3,4 （指定した終末を含まない）
Range.new(1,5)
Range.new(1, 5, true) 上と同義。
case〜when
case 評価対象1
when 評価対象2
when
else
end
評価対象1==評価対象2の時、when以下が実行される。
その下の条件に関しては読まれない。1つ目のwhenを実行した時点で処理を抜ける。
JQuery
hide()
hide()を使用すると、要素を非表示する。
display: none;
show()
show()を使用すると、非表示の要素を表示する。
fadeOut()
指定したHTML要素がフェードアウトさせる。
引数にはフェードアウトするまでの時間（ミリ秒）を渡す。
opacityが下がって最終的にdisplay:none;になる。
fadeIn()
指定したHTML要素がフェードインする。
引数にはフェードインするまでの時間を渡す。
append()
引数で指定したHTML要素を追加する。
$("#lists").append('<li class="list">追加されたリスト</li>');remove()
指定したHTML要素を削除できる。
似たメソッドにempty()があるが、これは指定した要素の子要素全てを削除する。
addClass()
要素に引数で設定したクラスを追加できる。
$("#addClassButton").on("click", function() {
$("p").addClass("red");
});removeClass()
要素から引数で設定したクラスを削除できる。
toggleClass()
そのクラスがすでにある場合はremoveClass()を、ない場合はaddClass()が行われる
例
$("#title").on("mouseover mouseout", function(){
$(this).toggleClass("red");
});条件を複数指定することもできる。
$(this)で起点となっているインスタンスを取得できる。
attr()
attr()を使用すると、HTML要素の属性値を取得・変更できる。
取得したい場合には、第一引数に取得したい属性を指定。
変更したい場合には、第一引数に変更したい属性を、第二引数に変更したい属性値を指定。
$("#changeAttrButton").on("click", function() {
$("img").attr("src", "http://hogehoge.jpg");
});val()
val()を使用すると、フォームに入力された値を取得できる。
$("#valButton").on("click", function() {
console.log($("input").val());
});$.each()
第一引数に繰り返し処理を行いたい配列を取り、第二引数に、取り出した要素に対して行いたい処理を記述します。この処理の第一引数には、配列の要素の番号（インデックス）をとり、第二引数には配列の要素が入ります。
var fruits = ['apple', 'apricot', 'avocado', 'blueberry', 'cherry', 'coconut', 'cranberry', 'dragonfruit', 'durian', 'grape', 'grapefruit', 'guava', 'kiwi fruit', 'lemon', 'lime', 'lychee', 'mango', 'melon', 'watermelon', 'miracle fruit', 'orange', 'bloodorange','clementine','mandarine','tangerine','papaya','passionfruit','peach','pear','persimmon','physalis','plum/prune','pineapple','pomegranate','raspberry','rambutan','star fruit','strawberry'];
$(function() {
$("#submit").on("click", function() {
var input = $("#keyword").val();
$.each(fruits, function(i, fruit) {
if (input === fruit) {
$("#result").text(input);
return false;
}
});
});
});if文
if (pref == 'hogehoge') {
console.log(pref+'です。');
}DOM要素
JavaScriptでhtmlの要素を操作するための仕組み
Document Object Model
Append()
引数に文字列もしくはDOM要素、jQueryオブジェクトを持てる。
指定する要素の最後に子要素を追加する。
<div>に対して使うと</div>の直前に挿入される。
var list = $("#list");
function appendList(word) {
var item = $('<li class="list">').append(word);
list.append(item);
}正規表現オブジェクト
regexp = new RegExp(patern[, flags])
var str = "abcde"
reg = new RegExp(str)
.match(reg)正規表現を用いてmatch等を行う場合に直接文字列が扱えないので一旦オブジェクトに格納する。
文字列や複数検索をさせる時などに便利。
単体文字列ならばあえてregexpを使う必要性は低い？
var reg = RegExp(array.join(“|”)などとして、配列要素をバラして検索条件に入れる。
文字列のままだと
前方一致と後方一致
^をつけると前方一致。$をつけると後方一致。
^あいう なら「あいう」から始まる文字列の検索。
わをん$ なら「わをん」で終わる文字列で検索。
テンプレート文字列
“で囲んだ中で${}とすると展開できる。
rubyで言う所の”#{}”と同じ。
シングルクオートではなくバッククオート`であることに注意！
map(), filter(), reduce()
配列に対して配列順に処理して配列で返す。
eachでは処理をするのみで返り値を受け取れないので、配列の結果が欲しい際に使う。
array.map( コールバック関数, オブジェクト );コールバック関数は3つの引数を持つ。
配列内の値、順番、そして配列そのもの。
array要素に対して処理を加えることで、元の配列のデータを変更できる。
products.map( function( value, index, array ) {
array[index] = value + 1;
});mapの第2引数は指定しなくてもよいが、指定することでthisとして参照できる。
products.map( function( value, index, array ) {
return this[value];
}, reviews);filter()は指定した条件のものを抜粋した配列を作りたい場合に、
reduceを配列内の連続する要素で処理を行って、配列の要素数を減らす際に用いる。
配列1と配列2を足すというような連続する処理を行う場合。
mapに関してはjava側の知識かも。jQueryとは別物？
fliter()
var arr = arr.filter(function(e){
return e;
});条件式がvalueになっており値があればtrueを返すので、上記の式では値のあるもののみ返す。
value、index、arrayのかき分けは？
空文字とundefined
var string = “” と var string; は別のものである。
左は空文字であるが、右はundefinedである。
undefinedとは初期値を持たない変数や何も返さない関数のこと。nullとは違う。
nullは返す値のないことをさす。JavaScriptで両者は区別されるが、実際に区別が必要な状況は少ない。
コメント