HTML javascript

javascriptをhtml内で使う方法「完全初心者向け」

投稿日:

Pocket

うもチャーさん(@chaa___san)です。

 

あなたはjavascriptをhtmlで使えないのか?

と疑問に思っていませんか?

 

結論からいうと使えます。

 

で、この記事ではjavascriptをhtmlの中で、

使う方法について書いてます。

 

 

なのであなたがこの記事を読めば、

javascriptをhtmlのなかで使うことができ、

いろんな動作を使えるようになります。

 

なので、javascriptをhtmlで使いたい場合は

ぜひ今すぐ下にスクロールして読んでください。

 

スポンサードサーチ

javascriptをhtmlの中で使う方法を2つ紹介

 

javascriptをhtmlの中で使いたければ、

以下のどちらかの手段を使えばOKです。

 

1htmlのbodyタグの中にscriptタグを書く。

2javascriptのファイルを読み込む。

 

なぜならこのどちらかの方法を使えば、

htmlファイルの中でjavascriptが使えて、

ちゃんと動いてくれるからです。

 

 

では一応コード例を書いておきますので、

参照してください。

 

1htmlのbodyタグの中にscriptタグを書く。

<body>

<script>

ここにjavascriptのコードを書くと動きます。

例alert(“”);など

</script>

</body>

 

2javascriptのファイルを読み込む

<head>

<script type=”text/javascript src=”ファイル名.js”></script>

</head>

 

 

それでは次に具体例として、

これらを書いたらどんな動きをするのか

実物をお見せしていきます。

 

1の方法:htmlファイルのbodyタグ内にjavascriptを、

書いた場合

 

 

こんな感じにちゃんとjavascriptの記述である、

alertが動いてくれてますね。

 

それでは2番目の方法である外部ファイルを、

読み込む場合をみてみましょう。

 

 

こんな風にindex3.jsという外部ファイルを、

読み込んでますが、その中に書いた、

 

 

javascriptの記述であるalertが機能してくれて

これは外部ファイルから読み込んでます。

が表示さててます。

 

こんな風にhtmlファイル内でも、

javascriptを使うことができます。

 

 

そしてhtmlだけではできないような、

いろんな機能を使うことができるのです。

 

スポンサードサーチ

javascriptをhtml内で使う具体的なステップ「初心者向け」

 

ではやり方の補足になりますが、簡単です。

 

ステップ1まずはエディターを開きましょう。

 

*エディターとはプログラミングのコードを書く、

ソフトのようなものです。

 

ステップ2:htmlのテンプレを書きましょう。

 

そしてそれを開いたらhtmlのコードを、

書きましょう。

 

よくあるhtmlのテンプレ文がこれです。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=”utf-8″ />
</head>
<body></body>
</html>

 

ステップ3:どっちの方法で書くか決めましょう。

 

でこれが書けたら、どっちの方法で、

javascriptを使うか決めましょう。

 

選び方は、javascriptで書く内容が少ない、

または外部ファイルを用意するのがめんどくさいなら、

そのままbodyタグの間にscriptタグを書きましょう。

 

bodyタグ内に書く場合

 

<body>

<script>

ここにjavascriptのコードを書くと動きます。

例alert(“”);など

</script>

</body>

 

外部ファイルから読み込みたい場合

 

もし外部ファイルを読み込みたいなら、

headタグの間に以下の記述を書きましょう。

 

<head>

<script type=”text/javascript src=”ファイル名.js”></script>

</head>

 

ファイル名.jsのファイル名はあなたがファイル名に

つけた名前でokです。

 

 

例えばsample.jsみたいな名前をつけたら、

ファイル名のとこはsampleと入力しましょう。

 

そしてそれができたら次に、

javascriptの記述を書いていきましょう。

 

ステップ4ブラウザで動くか確認

 

そして書き終わったら、

ブラウザで表示して動くか確かめましょう。

 

さて、それでは早速実践してみましょう。

まずは試しに、bodyタグの中にscriptタグを

書いてみてください。

 

 

参考例

<body>

<script>

ここにjavascriptのコードを書くと動きます。

例alert(“”);など

</script>

</body>

 

そしてalertの(””)のダブルクオーテーションの間に、

好きな文章を書いてみましょう。

 

そうすれば書いた内容が表示されますよ。

 

スポンサードサーチ

まとめ

 

htmlでjavascriptを使うなら、

 

1htmlのbodyタグの中にscriptタグを書く。

2javascriptのファイルを読み込む。

 

このどちらかの方法を使えば、

htmlでjavascriptが使えます。

 

 

それでは読んでもらってありがとうございました。

 

チャーさん(@chaa___san)

 

-HTML, javascript


スポンサードサーチ

関連記事

no image

htmlのspanとは?使い道を紹介します。「意外に便利」

  どうも、チャーさんです。   あなたはspanタグとは何だ? spanタグって何に使えばいいの? と思っていませんか。   この記事では、spanタグとは、 そしてs …

no image

javascriptでalert(アラート)を表示させる方法

どうも、チャーさんです。   あなたは、javascriptでalert(アラート)を、 表示させたいと思っていませんか?   この記事では、javascriptを使って、 ale …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

二重ループをjavascriptでする方法

  どうも、チャーさん(@chaa___san)です。   あなたはjavascriptで二重ループを するにはどう書けばいいのか、 と思っていませんか?   この記事で …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

htmlの中にjavascriptを書いて使う方法

どうも、チャーさんです。   あなたはhtmlの中にjavascriptを書いて、 使いたいと思っていませんか?   この記事では、htmlの中にjavascriptを 書いて、j …

no image

htmlの画像の階層について詳しく説明(知らないと画像表示で困ります)

html 画像 階層   どうも、チャーさんです。   あなたはhtmlファイルで画像を表示したいのに、 できない。と悩んでいませんか?   実は画像ファイルが表示できな …

no image

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

javascriptをコンソールで実行する方法

どうも、チャーさんです。   あなたはjavascriptを今すぐに実行できる、 そんな方法を探していますか?   コンソールという機能を使えばそれは、 可能でして、この記事ではコ …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

no image

javascriptでボタンをクリックしたらアラートが表示されるコード

どうも、チャーさんです。   あなたはjavascriptでボタンをクリックしたら、 アラートが表示される方法とコードを、 探していますか?     この記事では、ボタン …

no image

javascriptでcssを操作する手順と方法

どうも、チャーさんです。   あなたはjavascriptでcssを操作したい。 そう思っていませんか?   この記事では、javascriptを使って、 cssを操作する方法を書 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。