東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

JavaScriptメモ

プロパティとメソッド

プロパティは()はない

繰り返しのfor文とwhile文の違い

繰り返す回数が決まってるときはfor、決まってないときはwhile

オブジェクトの意味

①window.alert、console.logなどのwindowやconsoleのこと。

javascriptの基本文法は
console.log('テスト')

consoleはオブジェクト
logはメソッド
()の中のテストはパラメータ

オブジェクトは基本文法の「●●は××しなさい」でいえば●●にあたる部分。

②「複数のプロパティを持つデータのまとまり」

var jsbook = {title: 'javascript入門', price:2500, stock: 3}

上記のjsbookオブジェクトはプロパティしかないが、プロパティのデータにはファンクションを保存することができる

var obj = {
  addTax : function(num) {
    return num * 1.08;
  }
};

上記のようにプロパティのデータがファンクションのとき、そのプロパティのことを特別にメソッドという。
ここらへんは「javascriptオブジェクト指向プログラミング」という知識とテクニックが必要

③Dateオブジェクト

Dateオブジェクトを使うときは最初に以下のコードを描いて初期化する必要がある。

var now = new Date();

newはオブジェクトを初期化するためのキーワード。
なお初期化の際()内にパラメータを含めない場合、Dateオブジェクトは現在日時を記憶した状態で初期化される。
ちなみに「現在日時を記憶した状態」とは、
●「日時を出力しなさい」と命令したら、現在日時を出力する
●「10日後が何日か出力しなさい」と命令したら、現在日時から10日後の日付を出力する。
というように、現在日時を「基準日」として使っている。
つまり、初期化されたDateオブジェクトが計算の基準日となる日時を記憶しているからこそ、日時の出力や計算ができる。

④オブジェクトには初期化するものとしないものがある

●複数のオブジェクトを作れるオブジェクトは初期化する
●複数のオブジェクトを作れないオブジェクトは初期化しない
詳しくは「確かな力が身につく」JavaScript超入門」のP165を参照。


無名関数(ファンクションを変数に代入)

var total = function(price){
  var tax = 0.08;
  return price + price * tax;

}

イベント基本構文

document.getElementById('form').onsubmit = function(){

};

return falseの意味

イベントで実行されるファンクションに「return false;」が出てきたら、htmlの基本動作をキャンセルしていると解釈する。
例だと送信ボタンを押したらページが遷移(ページ再読み込み)するがそれをキャンセルしたりできる。

画像のプリロード

var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
var current = 0;
var pageNum = function(){
  document.getElementById('page').textContent = (current + 1) + '/' + images/length;
}

var changeImage = function(num){
  if(current + num >= 0 && current + num < images.length){
    current += num;
    document.getElementById('main_image').src = images[current];
    pagenum();

  }
};
// プリロードのコード start
var preloadImage = function(path){
  var imgTag = document.createElement('img');
  imgTag.src = path;
}

for(var i = 0;i < images.length; i++){
  preloadImage(images[i]);
}
//プリロードのコード end

pageNum();

document.getElementById('prev').onclick = function(){
  changeImage(-1);
};

document.getElementById('next').onclick = function(){
  changeImage(1);