気になる

アフェリエイト旅行

自動車

家庭菜園

« 鶏ムネ肉で 甘辛手羽先風♪ | トップページ | Chromeでデバッグ方法 »

2017/02/23

初めてのJavaScript お勉強

先週、旦那様にサラッと教えてもらったので
自分で手足のように使えるよう、基礎知識をちゃんと入れて下準備をば。

MDN ←わからないことがあったら、ここで調べる

エディタ:Brackets

  • Ctrl + f

テスト環境:GooglChrome

  1. htmlファイルからjavascriptを実行させるので→index.htmlファイル作成
  2. GooglChromeブラウザを起動させた状態に→index.htmlファイルをドラッグアンドドロップ
  3. GooglChromeブラウザ起動状態で、→キーボードのF12
  4. 「console」確認できるようになりました♪

src ← これはソースって発音するのか。w

━━━━━━━━━━━━━━━━━━━━━━━━━━━

仕組み

───────────────────────────
    /*
        データ型
            文字列
            数値
            真偽値 (true / false)
            オブジェクト
                配列
                関数
                組み込みオブジェクト
            undefined (定義されていない)
            null       (何も無い)
    */

    /*
        条件分岐
        if (条件) {
            真
        } else {
            偽
        }

      ※途中で else if も使えるよ

    */

━━━━━━━━━━━━━━━━━━━━━━━━━━━

変数:データに付けるラベル

─────────────────────────── 

        var msg; ←変数名をつけた
        msg = 'Hello world';
        console.log(msg);

━━━━━━━━━━━━━━━━━━━━━━━━━━━

文字の取り扱い

─────────────────────────── 

    msg = 'It\'s\n a p\ten';

It's と表示させたいときは「'」部分がjavascriptだと文字囲だと認識してしまうので
その前に¥マークを入れれば良い。

改行:¥n
タブ:¥t

 

━━━━━━━━━━━━━━━━━━━━━━━━━━━

for文

※ループ処理

───────────────────────────

        for(var i = 0; i < 10; i++ ){
            console.log(i);
        }

  1. 1つめは、ループを回すための変数を初期化
  2. 2つめは、この条件が真である間
    下記の処理をしなさい
  3. 3つめは、ループで回ってきた値に1つずつ足して、また処理をしている

break


        for(var i = 0; i < 10; i++ ){
            if (i===5){
                break;            //←ループ処理を抜ける
            }
            console.log(i);
        }

0 1 2 3 4

continue

        for(var i = 0; i < 10; i++ ){
            if (i===5){
                continue;    //←ループ処理を1回だけ抜けて、続ける
            }
            console.log(i);
        }

0 1 2 3 4 6 7 8 9

━━━━━━━━━━━━━━━━━━━━━━━━━━━

ある変数が、複数の数値を取る場合につかう
switch

※if文じゃなくても書けるんだよ

─────────────────────────── 

        var signal = 'blue';
       
        switch(signal){
            case 'red':
                console.log('stop');
                break;         ←抜ける言葉
            case 'green':
            case 'blue':       ←2つめも書けたりOK
                console.log('go');
                break;
            case 'yellow':
                console.log('slow down');
                break;
            default:          //←該当しないとき
                console.log('wrong signal');
                break;
        }

━━━━━━━━━━━━━━━━━━━━━━━━━━━

■ 関数

 引数
 返り値

───────────────────────────

        function hello (){
            console.log('Hello');  //戻り値
        }
        hello();
         //←関数を呼び出してる(そして関数が実行される)

Hello

※プログラムは上から下へ流れていく。
まず関数を書いてから、下から呼び出し文を書く。
(呼び出しを書いてから、関数を書かない!)

引数を与えることも出来る

        function hello (name){
            console.log('Hello ' +  name);
        }
        hello('bob');
      //←引数としてbobを与えている
        hello('joy');

Hello bob
Hello joy

返り値を取るには

        function hello (name){
            return 'Hello ' +  name;  //3)返り値
        }
        var greet = hello('Tom');   //2)変数
greet中身はhello関数呼び出し

        console.log(greet);      //1)変数greet中身を見て、表示

Hello Tom

※関数に渡す値      :引数
  関数から戻される値  :返り値(戻り値)

関数はデータ型なので、変数に入れることが出来るよ(無名関数と言うよ)

        var hello1 = function 関数名消したよ (name){
            return 'Hello ' +  name;
        };            ←式になったので、セミコロンを付けるよ
        var greet = hello1('Tom');
        console.log(greet);

