初めまして。このアカウントではWebゲーム作成を目標にhtml,Javascript,cssのコードをひらすら乗せ続けていきます。
というのも私はWeb開発初心者なので成長のためにアウトプットしようと思い日記のような感じで書いていきます。
①早速コードを書いてみよう
まずはよくみる「Hello!World」と表示させるhtmlファイルから
どこのフォルダ上でもいいのでtextファイルを作成し、拡張子を.htmlにしてください
保存出来たら中にこのコードを打ち込んでください。
<html>
<head>
<title>日記①</title>
</head>
<body>
Hello!World
</body>
</html>
これを保存し、ダブルクリックしてみるとブラウザでHello!Worldと書かれたサイトが開かれます
解説
<html> webサイトの情報はすべてこの中に書き込みます
<head> webサイトの基本情報を書きます(名前やタイトルなど)
<title>headタグの中に書きます。サイトの名前ですね。
<body> webサイトの中身を書きます(ボタンやテキストボックスなど)
➁htmlの基本要素に触れよう
今度はhtmlの基本要素であるbuttonやdivを使用してみましょう。
先ほどのコードをこれに変更しましょう。
<html>
<head>
<title>日記①</title>
</head>
<body>
<input type="text" id="text">
<input type="button" id="button" value="ボタン" onClick="onClick">
<div id="textcontainer"></div>
</body>
</html>
変更してページをリロードしてみると
テキストボックスとボタンが表示されていると思います。
③Javascriptを使ってみよう
このままでは押しても何も起きないのでjavascriptを用いて処理を追加してみましょう。
Javascriptは外部ファイルとして読み込む方が分かりやすいですが、今回はhtml内に直接書きます。
コードを以下のように変更しましょう。
<html>
<head>
<title>日記①</title>
</head>
<body>
<input type="text" id="text">
<input type="button" id="button" value="ボタン" onClick="onClick()">
<div id="textcontainer"></div>
<script>
function onClick(){
const text = document.getElementById("text").value
const textcontainer = document.getElementById('textcontainer');
textcontainer.appendChild(document.createTextNode(text));
textcontainer.appendChild(document.createElement('br'));
}
</script>
</body>
</html>
このコードを打ってページをリロードするとこんな感じで入力してボタンを押したら、入力した文字が下に表示されていくと思います。
解説
<input>クライアントから情報を受け取ることができます。
typeはbutton,text,number,e-mail,checkboxなど沢山あります。
<div>複数の要素をグループ化する。Javascriptを用いて要素の追加・削除が可能
今回のように文字列を追加したり、写真を追加することもできます。
<script>Javascriptのコードをこの中に書きます。<script src="ファイル名">とすることで外部のJavascriptフォルダを読み込むことができる
javascriptについての解説は次回にしたいと思います。
とりあえず今回はhtmlの実行方法、主な書き方だけ知ってもらえればいいと思います。
最後に
主はまだ中学三年生のJavascript初心者です。おそらく記事を読んでる方の方がhtml,javascriptについて詳しい知識を持っているでしょう。このサイトは主の勉強のためでもあるので、間違いやアドバイスがあれば何でも言ってくれると嬉しいです。それではまた次回!!