2022/06/19
JavaScriptでプログラミング
JavaScriptはWebページに動きを付けたいときに非常に役に立つプログラミング言語です。現在のWebページでJavaScriptを使用していないページは、ほぼ無いと言ってもいいです。ここでは、JavaScriptのプログラミングに基本及び実際にこれは使えるとうコードを記載します。
目次
基本構文
HTMLへの記述
HTMLへJavaScriptを記述する場合は、以下の用にで囲みます。
<script type="text/javascript">
/* JavaScriptを記述する */
</script>
算術演算子
四則演算を行う場合、以下のように記述します。
var a = 3 + 2; // 数値の加算を行う
var b = 3 - 2; // 数値の減算を行う
var c = 3 * 2; // 数値の掛け算を行う
var d = 3 / 2; // 数値の割り算を行う
var e = 3 % 2; // 数値の割り算の余りを求める
var f = 2 ** 3; // 数値のべき乗を求める
console.log(a); // コンソールに5を出力
console.log(b); // コンソールに1を出力
console.log(c); // コンソールに6を出力
console.log(d); // コンソールに1.5を出力
console.log(e); // コンソールに1を出力
console.log(f); // コンソールに8を出力
関数
functionを宣言し関数名、カッコ内は引数という記述になります。
function toSum(a, b){
return (a + b);
}
var sum = toSum(1,2); // 関数を呼び出す
console.log(sum); // コンソールに3を出力
制御構文
条件応じて処理を分けたい場合、if else / switch 分を使用します。
var n = 5;
if (n < 10) {
console.log("Small!"); // コンソールにSmall!を出力する
} else {
console.log("Big!");
}
var i = 2;
switch (i) {
case 1:
console.log(1);
break;
case 2:
console.log(2); // コンソールに2を出力する
break;
case 3:
console.log(3);
break;
}
タイマー
JavaScriptのタイマー処理という処理で実装できます。
タイマー処理にはsetTimeoutとsetIntervalの2種類があります。
- setTimeout：ー時間後に一度だけ特定の処理をおこなう
- setInterval：一定時間ごとに特定の処理を繰り返す
let count = 0;
function countUp(){
console.log(count++);
}
//1,000ミリ秒後にcountUp関数を呼び出す処理を追加
setTimeout(countUp, 1000);
let count = 0;
function countUp(){
console.log(count++);
}
//1,000ミリ秒間隔でcountUp関数を呼び出す処理を追加
setInterval(countUp, 1000);
応用偏
ハンバーガーメニュー（トグル）
JavaScriptを使用したハンバーガーメニューの作成の仕方です。
ブラウザのウィンドウ座標を取得する方法は？
JavaScriptでブラウザのウィンドウ座標を取得する方法です。
画像スライダーを簡単に実装
画像スライダーを簡単に実装する方法です。
