JavaScript

2022年9月23日

JavaScriptの備忘録。

目次

JavaScript

ブラウザを操作する為のプログラミング言語。

コンソール

プログラムの動作確認をする為の道具(ブラウザに搭載)

オブジェクト

パーツ(window,console,document等)

VSCode

Visual Studio Code。Microsoftのソースコードエディタ。

JavaScriptを始めるにあたり、下記プラグインを追加。

  • ESLint(文法チェック)
  • IntelliCode
  • JavaScript (ES6) code snippets

書き方

・場所は</body>タグの上

・<script>の次に'use strict’(厳格モード)を書く

例)

  <script>
    'use strict'

    window.alert('わんわん');
  </script>
</body>

・文字列は’’で囲み(数字は囲まない)

大文字小文字は別の文字として認識される(Bとb等)

・=は代入

・基本的に文章の終わりは「;」

・代入文の終わりも「;」(A = B(){処理内容};)

//外部ファイルを読込む場合
    <script src="js/n.js"></script>
</body>

src="htmlファイルからのパス"

・JavaScriptは外部ファイルに書くのが一般的らしい

コメントアウト

//1行コメント(コードの後に入力可)
/* 複数行コメント */

基本文法

オブジェクト.メソッド('パラメータ')

例)consoleに猫を出力しなさい

console.log('猫');

オブジェクト=console
パラメータ=猫
メソッド=log()

・オブジェクトにはメソッドやプロパティ(状態)がある
・パラメータは値
・メソッドは手続(〜しなさい的な)
・メソッドの後は丸括弧「()」がつく

console.log()

コンソールに出力

    <script>
        'use strict';

        console.log('雨');
    </script>
</body>

・()内に数式(1+2等)を入れると結果がコンソールに表示される

window.alert()

アラートダイアログボックスを表示

・windowオブジェクトのalertメソッド

document.getElementById('id名’)

ドキュメント内の指定id名の要素をゲット

・取得した要素はElementオブジェクト
・Elementオブジェクトにも独自のメソッドやプロパティがある

document.getElementById('id名’)
.textContent= 文字列;

id名のプロパティに右辺を代入

・textContentはプロパティ

window.confirm()

確認ダイアログボックスを表示

・()内のメッセージを表示する
・OK or キャンセルの返り値(リターン)がある
・「true」と「false」を合わせてブール値という
・confirmの読み方はコンファーム
・falseの読み方はフォルス

if文

if(条件式) {
true時の処理
} else {
false時の処理
}

if(window.confirm('太郎ですか?')) {
    window.alert('ようこそ太郎');
} else {
    window.alert('失礼しました');
}

・else以降省略可

=(代入演算子),===(比較演算子)

例)
A = B (BのデータをAに代入するという意味)

A === B (AとBが同じ)

「===」以外の比較演算子
A !== B (AとBが同じでない)
A <= B (AがB以下)
A >= B (AがB以上)

条件分岐(else if)

例)
if (A === B) {
    処理1
} else if (A === C) {
    処理2
} else {
    処理3
}

A=Bなら処理1、A=Cなら処理2、どちらでもないなら処理3。

・if文の追加数に制限なし(分岐無限)
・上から順に判断する
・一致した時点で終了(それ以降の分岐には進まない)

window.prompt()

プロンプト(テキスト入力が出来るダイアログボックス)を表示

・テキストを入力しOKを押すとその入力内容がリターンとして返る

宣言と定義

宣言=これからある変数を使う事を明示

定義=宣言した変数に値を設定

例)
let cat = ' 次郎';

let 変数(変数の宣言と定義)

変数を宣言(定義)する

    <script>
        'use strict';

        let
food = window.prompt('何食べた?');
        console.log(food);
    </script>
</body>

・変数はそのページ表示中のみ保管
・同じ言葉を2回定義出来ない
・再代入できる
・変数名は「-」「=」「&」「半角スペース」「1文字目が数字」不可
・変数名は「頭小文字」で「二つ目以降の単語の頭文字は大文字」
例)myAddress

null(値がない)

null(ヌル)・・・何も入っていない

データの種類