---------------------------------------------

■ 即時関数(読み込んだら即時実行してくれる。トリガー必要なし。外部OK)

		(function(){
            //即時関数
})();

□□□□□□□□□□□□□□□□□□□□□□□□□□□

■ オブジェクト

     プロパティ
     メソッド

□□□□□□□□□□□□□□□□□□□□□□□□□□□

オブジェクトとは、配列と同じようにグループ化されたデータ!ヾ(≧◇≦)
中身は「名前」と「値」でセット。(連想配列だよね)

<オブジェクトの作り方>

        var user = {};

<中身の作り方(プロパティ)>

※名前:値  ←コロンで繋ぐよ (これをプロパティというよ)   

        var user = {
            email:'1@2.com', //←プロパティというよ
            score:80
        };

<使い方(プロパティ)

        var user = {
            email:'1@2.com',
  //←プロパティというよ
            score:80
        };
       
        console.log(user['email']);        //値の取り出し方 1.配列風
        console.log(user.score);        //値の取り出し方 2.css風
       
        console.log(user);                //全ての値の取り出し方

<中身の作り方(メソッド)>

※関数もOK


        var user = {
            email:'1@2.com',
            score:80,
           greet:
function(name){      //関数もOK
                console.log('Hello ' + name);

            }
        };
       
        user.greet('Tom');

<使い方(メソッド)
       
        user.greet('Tom');

-------------------------------------------------------

おぉ!先日やった
「たった1日でゲームを作るプログラミング入門(日経ソフトウェア2017年2月号)」の
内容をちゃんと理解しながらコードを追って読めるようになりました。w (*^_^*)

 

旦那様がスパルタなので、ここ・・分かっているよねていで進めていくので多少の混乱
ながらもやりとげられたけど。うーん♪自分で何か作れるかも。w

 

WEB上でゲーム作成手順を公開されているサイトがあったので、こちらも取り組み
してみました。考え理解すすめながらなので4日ほどかかりましたが、完成。↓

 

--------------------------------------------------------------

<プログラムを組んでいく手順書>

「割り勘電卓」←これが手順書みたく追って教えてくれるので理解しやすかった♪

  1. htmlファイルに、表示させたい部品を作ってその内容を記述
    (ついでに見た目もcssで記述)
  2. scriptを作っていく

次に

  1. 各要素の取得を記述
  2. イベントリスナーを記述(自分が起こしたいイベント内容を)
    中に関数を書いていく

if文を書く手順は

  1. もし○○だったら if(○○){ ... }
  2. なになにである  { ... } ←の中に「//ok とか erro」と書いておいて
  3. その下に表示させたい文章をそのまま入力して
    □□.innerHTML = 'お一人様。。。円ちょうどです';
  4. 。。。の部分を→表示させたい変数名に書き換える

書き換え方は

  1. 。。。部分を消して→ '++' としておいて
  2. ++の中にカーソルを置いて変数名を書く→ + price + みたく

使う変数が自分の中で決定するので

  1. var △△; ←と変数宣言を書いておけば良い

--------------------------------------------------------------

<タイピングゲームの制作に挑戦>

コレを利用して、自分の英単語帳にしようと思い、練習用scriptとする。

お気に入りのタイピングゲームのような使い勝手を目指して!憧れサンプル↓

<要望1>
タイピングの中のデータについて・・
単なるタイピングでは無く、「日本語:英語」として扱いたい。
タイトル部分に日本語が表示され、それを見て自分で
キーボードを使って英単語を打ち込み(エリア内に表示)

最初に、連想配列ですればいいのかなと試す。。。

var array = {'名前':'name','犬':'dog','りんご':'apple'};

で、順次出現にするためにfor文を使いたいので
連想配列のプロパティの総数を求めようと思ったら・・

配列:インデックスが数字である
連想配列:インデックスが文字列である

配列だったら、lengthプロパティは配列のサイズを取得できるが、
連想配列の場合だと、不可。。。

しかし、下記のように「Object.keys()」を使うとプロパティ個数が取得できる。

Object.keys() - JavaScript | MDN

var array = {'名前':'name','犬':'dog','りんご':'apple'};
var count = Object.keys(array).length;

オブジェクトのキー(文字)だけ取りたい場合は

