Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

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

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

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

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

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

no image

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

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

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

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

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

no image

javascriptでランダムに画像を表示する方法「コードコピペOKです」

どうも、チャーさんです。   あなたはjavascriptでランダムに画像を、 表示させたいですか?     この記事ではjavascriptでランダムに画像を、 表示さ …

no image

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

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

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

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

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

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

最新記事

チャーさん

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

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

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