基本データ型
・数値
・文字列
・Bool値(true,false)

オブジェクト型
・オブジェクト({ name: '●’;}、document,element …)
・配列(特殊なオブジェクト)
・関数(特殊なオブジェクト)

~上記データ型の違い~

基本データ型 b = a (代入)
値がコピーされbの値を変えてもaはもとのまま

オブジェクト型 b2 = a2
オブジェクトのある場所(参照)がコピーされる
b2を変更するとa2も変わる

const 定数(定数定義)

定数・・・定義後に書き換え不可

・宣言時に値も定義する(2回に分けて書けない)

組み込み関数

Java Script側であらかじめ用意されたオブジェクト。

Mathオブジェクト

組み込み関数の一つ。数値計算用。

Math.floor(数値)メソッド

カッコ内の数値の小数点以下を切り捨てるメソッド。

・floorの読み方はフロー

Math.random(数値)メソッド

1未満(0~0.999…)のランダムな数字を作るメソッド。

NaN

Not a Numberの略。非数。数字ではない。

parseInt()

整数に変換するメソッド。

・そもそも数字ではない文章などは変換出来ない

Dateオブジェクト

日付のオブジェクト。

new Date();

日時のインスタンス(実態)を取得

getHours()

0~23の整数(時間)をゲットするメソッド。

論理演算子(&&,||)

A && B (AかつB)

A || B(AもしくはB)

!A(Aがtrueじゃない時が、true)

(AもBも条件式)

|(バーティカルライン(縦線))…shift+¥

while文(繰り返し)

while(条件式) {
 //繰り返す内容
}

・条件式を満たす(true)間は繰り返す
・条件を満たさない(false)と終了
・繰り返しの変数名はi

例)
let i = 1;
while (i <= 20) {
console.log(i);
i += 1; // i = i + 1;と同じ意味
}

コンソールへの書込みを20回繰り返す(21回でfalse)

アルゴリズム

問題解決の為の手順

フローチャート

アルゴリズムを示す図

偶数判定(変数%2===0)

if( 変数 % 2 ===0){
   //偶数時の処理
}

2で割り切れたら偶数(=余り0)

「%」…割り算のあまりを求める演算子(記号)

ローカル定数(変数)

{}内で定義した変数や定数の有効範囲は、{}内で有効。
・{}外で定義した物は{}内にも適用される。

do-while文

do{
 //実行させる文
} while(条件式)

while文の繰り返しに入る前に、毎回doの文を実行。

for文

for(初期化式;条件式;変化式) {
    //文
}

例)
for(let i = 0; i < 10; i++){}
「i++」は「i=i+1」と同義

ファンクション

関数。

<作り方>

function ファンクション名(パラメータ) {
 //処理内容(return ~で値を返す)
}

・パラメータ=引数(関数等を渡す値)

<呼び出し方>

ファンクション名(パラメータ)

-=演算子

A -= B(AからBを引いた結果を左側に代入)

外部ファイル読込

①「●●.js」ファイルを作成する

例)
function △() {
    //処理内容;
}
--------------------------------------+
・上下に<script>タグは不要
・コメントアウト記入可

②jsファイルを使う側のhtmlに外部ファイルの場所を記入。

<script src="●●.js"></script>

③使用する場所で記入。

<script src="●●.js"></script>
<script>
 'use strict';

 △(); 
</script>

parseFloat(文字列)

文字列を少数点付き数字に変換する。

小数点第●位を四捨五入

小数点第●位を四捨五入する関数の作り方。

例)少数点第2位を四捨五入するファンクション
function 関数名(引数) {
    let 変数A = 引数 * 10;
    変数A = 変数A + 0.5;
    変数A = Math.floor(変数A);
    変数A = 変数A / 10;
    return 変数A
}
//10倍にして0.5足し、小数点以下切捨てて10で割る。

ランダムな整数が欲しい時

例)ランダムで1~6のどれかが欲しい時
const 定数名 = Math.floor(Math.random() * 6)+1;

配列

複数のデータを1つにまとめてグループ化出来る。

let 配列名 = ['要素1', '要素2', '要素3',・・・];

