このページへのアクセス
今日: 1 / 昨日: 0
総計: 7
ホームページに動きをつけたり、メモ帳機能をつけたりするためには、Javascript(ジャバスクリプト)というプログラミング言語を学ぶ必要があります。
3つも言語が出てきましたが、基本的にHTML、CSS、Javascriptの3つの言語を用いれば、ホームページ、スマホアプリを作成することができます。
Webプログラミングでは、このうちJavascriptが一番難しく、少しずつ、サンプルコードを写経してアプリを作りながら、勉強していくことになります。
今回は初めてのJavascriptとして、『占ってみよう!』ボタンをクリックすると、『大吉』『中吉』『吉』『凶』がランダムで表示されるホームページを作成し、公開してみたいと思います。
デザインについては、前回に引き続き、CSSフレームワークBulmaを用いてみたいと思います。
ソースコード
https://github.com/adash333/javascript-test/blob/master/index.html
今回作るもの
パソコン
Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。
GitHubアカウントの作成方法については、このサイトについてをご覧下さい。
GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。
すると、以下のような画面になるので、「creating a new file」をクリックします。
以下のような真っ白な画面が出てきます。
Javascriptのコードは、こちらのサイトを参考にさせて頂きました。
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の中身"に置き換える。
ということになります。
以下のような画面になるので、画面右上の方にある、「Settings」をクリック。
公開されているホームページアドレス(URLといいます)は、Settings画面から確認することができます。
私の場合は、https://adash333.github.io/javascript-test/ がリンクとなり、実際、以下のようになりました。
スマホでは、以下のように表示されます。
今回のおみくじアプリでは、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が非常に分かりやすいです。
単純化したおみくじ結果の表示部分を再掲します。
<button id="omikuji">結果</button>
この『結果』の部分を書き換えるjavascriptコードは以下のようになっています。
document.getElementById("omikuji").innerHTML = msg;
これは、
ということになります。
getElementById(“omikuji”)は、idがomikujiである要素elementをgetするという意味になります。
参考:https://www.sejuku.net/blog/30970
HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方
2017年 by マサト
https://www.sejuku.net/blog/63774
【JavaScript入門】コピペで簡単!サンプル集紹介と活用法
https://htmlst.hatenablog.jp/entry/2017/03/15/050740
2017-03-15
おみくじを作る方法