javascriptの構成要素-独自の関数を作る-

目次

更新履歴

• 2020/11/03 08:00 初回投稿

この記事の目的

• javascriptの関しての知識をまとめています．
• 参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
• 参考サイトの一部または全部が英語のためそれの翻訳を含んでいます．
• コード上の明らかな間違いがありましたらコメントいただければ幸いです．

関連記事

• その1（立ち位置，主な機能，変数，数値と演算子）はこちら
• その2（文字列と配列）はこちら
• その3（条件式と繰り返し文）はこちら
• その4（関数）はこちら

基本的な関数の作り方

• 基本形は，function 関数名(引数)　{関数の中身}
• 呼び出しは，イベントに対するレスポンスとすることが多い．
• 引数を用いて，関数の再利用可能性を高める

btn.onclick = function() {
    BasicCalculation(2,3,'add');
} 

自作関数の例

function BasicCalculation(value1, value2, calcType) {
    const html = document.querySelector('html'); // html要素を格納
    const panel = document.createElement('div'); // div要素を生成
    html.appendChild(panel); // divをhtmlの子要素として追加
    const result = document.createElement('p'); // 結果を格納するp要素
    
// 足し算，引き算，掛け算，割り算かどうかを引数より判定し，計算結果を格納
    if (calcType === 'add') {
        result.textContent = `${value1} + ${value2} = ${value1 + value2}`;
        panel.appendChild(result);
    } else if (calcType === 'subtract') {
        result.textContent = `${value1} - ${value2} = ${value1 - value2}`;
        panel.appendChild(result);
    } else if (calcType === 'multiply') {
        result.textContent = `${value1} * ${value2} = ${value1 * value2}`;
        panel.appendChild(result);
    } else if (calcType === 'devide' && value2 != 0) {
      let value3 = value1 / value2;
        result.textContent = `${value1} / ${value2} = ${value3.toFixed(3)}`; //割り算の桁数は丸める
        panel.appendChild(result);
    }
    // 該当しないかゼロで割っている場合の処理
    else{
    result.textContent = 'No calculation type was found or  cannot devide by zero!';
    panel.appendChild(result);
    }
}
    // イベントにて関数を動かす
    const btn = document.querySelector('button');
    btn.onclick = function() {
    BasicCalculation(2,0,'devide');
    }

参考サイト

独自の関数を作る

javascriptの構成要素-関数-

目次

更新履歴

• 2020/10/14 7:40 「関連記事」セクションを独立
• 2020/10/11 11:30 コード例を修正
• 2020/10/11 11:10　「関数の中の関数」を追加
• 2020/10/08 21:20 「関数のスコープ」を追加
• 2020/10/07 07:20 「関数の使い方」「関数の引数」を追加
• 2020/10/03 10:00 初回投稿

この記事の目的

• javascriptの関しての知識をまとめています．
• 参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
• 「5. 数値と演算子」以降では参考サイトの一部または全部が英語のためそれの翻訳を含んでいます．
• コード上の明らかな間違いがありましたらコメントいただければ幸いです．

関連記事

• その1（立ち位置，主な機能，変数，数値と演算子）はこちら
• その2（文字列と配列）はこちら
• その3（条件式と繰り返し文）はこちら

関数

関数とは，再利用可能なコードのかたまり．特定の機能を持つものを関数として定義しておくことで，あとは関数名と引数により呼び出すことができる．

ブラウザ組み込み関数

これまで登場した，文字列操作や配列の操作，また乱数の作成を行うときに用いていたのも関数の1つ．

    let departureAirport = 'Narita International Airport';
    let arrivalAirport = departureAirport.replace('Haneda', 'Kansai');
    // replace('置換する文字列','置換後の文字列')は文字列オブジェクトのもつメソッド（関数）
    console.log(departureAirport); // Narita International Airport
    console.log(arrivalAirport); // Kansai International Airport

    let myArray = ['I', 'have', 'a', 'pen'];
    let madeStringFromArray = myArray.join(' ');
    // join('連結時の文字列')は配列オブジェクトの持つメソッド．
   console.log(madeStringFromArray); // I have a pen

関数の使い方

関数を定義する部分と関数を使う部分に2つに分かれている．

    //関数の定義
    function myFunction() {
        alert('hello world!');
    }
    //関数の使用
    myFunction();

名前をつけない関数（匿名関数）というものも定義，使用できる．イベントハンドラで使われることが多い． 匿名関数はこのほかの使い方もできるが，コードの可読性から行っても以下のようなイベント発火のレスポンスとして用いるにとどめた方が良い．

    const myButton = document.querySelector('button');
    myButton.onclick = function() {
        alert('hello');
    }

