Zenn
Open4

【超初心者】JavaScript勉強記録

JavaScript
akitsujiakitsuji

1.超キホン

参考書籍
スラスラ読める JavaScript ふりがなプログラミング
https://amzn.asia/d/fAKDnEn

変数宣言

letでローカル変数を宣言する

// ローカル変数宣言: let
let text = 'Hello world';
console.log(text);

letは再宣言不可
varは再宣言可

入力要求

promptメソッドで、ユーザーに対し入力を要求する
（業務ではあまり使用しないと思う）
入力結果は変数で受け取る。また、promptの型はString

let input = prompt('入力してください');
console.log(input);

文字列の結合

＋で普通に結合できる

let input = prompt('入力してください');
console.log('入力された内容は「'+ input + '」です。');

型変換

String → Integerは、parseIntを利用する

let input = prompt('入力してください');
console.log(parseInt(input) + 50);

型チェック

isNaN : 数値型への変換可否

let text = prompt('入力してください');
// 数値への変換が不可：TRUE
// 数値への変換が可：FALSE
console.log(isNaN(text));

条件分岐

ifを利用

let text = prompt('入力してください');

// 数値への変換が可能な場合、100を加算する
if(!isNaN(text)){
    console.log(parseInt(text) + 100);
}else{
    console.log('数値に変換できません');
}

if~else if~ else

let age = prompt('年齢を入力してください')

if(isNaN(age)){
    console.log('数値を入力してください');

}else if(age < 20){
    console.log('未成年');
}else{
    console.log('成人済');
}

繰り返し

while

let shikin = 50000;
while(shikin >= 0 ){
    console.log(shikin);
    shikin = shikin - 5080;
}

for

for(x = 1; x <= 9; x++){
    console.log(x + "の段");
    for(y = 1; y <= 9; y++){
        console.log(x * y);
    }
}

配列

配列は[]で宣言する
インデックスを指定して上書きも可能

let wdays = ['月','火','水','木','金','土','日'];
for(cnt = 0; cnt < 7; cnt ++){
    console.log(wdays[cnt]);
}

wdays[0] = 'ゲツ';
console.log(wdays[0]);

配列から削除する際は、filterやspliceを使とよさげ

let wdays = ['月','火','水','木','金','土','日'];

wdays.push('冥');
wdays.pop();
let wdays_after = wdays.filter(item => (item.match('月')) == null);
for(x = 0; x < wdays_after.length; x++){
    console.log(wdays_after[x]);
}

配列と繰り返し

for~of文

let wdays = ['月','火','水','木','金','土','日'];
for(let day of wdays){
    console.log(day);
}

関数

アロー関数式を用いて定義することが可能
戻り値を設定する場合はreturnを利用

let createMail = (recv) => {
    console.log(recv + '様');
    console.log('PT企画の斎藤です');
    console.log('請求書を送ります');
};

createMail('山本');
createMail('吉田');

let addCharge = (bill) =>{
    return bill * 1.10;
};

console.log(addCharge(40000));

テンプレート文字列

バッククォートで囲んだ範囲の文字列。
改行やスペースもすべて反映される。${}で変数を差し込むことも可能

let createMail = (recv,bill) => {
    let msg = `
    ${recv}様
    PT企画の斎藤です。
    今月の請求額は${bill}円です。
    `;
    console.log(msg);
}

createMail('田中',40000);

オブジェクト

{}でオブジェクトを定義
変数 = { prop:value,prop1:value…}

let data = {name:'山本',bill:40000,crg:true};
console.log(data['name']);
console.log(data['bill']);

console.log(data.name);
console.log(data.bill);

配列に格納し、for文で一つずつ取り出すなど

let data = [
    {name:'山本',bill:40000,crg:true},
    {name:'吉田',bill:25000,crg:false}
    ];

for(let rec of data){
    let bill = rec.bill;
    if(rec.crg){
        bill = addCharge(bill);
    }
    createMail(rec.name,bill);
}

HTMLの操作のキホン

javascriptを利用したDOMの操作

pタグに文字列を挿入

サンプルHTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>サンプル</title>
    </head>
    <body>
        <h1>サンプルプログラム</h1>
        <input type="text">
        <button>実行</button>
        <p>結果表示</p>
        <script src="chap5.js"></script>
    </body>
</html>

HTMLのオブジェクトは、documentオブジェクトのメソッドを介して操作する。
例:pタグで囲まれたエリアにtextを挿入

