あいさつ
みなさん、おはようございます！こんにちは！こんばんは！
もうすぐクリスマスですね🎄
先週は授業の単元がおわっていなかったので今回復習してこうと思います📖
それではれっつらーごー！
復習
〈関数（fucntion）について〉
関数はインプット（入力）を受け取り、何らかの処理を行ってから結果としてアウトプット（出力）を返す一連の処理のまとまりのことです。関数を使って処理をまとめることによって同じ処理を何度も書く必要がなくなりコードの再利用性や保守性を高めることができます。
（基本形）
//関数の宣言
function testFunc(){
console.log('関数実行！');
}
//関数の実行
testFunc();
※関数名は自由につけてもいいが、わかりやすい名前のキャメル記法が好ましい〈引数について〉
引数とはプログラム中で関数などを呼び出す時に渡す値のことです。渡された側はその値に従って処理を行います。（インプット「入力」）
//関数の宣言
function testFunc(val1,val2){
console.log(val1+val2);
}
//関数の実行
testFunc(10,20);
【引数には初期値を設定できる】
//関数の宣言
function testFunc(val1=10,val2=20){
console.log(val1+val2);
}
//関数の実行
testFunc();
testFunc(20);〈戻り値について〉
戻り値とは関数などが処理を行った結果として呼び出し元に戻される値のことです。（アウトプット「出力」）
//関数の宣言
function testFunc(val1,val2){
return val1+val2;
}
//関数の実行
let num=testFunc(10,20);
console.log(num);〈関数式について〉
関数の定義は代入演算子を使って変数に対して関数式を代入することでも行うことができます。
//関数式の定義
const testFunc=function(val1,val2){
return val1+val2;
}
//関数の実行
let num=testFunc(10,20);
console.log(num);
【関数宣言と関数式の違い】
（関数名の重複）
//関数宣言は後から宣言された関数が上書きされて実行される
function sengen(){
console.log('最初に定義した');
}
function sengen(){
console.log('後に宣言した');
}
sengen();
//関数式はエラーとなる
const siki=function(){
console.log('最初に宣言した');
}
const siki=function(){
console.log('後に宣言した');
}
siki();
（実行文の記述位置）
//関数宣言は宣言文よりも前に実行文を記述できる
sengen();
function sengen(){
console.log('最初に宣言した');
}
//関数式はエラーとなる
siki();
const siki=function(){
console.log('最初に宣言した');
}〈アロー関数について〉
アロー関数とは新しく追加された関数の省略記法のことです。
//アロー関数の定義
const testFunc=()=>{
console.log('アロー関数');
}
//引数が1つの場合は()を省略できる
const testFunc=text=>{
console.log(text);
}
//引数が2つ以上の場合は()を省略できない
const testFunc=(val1,val2)=>{
return val1+val2;
}〈イベントと関数について〉
マウスイベント等が発生した際に実行される処理も関数の形になっているため関数名を分けて書くことができます。
//今までの書き方
window.addEventListener('click',function(){
console.log('click!');
});
//関数式にした形
const clickEvent=()=>{
console.log('click!');
};
window.addEventListener('click',clickEvent);
※()をつけるとイベント発生前に実行されることに注意する
【イベント発生時に引数を渡したい場合】
const clickEvent=(val)=>{
console.log(val);
};
window.addEventListener('click',()=>{
clickEvent('window');
});〈イベントオブジェクトについて〉
イベントが発生した際、引数にデフォルトで渡される値をイベントオブジェクトと呼び、イベントに関する様々な情報が格納されています。
const clickEvent=(e)=>{
console.log(e);
console.log(e.target);
};
window.addEventListener('click',clickEvent);
【別の引数を同時に渡したい場合】
const clickEvent=(e,val)=>{
console.log(e);
console.log(val);
};
window.addEventListener('click',(e)=>{
clickEvent(e,'window');
});〈タイマー処理について〉
一定時間ごとに処理を行うにはタイマーを使います。
【2種類のタイマー処理】
setInterval：一定時間ごとに特定の処理を繰り返す
setTimeout：一定時間後に特定の処理を行う（繰り返さずに一度だけ）
〈setIntervalでのタイマー処理について〉
【実行されるたびに数字が1づつ増える関数を作る】
let count=0;
const countUp=()=>{
console.log(count++);
};
【1秒（1000ミリ秒）ごとに関数を実行する】
let count=0;
const countUp=()=>{
console.log(count++);
}
setInterval(countUp,1000);//()はいらない
【clearIntervalで処理を停止する】
let count=0;
let timwr;//変数を宣言しておく
const countUp=()=>{
console.log(count++);
if(count>5){
clearInterval(timer);
};
};
timer=setInterval(countUp,1000);//変数に代入〈setTimeoutでのタイマー処理について〉
【実行されるたびに数字が1づつ増える関数を作る】
let count=0;
const countUp=()=>{
console.log(count++);
};
【1秒（1000ミリ秒）後に関数を1回だけ実行する】
let count=0;
const countUp=()=>{
console.log(count++);
};
setTimeout(countUp,1000);
【関数内にsetTimeoutを記述し繰り返し処理をする】
let count=0;
const countUp=()=>{
console.log(count++);
setTimerout(countUp,1000);
};
setTimerout(countUp,1000);
【clearTimeoutで処理を停止する】
let count=0;
let timer;
const countUp=()=>{
console.log(count++);
timer=setTimeout(countUp,1000);
if(count>5){
clearTimeout(timer);
};
};
timer=setTimeout(countUp,1000);〈setIntervalとsetTimeoutの違いについて〉
setIntervalは処理にかかる時間に関係なく指定した秒数ごとに関数が実行されます。setTimeoutは処理が終了してから指定した秒数後に関数が実行されます。setTimeoutは即時実行できます。
let count=0;
let timer;
const countUp=()=>{
console.log(count++);
timer=setTimeout(countUp,1000);
if(count>5){
clearTimeout(timer);
};
};
countUp();さいごに
今回は関数とタイマーについて学んだので復習しました！JavaScriptが少しずつ難しくなってきているので前回習ったことを忘れないように復習をしていこうと思います。
進級制作展の期限も迫ってきているので自分が納得いくWebサイトを作れるように頑張りたいと思います💪
頑張ってるね😊今度、教えてくれる？
勉強になるわ～
進級制作展は完成したかな？