関数の引数

excelの関数でもよく登場するが，関数がその機能を発揮するために必要とする変数，配列のこと．例えば，ある100個の数値の平均を求める場合には当然．その100個の数値が入った配列が必要となる． 引数は英語でargumentと言うが，他にパラメーター、プロパティ、アトリビュート（属性）などと呼ばれることもある．

    let a = [1];
    const n = 100;
    for (let i = 1; i < n; i++){
        a.push(i + 1);
    }
    console.log(GetAverage(a)); // 50.5

    //関数の定義
    function GetAverage(a) {
        let n = a.length;
        let average = 0;
            for (let i = 0; i < n; i++){
                average += a[i];
            }
        return average /= n;
    }

関数のスコープ

関数内で定義されている変数や配列は基本的にその関数内からしかアクセスできない．言い換えると関数内で定義された変数や配列は「ローカル」変数/配列であるといい，その関数内にしかスコープを持たない．

対照的に関数の外側で定義された変数や配列は関数を跨いでアクセスすることが可能でこれらを「グローバル」変数/配列という．

プログラミング言語学習では必ず言われることだが関数のスコープをむやみに広げず，必要とあらば引数を介して変数や配列を受け渡すことが推奨される．

let x = 8; //グローバル変数
    console.log(add(x)); // 10
    console.log(subtract(x)); // 4

    function add() {
        let y = 2; //ローカル変数
        return x + y;
    }

    function subtract() {
        let z = 4; //ローカル変数
        return x - z;
    }
    alert(y); //error: Uncaught ReferenceError: y is not defined

関数の中の関数

関数は特定の機能をもつものであるので，その機能を実現するためにいくつかのステップが必要とされる場合，関数の中で関数を呼び出すことによりステップごとに分割できる

    function ImportTextFromFile() {
        let fileName;
        let importedText;

        OpenFile(fileName);
        ImportText(fileName, importedText);
        DisplayContents(importedText);
}

    function OpenFile(fname) {
        // 省略
    }
    function　ImportText(fname, text) {
        // 省略
    }
    function DisplayContent(text) {
        // 省略
    }

参考サイト

関数

javascriptの構成要素-条件式と繰り返し文-

目次

更新履歴

• 2020/10/14 7:30 コード例を修正
• 2020/10/02 7:30 break文とcontinue文のパートを加筆
• 2020/10/01 8:00 繰り返し文のセクションを加筆．タイトルを修正
• 2020/09/30 7:00 条件文のnot演算子部分を修正
• 2020/09/29 7:00 初回投稿

この記事の目的

• JavaScriptの関しての知識をまとめています．
• 参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
• 参考サイトの一部または全部の翻訳を含んでいます．
• コード上の明らかな間違いがありましたらコメントいただければ幸いです．

関連記事

• その1（立ち位置，主な機能，変数，数値と演算子）はこちら
• その2（文字列と配列）はこちら
• その4（関数）はこちら

条件文

if ... else 文

基本的な文構造は以下の通り．

    if ( condition1 ) {
        condition1が true の場合に実行されるコード
    }
    else if ( condition2 ) {
        condition1が false でcondition2が true の場合に実行されるコード
    }
    else {
        condition1 も condition2 も false の場合に実行されるコード
    }

if文として必須なのは最初の条件式のみで，else以下は条件次第．

    if ( condition1 ) {
        condition1が true の場合に実行されるコード
    }

if文は入れ子（ネスト）にすることができる．入れ子が深くなりすぎると条件判定が複雑になるので入れ子が3つ以上（以下の例は2つ）になる場合は条件を再考して入れ子が浅くなるようした方がよい．

 <input id="maxTemp" type = "text" >    

  <select id='weather' onchange="WeatherMessage()">
    <option value='晴れ'>晴れ</option>
    <option value='曇り'>曇り</option>
    <option value='雨'>雨</option>
    <option value='雪'>雪</option>
    </select>
  <p>
  </p>

    function WeatherMessage() {
        weather = document.getElementById('weather').value;
        maxTemperature = document.getElementById('maxTemp').value;
        para = document.querySelector('p');
        if (weather === '晴れ') {
          if (maxTemperature < 25) {
              para.textContent = `天気は晴れで，最高気温は${maxTemperature}度です．とても過ごしやすい1日になるでしょう．`;
          } else if (maxTemperature >= 35) {
              para.textContent = `天気は晴れで，最高気温は${maxTemperature}度です．熱中症に注意しましょう．`;
          }
        }
    }