let elem = document.querySelector('p');
elem.innerText = 'JavaScriptで書く';

イベントリスナー

ボタンクリックのイベントをトリガに、関数を呼び出し実行する。
イベントをトリガとするために、イベントをキャッチするためのイベントリスナーを作成する。
下記例は、buttonのclilckイベントをトリガに、関数を呼び出し、pタグにテキストを挿入する

let ipt = document.querySelector('input');
let btn = document.querySelector('button');
let elem = document.querySelector('p');

// クリックイベントをトリガに、関数を実行する(iptの値をpタグテキストに挿入する)
btn.addEventListener('click',() => {
    elem.innerText = ipt.value;
});

特定のIDが振られたタグを検索する場合、#を付けて検索する

let hoge = document.querySelector('#hoge'); // idにhogeをもつタグ
akitsujiakitsuji

2.キホン

1.超キホンからの続き
参考書籍
確かな力が身につくJavaScript「超」入門 第2版
https://amzn.asia/d/8e1203h

JavaScriptタグの記述位置

一般的に</body>終了タグの直前に記載する
もっと言えば、一般的には外部ファイルに書くのが通常

<body>
~~(略)~~
</footer>
<script>
'use strict'
console.log('hogehoge');
</script>
</body>

ストリクトモード

実行モードをストリクトモード（最新のJavaScript)で実行させるため、
プログラムの冒頭に'use strict'を記載する

HTMLの書き換え

id属性のHTML要素を、getElementByIdを利用し取得する。

<script>
'use strict';
console.log(document.getElementById('choice'));
</script>

実行結果
指定したidを持つ要素をすべて取得する

<p id="choice">ここに日時を表示します</p>

取得した要素を置き換える。
例）textContext(テキストを示すプロパティ)を、現在の日時で置換する

<script>
'use strict';
document.getElementById('choice').textContent = new Date();
</script>

条件分岐

windowsオブジェクトのconfirmメソッドで確認ダイアログを表示できる

<script>
// OK: true キャンセル: false
'use strict';
console.log(window.confirm('ゲームスタート！準備はいい？'));
</script>

確認ダイアログは、戻り値としてtrue/falseを返却するので条件分岐に利用できる

// OK: true キャンセル: false
'use strict';
if(console.log(window.confirm('ゲームスタート！準備はいい？'))){
    console.log('ゲームスタート！');
    } else {
    console.log('ゲームをキャンセルしました。');
}

変数・定数

let で変数を定義する

let answer = window.prompt('ヘルプを見ますか？');
console.log(answer);

constで定数を定義する

const answer = window.prompt('ヘルプを見ますか？');
console.log(answer);

比較演算子'==='を利用し、変数・定数の値をチェック

const answer = window.confirm('ヘルプを見ますか？');
if(answer){
    window.alert('ヘルプを見ました');
}

時間の取得

DateオブジェクトのgetHoursメソッドを利用することで、現在の時間(hour)を取得できる

// 時間を取得する
const hour = new Date().getHours();
console.log(hour);

if(hour >= 19 && hour < 21){
    window.alert('お弁当30%OFF');
}else if(hour === 9 || hour === 15){
    window.alert('お弁当1個買ったら1個おまけ');
}else{
    window.alert('お弁当かって');
}

繰り返し

while文

let i = 0;
while(i < 10){
    console.log(i);
    i++;
}

for...of文
``'javascript
let todo = ['タスク1','タスク2','タスク3','タスク4'];
for(let item of todo){
    console.log(item);
}

関数

functionで定義する
戻り値の型とかはいらん。voidとかない

function total(price,tax){
    return price + price * tax;
}

console.log('コーヒーメーカーの値段は' + total(8000,0.1) + '円(税込み)です。');

配列

宣言
``'javascript
let todo = ['タスク1','タスク2','タスク3','タスク4'];
for(let item of todo){
console.log(item);
}


追加
``'javascript
let todo = ['タスク1','タスク2','タスク3','タスク4'];
todo.push('タスク5');
for(let item of todo){
    console.log(item);
}

他は、pop、shift、unshiftなどある。

テンプレート文字列

