Markup言語の備忘録 (超初心者) <Java Script>

<h1>
JavaScriptを使って基礎機能を確認してみた
</h1>
参考文献

https://www.oreilly.co.jp/books/9784873117836/
<h2>
JavaScript (Javaとは別物)
</h2>

<dl>
  <dt>JavaScriptは、プログラミング言語</dt>
  <dd> 1. HyperText Markup Language（HTML）やCascading Style Sheets（CSS）と並ぶ　World Wide Web（WWW）の中核技術の一つである。</dd>
  <dd> 2. プロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
</dd>
</dl>

<dl>
  <dt>JavaScriptの実行方法</dt>
  <dd> 1. javascript fileを作成する (例: test.js,dummy.jsなど)</dd>
  <dd> 2. Command promptもしくはTerminalでnode file.jsで実行する
  <p>※ 必要に応じてNode.jsをInstallする必要がある</p>
</dd>
</dl>

Node.js: https://nodejs.jp

<h3>
1) 変数宣言:
</h3>

<p>▽var, let, constを使って変数を宣言する。</p>

```javascript:var.js
// varの場合
var x = 5;
console.log(x);
```
:::note
出力
5
:::
```javascript:let.js
// letの場合
let y = 10;
console.log(y);
```
:::note
出力
10
:::

```javascript:const.js
// constの場合
const z = 15;
console.log(z);
```
:::note
出力
15
:::

```javascript:const.js
// 再代入の場合
const z = 15;
console.log(z);

const z = 10;
console.log(z);
```
:::note warn
Error
SyntaxError: Identifier 'z' has already been declared
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1279:20)
    at Module._compile (node:internal/modules/cjs/loader:1331:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
    at node:internal/main/run_main_module:28:49

Node.js v21.7.3
:::
:::note alert
注意
constは再代入不可。(同じ名前の変数は2回以上使えない。)
:::

<h3>
2) データ型:
</h3>

<p>▽データ型の指定。</p>

```javascript:primitive.js
// プリミティブ型
let num = 10;
console.log(num);

let str = "Hello";
console.log(str);

let bool = true;
console.log(bool);

let n = null;
console.log(n);

let u = undefined;
console.log(u);

let sym = Symbol("sym");
console.log(sym);
```
:::note
出力
10
Hello
true
null
undefined
Symbol(sym)
:::

```javascript:object.js
// オブジェクト型
let obj = { key: "value" };
console.log(obj);

let arr = [1, 2, 3];
console.log(arr);

let func = function() { console.log("Function"); };
console.log(func);

let date = new Date();
console.log(date);

let regexp = /pattern/;
console.log(regexp);
```
:::note
出力
{ key: 'value' }
[ 1, 2, 3 ]
[Function: func]
2024-05-02T09:13:06.494Z
/pattern/
:::

<h3>
3) 演算子:
</h3>
<dl>
  <dt>演算子</dt>
  <dd> 算術演算子: +, -, *, /, %.</dd>
  <dd> 比較演算子: ==, ===, !=, !==, >, <, >=, <=.</dd>
  <dd>論理演算子: &&, ||, !.</dd>
  <dd>三項演算子: condition ? expr1 : expr2.</dd>
  <dd>代入演算子: =, +=, -=, *=, /=.</dd>
</dd>
</dl>
<p>▽マウスが要素の上に乗ったときに適用されます。</p>

```javascript:calulation.js
// 算術演算子
let sum = 5 + 3;
console.log(sum);

let difference = 10 - 4;
console.log(difference);

let product = 6 * 2;
console.log(product);

let quotient = 8 / 2;
console.log(quotient);

let remainder = 10 % 3;
console.log(remainder);
```
:::note
出力
8
6
12
4
1
:::


```javascript:compare.js
// 比較演算子
let isEqual = (5 === 5);
console.log(isEqual);

let greaterThan = (10 > 5);
console.log(greaterThan);

let logicalAnd = (true && false);
console.log(logicalAnd);
```

