JavaScript学習アプリ
以下のボタンをクリックすることで、JavaScriptに関する基本的なコンセプトを学ぶことが可能です。
以下はJavaScript学習アプリの実装例です。注目すべき点は、evalを使わないこと、外部サイトに遷移させないこと、リダイレクトを行わないこと、そしてセキュリティ上の脆弱性を減らすことです。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript学習アプリ</title>
</head>
<body>
<h1>JavaScript学習アプリ</h1>
<p>以下のボタンをクリックすることで、JavaScriptに関する基本的なコンセプトを学ぶことが可能です。</p>
<button onClick="showVariables()">変数</button>
<button onClick="showFunctions()">関数</button>
<button onClick="showConditionals()">条件分岐</button>
<button onClick="showLoops()">繰り返し処理</button>
<div id="content"></div>
<script>
// 変数
function showVariables() {
document.getElementById("content").innerHTML =
`
<h2>変数</h2>
<p>JavaScriptで変数を宣言するには、以下のように記述します。</p>
<pre>
const variableName = value;
let variableName = value;
var variableName = value;
</pre>
<p>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#%E5%A4%89%E6%95%B0">MDN Web Docs</a>を参照してください。</p>
`;
}
// 関数
function showFunctions() {
document.getElementById("content").innerHTML =
`
<h2>関数</h2>
<p>JavaScriptで関数を宣言するには、以下のように記述します。</p>
<pre>
function functionName(param1, param2, ...) {
// 処理...
return value;
}
</pre>
<p>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions">MDN Web Docs</a>を参照してください。</p>
`;
}
// 条件分岐
function showConditionals() {
document.getElementById("content").innerHTML =
`
<h2>条件分岐</h2>
<p>JavaScriptで条件分岐を行うには、以下のように記述します。</p>
<pre>
if (condition) {
// 処理...
} else if (condition2) {
// 処理...
} else {
// 処理...
}
</pre>
<p>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90">MDN Web Docs</a>を参照してください。</p>
`;
}
// 繰り返し処理
function showLoops() {
document.getElementById("content").innerHTML =
`
<h2>繰り返し処理</h2>
<p>JavaScriptで繰り返し処理を行うには、以下のように記述します。</p>
<pre>
for (let i = 0; i < max; i++) {
// 処理...
}
while (condition) {
// 処理...
}
do {
// 処理...
} while (condition);
</pre>
<p>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">MDN Web Docs</a>を参照してください。</p>
`;
}
</script>
</body>
</html>
```
ジョークを追加することもできます。例えば、以下のような変数を宣言する部分のコメントを次のように書き換えると面白くなります。
```javascript
// ここから、本当に大切なものが始まる...
let iAmVeryImportant = "I'm very important!";
```