• 1行でif文を書くことができるが，基本的には使わない方がよい．（改行やインデントする書き方の方が構造把握をしやすいため）

• 比較演算子は，等しいか判定する===,!===，大小関係を判定する<,>,<=,>=がある．

条件判定

条件判定(condition)の部分は，基本的にtrue，条件を満たさない場合のみfalseに変わると考えておくとよい．falseになるのは以下の場合．

• false（boolean型で条件を満たさない．6 < 3のような場合）
• undefined(値が存在しない，宣言されていない)
• null（「null」が代入されている）
• 0（二進数の「0」）
• NaN（非数．ゼロで割り算をしたり，平方根にマイナスが入っていたりする場合に発生）
• 空文字列 ('') （文字列型で文字列が入っていない．入力フォームで必須項目が入力されていない）

したがって，ある値がtrueであるか，存在するかを判定したい場合はその値を条件式に使うだけでよい．

let shopOpened = false; //営業時間前なのでお店は空いていない
let openState = '';
if (shopOpened) { // '=== true' を書かなくとも判定される．今回は「false」
  openState = 'open now';
} else {
  openState = 'closed'; //こちらが実行される
}
console.log(openState);

and, or, not演算子

複数の条件をすべて，あるいはいずれか満たす場合の記述はand(&&),or(||)演算子を使う．

    let myNum = 16384;
    if(myNum % 2 === 0 && myNum % 3 === 0) {
        console.log(`${myNum}は6の倍数です．`);
    }
    else if(myNum % 3 === 0){
         console.log(`${myNum}は3の倍数です．`);
    }
   else if(myNum % 2 === 0){
         console.log(`${myNum}は2の倍数です．`);
    }
       else {
         console.log(`${myNum}は2の倍数でも3の倍数でも6の倍数でもありません．`);
    }
    let isFriday = 'false';
    let isHoliday = 'true';
    if(isFriday || isHoliday) { //金曜日か休日であるので「true」
        console.log('飲みに行きましょう！'); 
    }

否定の条件を用いるならば，not(!)演算子を使う．論理関係が逆転するのでいつでも使い勝手が良いわけではなく，反対の条件時の処理が少ない場合に使えるとよい．

    let deviceState = false;
    let messageFromPower;
    // デバイス状態がオフ時の処理はオンを促すメッセージのみなので先に処理しておく方がわかりやすい
    if(!deviceState) { 
      messageFromPower = 'just please your device on.' 
      alert(messageFromPower);
      }
    else {
        // processes when device is on.
    }

switch 文

選択肢が複数あるような場合（与えられた数字の範囲で場合分けがあるなど）はswitch文を 使うとコード記述量が減らせる場合もある．

    let myScore = 75;
    switch (true){ //ここの値とcase内が比較されるので不等式を使う場合は「true」
        case (myScore >= 80 && myScore <= 100) :
            console.log('大変よくできました');
            break;
        case (myScore >= 60 && myScore < 80) :
            console.log('よくできました');
            break;
        case (myScore >= 0 && myScore < 60):
            console.log('次は頑張りましょう');
            break;
        default :
            console.log('範囲外の数字が入力されました．');
    }

三項演算子

選択肢が2つあり，そこから1つを選ぶような場合にこの演算子を使うとコードを節約できる． デバッグ時にtrue判定されているのかfalse判定なのかわからないなどの欠点もあるのでトグル的な切り替え（on/off）など選択肢が2つしかない単純な判定の場合に限る方がよい．

    para = document.querySelector('p');
    let isHoliday = false;
    let message = ( isHoliday ) ? '9時に起きましょう．' : '7時に起きましょう．'
    para.textContent = message;

参考サイト

条件式

繰り返し文

反復文，ループとも呼ばれ，ある一定回数同様の操作を繰り返すために用いられる構文．以下のような要素を持つ．

• カウンター: 条件式の対象となる値で，ループの開始時点で初期化される部分．let i = 0;のような使い方をされる．
• 条件: ループを続けるか止めるかを判断する部分．結果がtrue/falseになるような記述になる．i < a.length;のような使い方をされる
• イテレータ: カウンタの値を増加（あるいは減少）させる部分．i++のような使い方をされる．

条件判定が最終的にfalseにならなければ無限ループとなり，ブラウザの強制終了やクラッシュの原因となる．よって条件判定のセットは慎重に行う必要がある．

　ループの種類

forループ

もっとも標準的なループ．ループに必要な要素が最初にまとまっており，分かりやすく，記述ミスも少ない．

for (初期化処理; 条件; 最後の式) {
  // 実行するコード
}

