HTMLを操作する
index.html
<button type="button" id="btn-add">+</button>
このbtn-addというidがつけられた要素を取得してクリックイベントを作成
script.js
//btn-addを取得して
const addButton = document.getElementById('btn-add');
//関数を定義
function logger(){
console.log('クリックされた！');
};
//クリックされたらloggerという関数を読み込む
addButton.addEventListener("click",logger);
テキストボックスにユーザが入力した情報を取得する.value
const userInput = document.getElementById('input-number');
let result = 0;
//2.引数のresultを受け取ったらHTMLを書き換える変数
function outputResult(result,process) {
console.log(currentResultOutput);
currentResultOutput.innerHTML = result;
currentProcess.innerHTML = process ?? "";
}
//1.ユーザが入力した値をoutputResult関数に入れる関数
function addNumbers(){
result = result +parseInt(userInput.value);//parseIntで数値型に変更しないとresultが文字列になってしまう
outputResult(result);
}
//おまけ 数値型であるresultを文字列に変更するにはresult.toString()
Javascriptにおける型
number,string,boolean,array,objectがある
Arrayはpythonでいうリスト型
Objectはpythonでいう辞書型のこと
訂正：型は以下の７つ
参考：
プリミティブとはプログラミングの世界で根本的な値のこと（数値なのか、文字列なのか）
シンボル型とはその値が一意の値のもの
Array型を使ってみる
空のリストを用意しそこに格納していく処理と削除する処理を書いてみる
const clearButton = document.getElementById('btn-clear');
let log =[];
let result =0;
function addNumbers(){
result = result +parseInt(userInput.value);
//ログを追加（arrayにユーザが入力した値を格納）
//pushはリストに追加していくメソッド
log.push(parseInt(userInput.value));
console.log("入力した値：",log);
outputResult(result);
}
//リストを削除する関数
function clear(){
result = 0;
//spliceとはリストを削除するメソッドsplice(0)とすると0番目から以降を削除することになる
log.splice(0);
//outputResult関数をよびだしてHTMLを変更
outputResult(result);
console.log('リストの中身：',log)
}
addButton.addEventListener("click",addNumbers);
//クリックされたらclear関数を呼び出し
clearButton.addEventListener('click',clear);
.pushや.spliceのようにjavascriptが用意している便利なメソッドは他にもいっぱいある
.pop：最後の値を削除
.sort：並び替え など
Object型を使ってみる
let log=[];
let result = 0;
function addNumbers(){
result = result +parseInt(userInput.value);
//入力した値にtypeとnumというキーをつけて管理するようにする
const newLog={
type:"ADD",
num:parseInt(userInput.value),
};
//それをArray型に格納する
log.push(newLog);
//オブジェクト型へのアクセス（どちらの方法でもOK）
console.log("最初のオブジェクトの型：",log[0].type);
console.log("最初のオブジェクトの値：",log[0]["num"]);
}
型の特定
typeof という文法を使うと型の特定ができる
pythonでいうtype(100)などと一緒
console.log("userInputの型は？：" typeof userInput.value);
// >>>userInputの型は？： string
スプレッド構文,レスト構文（分割代入）
スプレッド構文とはarray型やObject型の中身を展開すること
レスト構文とは分割代入のこと、下記URLでも紹介されている
///スプレッド構文
const array1 = [1,2,3];
const array2 = [3,4,5];
const array3 =[...array1,...array2];
console.log(array3);
/// >>> [1,2,3,3,4,5]
/// スプレッドしていない場合 >>> (2)[Array(3),Array(3)] と配列の中に配列が入る形に
const person = {
name:'John',
age:12,
};
const person2 ={...person,height:180}; //キーとバリューの追加も可能
console.log(person2); // >>>{name: 'John', age: 12, height: 180}
//レスト構文
const arr =[1,2,3,4,5];
const [a,b,...c]=arr;
console.log(a,b,c); // cには残りの[3,4,5]が配列として当てられる
//オブジェクトも可
const obj = {a:1,b:2,c:3,x:10};
const {x,...props} =obj;
console.log(x,props); //xは10でpropsには{a: 1, b: 2, c: 3}が入る
高階関数
高階関数とは「関数を引数にとる関数」のこと
組み込み関数でいうとfilter,mapなどがあり配列に対して使うことがおおい関数
const words =['apple','banana','ai','december','ball','key'];
//少しわかりづらいがfilterの()の中身がアロー関数になっているので関数を引数にとっている
const words2 = words.filter(word =>word.length >4);
console.log(words2);
/// >>>(3) ['apple', 'banana', 'december']
//もっと関数っぽくみせるならこちら
const filtering = (word) =>{
return word.length >4
}
const words3 = words.filter(filtering);
console.log(words3);
/// >>>(3) ['apple', 'banana', 'december']
///map関数
const array4 = [1,4,9,16];
const mappedArray = array4.map(x => x*2);
console.log(mappedArray);
///>>> (4) [2, 8, 18, 32]
Typescriptの型づけを少し学習
///exampleという定数を指定するときに型を指定する
const example: string = 'world';
const example2: string = 1; //これはエラーになってしまう
// 関数も同様に引数は文字列型を取るように指定すると
const hello =(name:string) => {
return 'hello, ' +name
}
hello('John'); //OK
hello(2); //エラー
hello(example); //OK
// 返り値にも型を指定できる
const hello2 =(name:string):string => {
return 'hello, ' +name //OK
}
const hello2 =(name:string):number => {
return 'hello, ' +name //これはエラーになる
}