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の文書を書くために基底となる要素
<!DOCTYPE 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 文書 / ルート要素
 ELEMENT meta 要素ページに関する情報を表す要素
 JavaScriptで画像を表示する方法を現役エンジニアが解説【初心者向け】

課題1＿27

KONICHIWA JAPAN と表示させてみる