・カンマの後ろは空白
・配列は0始まり(0=要素1、1=要素2、…)
・定数でも定義は可(実際はconst(定義)が多いらしい)

配列の読み取りは下記の通り。

変数名[番号]

定数で配列を定義した場合、再代入出来ない(一括不可)。

const kudamono = ['リンゴ', 'バナナ', 'イチゴ'];
kudamono[2] = 'マンゴー'; ←OK
kudamono = ['いちじく', 'びわ', '桃']; ←不可

for~of文

配列の項目数ぶん、処理を繰り返す

for(let 変数名 of 配列名){
    処理内容
}

・変数名の定義はconstでも可

配列のメソッド

配列の最後にデータを追加

配列名.push('追加したいデータ')

配列の最後のデータを削除

配列名.pop()

配列の最初のデータを削除

配列名.shift()

配列の最初にデータを追加

配列名.unshift(追加したいデータ)

・カンマで区切って複数追加可

テンプレート文字列(テンプレートリテラル)

文字列をバックティック(`)で囲む

例)
`<p>${変数名}</p>`

・バックティック(バッククォート)は「shift + @

・テンプレート文字列に変数等を埋め込む時は「$ + {変数等}

・変数以外にファンクションや計算も可能

`文字列${ファンクション}文字列`
`文字列${1+2}文字列`

・文字列の改行も可能

'あああああ
いいいいいい
ううう`;

insertAdjacentHTML('場所’,要素)

取得した要素の前後、又は子要素に別の要素を挿入するメソッド。

取得した要素.insertAdjacentHTML('挿入する場所','挿入する要素')
例)配列の中身を終了タグの直前に、Aを入れる
document.getElementById('配列名').insertAdjacentHTML('beforeend',A);

beforebegin…取得した要素の開始タグの前に挿入

afterbegin…取得した要素の開始タグの後ろに挿入

beforeend…取得した要素の終了タグの前に挿入

afterend…取得した要素の終了タグの後に挿入

(データの入れ物としての)オブジェクト

配列には順序が有り(0,1,2,3…)、オブジェクトに順序は無い。
順序不要な複数のデータを管理する為の入れ物が、オブジェクト。

let オブジェクト名 = {プロパティ名:データ, プロパティ名:データ,・・・};

プロパティのデータの書き換え

オブジェクト名.プロパティ名=新しいデータ;
又は
オブジェクト名['プロパティ名']=新しいデータ;

又、プロパティのデータにファンクション(関数)を入れる事も可能。その場合はメソッドと言うらしい。

for~in文

オブジェクトのプロパティを全て読み取る為の繰り返し文

for(let 変数p in オブジェクト名) {
    処理内容;
}

例)オブジェクトaのプロパティをコンソールに全て出力
for(let p in a){
    console.log(p);
}

例)オブジェクトaの値をコンソールに全て出力
for(let p in a){
    console.log(a[p]);
}

・変数pはプロパティのp
・プロパティの読み込みは変数名(例 p)
・データの読み込みはオブジェクト名[変数名](例 a[p])

要素にイベント設定

取得した要素.onsubmit = function(){
    処理内容
};

・ボタンを押した時に処理をする的な

入力内容の読取

取得した<form>要素.読取りたいフォーム部品のname属性.value

タグの基本動作のキャンセル

event.preventDefault();

例)ボタンを押した時のページ遷移をキャンセルして…
ボタンを押した時 = function(e) {
    e.preventDefault();
    (以下、他の処理)
}

・イベントのe

new Date()

現在日時を記憶した状態でDateオブジェクトを初期化

例)定数Aに初期化したDateオブジェクトを代入
const t = new Date();

・初期化=インスタンス(実体)を生成する

例)日時を指定した状態でインスタンスも可
const t = new Date(2022,9,8);

new Date(年, 月, 日, 時, 分, 秒, ミリ秒)
・年月迄が必須(あとは省略可)

Dateオブジェクトから日時を取得するメソッド

getFullYear()・・・年を取得

getMonth()・・・月を取得(0~11を取得する為、+1。0=1月)

getDate()・・・日を取得