var data = Object.keys(array)

for-in 文でもオブジェクトのプロパティを順番に取ってくる。

  for(var key in array){
            targetTextText = key;    //キー
            targetText = array[key];//値
    }

で・・for文でインデックス番号で回したい要望は変わらず成果無し。
連想配列の利用は諦めて、配列でいくことにする。。。(旦那様に笑われた)

次に、一次元では希望通りは無理だとわかったので、二次元で作ることを考える。

var array_j = new Array();
var array_e = new Array();
array_j.push ("名前","犬","りんご");
array_e.push ("name","dog","apple");

↓まとめて書くと

var array_j = ["名前","犬","りんご"];
var array_e = ["name","dog","apple"];

<要望2>
入力が間違ったら、もう一度練習がしたい。

入力が間違っていると判定した部分で

array_j.push (targetText_j);
array_e.push (targetText_e);

間違った単語をpushで配列の末尾に追加。
(これで覚えるまで何度でも出現してくれるようになった。ホッ)

<要望3>
手直ししている間に何か間違ってしまったのか・・
英単語の最後の文字を入力したら、瞬間的に次に行ってしまうので
少し時間を置いてから次に行くことにしたい。

setTimeOut('呼び出す関数', 待機時間);  を利用。

        //fallOut();
        setTimeout(fallOut, 500);

<要望4>
自分の練習用なので、画面読み込みされたらすぐにゲームスタートへ。

<body onload="startTyping()">

他にもonloadさせたいものがあるけど、2つは設定出来ないらしいので
addEventListener を使うらしい。(イベントを複数設定可)

<要望5>
入力した英単語文字は、落下していくと自分的に見づらくなるのでそれはやめて
プログレスバーで迫り来る時間を存在させて見せておくようにしたい。
一秒ごとにバーが伸びていって100%になったら終了。みたいな奴を希望。

一定時間で定期的に実行させるには

gameTimer = setInterval(処理,時間);

キャンセルしたければ

clearIntervaal(gameTimer);

<.slice とは>

配列の一部分の浅いコピーを新しい配列オブジェクトにして返す。
.slice(開始位置,終了位置) と書く。

※終了位置指定した場合、その前の要素までを取得している。要注意

<oninput の 使い方>
入力のたびに関数呼び出してくれるよ

   
    <input type="text" id="mytype" oninput="typing()">
    <div id="hyouzi"></div>
   
    <script>
       
        function typing (){
        var x = document.getElementById('mytype').value;
        document.getElementById('hyouzi').innerHTML = '内容表示' + x;
        }
       
    </script>

<エラーメッセージ>

un caught refenceErrer

別ファイルに.js にしないで そのままhtmlの中に即時関数 (function(){ })();として
文字入力テストをしたら・・ oninput="typing()" 部分がエラーだとか。。。

htmlでイベント書いていて、
スクリプトの方でそのまま受けようとするとエラーになるもよう。

下記な感じで「oninput」も、「onclick」もエラーになる。

    <!--テキスト入力欄-->
    <input type="text" id="type" size="100" oninput="typing()">
    <!--スタートボタン-->
    <input type="button" id="start" value="Start" onclick="startTyping()">
   
    <script>
        (function(){
        'use strict';
            //test
            function typing (){
                var x = document.getElementById('type').value;
                document.getElementById('hyouzi').innerHTML = '内容表示' + x;
            }

            function startTyping (){
                //
            }
        })();

---------------------------------------------------------

一から書いていく

1 htmlで表示させたいパーツをつらつらと書く

1-1雛形

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   
    <title>●●●</title>

</head>
<body>

</body>
</html>

1-2 パーツ

<body>
    <!--見出し-->
    <h1>タイピング</h1>
   
    <!--メイン部分-->
        <!--問題文を表示-->
        <div class="hidden_area" id="status">Press Start button.</div>

        <!--問題文を落下させるエリア-->
        <div id="fall_area">
            <!--問題文を表示-->
            <div id="target">(Target Text)</div>
        </div>
   
    <!--テキスト入力欄-->
    <input type="text" id="type" size="80">
    <!--スタートボタン-->
    <input type="button" id="start" value="Game Start">

1-3 cssで飾る

