内容へ移動
サルでもわかるWEBプログラミング
フリーソフトのみでホームページ作成
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
index.html
»
03.初めてのjavascriptでおみくじアプリ
トレース:
03.初めてのjavascriptでおみくじアプリ:index.html
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
===== 03.初めてのJavascriptでおみくじアプリ ===== ホームページに動きをつけたり、メモ帳機能をつけたりするためには、<wrap hi>Javascript(ジャバスクリプト)</wrap>というプログラミング言語を学ぶ必要があります。 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アカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。 ==== 2.Githubで新規リポジトリを作成(新しいファイルの置き場所を作る) ==== GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。 {{:pasted:20181202-200027.png}} -「Repository name」のところに、「javascript-test」と入力し、 -「Create repository」ボタンをクリックします。 {{:pasted:20181202-200406.png}} ==== 3. index.htmlファイル(HTMLファイル、ホームページのファイル)を作成 ==== すると、以下のような画面になるので、「creating a new file」をクリックします。 {{:pasted:20181202-200811.png}} 以下のような真っ白な画面が出てきます。 {{:pasted:20181202-200844.png}} -name your file... のところに、index.html と記入し、 -下の方に、以下のコードをがんばって打ちこみます(<head></head>で囲まれた部分はコピペがお勧めですが、<body>以下の部分は、キーボードで打ち込んでみるのがお勧めです。) -入力し終わったら、下の方へ移動して、 -Commit new file をクリック <html> <script src="http://gist-it.appspot.com/https://github.com/adash333/javascript-test/blob/master/index.html"></script> </html> Javascriptのコードは、[[https://htmlst.hatenablog.jp/entry/2017/03/15/050740|こちらのサイト]]を参考にさせて頂きました。 {{:pasted:20181202-201514.png}} {{:pasted:20181202-201647.png}} ==== Javascriptのコード<script></script>は</body>の直前に記載する ==== index.html内にJavascriptのコード<wrap hi><script></script></wrap>を書く場所はいろいろあるのですが、最初のうちは</body>の直前に記載するのがお勧めです。 今回は、『占ってみよう』ボタンをクリックしたときに実行する関数<wrap hi>random()</wrap>を、<wrap hi><script></script></wrap>の中に記載しています。 関数を定義する方法 <code> function random() { (ここにrandom()関数の内容を定義します。) } </code> Math.floor()関数は、小数点以下を切り捨てる関数です。 <code> Math.floor(5.32) //=> 5 Math.floor(3.14) //=> 3 Math.floor(-1.7) //=> -2 </code> Math.random()関数は、0以上1未満の実数を返す関数です。 <code> // その時によって0以上1未満の中でランダムな値が返ってきます。 Math.random() //=> 0.9427193981204487 Math.random() //=> 0.8130707622404834 Math.random() //=> 0.6202760854276965 </code> document.getElementById("omikuji").innerHTML = msg; は、 <code> id="omikuji" である<div></div>の中身を、"msgの中身"に置き換える。 </code> ということになります。 ==== 4. GitHubでindex.htmlをホームページとして公開 ==== 以下のような画面になるので、画面右上の方にある、「Settings」をクリック。 {{:pasted:20181202-202255.png}} -Settingsページが表示されるので、下の方へ行き、 {{:pasted:20181202-202339.png}} -GitHub Pagesのところの、Source のところの、None をクリック -master branch をクリック {{:pasted:20181202-202800.png}} -Save をクリック {{:pasted:20181202-202914.png}} ==== 5. 公開されたホームページを確認する ==== 公開されているホームページアドレス(URLといいます)は、Settings画面から確認することができます。 {{:pasted:20181202-203329.png}} -Settingsの画面になっていますので、そのまま下の方へ行き、 -GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック {{:pasted:20181202-203644.png}} 私の場合は、https://adash333.github.io/javascript-test/ がリンクとなり、実際、以下のようになりました。 スマホでは、以下のように表示されます。 ===== コード解説 ===== ==== HTMLのタグ、要素、タグの中身について ==== 今回のおみくじアプリでは、HTMLファイル内の以下の場所を、Javascriptを用いて書きかえています。 <code> <button id="omikuji" class="button is-danger has-text-centered is-outlined">結果</button> </code> classの部分は今回はスタイルを指定しているだけなので省略すると、以下のようになります。 <code> <button id="omikuji">結果</button> </code> これは、 <code> <button開始タグ>(タグの中身)</button終了タグ> </code> と表すことができて、この<button開始タグ>から<button終了タグ>までをひとくくりにして、『要素』<wrap hi>element</wrap>と呼びます。 タグは、<wrap hi>tag</wrap> タグの中身は、javascriptで指定するときは<wrap hi>innerHTML</wrap>と呼びます。 HTMLのtagタグ、element要素については、https://saruwakakun.com/html-css/basic/htmlが非常に分かりやすいです。 ==== HTMLの特定の要素elementの中身innerHTMLを書き換える方法 ==== 単純化したおみくじ結果の表示部分を再掲します。 <code> <button id="omikuji">結果</button> </code> この『結果』の部分を書き換えるjavascriptコードは以下のようになっています。 <code> document.getElementById("omikuji").innerHTML = msg; </code> これは、 -HTML内で、 -id="omikuji"である要素の、 -中身(今回は『結果』の部分)に、 -変数msg("大吉"など)を代入する ということになります。 getElementById("omikuji")は、idがomikujiである要素elementをgetするという意味になります。 参考:https://www.sejuku.net/blog/30970 HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方 2017年 by マサト ===== オプション:おみくじアプリのPWA化 ===== [[03.初めてのjavascriptでおみくじアプリ:おみくじアプリのPWA化|03.初めてのjavascriptでおみくじアプリ:おみくじアプリの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
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