getDay()・・・曜日を取得(0~6。0=日曜)

getHours()・・・時を取得

getMinutes()・・・分を取得

getSeconds()・・・秒を取得

例)定数bに秒を代入
const t = new Date();
const b = t.getMinutes();

又、set~(setFullYear等)で設定

オブジェクトの初期化するものとしないもの

複数作れるオブジェクト・・・初期化(実体化)する

複数作れないオブジェクト・・・初期化しない

・Dateオブジェクトは複数作れる(二つの差で残り算出等)
・Mathオブジェクトは複数作れない(プロパティが読取専用)
・windowオブジェクト等は複数作れない(プロパティ値の書換可。ブラウザ等はコピー不可)

Math.PI

円周率

a ** b

aをb乗する

.getTime()

1970/1/1からの経過時間(1/1000秒)

コメントアウトの@

// @param (パラメータ、引数)– 変数A等
// @return (戻り値)– 配列[,,,]等

setTimeout(ファンクション,待ち時間)

待ち時間後にファンクションを一度だけ実行する

例)
setTimeout(ファンクション名,1000);

・時間はミリ秒(1000=1秒)
・ファンクション名の最後に()は書かない(エラー防止。書くとsetTimeoutが終了前にファンクション名の方が実行され続ける為)
・ファンクション名ではなく、無名関数でもいい(function(){処理内容})

setInterval(ファンクション,時間)

一定時間毎にファンクションを繰り返す

例)
setInterval(ファンクション,時間)

・だいたい無名関数(使い捨て関数が書いてあるらしい)

padStartメソッド

ある文字列を揃える文字数に揃えるメソッド

ある文字列.padStart(揃える文字数, 埋め合わせ用の文字)

例)配列の3番目の文字列を2桁に揃える、二桁目が無い時は0で埋める
String(配列名[2]).padStart(2,'0')

location.href = URL

URLを書き換える

例)(プルダウンの)id●●のセレクトがチェンジした時、そのURLへ移動
document.getElementById('●●').select.onchange =function(){
 location.href =document.getElementById('●●').select.value;
}

document.querySelectorメソッド

指定のセレクタに合う要素を取得する

document.querySelector('CSSセレクタ')

例)htmlタグのlnag属性を取得して定数aに代入
const a = document.querySelector('html').lang;

ブール属性

HTMLタグの属性で、selectedやchecked等の属性が2択のもの。

switch文

if~else分の代わりが出来る文

switch (調べる対象) {
  case 'Aの時':
    処理
    break;
  case 'Bの時':
    処理
    break;
  case 'Cの時':
    処理
    break;
  default:
  上のどれでもない時の処理
}

breakを忘れない様に

・defaultはなくてもいい

Cookie

Webサイトに訪れるユーザーの情報を一時的に保存するための仕組み(データ)
・主にログインIDや閲覧履歴、訪問回数などの情報が保存
・毎回ログインの手間が省けるらしい

document.querySelectorALL('CSSセレクタ’)

(セレクタと)合う要素全て取得する
例)指定されたclassのやつ全部取得

・全てをNodelistというオブジェクトに保存(配列っぽく)
・Nodelistオブジェクトの要素に対してforEachメソッドで繰り返す処理可
・配列では無いので配列のメソッドは使用不可

配列.forEach( function(item, index){ 処理 });

配列の各項目を繰り返し処理する

data-*属性

HTML5から追加された属性

・*部分は自分で決めてOK
・ほぼ全てのタグに追加可能
・JavaScriptでその値を利用する

値の読取方

取得した要素.dataset.*

例)
item.onclick = function(){
 console.log(this.dataset.image);
}

配列.length

配列内の項目数を調べる

jQuery

JavaScript用のライブラリ。

<メリット>
・コードがシンプルになる


<デメリット>
・読込みが遅い?
・脱jQueryの流れらしい

<読み込み方>
・WEB上から読み込む or ダウンロードしてファイルを読込む

// web上から読込む
<script src="https://code.jquery.com/ajax/libs/jquery-(バージョン).min.js"></script>

・https://jquery.com/ → ダウンロード → Google CDN