<meta charset="UTF-8">
   
    <title>タイピング</title>
   
    <style>
        body{
            text-align: center;
        }
        #status{
            color: #FFFFFF;
            line-height: 30px;
            text-align: center;
        }
        #fall_area {
            position: relative;
            height: 300px;
            background-color: #333333;
        }
        #target{
            font: bold 18px 'Courier New';
            color: #FFFFCC;
            text-align: center;
            position: relative;
            top: 125px;
            z-index: 1;
        }
        .hidden_area{
            position: relative;
            height: 30px;
            background-color: #000000;
            z-index: 2;
        }
        #start {
            margin: 30px auto;
            width: 180px;
            background-color: #333;
            color: #fff;
            cursor: pointer;
            padding: 7px;
        }
        #start:hover {
            background-color: #f44336;
        }

2 プログラムを書いていく

2-1 雛形

    <input type="button" id="start" value="Game Start">

    <script>

        (function(){
        'use strict';

        //中身

        })();
       
    </script>

2-2 動作テスト用

    <input type="button" id="start" value="Game Start">
   
    <div id="result"></div>
   
    <script>
        (function(){
        'use strict';

        //test
            var result = document.getElementById('result');

2-3 スタートボタンが押されたら

            var result = document.getElementById('result');
            
        //
        //スタートボタン
            var startBtn = document.getElementById('start');
            
            //ボタンがclickされたら
            startBtn.addEventListener('click', function(){
                   result.innerHTML = 'ボタンが入力されました';
            })

動いていることを確認OK

2-4 入力欄にキー入力があったら


                   result.innerHTML = 'ボタンが入力されました';
            })

        //入力文字
            var type;
            type = document.getElementById('type');
            
            type.addEventListener('keyup', function(){
                result.innerHTML = type.value;
            })

動いていることを確認

2-5 問題文を用意して、表示 (+入力欄にカーソルをフォーカス)

        //スタートボタン
            var startBtn = document.getElementById('start');

               
               
                var eigoj =["愛1","犬2","足22"];  //問題文を用意
                var index;    //配列のインデックス番号
                index = 0;
            
            //ボタンがclickされたら
            startBtn.addEventListener('click', function(){

            
                //問題文を表示
                var status;
                status = document.getElementById('status');
               
                    status.innerHTML = eigoj[0];

 //入力欄にカーソルをフォーカス
                type.focus();

               
            })

2-6 落下用のテキストを表示

                status.innerHTML = eigoj[index];
               
                //落下用 問題文を表示
                var target = document.getElementById('target');
                target.innerHTML = eigoj[index];

2-7 スタートボタンが押されたらタイミングと、問題文をセットと分ける

※問題文セットは、問題数分 呼ばれるから

            //ボタンがclickされたら
            startBtn.addEventListener('click', function(){
                //入力欄にカーソルをフォーカス
                type.focus();
                //フォール中にテキストセット
                setText();
            })
            
            
            function setText (){
                //問題文を表示
                var status;
                status = document.getElementById('status');
                status.innerHTML = eigoj[index];
               
                //落下用 問題文を表示
                var target = document.getElementById('target');
                target.innerHTML = eigoj[index];
            }

2-8 (+プレグレスバーを設置)

html

       <div class="hidden_area" id="status">Press Start button.</div>
        <!--プレグレスバーを表示-->
        <p><progress id="prg" value="0" max="100">0%</progress></p>

script

                //エリアの中に問題文を表示
                var target = document.getElementById('target');
                target.innerHTML = eigoj[index];

               
                //バーを○秒ごとに呼び出し
                timer = setInterval(prg,50);
            }
            
            //プレグレスバー
            var bar = document.getElementById('prg');
            var timer;
            
            function prg(){
                bar.value++;
                //バーがmax値に達したら
                if (bar.value == bar.max) {
                    prgOver();
                }
            }
            
            function prgOver(){
                    //タイマー止める
                    clearInterval(timer);
                    bar.value = 0;
                    //入力欄を空白に
                    type.value = '';
               
                    //次の問題へ
                    if( index < eigoj.length-1 ){
                        index++;
                        setText();
                    }
            }

2-9 入力された文字と、エリア内の文字と 同等かの確認

                    //次の問題へ
                    if( index < eigoj.length-1 ){
                        index++;
                        setText();
                    }
            }

            
        //入力文字      
            
            var type;
            type = document.getElementById('type');
            
            
            //入力された文字
            
            type.addEventListener('keyup', function(){
                result.innerHTML = type.value;
               
                if(type.value === eigoj[index]){
                    result.innerHTML = 'ok';
                    prgOver();
                }
            })