let regionJapan = ['北海道','東北','関東','中部','近畿','中国','四国','九州','沖縄'];
let info = '日本は，';
const para = document.querySelector('p');
for (let i = 0; i < regionJapan.length; i++) {
    if (i === regionJapan.length - 1) {
        info += `${regionJapan[i]}の各地方に分かれます．`;
    } else {
        info += `${regionJapan[i]}, `;
    }
}
para.textContent = info; // 日本は，北海道, 東北, 関東, 中部, 近畿, 中国, 四国, 九州, 沖縄の各地方に分かれます．

whileループ，do...whileループ

whileループ

初期化処理がループ外に，イテレータ部分は中括弧が閉じる直前にある．条件が複雑になってくると使う場面が出てくる．

初期化処理
while (条件) {
  // 実行するコード
  最後の式
}

let regionJapan = ['北海道','東北','関東','中部','近畿','中国','四国','九州','沖縄'];
let info = '日本は，';
const para = document.querySelector('p');
let i = 0;
while ( i < regionJapan.length) {
if (i === regionJapan.length - 1) {
    info += `${regionJapan[i]}の各地方に分かれます．`;
} else {
    info += `${regionJapan[i]}, `;
}
i++;
}
para.textContent = info; //日本は，北海道, 東北, 関東, 中部, 近畿, 中国, 四国, 九州, 沖縄の各地方に分かれます．

do...whileループ

whileループとの違いは，実行するコードが条件式より先にあるのでループが最低でも1回は実行されること．1回は処理をしたい，1回処理することが大半で2回以上繰り返すことは少ない処理に有効．

初期化処理
do {
  // 実行するコード

  最後の式
} while (条件);

let regionJapan = ['北海道','東北','関東','中部','近畿','中国','四国','九州','沖縄'];
let info = '日本は，';
const para = document.querySelector('p');
let i = 0;
do {
    if (i === regionJapan.length - 1) {
        info += `${regionJapan[i]}の各地方に分かれます．`;
    } else {
        info += `${regionJapan[i]}, `;
    }
i++;
} while (i < regionJapan.length);
para.textContent = info; // 日本は，北海道, 東北, 関東, 中部, 近畿, 中国, 四国, 九州, 沖縄の各地方に分かれます．

break文とcontinue文

break文

ループの途中でそのループを抜けたい場合に用いる．ある値が見つかれば即終了したい，switch文でcaseから抜けるときなどに使用場面がある．

 <input id="station" type = "text" onchange="judgeStation()">
  <p>
<!-- ここに結果が格納される -->
    </p>

function judgeStation() {
　let nozomiStations = ['東京','品川','新横浜','名古屋','京都','新大阪'];
    　const para = document.querySelector('p');
    　const station = document.getElementById('station').value;

    　for (let i = 0; i < nozomiStations.length; i++) {
        　if (nozomiStations[i] === station) {
            　para.textContent = `${station}駅はのぞみ停車駅です.`;
            　break;
        　} else {
            　para.textContent = `${station}駅はのぞみ停車駅ではありません.`;
        　}
    　}
    }

continue文

ループの途中で抜ける文であるが，繰り返しの途中で残りの繰り返し分の処理をスキップしたい場合に用いる．ある条件を満たさないとわかった時点で残りの処理が不要な場合に使う．

  <input id="pref" type = "text" onchange='SearchPrefString()'> <!-- 「山」と入力-->
  <p>
  </p>

  function SearchPrefString(){
    const prefectures = ['北海道','青森','岩手','秋田','山形','福島','山梨','富山','和歌山','岡山','山口','宮崎','鹿児島','沖縄'];// 47都道府県名が格納されている．
    const para = document.querySelector('p');
    const partialPref = document.getElementById('pref').value;

    for (let i = 0; i <= prefectures.length; i++) {
        if (prefectures[i].indexOf(partialPref) === -1) { continue;}
        else {
            para.textContent += prefectures[i] + ' '; //山形，山梨，富山，和歌山，岡山，山口が出力される
        }
    }
  }

参考サイト

繰り返し文

javascriptの基礎知識 -文字列と配列-

目次

この記事の目的

• javascriptの関しての知識をまとめています．
• 参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
• 参考サイトの一部または全部が英語のためそれの翻訳を含んでいます．
• コード上の明らかな間違いがありましたらコメントいただければ幸いです．
• その1（javascriptの基礎知識，エラー処理，変数，数値変数の扱い）はこちら

文字列の基本

文字列の宣言と初期化

