【ゼロからはじめるプログラミング】JavaScript学習 #33

ゼロからはじめるプログラミング講座の第四十五回です。今回はウェブページでスナイプをするコードを作ってみましょう。スナイプとは狙い撃ちをすることです。

例えば0時00分にスタートするタイムセール品をショッピングカートに入れたりなど。

今まで学んできたJavaScriptは全て自分で作ったhtmlファイル上で動かしてきましたが、もちろんネット上にあるウェブページでも動かすことができます。その方法は別で解説していますので、そろそろ読み始めて実践していっても良い頃だと思います。

まずはindex.htmlを作り直しましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>JavaScript</title>
</head>
<body>
  <span>文字列操作</span>
  <div id="box">
    <p id="cart">カートは空です。</p>
    <button type="button" onclick="var date = new Date();
    var time = date.getHours() + '時' + date.getMinutes() + '分' + date.getSeconds() + '秒';
    document.querySelector('#cart').innerText = 'カートに商品が入っています。' + time;">カートに入れる。</button>
  </div>
  <script src="test.js"></script>
</body>

押すとカートに商品が入るボタンもどきがあります。これを指定した時間にクリックさせましょう。尚そのページはセール開始後にページを読み込まないとカートに商品を入れられないようになっているものを想定します。これを、

セール開始後に自動でカートに商品を追加しなさい。

今回は開始時間は自分で想定しましょう。1分後とかで良いですね。

ボタンを押すと押した時間が表示されるようになっているので自分で想定した時間より前にボタンが押された場合は失敗だと自分で判定してください。
まず目的の結果を得るプログラムの構成を考えてみましょう。以下は解答例になります。

カートに追加ボタンを押す関数を作る。
カートに追加する時間を指定するフォームを作る。
フォームに入力された時間を取得する。
現在の時間を取得してフォームに入力された時間になったらページを更新する。
はじめにカートに追加するボタンを押す。

今回は時間を指定するフォームとスナイプを開始するボタンを作ります。

時分秒

今まで解説した知識で足りないのはJavaScriptにボタンをクリックさせる処理ですね。

入力されたinputの中身は.valueのプロパティで取得できます。

ページの更新はlocationでもできますが、window.location.reload()を使うと簡単です。

ボタン要素をJavaScriptにクリックさせるには要素.click()とするだけで良いです。

これで目標の結果が得られそうです。まずは自分でコードを作ってみてください。

1.5.カートに追加ボタンを押す関数を作る。押す。

// カートに追加ボタンを押す関数
const addCart = function(){
  const addbtn = document.querySelector("button")
  addbtn.click()
}
addCart()

ボタン要素.click()でボタンを押します。

2.カートに追加する時間を指定するフォームを作る。

const createForm = function(id,unit){
  const time = document.createElement("input")
  time.setAttribute("id",id)
  time.setAttribute("value","")
  time.setAttribute("type","text")
  time.setAttribute("size","3")
  const ele = document.body.insertBefore(time,document.body.firstChild)
  const text = document.createElement("span")
  text.innerText = unit
  document.body.insertBefore(text,ele.nextElementSibling) // 次の兄弟要素
}
createForm("seconds","秒")
createForm("minutes","分")
createForm("hour","時")

// スナイプスタートボタンを作る関数、innerHTMLを編集する方法
const createStartButton = function(){
  let html = document.body.innerHTML
  html = html.replace("秒","秒<button id='start' type='button'>スナイプスタート</button>")
  document.body.innerHTML = html
}

createElementで要素を動的に作成追加します。使いまわすので関数化しています。

insertBefore()では追加した要素を返すので変数で受け取っておきます。後々編集するときに使えます。

node.nextElementSiblingは要素の次の兄弟要素を指定します。

<ul>

</ul>

li1の次の兄弟要素はリスト2です。li2の次の兄弟要素はありません。

ulの次の兄弟要素はaです。

スタートボタンはcreateElementを使わずにinnerHTMLを編集する方法をとっています。

<body>のinnerHTML全文をreplaceで編集して入れ直しています。

3.4.フォームに入力された時間を取得する。現在の時間を取得してフォームに入力された時間になったらページを更新する。

