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

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

内容

• 配列

配列

• 配列とは
• 値の追加
• 値の削除
• 値の取得
• 配列の結合

配列とは

配列とは、値の並びです。値が0個や1個でも配列として扱うことができます。配列を配列に入れることもできます。左から、0,1,2,3…と言うような番号がつけられています。

[1, 3.8, "a", ["x", "y", "z"]]

値の追加

• unshift()
• push()

unshift()は、値を配列の最初に追加します。

var array = ["a", "b", "c"];
array.unshift("A");
console.log(array); // ["A", "a", "b", "c"]

push()は、値を配列の最後に追加します。

var array = ["a", "b", "c"]; 
array.push("A"); 
console.log(array) // ["a", "b", "c", "A"]

値の削除

• shift()
• pop()
• = void 0
• splice()
• length = 0
• = []

shift()は配列の最初の値を削除します。

var array = ["a", "b", "c"];
array.shift();
console.log(array); // ["b", "c"]

pop()は配列の最後の値を削除します。

var array = ["a", "b", "c"];
array.pop();
console.log(array); // ["a", "b"]

void 0(undefined)を値に代入することで、それぞれの値の場所や、配列の長さを変えないで値を削除することができます。

var array = ["a", "b", "c"];
array[0] = void 0
console.log(array) // [undefined, "b", "c"]

splice()は第一引数で指定した所から、第二引数で指定した数だけの範囲を削除します。

var array = ["a", "b", "c", "d", "e"];
array.splice(2, 2);
console.log(array); // ["a", "b", "e"]

var array = ["a", "b", "c", "d", "e"];
array.splice(3, 1); 
console.log(array); // ["a", "b", "c", "e"]

配列のlengthに0を代入を代入することで、値を全消去できます

var array = ["a", "b", "c"];
array.length = 0
console.log(array); // []

配列に[](空配列)を代入することで、値を全消去できます。

var array = ["a", "b", "c"];
array = [];
console.log(array); // []

値の取得

• 配列[番号]
• length
• lastIndexOf()
• slice()
• Math.max.apply()
• Math.min.apply()

配列[番号]で配列から1つの値を取得できます。

var array = ["a", "b", "c"];
var start = array[0];
console.log(start); // "a"

下のようにすると最後の値を取得できます。

var array = ["a", "b", "c"];
var end = array[array.length-1];
console.log(end); // "c"

lengthで配列の長さを取得できます。

var array = ["a", "b", "c"];
var len = array.length;
console.log(len); // 3

lastIndexOf()はその配列から特定の値を検索し、一番最後に出てきた物の位置を番号で返します。なかった場合は-1が返ってきます。

var array = ["a", "b", "c", "d", "b"];
var index = array.lastIndexOf("b");
console.log(index); // 4

slice()は第一引数以上第二引数未満の範囲を取得し返します。

var array = ["a", "b", "c", "d"];
var str_1 = array.slice(1,2);
console.log(str_1); // ["b"]

var array = ["a", "b", "c", "d"];
var str_2 = array.slice(1,3);
console.log(str_2); // ["b", "c"]

Math.max.apply()は配列内の最大数を、Math.min.apply()は配列内の際少数を取得し返します。

var array = [13, 256, 16, 3, 1];
var max = Math.max.apply(null, array);
var min = Math.min.apply(null, array);
console.log(max); // 256
console.log(min); // 1

配列の結合

• concat()
• Array.prototype.push.apply()

concat()は元の配列を破壊せず、新しく結合した配列を返します。

var array_1 = ["a", "b"];
var array_2 = ["c", "d"];
var array = array_1.concat(array_2);
console.log(array); // ["a", "b", "c", "d"]

Array.prototype.push.apply()は第一引数の配列に第二引数を追加するような形で結合します。

var array_1 = ["a", "b"];
var array_2 = ["c", "d"];
Array.prototype.push.apply(array_1, array_2);
console.log(array_1); // ["a", "b", "c", "d"]
console.log(array_2); // ["c", "d"]

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

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

内容

• 値の種類と説明

値の種類と説明

値の種類

• String
• Number
• Boolean
• Null
• Undefined

値の種類をデータ型ともいいます。

String

文字列です。文字の並びを表します。0文字や1文字でも、文字の並びとして文字列と呼びます。

ダブルクォーツ(“)かシングルクォーツ(‘)で囲って表します。

""
"abc"
"I am yayo256"

Number

数です。整数や少数を表します。整数も少数も同じNumberです。

数字で表します。

256
1.414

Boolean

真偽値です。Boolean型はtrueとfalseを持っています。trueが正しいという意味を、falseが正しくないという意味を持っています。

trueかfalseで表します。

true
false

Null

Null型はnullという値のみを持っています。何も無いということを表します。

nullで表します

null

Undefined

Undefined型はundefinedという値を持っています。何も無いという意味を持っていますが、nullは何も無いということを意識的 に表しているのに対し、undefinedは本当に何も存在していないことを表します。

undefinedで表します。

undefined

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

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

内容

• switch文
• while文

switch文

if文のような条件分岐文です。あるcaseと同じ値がある場合、そのcaseの中のプログラムが実行されます。ある値の場合のみ実行したい場合に使います。

var num = 0;

switch (num) {
    case 0:
        document.write("ぱたーん0");
        break;
    case 3:
        document.write("パターン3");
        break;
    default:
        document.write("hello");
}

num == 0の場合

num == 3の場合

num == 10の場合

while文

for文と同じような繰り返し文です。繰り返し回数が決まっていない場合に使います。

var num = 0;

while (num < 5) {
    document.write(num);
    num++;
}

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

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

内容

• confirm()
• prompt()
• console.log()

confirm()

“はい"と"キャンセル"のついたアラートを表示し、"はい"ならTrue、"キャンセル"ならFalseを返り値として返します。 確認をするときなどに使います。

if (confirm("確認")) {
    document.write("OK");
} else {
    document.write("NO");
}

確認画面

はいを押した場合

いいえを押した場合

prompt()

文字を入力する欄のあるアラートを表示し、入力された文字列を返り値として返します。 文字列を入力して欲しい時に使います。

var ans = prompt("名前を入力してください");
document.write(ans);

文字列を入力してOKを押した場合

キャンセルを押した場合

• 文字列を入力しなかった場合は なにも表示されません。

console.log()

コンソール(ログやエラーなどが見れる場所?)にログを表示します。 デバッグ(バグ修正)や確認用などに使います。たぶん。

console.log("test log")

macOSでブラウザがgooglechromeの場合、[右クリック→検証→console]で見ることができます。

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

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

内容

• for文
• if文
• dowhile文

for文

ある条件を満たしている間繰り返します。 繰り返し同じようなことを行いたいときに使う文です。

for (i=0; i<5; i++) {
    document.write(i);
}

if文

ある条件を見たいしているときのみに、文の中の内容が実行されます。 ある場合のみ実行されるようにしたいときに使う文です。

var n = 60;
if (70 < n) {
    document.write(n + "は70より大きい");
} else {
    document.write(n + "は70以下");
} 

n = 70の場合

n = 80の場合

dowhile文

必ず1度は実行され、2度目以降は条件を満たしていた場合のみ実行される文です。 必ず一度は実行したいときに使います。

var n = 0;
do {
    document.write(n);
    n += 1;
} while (5 > n);

n = 10の場合

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

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

内容

• document.write()
• alert()
• 変数の宣言と代入

document.write()

テキストを１文表示します。

document.write("hello world");

alert()

アラートを表示します。

alert("hello world");

変数の宣言と代入

変数の宣言

var n;

変数の宣言と代入を同時に行うこともできる。

var n = 256;