JavaScript学習メモ（*適宜更新）
（１）テンプレート文字列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
console.log("私の名前は太郎です。45歳です。");
// 上記記述と同じ内容になる
age = 45
console.log(`私の名前は太郎です。${age}歳です。`);
</script>
</body>
</html>
例えば、他にも以下のように使用する
現在時刻を表す
<script>
const today = new Date();
let hour = today.getHours();
let min = today.getMinutes();
let sec = today.getSeconds();
document.write(`${hour}時${min}分${sec}秒`);
</script>
（２）条件式、if文を使う
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
age = 45;
if(age>40){
console.log(`${age}は40より大きい`);
}else{
console.log(違います）;
}
</script>
</body>
</html>
（３）比較演算子を使う
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
age = 45;
a = 45;
b = 44;
if(a===age){
console.log(`${a}歳です`)
}
if(b!==age){
console.log(`${b}歳は${age}と違います`)
}
if(age>40 && age<50){
console.log(""私は40代です")
}
</script>
</body>
</html>
（４）繰り返し文while文,for文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
<!-- while文 -->
var number = 1;
while(number<100){
console.log(number);
number++;
}
<!-- for文 -->
for(var num=1;num<100;num++){
console.log(num);
}
</script>
</body>
</html>
（５）３の倍数を表す
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
for(var i=1;i<100;i++){
if(i%3===0){
console.log("3の倍数です");
}else{
console.log(i);
}
}
</script>
</body>
</html>
（６）配列とlength、for文を使う
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var animals = ["dog","cat","sheep","monkey","bear"];
for(i=0;i<animals.length;i++){
console.log(animals[i]);
}
</script>
</body>
</html>
（７）オブジェクトについて
オブジェクトとは、{プロパティ:値、プロパティ:値}と言う形のもの
pythonの辞書型のようなもの
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var list = {name:"ぽち",age:10};
console.log(list.name);
</script>
</body>
</html>
（８）オブジェクトを要素にもつ配列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var list = [{name:"ぽち",age:10},
{name:"しろ",age:5}];
console.log(list[0].name);
</script>
</body>
</html>
（９）配列、for文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var list = [{name:"ぽち",age:10},
{name:"しろ",age:5},
{namne:"クロ",age:3}];
for(var i=0;i<list.length;i++){
console.log(`名前は${list[i].name}です。`);
console.log(`年齢は${list[i].age}です。`);
}
</script>
</body>
</html>
（１０）オブジェクト内オブジェクト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var list = {
name:"ぽち",age:10,
name:"しろ",age:5,
name:"クロ",age:3,
name:"ケイ",favorite:{
eat:"banana",
dring:"beer"
},
};
console.log(list.favorite.eat);
</script>
</body>
</html>
<!--banana-->
（１１）オブジェクトの中の配列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var list = {
name:"ぽち",age:10,
name:"しろ",age:5,
name:"クロ",age:3,
name:"ケイ",favorite:{
eat:"banana",
dring:"beer"},
favlist:["banana","orange","grape"]
};
for(var i=0;i<list.favlist.length;i++){
console.log(list.favlist[i]);
}
</script>
</body>
</html>
<!--banana
orange
grape -->
（１２）関数について
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var greet = function(){
console.log("こんちわ!");
}
greet();
</script>
</body>
</html>
function()の部分を、()=>と書き換えることができる
これをアロー関数という
```.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var greet = ()=>{
console.log("こんちわ!");
}
greet();
</script>
</body>
</html>
（１４）関数に引数をとる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var greet = (name)=>{
console.log(`${name}さん、こんちわ!`);
}
greet("太郎");
</script>
</body>
</html>
（１５）関数と戻り値
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var greet = (name)=>{
console.log(`${name}さん、こんちわ!`);
return 45;
}
var age = greet("太郎");
console.log(`年齢は${age}歳です。`)
</script>
</body>
</html>
<!--太郎さん、こんちわ！-->
<!--年齢は45歳です。-->
（１６）オブジェクトの関数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
var dog = {
name:"ぽち",
age:3,
greet:()=>{
console.log("こんちわ！");
}
};
dog.greet();
</script>
</body>
</html>
<!--こんちわ！-->
（１７）クラス
クラスとはオブジェクトを生成する設計図のこと
クラスから生成したオブジェクトをインスタンスという
インスタンスは、newクラス（）とする
クラスの中身を設定するにはコンストラクタを記述
コンストラクタの中で値を定義するには、this.●●● ＝ ●●と、thisを
つける
また、インスタンスはオブジェクトであるため、コンストラクタで設定した値には、
インスタンス.プロパティとしてアクセスできる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
class Dog{
constructor(){
this.name = "ポチ";
this.age = 5
}
}
var dog = new Dog();
console.log(dog.name);
console.log(dog.age);
</script>
</body>
</html>
<!--ポチ-->
<!--5-->
（１８）クラス、コンストラクタに引数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
class Dog{
constructor(name,age){
this.name = name;
this.age = age
}
}
var dog = new Dog("シロ",3);
console.log(dog.name);
console.log(dog.age);
</script>
</body>
</html>
<!--シロ-->
<!--3-->
また、クラス内のメソッドでプロパティを使うにはthisを使う
<script>
class Item{
//クラスからインスタンスを作成すると、コンストラクターが呼び出される
constructor(price){
//プロパティを定義する
this.price = price;
}
getTax(){
return this.price*(10/100);
}
}
let item = new Item(1000);
document.write(item.getTax());
</script>
（１９）クラス、メソッド
メソッドとはクラスの中で動作を表すもの
メソッド名（）{}として定義する
メソッド内で値にアクセスするときはthis.値とする
メソッド内で他メソッドにアクセスするときは、this.メソッド()とする
呼び出すには、インスタンス.メソッド()として記述する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
class Cat{
constructor(name,age){
this.name = name;
this.age = age;
}
greet(){
console.log("にゃあー")
}
infomation(){
console.log(`名前は${this.name}です。`);
console.log(`年齢は${this.age}です。`);
this.greet();
}
}
var mycat = new Cat("ミケ",3);
mycat.infomation();
</script>
</body>
</html>
<!--名前はミケです-->
<!--年齢は3歳です-->
<!--にゃあー-->
また、静的メソッドとしてstaticを設定すると、インスタンスを生成することなくクラス内のメソッドを使える
class Calc{
static sum(num1,num2){
return num1 + num2;
}
}
document.write(Calc.sum(10,5));
（２０）クラス、メソッドのオーバーライド
親クラスを継承した子クラスを作成するには、class 子クラス名 extends 親クラス名{}
とする
子クラスは親クラスを継承しているため、作成したインスタンスは親クラスの値やメソッドを使うことができる
子クラスのメソッド名が親クラスと同じで、子クラスのメソッドを呼び出した場合は、親クラスを上書きして子クラスのメソッドが呼び出される＝これをオーバーライドという
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
class Cat{
constructor(name,age){
this.name = name;
this.age = age;
}
greet(){
console.log("にゃあー")
}
infomation(){
console.log(`名前は${this.name}です。`);
console.log(`年齢は${this.age}です。`);
this.greet();
}
}
class Child_Cat extends Cat{
infomation(){
this.greet();
console.log(`子猫の名前は${this.name}です。`);
console.log(`子猫の年齢は${this.age}です。`)
}
aftertenAge(){
console.log(`子猫の１０年後の年齢は${this.age+10}です。`);
}
}
var cat = new Child_Cat("ナミ",1);
cat.infomation();
cat.aftertenAge();
</script>
</body>
</html>
<!--子猫の名前はナミです。-->
<!--子猫の年齢は1歳です。-->
<!--子猫の１０年後の年齢は11歳です。-->
（２１）コンストラクタのオーバーライド
子クラスで親クラスの値（コンストラクタ）を上書き（オーバーライド）する場合は、子クラスのconstructorの中に、super(値）とする
例えば、親クラスの値（コンストラクタ）に、値を加えたいときなどに使う
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>テストだよ</h1>
<script type="text/javascript">
class Cat{
constructor(name,age){
this.name = name;
this.age = age;
}
greet(){
console.log("にゃあー")
}
infomation(){
console.log(`名前は${this.name}です。`);
console.log(`年齢は${this.age}です。`);
this.greet();
}
}
class Child_Cat extends Cat{
constructor(name,age,favorite){
super(name,age);
this.favorite = favorite;
}
infomation(){
console.log(`名前は${this.name}です。`);
console.log(`年齢は${this.age}です。`);
console.log(`好きな食べ物は${this.favorite}です。`);
this.greet();
}
aftertenAge(){
console.log(`子猫の１０年後の年齢は${this.age+10}です。`);
}
}
var cat = new Child_Cat("ナミ",1,"banana");
cat.infomation();
cat.aftertenAge();
</script>
</body>
</html>
<!--名前はナミです。-->
<!--年齢は１歳です。-->
<!--好きな食べ物はbananaです。-->
<!--にゃあー-->
<!--子猫の１０年後の年齢は11です。-->
（２２）文字を書く
documentの前にはwindowというオブジェクトが隠れており、その中のdocumentオブジェクトのwriteメソッドを使うイメージ
<script>
document.write("Javascriptを勉強中です");
document.write(20+40);
</script>
（２３）アラートを出す
alertの前にはwindowオブジェクトが隠れている
<script>
alert("注意！");
</script>
（２４）ユーザー入力を受け付ける
windowオブジェクトのpromptメソッドを使う
<script>
let day = window.prompt('何日の秒数を計算しますか？')
document.write(60*60*24*day)
</script>
（２５）現在の秒数を表す
todayオブジェクトのgetSecondsメソッドを使う
Dateはオブジェクトであるが、クラスのためこのまま使えない（Date.getSecondとはできない）
そのため、todayというインスタンスを作成して使用する（上書きさせないため、上書きさせたいのであれば、varやletを使ってもよい）
なお、constは定数を意味する
<script>
const today = new Date();
document.write(today.getSeconds());
</script>
（２６）innerHtmlを使う
javascriptでは、id属性にアクセスすることができる
以下のようにdivタグにクラス属性を設定し、scriptで、getElementByIdを使って、timeのidの要素を取得（displqyはオブジェクト）
オブジェクトである、displayのinnerHTMLプロパティにアクセスしている
<div class="frame__inner">
<div id="time">
13:25:45
</div>
<script>
let display = document.getElementById("time");
display.innerHTML = "10時23分45秒"
</script>
</div>
（２７）htmlをscriptに入れる
htmlをscripitに入れるには””で囲む
以下は１から１００までの数を表す
<script>
let num = 1;
while(num<100){
document.write(num + "<br>");
num++;
}
</script>
（２８）indexOfを使う
indexOfは前から数えて何番目にあるか数字で返す
<script>
const book = "吾輩は猫である";
let keyword = prompt("検索したい文字を入力");
let pos = book.indexOf(keyword);
if (pos>=0){
document.write(`<p>${pos}</p>`);
document.write(`<p>${keyword}は、${pos}文字目に見つかりました</p>`);
}else{
document.write(`<p>${keyword}は、見つかりませんでした</p>`);
}
</script>
（２９）parseInt、isFinite
文字型をint型にするには、parseIntを使う
数字かどうかを判断するには、NumberオブジェクトのisFiniteメソッドを使う
promptは数字を入れても文字型と判断するため、parseIntでint型にする必要がある
<script>
let count = prompt("いくつ買いますか？");
count = parseInt(count);
if(Number.isFinite(count)){
document.write(`お代は${count*200}円です`);
}else{
document.write("数字を入れてください");
}
</script>
（３０）四捨五入、round
Mathオブジェクトのroundメソッドを使う
<script>
let price = parseInt(prompt("商品の金額を入力してください"));
const tax = 10;
if(Number.isFinite(price)){
let tax_price = Math.round(price*(tax/100));
document.write(`${price}円の消費税は${tax_price}円です`);
}
</script>
（３１）letとvarの違い
varはグローバル変数
以下はalertで、エラーが出る（スコープ外のため）
<script>
for (let i=0;i<3;i++){
document.write(i);
}
alert(i);
</script>
以下はエラーが出ない（varがグローバル変数のため）
<script>
for (var
i=0;i<3;i++){
document.write(i);
}
alert(i);
</script>
<!--10-->
<!--abc-->
（３２）setterとgetter
以下の場合、10とabcが表示される
インスタンス生成時には、isFiniteによって数字以外のものが引数として代入されても検知して0にすることができるが、インスタンス生成後には、変数itemに数字以外のabcを入れることは可能となっている
<script>
class Item{
constructor(tax){
if(isFinite(tax)){
this._tax = tax;
}else{
this._tax = 0;
}
}
}
let item = new Item(10);
document.write(item._tax);
item.tax = "abc";
document.write("<br>"+ item._tax);
</script>
<!--10-->
<!--abc-->
上記をsetterを使って回避する
<script>
class Item{
constructor(tax){
if(isFinite(tax)){
this._tax = tax;
}else{
this._tax = 0;
}
}
set tax(tax){
if(isFinite(tax)){
this._tax = tax;
}else{
his._tax = 0;
}
}
}
let item = new Item(10);
document.write(item.tax);
item.tax = "abc";
document.write("<br>"+ item.tax);
</script>
<!--10-->
<!--0-->
上記のようにすると、item.tax="abc"としても、item.taxのtaxは set taxのtaxがよびだされ、0とする働きとなる
同様に、インスタンス生成後にアクセスする場合に呼び出すものにgetterがある
<script>
class Item{
constructor(tax){
if(isFinite(tax)){
this._tax = tax;
}else{
this._tax = 0;
}
}
set tax(tax){
if(isFinite(tax)){
this._tax = tax;
}else{
his._tax = 0;
}
}
get tax(){
return this._tax + "%";
}
}
let item = new Item(10);
document.write(item.tax);
item.tax = "abc";
document.write("<br>"+ item.tax);
</script>
<!--10%-->
<!--0%-->
let item = new Item(10)のインスタンス生成後に、document.write(item.tax)のtaxはset taxとget taxのtaxが呼び出されている
（３３）JSONを使う
<script>
let locations = [
{
"name":"東京駅",
"address":"東京都千代田区"
},
{
"name":"銀座",
"address":"東京都中央区"
}
];
for (let i=0;i<locations.length;i++){
document.write(locations[i].name + locations[i].address+"<br>");
}
</script>
（３４）getElementById①
buttonタグにid属性を設定し、id属性をscript側から読み込む場合、getElementByIdを使う
以下では、btnに読み込んだのちに、addEventListenerでclickした場合の挙動を設定している（clickの代わりに、ダブルクリックのdblclickなど、イベントの発生時に使う
<button id="buy">クリック</button>
<script>
const btn = document.getElementById("buy");
btn.addEventListener("click",()=>{
btn.disabled=true;
});
</script>
（３５）getElementById②
以下は、addEventListerで、changeを使ったケース
チェックボックスにチェックすると、送信ボタンを押すことができるようにした
<div>
<label>
<input type="checkbox" name="agree" id="agree">チェックする
</label>
</div>
<div><button id="submit" disabled>送信</button></div>
<script>
let agree = document.getElementById("agree");
agree.addEventListener("change",()=>{
if(agree.checked === true){
document.getElementById("submit").disabled = false;
}else{
document.getElementById("submit").disabled = true;
}
})
</script>
（３６）現在の時刻を表す
<div id="timer">
<script>
let now = new Date();
document.getElementById("timer").innerHTML = `${now.getHours()}:${now.getSeconds()}:${now.getSeconds()}`;
</script>
</div>
（３７）現在の時刻を表す（タイマー）
setIntervalを使うと、●秒毎に行いたい処理を行う
<div id="timer">
<script>
let now = new Date();
document.getElementById("timer").innerHTML = `${now.getHours()}:${now.getSeconds()}:${now.getSeconds()}`;
//0.5秒ごとにtimerを呼び出す処理（ミリ秒）,1000だと1秒ごとに表示させる処理となる
let timertimer = setInterval(timer,500);
</script>
</div>
（３８）別ファイルからアクセスする①
<div id="timer">
<script src="timer.js">
//中には何もコードを書いてはいけない
</script>
<script>
//必要であれば別途scriptタグを設定する必要がある
</script>
</div>
timer.js
let now = new Date();
document.getElementById("timer").innerHTML = `${now.getHours()}:${now.getSeconds()}:${now.getSeconds()}`;
let timertimer = setInterval(timer,500);
（３９）モジュールのパス
./は、同じ階層にアクセスする場合、../は一つ上の階層にアクセスする場合
なお、モジュールは後述（４０）の場合にパスを上記のようにするが、（３８）のようにsrcでアクセスする場合は、./などは不要
（４０）別ファイルからアクセスする②
別途、外部サーバーが必要
Math.js
//exportすることで、モジュール化する
export function sum(a,b){
return a+b;
test.html
<p id="answer"></p>
<!--scriptタグのtype属性をmoduleとする-->
<script type="module">
import{ sum } from './Math.js';
let answer = sum(10,2);
document.getElementById("answer").innerHTML = answer;
</script>
（４０）JSONデータと非同期通信する
<div id="output"></div>
<script>
const url = "locations.json";
//以下の記述はJSONデータを取得するための決まり文句
const getlocations = ()=>{
return new Promise(function(resolve){
let xhr = new XMLHttpRequest();
xhr.open("GET",url);
xhr.send();
xhr.onreadystatechange = ()=>{
if(xhr.readyState === 4 && xhr.status===200){
let result = JSON.parse(xhr.responseText);
resolve(result);
}
}
})
}
//上記のPromiseというオブジェクトを使ったデータを使うためには、.thenとして受け取ったJsonデータを使うことができる。受け取ったJSONデータをlocationsという配列に入れている
getlocations().then(function(locations){
let html = '';
for(let i=0;i<locations.length;i++){
html+=locations[i].name+"/"+locations[i].address+"<br>"
}
document.getElementById("output").innerHTML=html;
})
locations.json
[
{
"name":"東京駅",
"address":"東京都千代田区"
},
{
"name":"銀座",
"address":"東京都中央区"
}
]
（４１）localstrageを使う
フォームに自動的に前回入力した値を表示させるには以下の通り
setItemメソッドでlocalstrageに保存
getItemメソッドで保存したものを表示
なお、localStrageはブラウザーを閉じても保存されるが、ここをSessionStrageとすると、ブラウザーを閉じると破棄される仕組みとなる
<div>
<input type="text" id="email" name="email">
</div>
<button id="save">保存する</button>
<script>
document.getElementById('save').addEventListener('click',function(){
localStorage.setItem('email',document.getElementById('email').value);
})
document.getElementById("email").value=localStorage.getItem("email");
</script>
（４２）配列を触るメソッド
①pushメソッド
pushメソッドとは、配列の最後に新しい要素を追加す
let lists = ["りんご","オレンジ","ぶどう"]
lists.push("なし")
const.log(lists)
//りんご、オレンジ、ぶどう、なし
②forEachメソッド
forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に同じ処理を行う
以下のように引数の中に入っている関数をコールバック関数という
let lists = ["りんご","オレンジ","ぶどう"]
lists.forEach((list)=>{
console.log(list);
})
//りんご、オレンジ、ぶどう
③findメソッド
findメソッドとは、コールバック関数の処理部分に記述した条件式に合う要素を配列の中から抽出する
let lists = ["りんご","オレンジ","ぶどう"]
let fruits = lists.find((list)=>{
return list === "りんご";
})
const.log(fruits);
//りんご
findメソッドは、配列がオブジェクトになっていても使える
let lists = [
{name:"りんご",color:"赤"},
{name:"オレンジ",color:"橙"},
{name:"ぶどう",color:"紫"}
]
let fruits_color = lists.find((list)=>{
return lists.name === "りんご"
})
consol.log(fruits_color)
//{name:"りんご",color:"赤"}
④filterメソッド
filterメソッドとは記述した条件に合う要素のみを取り出して新しい配列を作成する
let lists = [10000,5000,7000]
price = lists.filter((list)=>{
return list >= 7000;
})
console.log(price);
//[10000,7000]
findメソッドと同様にオブジェクトに対しても使用できる
let lists = [
{name:pen, price:10000},
{name:ball, price:5000},
{name:desk, price:7000}
]
price = lists.filter((list)=>{
return list.price >= 7000;
})
console.log(price);
//[{name:pen, price:10000},{name:desk, price:7000}]
⑤map関数
mapメソッドとは、配列内の要素に処理を行い、その戻り値から新しい配列を作成する
let lists = [10000,5000,7000]
price = lists.map((list)=>{
return list * 2;
})
console.log(price);
//[20000,10000,14000]
（４３）コールバック関数
コールバック関数とは、自分で直接実行するのではなく、相手に実行してもらうのがコールバック関数
以下の例で言うと、hello()はコールバック関数となる
詳しくは、ここを参照
<script>
function doTwice(func) {
func(); // 1回目！
func(); // 2回目！
}
function hello() {
console.log('Hello!');
}
doTwice(hello);
</sript>
（４４）setTimeout関数
setTimeoutは、受け取ったコールバック関数を指定ミリ秒後に実行する
以下は2000ミリ後にHello!Helloを実行
<script>
setTimeout(function() {
console.log('Hello!Hello');
}, 2000);
</script>