初めてJavaScriptをやってみよー日記 ~13日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

クロージャーとは

クロージャーとは、関数Aの中に関数Bを書いて、関数Aに属する変数を、関数Bのみで操作することができるようにしたときの、関数Bのことをいいます。

クロージャーを使うメリット

クロージャーを使うと、グローバル変数(一番大きな広場にある変数)を少なくすることができます。グローバル変数を減らすことで、たくさんグローバル変数があって名前がかぶったりすることや、それによるバグを少なくすることができます。

クロージャーの作成

クロージャーの一例です。3~5行目がクロージャーです。たぶん。

function counter() {
    var count = 0;
    return function() {
        count++;
        return count;
    }
}

var x = counter();
var y = counter();

for (i=0; i<10; i++) {
    console.log(x()); 
}

初めてJavaScriptをやってみよー日記 ~12日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

名前空間とは

名前空間とは、グローバルスコープという、一番広い場所(変数などが置ける)を汚さないよう(無差別に大量に変数があったりしないよう)にするための、独自の空間です。たぶん。

名前空間の使い方

名前空間の作成

名前空間を作成するときに、すでに同じ名前の名前空間があると、それと混ざってごちゃごちゃになってしまいます。なので、同じ名前のものがあるかを確認してから作成をすることが多いです。

// 基本的な作成だが、名前が既に使われている可能性がある。
var a_space = {}; 

// 下のようにすることで、存在していないことを確認するしてから、作成することができる。
if(typeof a_space === "undefined") {
    var a_space = {};
}

名前空間内の値の参照

名前空間.名前(キー)で名前空間内の値を参照することができます。

if(typeof b_space === "undefined") {
    var b_space = {
        name: "abc",
        dis_hello: function(){
            console.log("hello")
        }
    };
}

console.log(b_space.name) // abc
b_space.dis_hello() // hello

名前空間への値の追加

既存の名前空間に、新しい値を追加したい場合は名前空間.名前(キー) = 値とするとその名前(キー)に値を代入することができます。

if(typeof c_space === "undefined") {
    var c_space = {};
}

c_space.name = "it is the c space";
console.log(c_space.name);

初めてJavaScriptをやってみよー日記 ~11日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

  • オブジェクトとは
  • オブジェクトの作成
  • オブジェクト内の値の参照

オブジェクトとは

オブジェクトとは、様々な値と名前(キー)のペアをいくつか持っているものです。構造から、連装配列と呼ばれる場合があります。あらかじめ定義されているものだけではなく、自分で作ることもできます。

オブジェクトの作成

  • function文での作成
  • Object.createメソッドでの作成

function文での作成

function文でオブジェクトを作成する場合、function文をnewを使って、オブジェクトにすることができます。

function Parson(name, age) {
    this.name = name;
    this.age = age;
    this.dis_name = function(){
        console.log(this.name);
    };
}

var parson_1 = new Parson("yayo", 256);

console.log(parson_1.name); // yayo
console.log(parson_1.age); // 256
parson_1.dis_name() // yayo

Object.createメソッドでの作成

Object.createメソッドを使う場合、データをカプセル化(1-6行目)して、Object.createメソッドの引数をすることで、返り値としてオブジェクトを返してくれます。

var parson_data = {
    name: "yayo",
    age: 256,
    dis_name: function(){
        console.log(this.name);
    }
};

var parson_2 = Object.create(parson_data);

console.log(parson_2.name); // yayo
console.log(parson_2.age); // 256
parson_2.dis_name() // yayo

オブジェクト内の値の参照

オブジェクト内の値を参照するときはオブジェクト名.名前とかくか、オブジェクト名["名前"]と書くことでできます。

var A = function() {
    this.b = 10;
    this.c = function() {
        return this.b +2;
    };
};

var a = new A;

console.log(a.b); // 10
console.log(a.c()); // 12
console.log(a["b"]); // 10

初めてJavaScriptをやってみよー日記 ~10日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

  • String型とは
  • 長い文字列の表し方
  • String型のメソッド

String型とは

String型とは、文字の並び、つまり文字列を表す型です。シングルクオーツ(‘)かダブルクオーツ(“)で囲って表されます。

"abc", "123"

長い文字列の表し方

一行で書くのは長く、見にくくなってしまう場合は以下の書き方をすることで、きれいに書くことができます。

var long_str = "My name is Akiko. " +
"I am a Japanese high school student." + 
" I came to live in America " +
" with my family two weeks ago. "

String型のメソッド

String型には様々なメソッドがあります。大量にあるので一部だけを書いておきます。気分が乗った時に更新していきます。