// ダウンロードして読込む
<script src="ファイルのパス/jquery-バージョン.min.js"></script>

・書く場所はヘッダ

<書き方>

$(function(){})

// 例
<script>
 'use strict'

 //セレクタの要素を取得し、イベント時(click等)に〇〇を処理する
 $(function(){
  $('.セレクタ').on('イベント',fuction(){
   〇〇の処理;
   });
 });
</script>

<処理例>

//取得した要素のトラバーサル(親要素、子要素、弟要素等)に対して下記を行う
//指定したクラス名が無ければ追加 or 有れば削除(cssの

$(this).トラバーサル().togleClass('クラス名');

・トラバーサルは位置系(parent,children,next等)以外に絞込み系も複数有り
$(’セレクタ’).eq(n)・・・セレクタのn番目のみ選択
$(’セレクタ’).hasClass(クラス名)・・・セレクタの中で同じクラス名を選択

Ajax(エイジャックス)

JavaScriptの非同期通信

・一部分だけデータを更新(html全体を書き換えない)

JSON(ジェイソン)

JavaScript Object Notationの略でJavaScriptのオブジェクトの書き方を元にしたデータ

//JSONの書き方
{“key” : “value”}

・JavaScriptのオブジェクトど同様な書き方
・プロパティ名も値も””で囲む
・PythonやJavaやPHP等の言語でも使われるデータ

$.ajaxメソッド

$.ajax({url: 'データのURL', dataType: 'json', その他の設定: '値',・・・})

書き方は複数ある

例)クリックしたらコンソールログに●を表示

  </head>
  <body>
    <h1>id</h1>
    <div id="clk">●</div>
    <script>
    'use strict';

  //パターンA 定数clkで書く
    const clk = document.getElementById('clk');
    clk.onclick = function(){
      console.log(clk.textConten);
    };

  //パターンB thisで書く
    const clk = document.getElementById('clk');
     clk.onclick = function() {
       console.log(this.textContent);
     };

  //パターンC eで書く(functionの丸括弧内にeを入れて・・・)
    const clk = document.getElementById('clk');
     clk.onclick = function(e) {
     	console.log(e.target.textContent);
     };

  //パターンD jQueryで書く
  //headの締めタグの上にwebの読込を1行追加してから・・・
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> 
  
    //getElementByIdが不要(直接id指定してthisで書く)
    $(function(){
    	$('#clk').on('click', function(){
    		console.log($(this).text());
    	})
    });

定数を書く場所(内か外か)

外部ファイルを読み込む場合に名前のかち合いを防ぐ観点からファンクション内に書く方が安全。

又、イベント(クリック等)が起きてから定数の定義をする方が正常に動作するらしい。

jQueryでinput内の値を指定する書き方

例)
<input type="text" id="ipt">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const a = $('#ipt').val();

jQueryでcssを書き換える方法

.css('プロパティ',’')

例) id◆をクリックした時に◆のcssを変更する
   $('#◆').on('click', function () {
      $('#◆').css('display', 'block');
    });

jQueryでvalueを取得する方法

.val()

例)ボタンを押したらインプットの値を出力先へ表示  
   
$('#ボタン').on('click', function () {
 const 定数A = $('#インプット').val();
  $('#出力先').text(定数A);
});

 

三項演算子(条件演算子)

条件式?式A:式B
(条件式が真ならA、偽ならB)

例)定数●●+1が5より大きい時は0、じゃない時は●●+1を代入
const ●● = (●● + 1 > 5) ? 0 : (●● + 1);

.innerHTML

HTML要素の中身を変更する時に使うプロパティ

例)●●に▲▲を代入
document.getElementById("●●").innerHTML = ▲▲

.innerHTMLをjQueryで書く(.html)

document.getElementById("●●").innerHTML = ▲▲
↓
$('#●●').html(▲▲)

音の再生

.play()

例)効果音を連続してならす(html部分は省略)
const ■ = new Audio('●●.mp3');
■.currentTime = 0; // 再生位置を0に戻し連続対応
■.play(); // 効果音をならす

JavaScript

Posted by ippei