kinkun's blog
Learning JavaScript with VS-Code
Download and install VS-Code
https://code.visualstudio.com/
Extensions to check operation
Live Server
Let’s create a project
index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Hello HTML!!</h1>
<script src="main.js"></script>
</body>
</html>main.js
console.log("Hello JavaScript!!");Operation confirmation
index.html > Open with Live Sever
HTML内の文字を動的に変更
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<div id="id1">変更前</div>
<javascript>
document.getElementById("id1").innerText = "変更後";
</javascript>
</body>
</html>axios使い方
axiosとは、HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリです。
APIを提供するクラウドサービスに対して、データを送受信することができます。
例として、ライブラリは以下を使っています。
<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>
try {
let rt = axios.post("http://localhost:3000/test", {},{
headers: {
"key": "testkey"
}
});
tk = rt.data.tk;
}catch(error){
console.log(error);
}非同期関数を同期関数っぽく呼び出す(async/await)
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function aFunc2(data) {
return new Promise(function(callback) {
setTimeout(function() {
callback(data * 2);
}, Math.random() * 1000);
});
}
async function sample_async_await() {
var val = 100;
val = await aFunc2(val);
console.log(val); // 200
val = await aFunc2(val);
console.log(val); // 400
val = await aFunc2(val);
console.log(val); // 800
}
sample_async_await();
</script>
</body>
</html>
</apex:page>結果
promise.then,awaitその３
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
const promise1 = new Promise((resolve, reject) => {
resolve('Success!');
});
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
promise1.then((value) => {
console.log(value);
// expected output: "Success!"
});
}
asyncCall();
const p = new Promise((res, rej) => {
res(1);
})
async function asyncReturn() {
return p;
}
function basicReturn() {
return Promise.resolve(p);
}
console.log(p);
console.log(basicReturn());
console.log(asyncReturn());
console.log(p === basicReturn()); // true
console.log(p === asyncReturn()); // false
</script>
</body>
</html>
</apex:page>結果
promise.then,awaitその２
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
const promise1 = new Promise((resolve, reject) => {
resolve('Success!');
});
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
promise1.then((value) => {
console.log(value);
// expected output: "Success!"
});
}
asyncCall();
</script>
</body>
</html>
</apex:page>結果
promise.then,await
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
const promise1 = new Promise((resolve, reject) => {
resolve('Success!');
});
async function asyncCall() {
console.log('calling');
promise1.then((value) => {
console.log(value);
// expected output: "Success!"
});
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
}
asyncCall();
</script>
</body>
</html>
</apex:page>結果
promiseのcatch,then
<apex:page>
<html>
<head>
</head>
<body>
<script type="text/javascript">
Promise.resolve()
.then(() => {
// Makes .then() return a rejected promise
throw new Error('Oh no!');
})
.catch(error => {
console.error('onRejected function called: ' + error.message);
})
.then(() => {
console.log("I am always called even if the prior then's promise rejects");
});
</script>
</body>
</html>
</apex:page>結果
promiseのerror
<apex:page>
<html>
<head>
</head>
<body>
<script type="text/javascript">
Promise.resolve()
.then(() => {
// Makes .then() return a rejected promise
throw new Error('Oh no!');
})
.then(() => {
console.log('Not called.');
}, error => {
console.error('onRejected function called: ' + error.message);
});
</script>
</body>
</html>
</apex:page>結果
promiseのthenからthen呼び出す
<apex:page>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var p2 = new Promise(function(resolve, reject) {
resolve(1);
});
p2.then(function(value) {
console.log(value); // 1
return value + 1;
}).then(function(value) {
console.log(value + ' - A synchronous value works'); // 2 - A synchronous value works
});
p2.then(function(value) {
console.log(value); // 1
});
</script>
</body>
</html>
</apex:page>結果
