Angelday

日本語

简体中文

日本語

简体中文

Appearance

JavaScript ​

JavaScript は、ブラウザの動作を制御する、クロスプラットフォームのオブジェクト指向スクリプト言語です。

導入方法 ​

HTML ファイルでは、<script> タグで JavaScript コードを囲みます。形式は次の通りです。

html
<!DOCTYPE html>
<html>
    <body>
    <!-- ここは HTML の内容 -->
        <script>
            // ここに JavaScript コードを書く
            function sayHello() {
              alert('Hello, World!');
            }
            sayHello();
        </script>
    </body>
</html>

一般的には、内部スクリプトは <body> タグの下部に置くことをすすめます。

外部 JS ファイルを読み込む場合：

たとえば demo.js という独立した .js ファイルがあります。

js
function multiply(num1, num2) {
  return num1 * num2;
}
html
<!DOCTYPE html>
<html>
	<head></head>
    <body>
      <button onclick="alert(multiply(5, 3))">積を計算</button>
      <script src="../js/demo.js"></script>
    </body>
</html>

構文 ​

基本文法 ​

  • Java と同じように、変数名、関数名、その他の名前は大文字小文字を区別します。
  • 各行の末尾のセミコロンは、あってもなくてもよいです。
  • 波括弧はコードブロックを表します。
js
if (count == 3) {
	alert(count);
}
  • 出力文
js
window.alert() を使う		// 警告ボックスへ出力。window. は省略できる
document.write() を使う	// HTML 出力へ書き込む
console.log() を使う		// ブラウザのコンソールへ出力
  • コメント
js
// 一行コメント

/* 複数行
コメント */

変数 ​

  • var キーワード（variable の略）で変数を宣言します。
  • JavaScript は弱い型付けの言語です。変数には異なる型の値を入れられます。
js
var test = 20;
test = "山田";

変数は次の規則に従います。

  • 使用できる文字は、英字、数字、アンダースコア（_）、$ です。
  • 数字から始めることはできません。
  • camelCase を使うことをすすめます。

特殊な変数宣言：

var：

  1. スコープ：グローバル変数として扱われ、コードブロック外からも読めます。
  2. 重複定義できます。
js
var age = 30;
var age = 20;

let

  1. スコープ：ローカル変数です。
  2. 一度だけ定義できます。

const

  1. 読み取り専用の定数を宣言します。一度宣言すると、値は変更できません。

データ型 ​

プリミティブ型と参照型があります。

データ型説明
number数値（整数、小数、NaN (Not a Number)）
string文字、文字列。シングルクォートとダブルクォートのどちらも使えます
boolean真偽値（true または false）
nullオブジェクトが空であることを表します
undefined宣言した変数が初期化されていない場合のデフォルト値です

注：typeof 演算子を使うとデータ型を取得できます。

代入演算子 ​

演算子説明
=右側の値を左側の変数に代入します。
+=変数に加算を行い、その結果を変数へ代入します。
-=変数に減算を行い、その結果を変数へ代入します。

関係演算子 ​

演算子説明
==比較時に、まず型が同じかを判断します。違う場合は型変換を行い、その後で値を比較します。
===（厳密等価）型が違う場合は直接 false を返します。型が同じ場合だけ値を比較します。

三項演算子 ​

式の形式説明
条件式 ? true_value : false_value条件式を評価し、値が true なら true_value を返し、false なら false_value を返します。

データ型変換 ​

1. string 型から number 型へ ​

  • 文字列の字面に従って数値へ変換します。字面が数値でない場合は NaN（Not a Number）になります。
  • 一般的には parseInt() メソッドを使います。parseInt() 関数は文字列の先頭から解析し、数字以外の文字に会うと止まり、解析できた整数値を返します。
js
let num1 = parseInt("123");
console.log(num1); // 出力：123

let num2 = parseInt("123abc");
console.log(num2); // 出力：123。文字 'a' に会うと解析を止める

let num3 = parseInt("abc");
console.log(num3); // 出力：NaN。先頭が数字ではないため

parseInt() のほかに parseFloat() メソッドもあります。これは小数を含む数値を解析できます。

js
let num4 = parseFloat("3.14");
console.log(num4); // 出力：3.14

let num5 = parseFloat("3.14abc");
console.log(num5); // 出力：3.14。数字以外の文字に会うと小数部分の解析を止める

boolean 型から number 型へ ​

true は 1、false は 0 に変換されます。

number 型から boolean 型へ ​

0 と NaN は false に変換され、その他の数値は true に変換されます。