• 文字列は数値と同じくletで宣言し，クオーテーションマークで囲って初期化する．
• クオーテーションマークはシングル''，ダブル""どちらを使ってもよいが，混在させることはできない．

    let str1 = 'この豚の名前はとんかつです．'; //シングル
    let str2 = "この鶏の名前はがらあげです．"; //ダブル
    let str3 = 'この魚の名前はさしみです．"; //混在しているのでエラーになる

• クオーテーションマークの内側に異なる種類のクオーテーションマークを含むことは可能．同じ種類のクオーテーションマークを含みたいときはエスケープシーケンス\（環境により¥）が必要

    let str1 = 'She said, "I sell seashells by the seashore"'; //シングルのなかにダブルで引用文を挿入
    let str2 = 'Can\'t Take My Eyes Off You'; //英語の縮約形記号`'`を文字列の終わりとして認識させないための処理

文字列同士の連結

• 文字列同士は+で連結できる．
• 数値と文字列を連結しようとすると数値は文字列に自動的に（暗黙のうちに）変換さる．

    let str1 = 'この豚の名前は';
    let str2 = 'です．';
    str1 + 'とんかつ' + str2; //間に引用文が入っていても可能．
    'フロントは' + 1 + '階にあります．' // 「1」は文字列扱い

文字列と数値の相互変換

• 文字列→数値はNumber(文字列)
• 数値→文字列は.toString()

    let str1 = '123';
    let num1 = 25;
    Number(str1);
    num1.toString();

テンプレート文字列（テンプレートリテラル）

• 文字列を扱う新しい構文で，結合や間への数値の埋め込みなどを簡単かつ柔軟に行える．
• 文字列を扱う「書式」といったところ．
• バッククオートで文字列の先頭と終点を囲むことにより表現できる．
• 間に変数を埋め込む際は${変数}を使い，途中で改行したいときは\nを使う．

    message = `I got a score of ${myScore}\nHe got a score of ${hisScore}.`

• 古いブラウザ(IE)を除き使えるので複雑な文字列を扱う際はぜひ活用すべき

参考サイト

文字列の基本

よく使う文字列メソッド

文字列操作

• 文字列はオブジェクトとして宣言されるので，様々なメソッドを適用することができる．

    let str1 = 'godzilla';
    str1.length; // 長さは8文字なので「8」と表示される．
    str1[0]; // 0始まりなので最初の文字「g」と表示される．

よく使われるメソッド

• ある文字列が存在するか探すindexOf()

    let str1 = 'yahoo.co.jp';
    str1.indexOf('.jp'); //9文字目なので「8」と表示．日本のドメインかどうか判定できる

• 文字列の一部分を抽出するslice()

    let str2 = '東京都千代田区外神田';
    str2.slice(0,7); // 0番目から7文字を抽出するので「東京都千代田区」と表示．
    str.slice(3); // 3番目からの文字を抽出するので「千代田区外神田」と表示

• 大文字，小文字を切り替えるtoLowerCase(),toUpperCase()

    let str3 = 'nAriTA InTERnatiOnaL airport';
    str3.toLowerCase(); // 「narita international airport」と表示
    str3.toUpperCase(); // 「NARITA INTERNATIONAL AIRPORT」と表示

• 文字列の一部分を書き換えるreplace()

    let str4 = 'Narita International Airport';
    str4 = str4.replace('Narita','Kansai'); // 「Kansai International Airport」と表示

参考サイト

文字列メソッド

配列

配列の作成

• 配列は[]と,を使い宣言，初期化する

    let array = ['東京','ニューヨーク','ロンドン'];
    array; //配列の内容を表示
    let sequence = [1,1,2,3,5,8,13]; // 数値ももちろん格納可能
    let mix = ['Mt. Fuji', 3776]; // 数値と文字列を混ぜてもよい

配列の各要素へのアクセス

• 配列名[数字]とすることで配列の個別要素にアクセスできる．
• 配列の長さは配列名.lengthで取得でき，ループで各要素に同じ処理を施したいときなどに使える．

    let sequence = [1,1,2,3,5,8,13];
    for (let i = 0; i < sequence.length; i++) {
    console.log(sequence[i]);
    }

配列と文字列の相互変換

• 文字列変数を分割して配列に変換することができる．(excelのデータの分割と同じような処理)

    let myCities = '東京','ニューヨーク','ロンドン','パリ','北京';
    let myAarray = myCities.split(','); // 区切り文字「,」で分割
    myArray; //配列に変換された

• 配列の各要素を結合して文字列にすることも可能．コンマ以外の区切り文字を指定することも可能

    let myNewString = myArray.join(',');
    myNewString;