big()は<big>タグをつけます。

var str = "abcde".big();
document.write("abcde " + str);
console.log(str); // "<big>abede</big>"

f:id:yojiyama7:20170925223313p:plain

bold()は<b>タグをつけます。

var str = "abcde".bold();
document.write("abcde " + str);
console.log(str); // "<b>abede</b>"

f:id:yojiyama7:20170925223252p:plain

italics()は<i>タグをつけます。

var str = "abcde".italics();
document.write("abcde " + str);
console.log(str); // "<i>abede</i>"

f:id:yojiyama7:20170925223358p:plain

初めてJavaScriptをやってみよー日記 ~9日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

  • Number型とは
  • Number型の値の種類
  • Number型の関数
  • Number型のメソッド

Number型とは

値の種類を表す"型"の一つで、数値を表します。主に数字で表されます 。

Number型の値の種類

整数

整数です。整数で表されます。

1, 256

浮動小数点数

少数です。少数で表されます。

1.414, 9.99

非数値

数ではない値です。数値として演算できないものを数値演算に使用した時などに使われます。NaNで表されます。

NaN

無限大

無限を表す値です。何かを0で割った場合などに使われます。

Infinity, -Infinity

0

0を表す値です。ゼロは正のゼロと負のゼロがあり、それぞれ区別されます。

0, -0

Number型の関数

  • isFinite()
  • isNaN()

isFinite()

引数が、有限かどうかを評価する関数です。falseの場合は特殊な値です。

var numbers = [64, 256.25, Infinity, NaN];

for (i of numbers) {
    console.log(isFinite(i));
    // true, true, false, false
}

isNaN()

引数が、非数値であるか調べる関数です。

var numbers = [64, 256.25, Infinity, NaN];

for (i of numbers) {
    console.log(isNaN(i));
    // false, false, false, true
}

Number型のメソッド

  • toExponential()
  • toFixed()
  • toString()

toExponential()

数を指数表記の文字列として返します。

var n = 512;
console.log(n.toExponential()); // 5.12e+2

toFixed()

数値を文字列にして返します。

var n = 512;
console.log(n.toFixed()); // "512"

toString()

オブジェクトの値を文字列にして返します。

var n = 512;
console.log(n.toString()); // "512"

初めてJavaScriptをやってみよー日記 ~8日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

  • function文

function文

関数を作成する文です。同じようなことを繰り返したりするときに使います。文内には関数の内容を書き、かっこの中には引数名を、returnで返り値を書きます。

function fizzbuzz(num) {
    if (num % 15 == 0) {
        return "fizzbuzz";
    } else if (num % 5 == 0) {
        return "buzz";
    } else if (num % 3 == 0) {
        return "fizz";
    } else {
        return num;
    }
}

実行例

for (i=1; i<21; i++) {
    document.write(fizzbuzz(i)+"<br>");
}

f:id:yojiyama7:20170921212239p:plain

初めてJavaScriptをやってみよー日記 ~7日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

  • for文
  • for in文
  • for of文
  • forEach()

for文

ある値を用意して、その値を操作することで繰り返しを実行する文です。簡単な繰り返しを行う場合に使います。

for (var i=0; i<10; i++) {
    document.write(i + ", ");
}

f:id:yojiyama7:20170920023750p:plain

var sum = 0
var num_array = [1, 65, 26, 2];
for (i=0; i<num_array.length; i++){
    sum += num_array[i];
}
document.write(sum);

f:id:yojiyama7:20170920024230p:plain

for in文

オブジェクトのすべてのプロパティを文内変数に代入して繰り返します。あるオブジェクトを基準に繰り返しを行いたいときに使います。たぶん。

var array = ["abc", "eafd", "bea"];
for (var i in array) {
    document.write(array[i] + ", ");
}

f:id:yojiyama7:20170920025400p:plain

for of文

オブジェクト内の要素を文内変数に代入して繰り返します。文の特性上、要素を持っているオブジェクトしかof ~の部分には書けません。あるオブジェクトを基準に繰り返しを行いたい場合に使います。たぶん。

var num_array = [1, 235, 15, 313, 235]
for (var i of num_array) {
    document.write(i + ", ");
}

f:id:yojiyama7:20170920030206p:plain

forEach()

for of文を関数で行うようなものです。よって基本的には書き方以外for of文と変わりません。たぶん。

var sum = 0;　
var num_array = [4, 643, 6643, 23];
num_array.forEach(function (i) {
    sum += i;
});
document.write(sum);

f:id:yojiyama7:20170920030817p:plain

function()はまた紹介します。