string 型から boolean 型へ ​

空文字列（""）は false に変換され、その他の文字列は true に変換されます。

null 型と undefined 型から boolean 型へ ​

常に false に変換されます。

制御文 ​

java と同じです。

js
if () {	}

for (; ; ) {}

switch(){}

while

do...while

関数 ​

関数（メソッド）は、特定の処理を行うコードブロックです。

定義：

JavaScript の関数は function キーワードで定義します。

js
// JavaScript は弱い型付けの言語なので、仮引数に型は不要
function functionName(引数1，引数2...){
	コードブロック
}

// 戻り値の型を定義する必要はなく、関数内で return すればよい
function add(a,b){
	return a + b;
}

// 定義方法2
var functionName = function(引数リスト){
	// 実行するコード
}
var add = function(a,b){
	return a + b;
}

呼び出し：

js
// 関数呼び出しでは任意の数の引数を渡せる
let result = add(1,2,3);

オブジェクト（重要） ​

基本オブジェクト概要 ​

JavaScript では、重点的に見るべき基本オブジェクトがいくつかあります。Array（配列）、String（文字列）、JSON（JavaScript Object Notation）、ブラウザオブジェクトモデル（BOM）、ドキュメントオブジェクトモデル（DOM）、そして自分で定義できるオブジェクトです。

Array ​

  • 宣言方法
    • 方法一：var 変数名 = new Array();。空配列を作ります。
    • 方法二：var 変数名 = [要素リスト];。
  • 要素アクセス：インデックスで配列要素にアクセスします。形式は arr[インデックス] = 値; です。
  • 特徴：長さも型も可変です。いつでも要素を追加・削除でき、配列内には異なる型のデータを入れられます。例：[1, "hello", true]。
  • 属性：
    • length：配列要素の数を設定、または返します。
  • メソッド：
    • forEach()：配列内の値を持つ各要素を走査し、渡した関数を一回ずつ呼び出します。例：
javascript
let arr = [1, 2, 3];
arr.forEach((e) => {
    console.log(e);
});
  • push()：新しい要素を配列の末尾に追加し、新しい長さを返します。
  • splice(開始インデックス, 削除数)：配列から要素を削除します。
js
// 要素を削除
array.pop()  // 配列の最後の要素を削除
array.shift()  // 配列の最初の要素を削除
array.splice(int index,int deleteCount)  // index から deleteCount 個の要素を削除

// 配列を切り出す
let arrM = array.slice(int start,int end)  // start から end までを切り出す。左閉右開

// 配列を結合
arr1,arr2
let arr3 = arr1.concat(arr2)

// 文字列から配列へ
let str = 'abc，defg'
let arr = str.split('') // 各文字を配列の一要素に変換
let arr = str.split('，') // カンマを区切り文字として文字列を配列に分割

// 配列から文字列へ
let arr = ['a','b','c']
let str = arr.join('') // 配列を文字列に変換し、間には空文字を入れる

// 配列をソート
let arr = [1,2,3,4,5]
arr.sort() // 昇順。デフォルトでは unicode コード順でソート
// アラビア数字としてソートしたい場合は次のように書く
arr.sort(function(a,b){return a-b})
arr.sort((a,b) => a-b)
// 逆順
arr.reverse()
arr.reverse((a,b) => b-a)

String ​

  • 宣言方法：
    • 方法一：var 変数名 = new String("...");
    • 方法二：var 変数名 = "..."。こちらのほうがよく使われます。例：var str2 = "world";。
  • 属性：
    • length：文字列の長さを表します。
  • メソッド：
    • charAt(添字)：指定位置の文字を返します。
    • indexOf("文字列")：文字列を検索し、最初に現れたインデックスを返します。存在しない場合は -1 を返します。
    • trim()：文字列の両端の空白を削除し、新しい文字列を返します。
    • substring(開始添字, 終了添字)：二つの指定インデックス間の文字を取り出します（先頭を含み、末尾を含みません）。

JavaScript カスタムオブジェクト ​

  • 定義：
javascript
var オブジェクト名 = {
    属性名1: 属性値1,
   ...
    属性名n: 属性値n,
    関数名: function(仮引数リスト) {}
};
var person = {
    name: "Alice",
    age: 25,
    sayHello: function () {
        console.log("Hello!");
    }
};
  • 呼び出し：
    • オブジェクト名.属性名; で属性にアクセスします。
    • オブジェクト名.関数名(); で関数を呼び出します。