• toString()でも同様の操作はできるが，区切り文字の指定ができないなど，joinと比べ制限がある．

    let myCities = ['東京','ニューヨーク','ロンドン','パリ','北京'];
    myCities.toString();

既存の配列への要素の追加と削除

• 末尾への要素の追加と削除はそれぞれpush()とpop()

    let myCities = '東京','横浜','大阪';
    myCities.push('名古屋','札幌'); // 「大阪」の後に追加される
    myCities.pop(); // 「札幌」が削除される

• 先頭への要素の追加と削除はそれぞれunshift()とshift()

    let myCities = '横浜','大阪','名古屋','札幌';
    myCities.unshift('東京'); // 「横浜」の前に追加される
    myCities.shift(); // 「東京」が削除される

参考サイト

配列

javascriptの基礎知識 -立ち位置，主な機能，変数，数値と演算子-

目次

この記事の目的

• javascriptの関しての知識をまとめています．
• 参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
• 「5. 数値と演算子」以降では参考サイトの一部または全部が英語のためそれの翻訳を含んでいます．
• コード上の明らかな間違いがありましたらコメントいただければ幸いです．
• その2（文字列など）はこちら
• その3（条件式と繰り返し文）は[こちら](https://neigetale.hatenablog.com/entry/2020/09/29/065237）

javascriptとは何か，何ができるのか

javascriptとは何か

• 動的なwebページを作成する際に広く使われている技術
• DOM（後述）を介してhtml, cssを変更し，見た目（ユーザーインターフェース; UI）を更新する．よってhtml, cssより後に読み込まれ，実行される必要がある．
• コードが実行される場所により，サーバーサイドコードとクライアントサイドコードと呼び分けがされ，javascriptはどちらにも使われる．サーバーサイドコードには他にPHP、Python、Ruby や ASP.NETなどがある．
• html内に <script> your code </script> とする書き方と.jsという拡張子で別ファイルコードを書くやり方がある．分量とそのコードの汎用性に応じた場合分けが必要．

何ができるのか

• 変数への値格納，文字列に対する操作，イベント（ボタンのクリックや画面遷移）発生時の動作
• ブラウザAPIを用いた複雑な動作の容易な実行（DOM APIを用いたHTMLの生成，削除，変更，動的なページの見た目の変更，Geolocation API による地理的な情報の取得，Canvas と WebGL APIによる2D や 3D グラフィックでのアニメーションなど）
• サードパーティAPIを用いた外部機能の読み込み（Twitter API を使用したツイート表示Google マップAPIを使用した地図を埋め込みなど）

参考サイト

javascriptとは

javascriptを書くための基礎知識

プログラミング的思考

• あるものをプログラミングを用いて作成する際には，実現したい機能（こういうことをしたい）についての言葉をプログラムにて実行可能な動作に置き換えた言葉に言い換えなければならない
• 言い換えとはユーザーの操作とそれに対する動作との関係を順序よく追いかけ，場合分けすることである．

変数の定義

• 変数はletまたはverにて定義する．プログラムを通じて変化しない変数であればconstをつけ，定数化する．
• htmlのタグ内で class ="A"やfor ="A"と設定したものは，javascriptにおいて

    const const_val = document.querySelector('.A'); 

と記述することにより操作可能になる．

関数

• 関数は再利用可能なコードのかたまり．同じ操作を繰り返したい際に用いる．
• 特定の機能を実現するためにも関数を使いコードを部品の集合体とする．

演算子

• おなじみの加減乗除演算子は他の多くの言語と共通で+, -, *, /を用いる．文字列に対する+は文字列同士の結合を表す．
• C/C++でおなじみの+=のような追加演算子も使える．（a = a +1;とa +=1;は同じ意味）
• 論理演算子は===, !==, <, >を用いる．（===は厳密に等しいという意味でjavascriptにおいては==と異なる演算子）

条件式 - C/C++と書き方は同じで，

    if (condition) {}
    else if (condition) {}
    else {}

の3つを駆使して組み立てる．

ループ

• ループは

    for (let i = 1; i < n; i ++) { roop process }

と記述できる．letを使うこと以外はC/C++と同じ．

イベント

• イベントとは，特定の操作（例：ボタンをクリックする）に対して特定のコード（例：入力された値を足し算する）を実行すること．
• イベントリスナーにてイベント発生を検知し，イベントハンドラー内の処理を実行する．

オブジェクト

• htmlの一つ一つのタグで囲まれた部分はオブジェクトとして扱われるのでそのオブジェクト属性（名前やID,クラス）を指定することでオブジェクトを操作できる．（入力値を読み取る，色を変える，余白を設定するなど）

参考サイト

javascriptへの最初のダイブ

javascriptのエラー処理

エラーは大まかに文法のエラーと論理のエラーに分けることができる．

• 文法のエラーとは，コンパイル段階で検出されるタイプのエラーでスペルミス，大文字と小文字，存在しない関数（これもスペルミスによるものが多い），全角文字，文末の;や), }のつけ忘れ（始めと終わりの記号がペアになっていない）などが該当する．
• 論理のエラーとは，コンパイルは通るがプログラムが意図した通りに動かないようなエラー．配列の領域外アクセス，if文の条件分岐間違い，and, orの使い分け，代入=と比較===の取り違え

