diff --git a/src/components/Toc.astro b/src/components/Toc.astro
index 36b8d29..7bc5d0b 100644
--- a/src/components/Toc.astro
+++ b/src/components/Toc.astro
@@ -30,7 +30,7 @@
 
 const sections: Section[] = [];
 
-const sectionPaths = ["html", "tips"];
+const sectionPaths = ["html", "js", "tips"];
 
 for (const path of sectionPaths) {
 	const pages = await getSectionPages(path);
diff --git a/src/pages/html/04-javascript.mdx b/src/pages/html/04-javascript.mdx
deleted file mode 100644
index fbea73a..0000000
--- a/src/pages/html/04-javascript.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-export const title = "JavaScriptで動きをつける";
-
-# {title}
diff --git a/src/pages/js/00-introduction.mdx b/src/pages/js/00-introduction.mdx
new file mode 100644
index 0000000..9ce498a
--- /dev/null
+++ b/src/pages/js/00-introduction.mdx
@@ -0,0 +1,16 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "JavaScriptとは？";
+
+# {title}
+
+JavaScriptは1995年、Netscape社によって開発されたプログラミング言語です。  
+主にウェブブラウザ上で動作し、ウェブページに動的な機能を追加するために使用されます。
+
+今やJavaScriptはウェブページを超えて、パソコンそのものを操作できるようになりました。  
+WindowやMac、iPhone、Androidなどを超えて、ありとあらゆるものがこのJavaScriptで動くように整備されつつあります。
+
+これらは根本的に、ウェブページを動かすための技術を応用して実現されています。  
+ウェブページでJavaScriptを使うことは、あなたが思う以上に世界を広げる重要な知識となるでしょう。
diff --git a/src/pages/js/01-foundation.mdx b/src/pages/js/01-foundation.mdx
new file mode 100644
index 0000000..58ca08f
--- /dev/null
+++ b/src/pages/js/01-foundation.mdx
@@ -0,0 +1,395 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "わかっている人向けの基礎";
+
+# {title}
+
+## 型
+
+### プリミティブ型
+
+#### Number型
+
+```js
+// 整数
+console.log(typeof 123); // "number"
+console.log(typeof -123); // "number"
+
+console.log(typeof 0x1A); // "number"  // 16進数
+console.log(typeof 0b0101); // "number"  // 2進数
+console.log(typeof 0o755); // "number"  // 8進数
+
+// IEEE 754 倍精度浮動小数点数
+console.log(typeof 3.14); // "number"
+```
+
+#### BigInt型
+
+```js
+const bigInt = 9007199254741991n; // 任意精度整数 ( BigInt )
+console.log(typeof bigInt); // "bigint"
+```
+
+#### Boolean型
+
+```js
+console.log(typeof true);  // "boolean"
+console.log(typeof false); // "boolean"
+```
+
+#### String型
+
+```js
+console.log(typeof "Hello, World!"); // "string"
+console.log(typeof 'JavaScript');    // "string"
+
+const multiLine = `これは
+複数行の
+文字列です。`;
+console.log(typeof multiLine); // "string"
+
+// テンプレートリテラル
+const name = "Alice";
+const greeting = `Hello, ${name}!`;
+console.log(greeting); // "Hello, Alice!"
+console.log(typeof greeting); // "string"
+```
+
+#### Symbol型
+
+```js
+const sym = Symbol("uniqueIdentifier");
+console.log(typeof sym); // "symbol"
+```
+
+#### Null型
+
+```js
+const emptyValue = null;
+console.log(typeof emptyValue); // "object" (歴史的な理由による)
+```
+
+#### Undefined型
+
+```js
+const notAssigned = undefined;
+console.log(typeof notAssigned); // "undefined"
+```
+
+### オブジェクト型 (狭義)
+
+JavaScriptでは、プリミティブ型以外のすべての値はオブジェクト型に分類されます。  
+この`Object型`セクションでは、代表的なオブジェクト型を紹介します。
+
+#### Object
+
+```js
+const obj = new Object();
+obj.name = "Bob";
+obj.age = 25;
+
+console.log(obj); // { name: "Bob", age: 25 }
+console.log(obj.name); // "Bob"
+console.log(obj["age"]); // 25
+console.log(obj.someField); // undefined
+
+
+const obj2 = {
+  name: "Charlie",
+  age: 28
+};
+
+console.log(obj2); // { name: "Charlie", age: 28 }
+```
+
+#### Class
+
+JavaScriptでは、他の言語でいうところの`public`や`private`などのアクセス修飾子は存在しません。
+
+```js
+class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+
+    greet() {
+      console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
+    }
+  }
+}
+
+const alice = new Person("Alice", 30);
+console.log(alice); // Person { name: "Alice", age: 30 }
+console.log(alice.name); // "Alice"
+console.log(alice.greet()); // "Hello, my name is Alice and I am 30 years old."
+```
+
+#### Array
+
+```js
+const list = [1, 2, 3, 4, 5];
+console.log(typeof list); // "object"
+
+const list2 = new Array(1, 2, 3, 4, 5);
+console.log(typeof list2); // "object"
+```
+
+#### RegExp
+
+```js
+const pattern = /ab+c/i;
+console.log(typeof pattern); // "object"
+
+const pattern2 = new RegExp("ab+c", "i");
+console.log(typeof pattern2); // "object"
+```
+
+## 関数
+
+宣言
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+const sub = (a, b) => {
+  return a - b;
+}
+```
+
+複数の型を返すことが可能
+
+```js
+function getValue(flag) {
+  if (flag) {
+    return 42; // Number型
+  } else {
+    return "Hello"; // String型
+  }
+}
+```
+
+## コメント行
+
+JavaScriptでは、以下の3つの方法でコメントを記述できます。
+
+```js
+// これは1行コメントです。
+
+/*
+これは複数行に
+渡るコメントです。
+*/
+
+const value = 100;
+
+/**
+ * これはドキュメンテーションコメントです。
+ * @param {string} name - 挨拶する相手の名前
+ */
+function greet(name) {
+  // 挨拶を表示する
+  console.log("Hello, " + name + "!");
+}
+```
+
+## 標準出力
+
+Developper Toolsなどのコンソールに出力します。
+
+```js
+console.log("Hello, World!");
+
+// エラーレベルを分けて出力することもできます。
+console.warn("This is a warning message.");
+console.error("This is an error message.");
+console.info("This is an informational message.");
+console.debug("This is a debug message.");
+
+// objectや配列を見やすく表示することもできます。
+console.table({
+  name: "Alice",
+  age: 30,
+  city: "New York"
+});
+```
+
+## 変数
+
+### 特別な変数
+
+#### window
+
+`window`はブラウザの最上位オブジェクトで、グローバルスコープに存在します。  
+ブラウザ環境でJavaScriptを実行すると、`window`オブジェクトにはブラウザが提供する多くの機能が含まれています。
+
+#### document
+
+ブラウザに表示されているHTMLの全体を表すオブジェクトです。  
+ここからHTML要素を取得したり、操作したりできます。
+
+```html
+<div id="example">Hello, World!</div>
+
+<script>
+  const element = document.getElementById("example");
+  console.log(element.innerHTML); // "Hello, World!"
+</script>
+```
+
+### 変数の宣言
+
+`var`、`let`、`const`の3つのキーワードで変数を宣言できます。
+
+| キーワード | スコープ | 再代入 | 再宣言 |
+| :---------- | :------- | :----- | :----- |
+| `var`       | 関数スコープ | 可能   | 可能   |
+| `let`       | ブロックスコープ | 可能   | 不可   |
+| `const`     | ブロックスコープ | 不可   | 不可   |
+
+`var`は関数の外側で宣言すると、その値は`window`オブジェクトのプロパティとして登録されます。
+
+```js
+var func = () => {
+  return "Hello, Function!";
+}
+
+console.log(func()); // "Hello, Function!"
+console.log(window.func()); // "Hello, Function!"
+console.log(func === window.func); // true
+```
+
+`var`は外部のライブラリを登録するときなどに使われます。  
+誤って同じ名前で変数を宣言すると、そのライブラリを上書きすることになるので注意が必要です。
+
+```html
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+console.log(typeof windiw.jQuery); // "function"
+console.log(jQuery.find("body")); // body要素を取得
+
+var jQuery = "This will overwrite jQuery!";
+console.log(typeof window.jQuery); // "string"
+console.log(jQuery.find("body")); // エラー
+</script>
+```
+
+## HTMLの操作
+
+### 要素を取得する
+
+#### IDで取得
+
+```html
+<div id="myElement">Hello, World!</div>
+
+<script>
+  const element = document.getElementById("myElement");
+  console.log(element.innerHTML); // "Hello, World!"
+</script>
+```
+
+#### class名で取得
+
+```html
+<div class="myClass">Item 1</div>
+<div class="myClass">Item 2</div>
+<div class="myClass">Item 3</div>
+
+<script>
+  const elements = document.getElementsByClassName("myClass");
+  console.log(elements.length); // 3
+  console.log(elements[0].innerHTML); // "Item 1"
+</script>
+```
+
+#### query Selectorで取得
+
+```html
+<div class="container">
+  <p class="text">Paragraph 1</p>
+  <p class="text">Paragraph 2</p>
+</div>
+
+<form>
+  <input type="text" />
+  <input type="password" />
+</form>
+
+<script>
+  const firstParagraph = document.querySelector(".container .text");
+  console.log(firstParagraph.innerHTML); // "Paragraph 1"
+
+  const allParagraphs = document.querySelectorAll(".container .text");
+  console.log(allParagraphs.length); // 2
+  console.log(allParagraphs[1].innerHTML); // "Paragraph 2"
+
+  const passwordInput = document.querySelector("form input[type='password']");
+  console.log(passwordInput.type); // "password"
+</script>
+```
+
+#### 要素を追加
+
+```html
+<ul id="myList">
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+<script>
+  const list = document.getElementById("myList");
+
+  // 新しい要素を作成
+  const newItem = document.createElement("li");
+  newItem.innerHTML = "Item 3";
+
+  // 要素を追加
+  list.appendChild(newItem);
+  console.log(list.innerHTML);
+  // <li>Item 1</li><li>Item 2</li><li>Item 3</li>
+</script>
+```
+
+#### 要素を削除
+
+```html
+<ul id="myList">
+  <li>Item 1</li>
+  <li id="itemToRemove">Item 2</li>
+  <li>Item 3</li>
+</ul>
+
+<script>
+  const itemToRemove = document.getElementById("itemToRemove");
+
+  // 親要素を取得
+  const parent = itemToRemove.parentNode;
+  // 要素を削除
+  parent.removeChild(itemToRemove);
+  console.log(document.getElementById("myList").innerHTML);
+  // <li>Item 1</li><li>Item 3</li>
+</script>
+```
+
+## イベント
+
+```html
+<button onclick="alert('Button was clicked!')">Click Me!</button>
+```
+
+```html
+<button id="myButton">Click Me!</button>
+
+<script>
+  const button = document.getElementById("myButton");
+
+  // クリックイベントを登録
+  button.addEventListener("click", () => {
+    alert("Button was clicked!");
+  });
+</script>
+```