サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

03.初めてのjavascriptでおみくじアプリ:index.html


03.初めてのJavascriptでおみくじアプリ

ホームページに動きをつけたり、メモ帳機能をつけたりするためには、Javascript(ジャバスクリプト)というプログラミング言語を学ぶ必要があります。

3つも言語が出てきましたが、基本的にHTML、CSS、Javascriptの3つの言語を用いれば、ホームページ、スマホアプリを作成することができます。

Webプログラミングでは、このうちJavascriptが一番難しく、少しずつ、サンプルコードを写経してアプリを作りながら、勉強していくことになります。

今回は初めてのJavascriptとして、『占ってみよう!』ボタンをクリックすると、『大吉』『中吉』『吉』『凶』がランダムで表示されるホームページを作成し、公開してみたいと思います。

デザインについては、前回に引き続き、CSSフレームワークBulmaを用いてみたいと思います。

ソースコード

https://github.com/adash333/javascript-test/blob/master/index.html

今回作るもの

https://adash333.github.io/javascript-test/

0.用意するもの(開発環境)

パソコン

Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。

1.GitHubアカウントは作成済みとします

GitHubアカウントの作成方法については、このサイトについてをご覧下さい。

2.Githubで新規リポジトリを作成(新しいファイルの置き場所を作る)

GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。

  1. 「Repository name」のところに、「javascript-test」と入力し、
  2. 「Create repository」ボタンをクリックします。

3. index.htmlファイル(HTMLファイル、ホームページのファイル)を作成

すると、以下のような画面になるので、「creating a new file」をクリックします。

以下のような真っ白な画面が出てきます。

  1. name your file… のところに、index.html と記入し、
  2. 下の方に、以下のコードをがんばって打ちこみます(<head></head>で囲まれた部分はコピペがお勧めですが、<body>以下の部分は、キーボードで打ち込んでみるのがお勧めです。)
  3. 入力し終わったら、下の方へ移動して、
  4. Commit new file をクリック

Javascriptのコードは、こちらのサイトを参考にさせて頂きました。

Javascriptのコード<script></script>は</body>の直前に記載する

index.html内にJavascriptのコード<script></script>を書く場所はいろいろあるのですが、最初のうちは</body>の直前に記載するのがお勧めです。

今回は、『占ってみよう』ボタンをクリックしたときに実行する関数random()を、<script></script>の中に記載しています。

関数を定義する方法

function random() {
  (ここにrandom()関数の内容を定義します。)
}

Math.floor()関数は、小数点以下を切り捨てる関数です。

Math.floor(5.32) //=> 5
Math.floor(3.14) //=> 3
Math.floor(-1.7) //=> -2

Math.random()関数は、0以上1未満の実数を返す関数です。

// その時によって0以上1未満の中でランダムな値が返ってきます。
Math.random() //=> 0.9427193981204487
Math.random() //=> 0.8130707622404834
Math.random() //=> 0.6202760854276965

document.getElementById(“omikuji”).innerHTML = msg; は、

id="omikuji" である<div></div>の中身を、"msgの中身"に置き換える。

ということになります。

4. GitHubでindex.htmlをホームページとして公開

以下のような画面になるので、画面右上の方にある、「Settings」をクリック。

  1. Settingsページが表示されるので、下の方へ行き、

  1. GitHub Pagesのところの、Source のところの、None をクリック
  2. master branch をクリック

  1. Save をクリック

5. 公開されたホームページを確認する

公開されているホームページアドレス(URLといいます)は、Settings画面から確認することができます。

  1. Settingsの画面になっていますので、そのまま下の方へ行き、
  2. GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック

私の場合は、https://adash333.github.io/javascript-test/ がリンクとなり、実際、以下のようになりました。

スマホでは、以下のように表示されます。

コード解説

HTMLのタグ、要素、タグの中身について

今回のおみくじアプリでは、HTMLファイル内の以下の場所を、Javascriptを用いて書きかえています。

<button id="omikuji" class="button is-danger has-text-centered is-outlined">結果</button>

classの部分は今回はスタイルを指定しているだけなので省略すると、以下のようになります。

<button id="omikuji">結果</button>

これは、

<button開始タグ>(タグの中身)</button終了タグ>

と表すことができて、この<button開始タグ>から<button終了タグ>までをひとくくりにして、『要素』elementと呼びます。

タグは、tag

タグの中身は、javascriptで指定するときはinnerHTMLと呼びます。

HTMLのtagタグ、element要素については、https://saruwakakun.com/html-css/basic/htmlが非常に分かりやすいです。

HTMLの特定の要素elementの中身innerHTMLを書き換える方法

単純化したおみくじ結果の表示部分を再掲します。

<button id="omikuji">結果</button>

この『結果』の部分を書き換えるjavascriptコードは以下のようになっています。

document.getElementById("omikuji").innerHTML = msg;

これは、

  1. HTML内で、
  2. id=“omikuji”である要素の、
  3. 中身(今回は『結果』の部分)に、
  4. 変数msg(“大吉”など)を代入する

ということになります。

getElementById(“omikuji”)は、idがomikujiである要素elementをgetするという意味になります。

参考:https://www.sejuku.net/blog/30970
HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方
2017年 by マサト

オプション:おみくじアプリのPWA化

参考サイト

https://www.sejuku.net/blog/63774
【JavaScript入門】コピペで簡単!サンプル集紹介と活用法

https://htmlst.hatenablog.jp/entry/2017/03/15/050740
2017-03-15
おみくじを作る方法


03.初めてのjavascriptでおみくじアプリ/index.html.txt · 最終更新: 2019/02/16 by adash333