文法エラーへの対処

• 基本的にコンパイル時にエラーメッセージが表示されるのでその該当する行を確認する．IDEによっては記述段階でエラーを表示してくれるものもある．

論理のエラーへの対処

• エラー箇所は自分で発見する他ない．基本的には1行ずつどういった計算（処理）を行っているか確認しながら進めていく．
• alertやconsole.log()などの値を出力しながら意図しない数値がや文字列が出現している箇所を特定し，処理の妥当性を検証する．

参考サイト

javascriptのエラー処理

変数

変数の基本

• 変数とは，値を格納しておくための「箱」のようなもの．（実際のところ少なくともC言語においてはメモリ空間の先頭アドレスと型に応じたバイト数として確保される）
• 変数は，数値，文字列，論理値，（広義的には）関数やクラスなどを格納することができる．
• つまるところ変数はその要素として，アドレス（メモリ空間上の格納場所），型（文字列，数値など），バイト数（型に応じて規定される），格納情報（"abc", 1024など）をもっている.

変数の宣言と初期化

• 変数は，宣言と初期化をすることで使用可能となる．
• 宣言は「型+変数名」と記述すること．使用する前に必ず宣言する必要がある．

    let myName;
    let myAge;

• 初期化は実質的に必須であり，（コンパイラによって数値は0，文字列は""などが自動で入ることもあるが安全とコード記述の統一のためには必要）宣言した変数に最初の値を入れること．

    myName = "Tom";
    myAge = 25;

• 宣言と初期化は同時に行うことができる．行数が減らせるので推奨．

    let myName = "Tom";
    let myAge = 25;

• 変数は基本的にletを用いて宣言する．(verは使わない)
  • verは変数の初期化後に宣言できる
  • verは好きな場所に同じ変数を何度でも宣言できる

などの特徴があり，太字部分が混乱やバグを招きかねないので，（IE11以前をサポートする必要がない限り）使用しない．

変数の命名ルール

• 一般的には0-9,A-Z,a-z,_のみを用いて宣言する．
• 先頭に0-9，-は使えない
• 大文字と小文字は区別される．
• 予約語(let, function, forなど)は使えない．
• 長すぎる語，短すぎる語は可読性を下げるので避け，簡潔で意味の伝わる名前にする
• 2語以上を連結する際はmyName, myAgeなど小文字始まりのキャメルケースを用いる．（これは使う人により様々なルールが考えられる．要は変数だとわかる連結方法をとればよい，ということ）

変数の型

• 数値型　- 整数値と実数値が入る．クオーテーションマークで囲まない．

    let myAge = 17;

• 文字列型 - 文字の連結，シングル('')またはダブルクオーテーション("")で囲む．

    let myName = "Tom";

• 真偽型 - trueまたはfalseの2値のみを持つ．is,hasなどをつけることが多い．以下の例ではtrueとなる．

    let isLarge = 6 > 3;

• 配列型　複数の値を格納できる．角括弧[]を用いて宣言し，番号を入れることでアクセスできる．（番号は0始まり）

    let myFamilyNameArray = ['Tom', 'Lisa', 'Bob', 'Sara'];
    myFamilyNameArray[1] // 'Lisa' と表示．

• オブジェクト型

    let prefecture = { name : '石川', capital : '金沢' };
    prefecture.name // メンバーの取り出し方．

• プログラムを通じて変わらない（変えれたくない）ものはconstを用いて宣言する．変更しようとするとエラーが発生．

    const monthsInYear = 12;
    monthsInYear = 10; // これはエラー

参考サイト

javascriptの変数

数値と演算子

数値の種類

• 整数integer，浮動小数点数（倍精度実数）float，倍精度浮動小数点数（倍精度実数）doubleの3種類がある．
• 進数上の分類として10進数，2進数，8進数，16進数（cssの色設定で出てきた）もあるが10進数以外は基本レベルでは扱わない．

