うちの子にとりあえずHTMLとJavaScriptを覚えさせようと思うので、
自分自身の復習を兼ねてうちの子向けに教材をイチから作っていきたいと思います。
このページを作るにあたって、以前作ったHTMLタグの<>を特殊文字に変換する変換器を使います。
さて、まずは最低限のHTMLからですが、これは僕自身暗記しているわけではないし必要も無いと思うので、ChatGTPに最低限のコードを書いてもらおうと思います。
HTMLコードの表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
</head>
<body>
<h1>HelloーWorld!</h1>
<p>これは最低限のHTMLコードの例です。</p>
</body>
</html>
まずはこれをローカル（自分のPC）に保存します。
これをブラウザで開いてちゃんと表示されればOK。
いろいろ文字を打ち替えて遊んでみましょう。
これはJavaScriptの記事なので、jsファイルをリンクします。ついでにcssファイルも繋いでおきましょう。head内に以下を書きます。
<link rel="stylesheet" href="style.css">
<script src="study.js" defer></script>
これは繋いだだけなので、JavaScriptで何かイベントを起こそうと思います。
イベントはページが開く、時間がたつ、スクロールされるなどいろいろありますが、とりあえず一番スタンダードなボタンを押すから入ろうと思います。
ボタンを押すにはボタン作る必要があります。HTMLに以下を記述しましょう。
<button>これはボタン</button>表示すると以下のようになります。
ただしボタンを作っただけでは何も起きないので、このボタンを押すと何が起きるかを決めていきます。
決めるためにはボタンに名前をつけます。名前は一見して意味が通じるものがいいですが、とりあえず安直にaaaとしてしまいます。
<button onclick="aaa()">ボタンを押して</button>次に、ボタンを押すとどうなるのかをJavaScriptのほうに記述します。
function aaa() {
alert('押したな');
}
すると、以下のようなボタンが完成します。
これは決まった文字列が出るボタンなので、次は入力した文字列がalertになるボタンを作ります。
1行入力フォームを作り、名前はinputTextとします。
次にボタンを作り、クリックするとbbbというファンクションが起動するとします。
<input type="text" id="inputText" name="inputText">
<button onclick="bbb()">テキストを取得して表示</button>ではこのbbbが動く内容をJavaScriptに記述します。
function bbb() {
var inputValue = document.getElementById('inputText').value;
alert('入力されたテキスト: ' + inputValue);
}
すると、次のようなボタンが完成します。
では次に、アラートでなくHTML中に文字を表示します。
そのためにはボタンと、文字を表示する枠が必要になります。
<input type="text" id="text01" name="text01">
<button onclick="ccc()">テキストを取得して表示する枠</button>
続いてJavaScript。
今回のファンクションはcccと名付けます。
function ccc() {
var youso = document.getElementById('text01');
t = youso.value;
hyouji="こんにちわ" + t + "さん"
gamenyouso = document.getElementById('gamen');
gamenyouso.innerHTML = hyouji;
}
これを実行すると、入力した文字が本文中に表示されます。
今日はここまで。
がんばってね息子。