バックスラッシュ ` で囲んだ文字列
${}を利用することで、文字列中に変数を埋め込んだり、関数を呼んだり、直接計算した結果を利用したり、改行を埋め込んだりできる。

let todo = ['タスク1','タスク2','タスク3','タスク4'];
todo.push('タスク5');
for(let item of todo){
    const li = `<li>${item}</li>`;
    console.log(li);
}

arrayのHTMLへの埋め込み

document.getELementyByIdを利用して、指定のエレメントを取得
insertAdjacentHTMLメソッドを利用し、挿入する
挿入個所は指定できる

let todo = ['タスク1','タスク2','タスク3','タスク4'];
todo.push('タスク5');
for(let item of todo){
    const li = `<li>${item}</li>`;
    console.log(li);
    // 挿入する場所は、取得したエレメントの子要素として挿入
    document.getElementById('list').insertAdjacentHTML('beforeend',li);
}

オブジェクト

// 本のオブジェクト
let jsbook = {title: 'JavaScript入門',price: 2500,stock: 3};

// オブジェクトが持つ各プロパティの取り出し
console.log(jsbook);
console.log(jsbook.title);

また、オブジェクトのプロパティとしてファンクションを持たせることも可能
（インスタンスメソッドと同じようなもんという理解）

let objsample = {plusOne: function(num){
     return num + 1;
    }}

for...in文を用いて、オブジェクトが持つすべてのプロパティを参照可能

``'javascript
// 本のオブジェクト
let jsbook = {
title:'JavaScript入門',
price: 2500,
stock: 3
};

// オブジェクトの中身をすべて表示
for(let p in jsbook){
console.log(p + '=' + jsbook[p]);
}
akitsujiakitsuji

3.キホンの続き

イベントとか絡んでくる。少し実践的

クリックイベントを取得する

特定のIDを持つボタンがクリックされた際に、それをキャッチする

HTML

~~
<section>
    <!-- どこにも送信先がないので'#'を指定-->
    <form action="#" id="form">
        <input type="text" name="word">
        <input type="submit" value="検索">
    </form>
    <p id="output"></p>
</section>
~~~

// 入力された内容を取得し、ページに埋め込んで表示する
document.getElementById('form').onsubmit = function(){
    event.preventDefault(); // ページが再読み込みされ、埋め込んだ内容が消えてしまうことを防ぐ
    // ID、およびname属性を利用して値を取得する
    const search = document.getElementById('form').word.value;
    document.getElementById('output').textContent = search;
};
}

・イベント時に利用するファンクションには、名前とReturnを設定しない
・ファンクションには、裏でeventオブジェクトが渡されている。それを利用することで、タグの基本動作をキャンセルするといったことが可能。今回では、<form>タグの基本動作：ページ遷移がキャンセルされている

現在日時の取得

Dateオブジェクトを使うといろいろできる

'use strict';

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const date = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();

let ampm;
if(hour < 12){
    ampm = "a.m."
}else{
    ampm = "p.m."
}

const output = `${year}/${month + 1}/${date} ${hour % 12}:${min}${ampm}`;
document.getElementById("time").textContent = output;
akitsujiakitsuji

jQueryを用いた実装

基本的な書き方

jQueryを利用して実現したいことのほとんどはDOM操作。
主に以下の手順で実現する。
1.イベントを設定したい要素を取得する
2. 取得した要素にイベントを設定する
3. イベントが発生した時にその処理を実行する

サンプルコード

<script src="../../_common/scripts/jquery-3.4.1.min.js"></script>
<script>
    'use strict';
    $(document).ready(function(){
        // submenuクラスのh3タグが押下された場合、
        // 次のタグの'hidden'を隠す。トグル式なので、クリックする度表示/非表示が切り替わる
        $('.submenu h3').on('click',function(){
            $(this).next().toggleClass('hidden');
        });
    });
</script>
</body>

サンプルコードを開設

  $(document).ready(function(){~}

当該HTMLが読み込まれたら、{~}の処理を実行する、という意味。
基本的にjQuery利用時は必ず入れる

  $('セレクタ')

$()メソッドは、()にマッチするすべての要素をHTMLから取得する
サンプルでは $('.submenu h3')とし、サブメニュークラスのh3タグ、という条件で取得している

 $('.submenu h3').on('click',function()｛~}

onメソッド…イベントを背帝する
パラメータは、「イベント名」と、そのイベントを起因に実行される「function」

 $(this).next().toggleClass('hidden');

$(this)
イベントが発生した要素を取得する

next()
弟要素を取得する

toggleClass('hidden');
押下の度に、指定されたclass属性要素の追加・削除を繰り返す