型の自動推論

• C/C++などでは数値の区別があり宣言時にユーザー（プログラマー）が決めなければならないが，javascriptでは全てnumberという型で扱う

    let myInt = 5;
    let myFloat = 6.667;
    myInt; // 「5」と表示
    myFloat; // 「6．667」と表示
    typeof myInt; // 「number」と表示
    typeof myFloat // 「number」と表示

Numberオブジェクトのメソッド

• 小数点以下を任意の桁数で丸めるtoFixed() メソッド

    let lotsOfDecimal = 1.766584958675746364;
    lotsOfDecimal; // 「1.766584958675746364」と表示
    let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
    twoDecimalPlaces; // 「1.77」と表示．小数第2位までに丸められた．

• データ型を変換（キャスト）するNumber(変換元の変数)メソッド

    let myNumber = '74'; // 文字列としての「74」
    myNumber + 3; // 文字列の結合として認識され，結果は「743」となる
    Number(myNumber) + 3; // 整数に変換（キャスト）されるので結果は「77」となる

算術演算子と演算子の優先順位

• +, -, *, /, %, **が基本的な算術演算子．
• +, -, *, / は四則演算
• %は数学で言うmodで，左側の数値を右側の数値で割った際の余りを計算する．
• **は累乗を計算する．3乗以上の計算ではこちらを使う方が記述量が少ない．
• 演算子には優先順位があり，例えば乗除計算は加減計算に優先する．優先させて計算させたい項がある場合にはその項を括弧で囲む．

    let num1 = 8;
    let num2 = 3;
    num1 % num2; // 「2」と表示
    num1 ** num2; // 「512」と表示

インクリメント/デクリメント演算子

• ++, --で表される演算子を，インクリメント/デクリメント演算子といい，既存の（宣言された）変数に対してのみ適用可能．

    let num1 = 8;
    let num2 = 3;
    num1++; // 値を表示してから加算を実行する． 「8」と表示される
    ++num1; // 加算を実行してから値を表示する． 「9」と表示される
    num2--; // 値を表示してから減算を実行する． 「3」と表示される
    --num2; // 減算を実行してから値を表示する． 「2」と表示される

代入演算子

• =のことであるが，もう少し複雑な+=,-=,*=,/=も用意されている．

    let x = 9;
    let y = 3;
    x += y; // x = x + y; と同じ意味で，結果は「12」
    x -= y; // x = x - y; と同じ意味で，結果は「6」
    x *= y; // x = x * y; と同じ意味で，結果は「27」
    x /= y; // x = x / y; と同じ意味で，結果は「3」

比較演算子

• trueかfalseかを判定したいときに用いる演算子．主なもので6種類．

    let num1 = 8;  
    let num2 = 3;  
    let num3 = 3;  
    num1 === num2; // false  
    num1 !== num2; // true  
    num2  <  num3; // false  
    num2  >  num3; // false  
    num2 <=  num3; // true  
    num2 >=  num3; // true

• C/C++で用いられる，==,!=はjavascriptでは値として等しいかのみ判定し，型が等しいがまでは判断しない．

    let num1 = 1;
    let isBool = true;
    num1 === isBool; // 型が違うため「false」
    num1 ==  isBool; // trueを値で表すと「1」であり，値が等しいため，「true」

参考サイト

数値と演算子

備忘録-html, css編-

この記事の目的

個人的に学習中のhtmlやcssの関しての備忘録．何か新しいことを紹介するものではないが，参考になるようなことがあればというスタンスで書いています．

目次

1. html
2. css

　　2.1. widthとheightの書き方（9/14投稿）

1. html

2. css

　2.1. widthとheightの書き方

　　2.1.1. width

• auto 初期値．display: blockなら横幅いっぱい，inline-blockなら文字数依存
• px 親要素にかかわらず絶対値．画像の幅などには使えるか？
• % 親要素に対する割合．100％にしてmarginやpaddingを指定するとはみ出る．この場合，box-sizing: border-box; を指定する対処法がある．親要素に幅指定がない場合，画面幅= 100%となる．画像などを均等に配置するときにも使える．（2分割: 50%, 3分割: 33.3%）

　　2.1.2. height

• auto 初期値．縦いっぱいとはならず文字や画像サイズの分．子要素により親要素の高さも変わる．
• px 絶対値指定．画像などの高さより小さく指定しても適用されるので中に入れるコンテンツの高さより小さくならないようにする．
• % autoで要素に応じた高さになるためあまり出番はない．親要素（html, body）での指定がないと適用されない．

　　2.1.3. 参考サイト

saruwakakun.com