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

JavaScriptを使って基礎機能を確認してみた

参考文献

JavaScript (Javaとは別物)

JavaScriptは、プログラミング言語

1. HyperText Markup Language（HTML）やCascading Style Sheets（CSS）と並ぶ　World Wide Web（WWW）の中核技術の一つである。

2. プロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。

JavaScriptの実行方法

1. javascript fileを作成する (例: test.js,dummy.jsなど)

2. Command promptもしくはTerminalでnode file.jsで実行する

※ 必要に応じてNode.jsをInstallする必要がある

Node.js: https://nodejs.jp

1) 変数宣言:

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

var.js

// varの場合
var x = 5;
console.log(x);

出力
5

let.js

// letの場合
let y = 10;
console.log(y);

出力
10

const.js

// constの場合
const z = 15;
console.log(z);

出力
15

const.js

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

const z = 10;
console.log(z);

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

注意
constは再代入不可。(同じ名前の変数は2回以上使えない。)

2) データ型:

▽データ型の指定。

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);

出力
10
Hello
true
null
undefined
Symbol(sym)

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);

出力
{ key: 'value' }
[ 1, 2, 3 ]
[Function: func]
2024-05-02T09:13:06.494Z
/pattern/

3) 演算子:

演算子

算術演算子: +, -, *, /, %.

比較演算子: ==, ===, !=, !==, >, <, >=, <=.

論理演算子: &&, ||, !.

三項演算子: condition ? expr1 : expr2.

代入演算子: =, +=, -=, *=, /=.

▽マウスが要素の上に乗ったときに適用されます。

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);

出力
8
6
12
4
1

compare.js

// 比較演算子
let isEqual = (5 === 5);
console.log(isEqual);

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

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

出力
true
true
false

triple.js

// 三項演算子
let result = (10 > 5) ? "true" : "false";
console.log(result);

出力
true

insert.js

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

出力
8

4) 制御構文:

制御構文:

条件分岐: if, else if, else.

ループ: for, while, do-while, for...in, for...of.

分岐: switch, case, break, default.

control.js

// 条件分岐
let num = 10;
if (num > 0) {
    console.log("Positive");
} else if (num < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}

出力
Positive

roop.js

// ループ
for (let i = 0; i < 5; i++) {
    console.log(i);
}

出力
0
1
2
3
4

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");
}

出力
It's an apple

5) 関数:

関数

関数宣言: function functionName(parameters) { ... }

無名関数: const functionName = function(parameters) { ... }

Arrow関数: (parameters) => { ... }またはparameters => { ... }

calculation_definition.js

// 関数宣言
function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("World");

出力
Hello, World!

arrow_definition.js

// Arrow関数
const square = (x) => {
    return x * x;
};
console.log(square(5));

出力
25

6) オブジェクト:

オブジェクト

オブジェクトリテラル: { key: value, ... }.

プロパティアクセス: object.propertyまたはobject['property'].

メソッド: { methodName() { ... } }.

コンストラクタ関数: function ObjectName() { ... }.

object_literal.js

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

出力
Hello, my name is John

object_contractor.js

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

出力
John

7) 配列:

配列

宣言: const arrayName = [value1, value2, ...].

要素へのアクセス: array[index].

メソッド: push(), pop(), shift(), unshift(), splice(), slice().

list.js

// 宣言
let numbers = [1, 2, 3, 4, 5];

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

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

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

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

8) 例外処理:

配列

try, catch, finallyを使って例外を処置する。

except.js

try {
    // エラーを発生させる
    throw new Error("Oops!");
} catch (error) {
    console.error(error);
} finally {
    console.log("Finally block");
}

出力
Error: Oops!
at Object. (/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