動いていることを確認OK

□□□□□□□□□□□□□□□□□□□□□□□□□□□

■今ココ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   
    <title>タイピング</title>
   
    <style>
        body{
            text-align: center;
        }
        #status{
            color: #FFFFFF;
            line-height: 30px;
            text-align: center;
        }
        #fall_area {
            position: relative;
            height: 300px;
            background-color: #333333;
        }
        #target{
            font: bold 18px 'Courier New';
            color: #FFFFCC;
            color: #f53608;
            text-align: center;
            position: relative;
            top: 125px;
            z-index: 1;
        }
        .hidden_area{
            position: relative;
            height: 30px;
            background-color: #000000;
            z-index: 2;
        }
        #start {
            margin: 30px auto;
            width: 180px;
            background-color: #333;
            color: #fff;
            cursor: pointer;
            padding: 7px;
        }
        #start:hover {
            background-color: #f44336;
        }
            
    </style>
</head>
<body>
    <!--見出し-->
    <h1>タイピング</h1>
   
    <!--メイン部分-->
        <!--問題文を表示-->
        <div class="hidden_area" id="status">Press Start button.</div>
        <!--プレグレスバーを表示-->
        <p><progress id="prg" value="0" max="100">0%</progress></p>
        <!--問題文を落下させるエリア-->
        <div id="fall_area">
            <!--問題文を表示-->
            <div id="target">(Target Text)</div>
        </div><br>
   
    <!--テキスト入力欄-->
    <input type="text" id="type" size="80"><br>
    <!--スタートボタン-->
    <input type="button" id="start" value="Game Start">
   
    <div id="result"></div>
   
    <script>
        (function(){
        'use strict';
        //test
            var result;
            result = document.getElementById('result');
            
        //スタートボタン
            var startBtn = document.getElementById('start');
               
                var eigoj = ["dog1","cat2","foot22"]; //問題文を用意
                var index;    //配列のインデックス番号
                index = 0;
            
            //ボタンがclickされたら
            startBtn.addEventListener('click', function(){
                //入力欄にカーソルをフォーカス
                type.focus();
                //エリアの中にテキストセット
                setText();
            })
            
            //問題数分 呼ばれた時の処理
            function setText (){
                //問題文を表示
                var status;
                status = document.getElementById('status');
                status.innerHTML = eigoj[index];
               
                //エリアの中に問題文を表示
                var target = document.getElementById('target');
                target.innerHTML = eigoj[index];
               
                //バーを○秒ごとに呼び出し
                timer = setInterval(prg,50);
            }
            
            //プレグレスバー
            var bar = document.getElementById('prg');
            var timer;
            
            function prg(){
                bar.value++;
                //バーがmax値に達したら
                if (bar.value == bar.max) {
                    prgOver();
                }
            }
            
            function prgOver(){
                    //タイマー止める
                    clearInterval(timer);
                    bar.value = 0;
                    //入力欄を空白に
                    type.value = '';
               
                    //次の問題へ
                    if( index < eigoj.length-1 ){
                        index++;
                        setText();
                    }
            }
            
        //入力文字
            
            
            var type;
            type = document.getElementById('type');
            
            //入力された文字
            
            type.addEventListener('keyup', function(){
                result.innerHTML = type.value;
            //    typing();
               
                //test
                if(type.value === eigoj[index]){
                    result.innerHTML = 'ok';
                    prgOver();
                }
            })

            
            
        })();
    </script>

</body>
</html>

□□□□□□□□□□□□□□□□□□□□□□□□□□□

« 鶏ムネ肉で 甘辛手羽先風♪ | トップページ | Chromeでデバッグ方法 »

お勉強」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/114130/64929283

この記事へのトラックバック一覧です: 初めてのJavaScript お勉強:

« 鶏ムネ肉で 甘辛手羽先風♪ | トップページ | Chromeでデバッグ方法 »

google検索

  • Google


    このブログを検索
    ウェブ全体から検索

カテゴリー

ニュース

  • 日経平均(長期)

    株価ミニチャートのブログパーツ
  • 経済指標(発表と内容)へのリンク
    http://jp.investing.com/economic-calendar/
  • 経済指標
  • . . .
  • 日経平均チャート
    by 株価チャート「ストチャ」
  • 株指標
2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30