JSON ​

  • 概念：JSON は JavaScript オブジェクト表記法で書かれたテキストです。すべての key はダブルクォートで囲む必要があります。
  • 定義例：var 変数名 = '{"key1": value1, "key2": value2}';（配列は角括弧に入れる必要があります）。例：var user = '{"name": "Bob", "age": 30}';。
  • JSON 文字列から JS オブジェクトへ：JSON.parse() メソッドを使います。例：
javascript
var userStr = '{"name": "Bob", "age": 30}';
var jsObject = JSON.parse(userStr);
console.log(jsObject.name);
  • JS オブジェクトから JSON 文字列へ：JSON.stringify() メソッドを使います。例：
javascript
var person = {name: "Charlie", age: 35};
var jsonStr = JSON.stringify(person);
console.log(jsonStr);

BOM（ブラウザオブジェクトモデル） ​

  • 概念：ブラウザオブジェクトモデルです。JavaScript がブラウザと対話できるように、ブラウザの各部分をオブジェクトとして扱います。
  • Window ブラウザウィンドウオブジェクト（window. は省略できます）：
    • 属性：
      • history：History オブジェクトへの読み取り専用参照です。
      • location：ウィンドウまたはフレームの Location オブジェクトです。
      • navigator：Navigator オブジェクトへの読み取り専用参照です。
    • メソッド：
      • alert()：メッセージと確認ボタンを持つ警告ボックスを表示します。
      • confirm()：メッセージ、確認ボタン、キャンセルボタンを持つダイアログを表示し、boolean 値を返します。例：var result = confirm("操作を確認しますか？"); console.log(result);。ユーザーが押したボタンにより true または false を返します。
      • setInterval()：指定した周期（ミリ秒）で関数または式を呼び出します。例：setInterval(() => { console.log("1000ミリ秒ごとに実行"); }, 1000);。
      • setTimeout()：指定したミリ秒後に関数または式を呼び出します。例：setTimeout(() => { console.log("3000ミリ秒後に実行"); }, 3000);。
  • location オブジェクト（呼び出し方法：window.location.属性）：
    • 属性：
      • href：完全な URL を設定または返します。例：window.location.href = "https://www.example.com"; は指定サイトへ移動します。

DOM（ドキュメントオブジェクトモデル） ​

  • 概念と役割：

    • HTML などのマークアップ言語の構成部分を、対応するオブジェクトとして扱います。例：Document（文書全体のオブジェクト）、Element（要素オブジェクト）、Attribute（属性オブジェクト）、Text（テキストオブジェクト）、Comment（コメントオブジェクト）など。
    • JavaScript は DOM を通じて HTML を操作できます。たとえば、要素内容の変更、CSS スタイルの変更、DOM イベントへの反応、要素の追加と削除などです。

  • 要素の取得方法：

    • id 属性値で取得：単一の Element オブジェクトを返します。例：var h1 = document.getElementById('h1');。
    • タグ名で取得：Element オブジェクト配列を返します。例：var divs = document.getElementsByTagName('div');。
    • name 属性値で取得：Element オブジェクト配列を返します。例：var hobbys = document.getElementsByName('hobbys');。
    • class 属性値で取得：Element オブジェクト配列を返します。例：var clss = document.getElementsByClassName('cls');。

イベントバインディング ​

一、タグ内のイベント属性でバインディングする ​

html
<input type="button" onclick="on()" value="ボタン1">
<script>
    function on() {
        alert("クリックされました");
    }
</script>

この方法では、HTML タグ内でイベント属性（ここでは onclick）を直接使い、その要素がクリックされた時に実行する JavaScript 関数を指定します。ページ読み込み後、ブラウザは <input> タグ内の onclick="on()" を解析し、このボタンをクリックすると on 関数を呼び出すと判断します。ボタンがクリックされると、ブラウザは on 関数を実行し、「クリックされました」という警告ボックスを表示します。

二、DOM 要素属性でバインディングする ​

html
<input type="button" id="btn" value="ボタン2">
<script>
    document.getElementById('btn').onclick = function () {
        alert('クリックされました!');
    }
</script>

ここでは、まず document.getElementById('btn') で id="btn" を持つ <input> ボタン要素を取得します。その後、匿名関数をその要素の onclick 属性に代入します。これにより、ボタンがクリックされた時に匿名関数が実行され、「クリックされました！」という警告ボックスが表示されます。この方法は、JavaScript コードで対応する DOM 要素を取得してから、動的にイベント処理関数をバインドします。HTML コードと JavaScript コードをある程度分離できます。

Released under the MIT License.

Copyright © 2026-present Angelday