1日目：JS基礎

字下げとか非常に見づらくなってしまっているため、何か方法を考える必要あり

Javascript(以降JS)の学び
※他言語で習得していて、読み飛ばして問題なさそうな所はメモとして残していません。

参考書籍：https://www.sbcr.jp/product/4815601577/
1:JSとは？

ブラウザやHTMLを操作することを目的として生まれた言語。具体的には、静止したデータであるHTMLやCSSを、その場でリアルタイムに書き換え、一部のコンテンツを入れ替えたり、スライドショーのような動きをつけることができる。
書き換えの例

1:タグに囲まれたテキストの書き換え

2:要素の追加/削除(新たに<p>追加要素</p>を追加できる

3:タグの属性変更(src='before.jpg'→'after.jpg'のような画像の差し替えなど

4:CSSの値を変更(<body>のbackground-colorを変更等


2:コンソールへのアウトプット

JSには3種類のアウトプット方法が存在する。
1.コンソールへのアウトプットconsole.log('コンソールへの表示')
2.ダイアログボックスへのアウトプットwindow.alert('ダイアログへの表示')
3.HTML,CSSへのアウトプット(本項目が一番使う

<body>

<main>

<div class="container">

<section>   

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

</section>

</div>

<!-- /.container -->

</main>

<script>

'use strict';document.getElementById('choice').textContent = new Date();

</script>

</body>

</html>
このような形でid="choice"のtextContentを書き換える


3.ダイアログボックスの表示

window.alert():ダイアログの表示

window.confirm():OK or キャンセルを選べるダイアログの表示

window.prompt():テキスト入力欄つきダイアログの表示 ここでの入力値は戻り値となるなので

let answer = window.prompt();

としてあげればanswerに値を格納可能

※JSでの変数は

let XXX;

で宣言可能。

またconst XXX;としてあげると書き換え不可の値となる。


4:関数とは/関数の組み方

関数とは、パラメータを受け取り、何かしらの加工をして、結果を呼び出し元に返すもの

消費税計算の例は下記

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

function total(price) { 

const tax = 0.1;  return price + price * tax;}const value = 8000;

console.log(`コーヒーメーカーの値段は${total(value)}です`)

;-----------------------
ファンクションの作成方法は

function ファンクション名(要求するパラメータ){

具体的な処理内容

}

この時、要求するパラメータ(引数)の範囲は{}の中のみ。


5:配列

配列の宣言の仕方は

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

let 変数名 = [];

-----------------------
配列の項目を全て読み取る場合の書き方は

for(変数名 of 対象の配列){

処理内容

}
配列に追加するときは

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

を使う。

他のを含めた配列の追加/削除するメソッドは下記の通り
配列の変数名.push(データ):配列の末尾にデータを追加

配列の変数名.pop():配列の末尾のデータを削除

配列の変数名.shift():配列の最初のデータを削除

配列の変数名.unshift(データ1,データ2):配列の最初にデータ1,データ2を追加


6:HTMLタグの挿入

textContentプロパティではテキストの抽入か書き換えしかできないため、別のプロパティを用いる。

insertAdjacentHTMLメソッドを使うとHTMLタグの抽入が可能となる。

書き方の例は下記

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

document.getElementById(取得したいid).insertAdjacentHTML('挿入する場所',挿入する要素);

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

挿入する場所に指定できるワードは以下の通り

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

beforebegin:取得した要素の開始タグの後に挿入

beforebegin:取得した要素の終了タグの前に挿入

beforebegin:取得した要素の終了タグの後に挿入


7:オブジェクト

複数のプロパティ及びメソッドを持つデータの集まりをオブジェクトという。

書式は下記

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

let 変数名 = {プロパティ名1:データ1,プロパティ名2:データ2,...}

-----------------------
プロパティのデータを読み取るときはオブジェクト名.プロパティ名とする。
メソッドとは？：プロパティのデータが関数であるとき、そのプロパティをメソッドという。
全てのプロパティを読み取る場合、下記を用いる。

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

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

-----------------------
集中力きれたのでここまで