• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/05/10

[Web初心者のための備忘録]煩雑なソースコードを避けるためにJavaScriptを外部ファイルから読み込む

JavaScript: The Good Parts
JavaScript: The Good Parts / nyuhuhuu

ジャバー
@OZPA です。

jqueryをお勉強し始めて「ページのトップに戻る」ボタンを実装してみたりしているわけなんですが、今後のことを考えましてJavaScriptを外部ファイルから読み込もうということで。

以下備忘録。

参考:JavaScriptを外部ファイルへ | JavaScriptのTips集 – ドットインストール


スクリプトを外部ファイルから読み込むメリット

外部ファイルにスクリプトをまとめておくことにより、ソースコードがごちゃごちゃしてしまうのを防ぐことができるのと共に、管理が楽になります。

手順

外部ファイルからJavaScriptを読み込むための手順ですが

  1. スクリプトファイル(myscript.js)を作成する
  2. サーバにアップロード
  3. ヘッダーに、jsファイルを読み込むためのタグを書く

となります。

「myscript.js」の作成

まずはスクリプトタグをまとめたファイルを作成します。

 

Skitched 20120510 063429

今使用しているスクリプトで、まとめたいモノをごそっとテキストエディタにカット&ペースト。
この時、<script>,</script>タグを消去しないとダメなので気をつけること。
(最初これに気がつかず上手く動かなかった)

ファイルができあがったら、文字コードをUTF-8にして「myscript.js」と名前を付けて保存。

 

サーバにアップロード

Skitched 20120510 054832

今作成した「myscript.js」をサーバにアップロード。

 

ヘッダーで「myscript.js」を読み込む

あとは<head>タグ内に

<head>

(中略)

<script src="/myscript.js"></script>

(中略)
</head>

でok。きちんとJavaScriptが働いていることを確認しましょう!

そんなわけでWeb初心者おつぱの備忘録でございました。これから覚えたことをどんどんとアウトプットしていこうと思います。

よーし、本格的にjqueryがんばるぞぉー!

[はじめてのjquery]ブログにあるととっても便利!「ページのトップに戻る」ボタンを実装してみた!!

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×