🙆‍♀️

スクリプト、フォーム要素、ナビゲーションについて

2022/11/07に公開

スクリプトとは

ソースコードを書いてからすぐに動かすができるプログラムのことです。人間の言葉で書いたプログラムのソースコードをコンピュータが分かる形に変換する作業(コンパイル)を人が作業しなくて済むプログラムのことです。

本来、プログラムが作られて動くまでの流れとしては、
人がプログラミングをして、人がコンパイル(翻訳)をして、実行をするという流れになります。

このコンパイル(翻訳)の作業を人がやらなくても良いプログラムのことを「スクリプト」と言います。

ちなみに、Javascript、PHP、Perlのようなプログラミング言語はスクリプト言語と言います。
このスクリプト言語で書かれたプログラムをスクリプトと言います。

先ほど、このスクリプトとというものが、「コンパイル(翻訳)作業を人がしなくても済む」と記載しましたが、
実際には、この作業はスクリプト言語で記述したプログラムの場合、コンピュータ裏で自動的に行ってくれます。

フォーム要素とは

form要素は、入力するところをフォームとしてまとめる要素です。

form要素についてはいくつか種類があり、

action属性にURL指定すると、フォームデータの送信先を設定できます。

method属性にデータを送信する際のHTTPメソッドを指定すると送信方法を設定できます。

HTTPとは

HTMLなどといったハイパーテキストを転送するためのプロトコルとして規定されたものですが、Webの進化に伴い、現在では画像や音声など様々なデータを転送する場合にも用いられるもの。

ちなみにform要素は、input要素といったコントロールと、p要素などといったブロックレベル要素を含むことができます。

使用例

<form action= "http://" method="post">
<input type="text">

  <input type="submit" value="送信">

</form>

ナビゲーションとは

nav要素を使って、ナビゲーションであることを示すものになります。

サイト内の他ページリンクや1ページ目、2ページ目、3ページ目などといったようにメニューを作成する場合にnav要素は使用されます。

使用例

<nav>
<ul class="main-menu">
<li><a href="/">ホーム</a></li>
<li><a href="/item/">商品一覧</a></li>
<li><a href="/about/">店舗紹介</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>

表示

ホーム
商品一覧
店舗紹介
お問い合わせ

ヘッダーにメニューを表示する使用例

<header>
<nav id="gnav">
<ul class="inner">
<li><a href="#">ホーム</a></li>
<li><a href="#">1ページ目</a></li>
<li><a href="#">2ページ目</a></li>
<li><a href="#">3ページ目</a></li>
<li><a href="#">会社概要</a></li>
</ul>
</nav>
</header>

ホーム
1ページ目
2ページ目
3ページ目
会社概要

Discussion