こんにちは:-)
KONICHIWA JAPAN と表示させてみる
<!DOCTYPE html>
<html>
<head>
<meta charaset="utf-8" />
<title> KONICHIWA JAPAN </title>
</head>
<script>
document.write("KONICHIWA!")
</script>
</html>
これを実行すると以下のようになる。
作成手順
1，Visual Studio Code を起動する
2，新しいファイルを作成する、名前を 〇〇.html とする
3，上記のプログラムを書く
4，保存する
5，ファイル名の上で右クリック→”エクスプローラーで表示する”をクリック
6，結果がブラウザ上で保存される
語句の意味
Javascript初心者なので、一つ一つのプログラムの意味を知ろうと思い、調べてみた
<!DOCTYPE html>： Document Type Definitionの略
HTMLの仕様をブラウザに認識させるための宣言
C言語での#include < stdio.h > だと思った
<html>:HTMLの文書を書くために基底となる要素
<head>~</head>：機械可読な情報を入れる、題名など
<meta charaset="utf-8" />：文字コードを指定し文字化けを防ぐ
meta要素により情報を指定する。charaset属性でHTMLファイルの文字コードを指定する
<script>~</script>：Javascriptをドキュメントに埋め込む、実行するコードをここに入れる
この中だけJavaScriptで残りはHTMLかな？
ボタンで画像を表示させてみる
色んなサイトを見て、５枚の画像を１枚ずつ表示させる。
ボタンを２個作成し、前からも後ろからでも見れるようにした。
注釈のつけ方がわかったので、よくわからない部分についてはコードの中にコメントを書いた。
<!DOCTYPE html>
<html>
<head>
<meta charaset="utf-8" />
<title> USAGI </title>
</head>
<body>
<!--width=ボタン幅、height=ボタン高さ、font-size=ボタンの文字の大きさ
onclickはクリック時の処理-->>
<button style = "width:500px; height:100px; font-size:80px " onclick="foward()">次</button>
<button style = "width:500px; height:100px; font-size:80px " onclick="back()">戻る</button>
<br><!--改行要素-->
<img id="image_place" src="image1.jpg">
<script>
//指定したidに合ったドキュメント要素を取得する
let img = document.getElementById("image_place")
//画像番号
let idx = 1;
//画像切り替える関数
function foward(){
idx++;
if(idx > 5){
idx = 1;
}
//scrに画像ファイル名を設定
img.src = "image" + idx + ".jpg";
src.height = 100;
}
function back(){
idx--;
if(idx < 1){
idx = 5;
}
img.src = "image" + idx + ".jpg";
src.height = 100;
}
</script>
</body>
</html>
表示させた画像は以下の通り
######image1
######image2
######image3
######image4
######image5
感想
ボタンの大きさや文字の大きさの変更はできたが、画像自体の比率や大きさが変更できなかった。ボタン自体のデザインを変更するのにはCSSがいると様々なサイトに載っていたので、それも少し見てみたいと思った。
Javascriptも全然わかっていない状況だし、Qiitaの投稿自体も特殊でめちゃくちゃ難しい。でもたのしいからOK^^
参考文献
【HTML】意外と重要なDOCTYPE宣言についてわかりやすく解説。
[ < html >: HTML 文書 / ルート要素]
(https://developer.mozilla.org/ja/docs/Web/HTML/Element/html)
[ELEMENT meta 要素 ページに関する情報を表す要素]
(https://creatorquest.jp/reference/html/element/meta/#charset-attribute)
[JavaScriptで画像を表示する方法を現役エンジニアが解説【初心者向け】]
(https://techacademy.jp/magazine/20738#sec2)