var interval // インターバルを格納するようの変数。
// スナイプスタートを押した時に実行される関数。
const startSnipe = function(){
  const start = document.querySelector("#start")
  const Hour = document.querySelector("#hour")
  const Minutes = document.querySelector("#minutes")
  const Seconds = document.querySelector("#seconds")
  start.addEventListener("click",function(){
    if(interval) clearInterval(interval) // インターバルがある場合に止めます。
    if(Hour.value.length == 0 | Minutes.value.length == 0 | Seconds.value.length == 0) return
    const hour = Number(Hour.value)
    const minutes = Number(Minutes.value)
    const seconds = Number(Seconds.value)

    if(hour >= 0 && minutes >= 0 && seconds >= 0){ // 条件が甘い。他人が操作する場合はしっかりと作る
        interval = setInterval(function(){
        const date = new Date()
        const nowH = date.getHours();
        const nowM = date.getMinutes();
        const nowS = date.getSeconds();
        if(nowH >= hour && nowM >= minutes && nowS >= seconds){
          window.location.reload()
        }
      },1000)
      alert("スナイプを" + hour + "時" + minutes + "分" + seconds + "秒に設定しました。")
    }
  },false)
}

5-7行目：input要素を指定。

8行目：startボタンを押されたときに処理を実行するようにイベントリスナを登録。

11-13行目：input要素のvalueプロパティを数値に変換して変数に代入しています。

これで入力された時間を取ることができました。10行目でinputの中身が0文字じゃないことを条件にしています。空文字だとNumber()が0を返します。

次は指定時間と現在時間を比較させます。

15行目：時、分、秒に数値が入っているときに現在時間と比較する反復処理(インターバル)を動作させます。

17-20行目：現在の時間を取得します。

21-23行目：現在の時間が指定した時間を越えた場合リロード(F5)します。

16.24行目：後でインターバルを止めるかもしれないので、インターバルに名前をつけて変数に代入しておきます。間隔は1000ms = 1秒です。

25行目：インターバルが設定されたらアラートで知らせます。アラートを表示している間はJavaScrriptは停止しています。

// カートに追加ボタンを押す関数
const addCart = function(){
  const addbtn = document.querySelector("button")
  addbtn.click()
}

// 入力フォームを作る関数、秒→分→時間の順で作る
const createForm = function(id,unit){
  const time = document.createElement("input")
  time.setAttribute("id",id)
  time.setAttribute("value","")
  time.setAttribute("type","text")
  time.setAttribute("size","3")
  const ele = document.body.insertBefore(time,document.body.firstChild)
  const text = document.createElement("span")
  text.innerText = unit
  document.body.insertBefore(text,ele.nextElementSibling) // 次の兄弟要素
}

// スナイプスタートボタンを作る関数、innerHTMLを編集する方法
const createStartButton = function(){
  let html = document.body.innerHTML
  html = html.replace("秒","秒<button id='start' type='button'>スナイプスタート</button>")
  document.body.innerHTML = html
}

var interval // インターバルを格納するようの変数。
// スナイプスタートを押した時に実行される関数。
const startSnipe = function(){
  const start = document.querySelector("#start")
  const Hour = document.querySelector("#hour")
  const Minutes = document.querySelector("#minutes")
  const Seconds = document.querySelector("#seconds")
  start.addEventListener("click",function(){
    if(interval) clearInterval(interval)
    if(Hour.value.length == 0 || Minutes.value.length == 0 || Seconds.value.length == 0) return
    const hour = Number(Hour.value)
    const minutes = Number(Minutes.value)
    const seconds = Number(Seconds.value)

    if(hour >= 0 && minutes >= 0 && seconds >= 0){ // 条件が甘い。他人が操作する場合はしっかりと作る
        interval = setInterval(function(){
        const date = new Date()
        const nowH = date.getHours();
        const nowM = date.getMinutes();
        const nowS = date.getSeconds();
        if(nowH >= hour && nowM >= minutes && nowS >= seconds){
          window.location.reload()
        }
      },1000)
      alert("スナイプを" + hour + "時" + minutes + "分" + seconds + "秒に設定しました。")
    }
  },false)
}

addCart()
createForm("seconds","秒")
createForm("minutes","分")
createForm("hour","時")
createStartButton()
startSnipe()

お疲れ様でした。少し長いコードですが全て理解できましたか？関数の実行順が重要です

if文で真の処理だけを1行で書く場合 if() 処理; のように{ }波括弧を省略できます。

今回のコードはまだまだ改良の余地があります。特にコードが止まるようなエラーを回避する機能がほとんどありません。次回は画像のパス変更するプログラムを作りましょう。

次も頑張って記事を作るのでチャレンジしてください！