javascriptを勉強した内容をまとめます
ブラウザで使う場合
htmlのscriptタグ内に書く
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
</head>
<body>
<script>
const a = 50
const b = 17
const c = a * b
console.log(c)
</script>
</body>
</html>
jsファイルに書いておいてscriptタグでインポートする
以下はindex.htmlと同じディレクトリにtest.jsを置いた場合です
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
const a = 50;
const b = 17;
const c = a * b;
console.log(c);
変数と定数
動的型付言語なので型を明示的に宣言しなくても動きます
const a = 'hoge';
const b = 300;
const c = 2.9;
console.log(a);
console.log(b);
console.log(c);
var d = 'hoge';
var e = 300;
var f = 2.9;
console.log(d);
console.log(e);
console.log(f);
d = 'fuga';
e = 123;
f = 1.8;
console.log(d);
console.log(e);
console.log(f);
配列
var arr = [1, 2, 3];
console.log(arr);
console.log(arr[1]);
arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
console.log(arr);
console.log(arr[1][1]);
論理演算
等号が「==」、NOTが「!」、ANDが「&&」、ORが「||」になります。
const a = true && true;
const b = true && false;
console.log(a);
console.log(b);
const c = true || false;
const d = false || false;
console.log(c);
console.log(d);
console.log(!c);
console.log(!d);
if文
const flag = true
if(flag){
console.log('input value:' + flag + ' is True');
}else{
console.log('input value:' + flag + ' is False');
}
const value = 300
if(value < 200){
console.log('input value:' + value + ' is less than 200');
}else{
console.log('input value:' + value + ' is more than 200');
}
for文
for(i=0; i<10; i++){
console.log(i);
}
switch文
const place = '東京'
switch (place)
{
case "東京":
console.log('Tokyo');
break;
case "大阪":
console.log('Osaka');
break;
default:
console.log("不明");
break;
}
関数の書き方
3つ書き方があるみたいです。
python勢的には1つに統一してほしいですが、いろんな書き方が出来ることを是とするカルチャーなんでしょうか。
function normalFunc1(x) {
console.log(x);
}
let normalFunc2 = function(x){
console.log(x);
}
let arrowFunc = (x) => {
console.log(x);
}
normalFunc1('ふつうの関数1');
normalFunc2('ふつうの関数2');
arrowFunc('アロー関数式');
function normalFunc3(x) {
console.log(x);
return x * 2;
}
let normalFunc4 = function(x){
console.log(x);
return x * 2;
}
let arrowFunc2 = (x) => {
console.log(x);
return x * 2;
}
console.log(normalFunc3(3));
console.log(normalFunc4(3));
console.log(arrowFunc2(3));
sleep動作
javascriptはsleep関数が用意されていないようです。これはそもそもjavascriptではsleep()をするべきでないという事みたいなんですが、待機後に実行するsetTimeout()を使えばできます。第2引数ミリ秒待機してから第1引数の内容を実行しますので、例えば2秒待ってから「2秒待機しました」と表示する場合は以下で出来ます。
setTimeout(() => {
console.log('2秒待機しました');
}, 2000);
async/awaitによる非同期処理
以下のような仕組みで非同期処理を実施します
1. async functionを定義する (async function内ではすべての処理を非同期で実行される)
2. async function内でfunctionを呼ぶと非同期処理を開始し、返り値としてPromiseを受け取る
3. 受け取ったPromiseをawaitすると発行元のfunctionが終了するまで待機して本来の返り値を受け取る
複数の関数を非同期で開始しておいて、最後にまとめてPromiseをawaitするような使い方になります。最初からawaitをつけて実行すると普通に同期処理します。
以下のコードを実行すると、f1()では毎回awaitしているので2秒待機を3回やって6秒かかりますが、f2()では非同期処理を3つ開始しておいて、まとめてawaitしているので2秒で終了します。
// 2秒後に値を返す
function getNum(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(num);
}, 2000);
});
}
// 6秒後に出力
async function f1(value) {
const n1 = await getNum(value*1);
const n2 = await getNum(value*2);
const n3 = await getNum(value*3);
console.log(n1, n2, n3);
}
// 2秒後に出力
async function f2(value) {
const p1 = getNum(value*1);
const p2 = getNum(value*2);
const p3 = getNum(value*3);
const n1 = await p1;
const n2 = await p2;
const n3 = await p3;
console.log(n1, n2, n3);
}
f1(1);
f2(2);
上記はこちらのコードをお借りしました。
https://webbibouroku.com/Blog/Article/js-async-await