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!

javascript

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

投稿日:

Pocket

うも、チャーさんです。

 

あなたはhtmlの中にjavascriptを書いて、

使いたいと思っていませんか?

 

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

書いて、javascriptを使う方法を

書いています。

 

 

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

htmlの中にjavascriptを仕込み、

javascriptならではの処理をできるようになるでしょう。

 

ということで、あなたがhtmlの中に

javascriptを書いて使いたいならば、

このまま下にスクロールし読んでみてください。

 

スポンサードサーチ

htmlの中にjavascriptを書く方法

 

ということで、結論からです。

htmlの中にjavascriptを入れて使いたい場合は、

htmlファイルの中に<script></script>と書きましょう。

 

理由ですが、こうすると、htmlファイルでも、

javascriptを使うことが可能になるからです。

 

 

でhtmlファイルの中にと言われても、

「具体的にはどう書くねん」という声のために

サンプルを載せますと、

 

<html>
<head>
</head>

<body>
 ここから下はjavascriptで書いてます。<br>

<script>
 var text =”cat”;
 document.write(text);
</script>
</body>
</html>

 

みたいな感じでして、

これを実際にクロームのブラウザで、

このファイルを読み込むと、

 

htmlの中にjavascript

 

とみていただいてわかる通り、

変数textにcatと入れた部分を、

document.write(text)で表示させてますが、

 

それがちゃんとブラウザに表示されてますよね。

 

 

このように、htmlファイルの中に

javascriptを入れるには、

<script></script>というタグで囲い、

 

その中にjavascriptを書いてやれば、

htmlファイルの中にjavascriptを書いて、

javascriptを使えるというわけです。

 

 

<script>を書く場所は?

 

ちなみにこの<script></script>の配置場所ですが、

</body>の真上に書くことが多いです。

(ちなみに原理的にはどこにでもかけます)

 

理由ですが、書いてるコードを読む順番の関係でして、

htmlタグが読み込まれる前に、

javascriptの記述が読み込まれると、

 

場合によっては正常に動作しないからです。

 

 

例えばjavascriptで要素を取得するときに、

先にhtmlを読み込んでないと要素を取得できない

みたいなことが起こりかねないからです。

 

(getElementByIdを使う時とか)

 

また、javascriptをheadタグ内などに

書くと、ページの読み込みが遅くなる

ということもあるそうです。

 

 

ということで、<script>タグは</body>

の前に書くことが多いです。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

htmlの中にjavascriptを入れるには、

<script></script>タグを書いてやりましょう。

 

 

繰り返しになりますが、

以下の感じです。

 

<html>
<head>
</head>

<body>
 ここから下はjavascriptで書いてます。<br>
<script>
 var text =”cat”;
 document.write(text);
</script>
</body>
</html>

 

するとhtmlの中にjavascriptを書いて、

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

 

 

ということで、やり方がわかったと

思いますので、あなたの方でも

早速実践してみましょう。

 

やればあなたはjavascriptを使えるように

なりますよ。

 

javascriptを使えると、クリック動作で

処理を行うとか色々動的なことができるので、

面白くなりますよ。

 

 

ということで、まずはhtmlファイルを用意し、

そして<script></script>タグを

bodyタグのなかに書いてみてください。

 

そして<script>タグの間にJavascriptの記述を

書きましょう。

 

ためにdocument.write(“ここに表示させたい文章を書く”);

と書いてブラウザを読み込んでみましょう。

 

 

そしてちゃんと、()内に書いた文章が、

表示されれば成功です。

 

ということで、htmlの中にjavascriptを

書いてjavascriptを使う方法でした。

 

 

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

 

チャーさん

-javascript

スポンサードサーチ

関連記事

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

どうも、チャーさんです。   あなたはjavascriptでランダムな整数を、 表示したいですか?   この記事では、javascriptでランダムな整数を、 表示するコードと、そ …

no image

getElementByIdの意味や使い方をわかりやすく紹介します。

  どうも、チャーさんです。   あなたはgetElementByIdの意味はなんだろう? と思ってませんか?   この記事では、getElementByIdの意味や、 …

no image

javascriptでボタンを押したら色が変更できる方法「コード例つき」

どうも、チャーさんです。   あなたはjavascriptで、ボタンを押したら、 色が変更できる方法を探していませんか?   この記事では、ボタンクリックで、 色を変更する方法、コ …

no image

javascriptのエラーの確認方法「3秒で確認できます」

どうも、チャーさんです。   あなたはjavascriptのエラーの確認方法を、 知りたいと思っていませんか?     この記事では、javascriptのエラーを、 確 …

no image

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

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

最新記事

チャーさん

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

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

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