【簡単】JavaScriptの基本やhtml出力の方法とは？

HTMLに動的な処理を加えることができるスクリプト言語 JavaScript

JavaScriptを使用するとブラウザーでアクセスしたユーザーの

アクションに応じてメッセージ表示ができたり

HTMLコンテンツ内容の変更やCSSを編集して

他とは違うレイアウトやデザインにすることもできます。

こちらの記事では簡単にサッっとできるように

簡単にJavaScriptの基本使用方法や

その確認方法などを紹介します。

JavaScriptの基本を覚える

JavaScriptとは、プログラミング言語の一つです。

ブラウザに実行エンジンが搭載されており、

開発環境を整えるのが簡単で初心者向けのプログラミング言語です。

JavaScriptはHTMLをコントロールする目的でほとんど使われています。

HTMLとCSSだけでブログなどを作ることは可能ですが

JavaScriptを使用した方が動きをつけることができ、

他よりオシャレなデザインのブログ、Webサイトを作れるのです。

では、どのように使用するのか。

方法１　HTMLドキュメント内にJavaScriptを記述する

方法２　HTMLドキュメント内で外部ファイルとして読み込む

主にこの２つの方法が挙げられます。

それぞれ詳しく解説します。

方法①HTMLドキュメント内にJavaScriptを記述する

HTMLドキュメント内に直接JavaScriptのコードを記述して呼び出す場合、

HTML内にある headタグまたは bodyタグの中に

scriptタグ挿入してJavaScriptを記述します。

サンプル

　　　　　～JavaScriptを記述する～

　</script>

とても簡単な方法ではありますが、この方法を使用してしまうと

HTMLファイルのソース量が増えてしまいコードが読みづらくなってしまいます。

かつ他のHTMLページで同じような処理をしたい場合、

他のページにも同じように記述しなければいけません。

コードが読みづらければメンテナンス性が低くなってしまいますし、

他のページに同じように記述していると手間もかかってしまいます。

方法②HTMLドキュメント内で外部ファイルとして読み込む

「方法①のHTMLドキュメント内にJavaScriptを記述する」は

手間とメンテナンスのしづらさがありますが、

「方法②外部ファイルとして読み込む」は

そんな手間やメンテナンス性の低さが改善される方法となっています。

外部ファイルとして読みことで複数のHTMLドキュメントで

共通のプログラムとすることができるため、管理が楽になるのです。

Webサーバの制限がない限りJavaScriptを使用する場合、

この方法②外部ファイルとして作成したほうがおすすめです。

流れ

１．JavaScriptコードのみを記述された

　「JavaScriptファイル（ファイル名.js）」を作成

２．HTMLドキュメントと同じフォルダーの中に

　　JavaScriptファイルを保存

３．「scriptタグ」に「src属性」を追加し、

　　値としてJavaScriptファイル（ファイル名.js）を指定

コードサンプル

これで読み込まれ、JavaScriptの動きが適用されます。

JavaScriptでHTML要素を取得する

JavaScriptとHTMLが結びつけば、あとは

JavaScriptコードを記述するだけです。

JavaScriptでHTMLの要素を取得することで

変更や参照をすることができるようになります。

その場合、HTML内の要素の中から必要な要素を取得して

オブジェクトとして取得する必要があります。

取得コード一覧

それぞれの取得コードを紹介します。

・ID名から取得

　document.getElementById(‘ID名’)

・タグ名から取得

　document.getElementsByTagName(‘Tag名’)

・Class名から取得

　document.getElementsByClassName(‘Class名’)

・name名から取得

　document.getElementsByName(‘Name属性’)

JavaScriptで文字や文字列をhtmlに表示するには

JavaScriptで文字や文字列をhtmlに表示させることもできます。

ここでは【document.write】を使用する方法を紹介します。

コード

document.write( <文字or文字列> );

</script>

拡張子が【.html】になるファイルを作成して

Chromeなどのブラウザで開けば表示されるようになります。

出力されたHTMLコードを確認するには

JavaScriptで出力されたHTMLコードは

Webページのソースコードに表示されません。

ですが、Webブラウザの開発ツールを用いて

JavaScriptで出力されたコード内容を確認する方法があります、

Internet ExplorerとFirefoxその他ブラウザーでの表示方法を紹介します。

Firefoxの場合

開発ツールでJavaScriptが出力したコードの確認ができます。

流れ

１．【ツール】メニューの【Web開発】を開く

２．Web開発の中の【開発ツールを表示】を選択

３．ウィンドウの下部に開発者ツールが表示される

４．開発者ツールの上部にある【インスペクタ】を選択

インスペクタを選択すると表示中のページの

JavaScriptによって出力されたHTMLコードが表示されます。

Internet Explorerの場合

Firefoxと同様に開発ツールを用いて確認できます。

流れ

１．【ツール】メニューの【F12 開発者ツール】を選択

２．開発者ツールが下部に表示される

３．表示されている開発者ツールの左側のメニューの一番上

　　【DOM Explorer】を選択

DOM Explorerを選択することでHTMLコードが表示されます。

Chromeの場合

Chromeでは【Developer Tools】を用いて表示させます。

流れ

１．右上にあるメニューから【その他のツール】を選択

２．その他のツールの中から【Elements】

　　または【デベロッパーツール】を選択

３．ウィンドウ端にDeveloper Toolsが表示される

４．DeveloperToolsのバーにある【Elements】を選択

Elementsを選択することで出力されたHTMLコードが表示されます。

MicroSoft Edgeの場合

Internet Explorerの後継ブラウザであるEdgeでの

出力コードを確認するには【コンテキストメニュー】から

表示させることができます。

流れ

１．HTML出力コードを表示させたいページ内で

　　右クリックする

２．タブ内の【ソースを表示】を選択

３．ソース表示の中の【DOM Explorer】タブを選択

DOM Explorerを選択することでHTMLコードが表示されます。

まとめ

JavaScriptの基本、使用方法、

JavaScriptによって出力されたHTMLコードの

各ブラウザーでの表示方法を紹介しました。

JavaScriptの知識を持っていれば

自分のWebページを他とは違う装飾やレイアウトなどにすることができ、

個性を発揮させることが出来ます。

ちゃんと動作をしているのか、

自分が見せたいように見せられているのか

この記事で紹介した方法を参考にして、

ぜひ自分だけのWebサイトを作ってみてください。

tacblog

プログラミング初心者や駆け出しエンジニア向けの記事を書いています