JavaScript: JavaScript コード例

コードをコピーして example.html という名前のファイルに保存し、ブラウザで開いてください。

レッスン 28 を参照してください — Todo アプリ プロジェクトです。

このページでは、JavaScript チュートリアルの各レッスンから厳選されたコード例をクイックリファレンスとして紹介しています。

各例は自己完結型の HTML ファイルです。コピーして .html ファイルとして保存し、ブラウザで開いて動作を確認してください。

レッスン	例	主要コンCEPT
22	5つの選択メソッドの比較	getElementById、querySelector など
22	textContent と innerHTML の比較	要素コンテンツの変更
22	リンク属性の操作	getAttribute、setAttribute
22	リスト項目の動的追加	createElement、appendChild
22	ノードの削除と複製	removeChild、cloneNode
23	style プロパティの読み書き	element.style
23	テーマ切り替え	classList.toggle
23	要素の表示と非表示	classList
23	計算スタイルの取得	getComputedStyle
23	cssText による一括スタイリング	style.cssText
24	ボタンクリックカウンター	addEventListener、イベントオブジェクト
24	キーボード検出	keydown イベント
24	フォームのインターセプト	preventDefault
24	イベント委譲	e.target、バブリング
25	シリアライゼーションとフォーマット	JSON.stringify、replacer、space
25	デシリアライゼーション	JSON.parse
25	よくある JSON エラー	try/catch、JSON 構文の落とし穴
26	コールバックの基本	setTimeout、コールバック関数
26	Promise でリクエストをシミュレート	new Promise、then/catch
26	async/await	async 関数、await
26	Promise.all と race	並行リクエスト、レース
27	Student クラス	class、constructor、メソッド
27	静的メソッドとゲッター/セッター	static、get、set
27	継承のデモ	extends、super
27	単一ファイルでモジュールをシミュレート	type="module"

今後もさらに多くの例を追加予定です。お楽しみに！

HTML

<!DOCTYPE html>
<html>
<head><title>Hello</title></head>
<body>
  <h1>こんにちは、世界!</h1>
  <script>alert('JavaScript からの挨拶!');</script>
</body>
</html>

スクリプト実行時にアラートダイアログを表示する最小限のページ。

❓ よくある質問

Q これらの例をどう実行しますか？

A コードをコピーして example.html という名前のファイルに保存し、ブラウザで開いてください。

Q 例を変更して結果を確認できますか？

A もちろんです！テキストエディタでファイルを開き、何かを変更して保存し、ブラウザを更新してください。

Q 大きな例はどこですか？

A レッスン 28 を参照してください — Todo アプリプロジェクトです。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。