:::note
出力
true
true
false
:::



```javascript:triple.js
// 三項演算子
let result = (10 > 5) ? "true" : "false";
console.log(result);
```
:::note
出力
true
:::

```javascript:insert.js
// 代入演算子
let x = 5;
x += 3; // xは8になる
console.log(x);
```

:::note
出力
8
:::


<h3>
4) 制御構文:
</h3>
<dl>
  <dt>制御構文:</dt>
  <dd> 条件分岐: if, else if, else.</dd>
  <dd> ループ: for, while, do-while, for...in, for...of.</dd>
  <dd>分岐: switch, case, break, default.</dd>
</dd>
</dl>

```javascript:control.js
// 条件分岐
let num = 10;
if (num > 0) {
    console.log("Positive");
} else if (num < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}
```
:::note
出力
Positive
:::

```javascript:roop.js
// ループ
for (let i = 0; i < 5; i++) {
    console.log(i);
}
```
:::note
出力
0
1
2
3
4
:::


```javascript:split.js
// 分岐
let fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("It's an apple");
        break;
    case "banana":
        console.log("It's a banana");
        break;
    default:
        console.log("Unknown fruit");
}

```
:::note
出力
It's an apple
:::

<h3>
5) 関数:
</h3>

<dl>
  <dt>関数</dt>
  <dd> 関数宣言: function functionName(parameters) { ... }</dd>
  <dd> 無名関数: const functionName = function(parameters) { ... }</dd>
  <dd>Arrow関数: (parameters) => { ... }またはparameters => { ... }</dd>
</dd>
</dl>

```javascript:calculation_definition.js
// 関数宣言
function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("World");
```
:::note info
出力
Hello, World!
:::



```javascript:arrow_definition.js
// Arrow関数
const square = (x) => {
    return x * x;
};
console.log(square(5));
```
:::note info
出力
25
:::

<h3>
6) オブジェクト:
</h3>

<dl>
  <dt>オブジェクト</dt>
  <dd> オブジェクトリテラル: { key: value, ... }.</dd>
  <dd> プロパティアクセス: object.propertyまたはobject['property'].</dd>
  <dd>メソッド: { methodName() { ... } }.</dd>
  <dd>コンストラクタ関数: function ObjectName() { ... }.</dd>
</dd>
</dl>

```javascript: object_literal.js
// オブジェクトリテラル
let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};
person.greet();
```
:::note
出力
Hello, my name is John
:::

```javascript: object_contractor.js
// コンストラクタ関数
function Person(name, age) {
    this.name = name;
    this.age = age;
}
let john = new Person("John", 30);
console.log(john.name);
```

:::note
出力
John
:::

<h3>
7) 配列:
</h3>

<dl>
  <dt>配列</dt>
  <dd> 宣言: const arrayName = [value1, value2, ...].</dd>
  <dd> 要素へのアクセス: array[index].</dd>
  <dd> メソッド: push(), pop(), shift(), unshift(), splice(), slice().</dd>
</dd>
</dl>

```javascript: list.js
// 宣言
let numbers = [1, 2, 3, 4, 5];

// 要素へのアクセス
console.log(numbers[0]);

// メソッド
numbers.push(6);
console.log(numbers)

numbers.pop();
console.log(numbers)
```

:::note
出力
1
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5 ]
:::

<h3>
8) 例外処理:
</h3>

<dl>
  <dt>配列</dt>
  <dd>try, catch, finallyを使って例外を処置する。</dd>
</dd>
</dl>

```javascript: except.js
try {
    // エラーを発生させる
    throw new Error("Oops!");
} catch (error) {
    console.error(error);
} finally {
    console.log("Finally block");
}
```
:::note
出力
Error: Oops!
    at Object.<anonymous> (/Users/Desktop/web_dev_study/test/test.js:3:11)
    at Module._compile (node:internal/modules/cjs/loader:1368:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
    at node:internal/main/run_main_module:28:49
Finally block
:::