jsの練習

Javascript

Javascriptの動きを手軽に確認したい

配列リテラル

javascriptで配列リテラルを定義するにはブラケットを使います。値はカンマで区切ります

var array = [value01, value02, value03,];

配列の値にアクセスするには、インデックス番号を使います。このインデックス番号がカギとなります。配列が入った変数名の右側にブラケットを作り、その中にインデックス番号です。

//不正確
hogarray = [0];

//正確
array[0];

配列から複数の値を取りたい場合は、同じ操作を複数するしかありません。

var array02 = [value04, value05, value06];

console.log(array02[0] + array[1]);

//コンソールログでデバックを確認するときは、括弧の外にちゃんとセミコロンをつけて文章の終わりを定義してあげましょう

オブジェクトリテラル

javascriptでは配列にオブジェクトを入れることが出来ます。オブジェクトにはインデックス番号ではなく名前がついたカギでアクセスできます。そして、オブジェクトリテラルのプロパティには関数（手続き）を入れることもできます。プロパティが関数になったとき、プロパティはメソッドという名前に変換されます。そして、オブジェクトプロパティを定義する際は、普通の配列の定義の仕方とは違います

まずは変数を定義して、ブレース(中括弧)の中にキーの名前:値という形でプロパティ定義していきます。オブジェクトリテラルの個々の値にアクセスするのはドット演算子によるアクセス方法とブラケットによるアクセス方法があります

ドット演算子でプロパティの個々の値にアクセスするのは、変数名ドットキーの名前でアクセスします。ブラケットを使ってアクセスする場合は、変数名ブラケット、その中にクヲーテーションでキーの名前を囲みます

var objectArray = {keyname: method, keyname02: value};

//失敗例

console.log(keyname.method); 
//こうではなくて

//変数名にカギでアクセスする感じ

console.log(objectArray.keyname);

//もしくは

console.log(objectArray['keyname']);

ちなみに、変数名ドットカギの名前でアクセスする方法をドット演算子接続といいますが、ドット演算子でアクセスしようとすると、識別子として定義されるので、下記のように命名規則に従ってないアクセス方法はできません（最初に数字は使えません）

console.log(obj.123)

でも、ブラケットの方法を使う場合、プロパティ名はあくまでも文字列として使われるので、大丈夫なようです。なので、オブジェクトリテラル、連想配列を使うときは、ブラケットで接続するほうがエラーがないかもしれません

console.log(obj['123'])

関数リテラル

関数とは、あらかじめ決められた処理を作っておいて、その処理に（引数）を与えらあれることによって、その引数の値に応じて処理の結果を返す仕組みです。入出力の窓を持った処理の固まりです

パラメーター、プロパティ、メソッド

ここで、少し用語を整理します。javascriptでパラメーターとは、値のことを言います。プロパティとはオブジェクトの持ち物を言います。メソッドとは、手続きを持った処理のことを言います

参考
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13159060123

関数リテラルの続き

・未定義値（undefined）

javascriptにはundefindeというものがあります。未定義値と言って、変数は定義されているけれどパラメーターが代入されていなかったり、連想配列を定義あるんだけど、存在しないオブジェクトにアクセスしたりすると発動されます。具体的には下記のような場合undefindが出ます

var undef;

var undefi = {undefin: undefind};

console.log(undef);  //パラメータがないのでundefinde
console.log(undefi.undeunde); //存在しないオブジェクトにアクセスしている
console.log(undefi['undeunde']); //同上

・ヌル(null)

nullとundefindeの違いは想定外か否かの違いです。undefindeは言わばエラーです。そもそも参照されることを予想されてなかった場合の現象ですが、nullの場合は空であることを想定されています。

制御構文

プログラムの構造を大きく三つに分けると、順接（記述された順番に処理が実行されていく）非同期（全て並行的な流れで処理が進む）選択（ある特定の結果に応じて処理する内容を選択する、変化していく）反復（ある特定の処理を繰り返す）

if 文の書き方

実装状況を想定

実装状況を想定して、Javascriptの基本構文を勉強していて、今､if文章をやっているのですが、ここで、一つ実装状況が思い浮かびました。例えば、連想配列に男と女というオブジェクトが入っていて、男か女で処理の内容を変えたい場合、Javascriptではifとswich文が使えますが、どうやって配列の中身が男か女か参照すればいいんだろうか？って悩んでて、「連想配列　javascript if」で調べたら、連想配列の中のオブジェクトの中から、特定のキーで処理する方法が見つかり、こんな感じで単調に文法、言語を覚えるより、実装状況を想定して勉強すると飽きないし楽しいですね。

var objectArray =  {men:value, girl:value2};

if (objectArray.men){

//処理

};

includes()method

このincloudes methodを使うと配列の中に指定の指定のプロパティ、オブジェクトがあるか知ることができます。

実装想定

どんなときに、incloudes methodを使うことができるか考えてみます。配列の中に特定の文字列があるか知りたいときってどんなときでしょうか。ああ、これは、trueかfalseで返ってくるわけですから、incloudesで返ってきた返り値の値に応じて処理を変える実装方法がありました。

なので、trueかfalseで処理を変えます。

var objectArray =  {objectKey:object01, objectKeyValue:parameter02};

var incloudesTest = objectArray.incloudes(objectKey);

//デバック確認がしたい
console.log(incloudesTest)

onclickのボタンを押したら特定の関数を実行できるようにしたい。onclickの中に関数を入れたい

onclickをするには、小なりbutton onclick イコール ダブルクオーテーション関数名でonclickに関数を埋め込むことができます

<button onclick = "tryFunction()" > push me!  </button>'

実験

動かない

var hoge = {men:value, girl:value02};
  
  var piyp = hoge.incloudes(men);
  
  
  document.getElementById("demo").innerHTML = piyp;
  

動かない

 var hoge = ["piypiyo", "hogehoge"];
 
 var piyo = hoge.incloudes(1);
 
 
 document.getElementById("demo").innerHTML = piyo;
 

動かない

 var hoge = ["piypiyo hogehoge"];

var piyo = hoge.incloudes(piyo);


document.getElementById("demo").innerHTML = piyo;

動く

 
  var hoge = "piypiyo, hogehoge.";

var piyo = hoge.includes("pi");


document.getElementById("demo").innerHTML = piyo;

これは、文字列しか変換できない？？？

Object.keys()

var hoge = {piyo: 'a', hogehoge:'b'};
  
 console.log(Object.keys(hoge));

javascriptのthis

JavaScriptのクラス？コンストラクタ？？

継承の使いどころと実装想定

JavaScriptのプロトタイプからオブジェクト指向を学ぶ

callとthisの使いどころ

Object.create()

/
/
/
/

一旦本に戻る

numよりも小さかったらtrueで小さかったらfalse

var num = 10;

if (num > 9 ){

console.log('trure');


}else{

console.log('false');

};

elseを連ならせたif文

var elseif = 10;

if (elseif > 911){

	console.log('elseifは911よりも小さいです');
} else if (elseif < 9){

	console.log('elseifは９よりも大きい');
} else if (elseif > 9){

	console.log('これがログとして出ます');
};

if文を入れ子にする

if (elseif > 5) {
  if (elseif < 15) {
    console.log('elseifは5より大きくて15より小さいです')
  }
}

これは論理演算子で書き換えることができます

if (elseif > 5 && elseif < 15) {
  console.log('elseifは5より大きくて15より小さいです')
}