1:JavaScriptの基礎についてまとめてみた
HTMLの記述
<body>
<h1>JavaScript基礎</h1>
<script src="main.js"></script>
</body>main.jsの記述
// var, let, const
// varは上書きできる
// var name = 'Tom';
// console.log('hello' + name);
// letも上書きできるよ
let name = 'Pon';
name = 'Tim'
console.log('hello' + name);
// あとから上書きできないのでエラーになるよ
// const nam = 'Yan';
// nam = 'Tim';
// データ型は Number, String, Boolean, Undefined, Null, Symbol
// 動的型付け言語
// Rubyと似ている点があるな
let variable = 'str';
variable = 12;
variable = false;
// variable = undefined;
// variable = null;
// 実際に確認するには？
console.log(typeof variable);
// ポイント上書き禁止はconstで定義しよう！検証して実行結果を確かめると・・・
helloTom main.js:4:9
helloPon main.js:9:9
boolean main.js:21:9
Uncaught TypeError: invalid assignment to const 'nam'↑がなぜ出力されたか？
letでnameの中身を’pon’から’Tim’に上書きしたのでhelloTimと出力された
letでvariableの中身が最後にfalseになったのでデータ型のbooleanがtypeofで出力された
まとめ
varとletは上書きできるがconstはできない
実際に確認するにはconsole.logなどを駆使しよう
console.log(typeof variable);などのように
2:関数について
HTMLの記述は1と同じなので省略
main.jsの記述
// ()内を引数と呼ぶ
function hi(name, age) {
// let name = 'Tarou';
console.log('hi' + name + age);
// 関数が実行された結果(戻り値)を表示
return name + age;
}
hi('Tarou ', 10);
const returnVal = hi('Tarou2 ', 20);
console.log(returnVal);
// こちらのやり方でもOK
const hello = function (name, age) {
console.log('hello' + name + age);
return name + age;
}
hello('Tarou ', 10);
const returnKey = hello('Tarou ', 10);
console.log(returnKey);
const returnVal2 = hello('Tarou2 ', 20);
console.log(returnVal2);
// 関数名をもたない関数を無名関数と呼びコールバック関数で出る
// function(name, age) {
// console.log('hello' + name + age);
// return name + age;
// }検証(コンソール)して実行結果を確かめると・・・
highTarou 10 main.js:5:11
highTarou2 20 main.js:5:11
Tarou2 20 main.js:11:10
helloTarou 10 main.js:15:13
hello Tarou 10 main.js:15:13
Tarou 10 main.js:21:9
hello Tarou2 20 main.js:15:13
Tarou2 20↑がなぜ出力されたか？
- (‘hi’ + name + age)でhiTarou 10が出力された
- console.log(returnVal);で関数hiが呼び出されて
console.log(‘high’ + name + age);の部分が出力された
-
return name + age;の部分が出力された
-
console.log(‘hello’ + name + age);の部分が出力された
- 関数helloが呼び出されて
console.log(‘hello’ + name + age);の部分が出力された
-
return name + age;の部分が出力された
- 関数helloが呼び出されて
console.log(‘hello’ + name + age);の部分が出力された(ただし引数が違う)
-
return name + age;の部分が出力された(ただし引数が違う)
まとめ
変数の中に関数を代入することができる。関数名を持たない無名関数がある。
引数と戻り値についてだいたい理解できた
3:メソッドとプロパティー
HTMLの記述は1と同じなので省略
main.jsの記述
let hello = 'Hello World';
// プロパティ
// 文字列の長さ(何文字含まれているか？)を表示
console.log(hello.length);
// メソッド
// 文字を大文字にする(HELLO WORLD)
console.log(hello.toUpperCase());
// 与えられた数字の分だけ文字を切り取る
console.log(hello.substring(0, 5));
console.log(hello.slice(0, 5));
// 空文字にすると
console.log(hello.split(''));
// 空白(半角スペース)を足すと
console.log(hello.split(' '));検証して実行結果を確かめると・・・
11 main.js:4:9
HELLO WORLD main.js:7:9
Hello main.js:9:9
Hello main.js:10:9
Array(11) [ "H", "e", "l", "l", "o", " ", "W", "o", "r", "l", … ]
▶main.js:12:9
▶Array [ "Hello", "World" ]
↑がなぜ出力されたか？
- .lengthで文字列の長さが出力された。
- .toUpperCaseで文字列の大文字で出力された。
- .substringで5文字分まで出力された。
- .sliceで5文字分まで出力された
- splitで1文字ずつ””で囲われた
- HelloとWorldで分けて””で囲われた
まとめ
console.log(hello.length);のように取得できるものがプロパティ
console.log(hello.toUpperCase());のように特定の処理をするのはメソッド