Java Script 外部ファイル ( js File ) の初級編

JavaScript 外部ファイル ( js File ) の何から始めていいか解らない方

『 JavaScript 外部ファイル ( js File ) 質問編』

JavaScript について知識がなく、全く解りません。初歩的な外部ファイル ( js File ) の仕方なども読んでて理解できないのです(T_T)
JS File の何から始めていいか解らない俺に何かアドバイスいただけませんか？

Java Script に感動してみましょう

１番目・最初は JavaScript に感動してもらえそうなことから始めましょう。

ここの順番でやってみて下さい。
まず最初に、こちらのファイルをパソコンに保存します。
「HTMLファイル」
上のリンク「HTMLファイル」をクリックし、記述をメモ帳にコピぺして下さい。
HTMLファイルのソースを下記の方法で、パソコンの「マイドキュメント」に保存して下さい。
メモ帳「 Notepad 」を開いて、先ほどコピーした記述を貼り付けて下さい。

メモ帳「 Notepad 」が解らない方はこちら

メモ帳の左上のファイルと書いてある所をクリックして、名前を付けて保存を選択します。
ファイル名の場所に、tokei2.html と記入して下さい。
ファイルの種類、文字コードのところは何もしないでください。
保存する場所はパソコンの「マイドキュメント」にして下さい。
最後に保存ボタンをクリックすれば、パソコンに保存されています。

２番目・・・パソコンに保存された「tokei2.HTMLファイル」の確認

パソコンの「マイドキュメント」に保存された「tokei2.HTMLファイル」を確認してみましょう。
パソコンの「マイドキュメント」の上でダブルクリック or 右クリックして開くを選択して、「マイドキュメント」を開いてください。
先ほど保存した「tokei2.htmlファイル」がありましたか？？？
保存した「tokei2.htmlファイル」の上でダブルクリック or 右クリックして開くを選択して、「tokei2.htmlファイル」を開いてください。
ちゃんと出来ていればパソコン上で、 JavaScript で動く時計が表示されたはずです。
正確に言いますと、
この時計のスクリプトは Dynamic HTML（DHTML）と言います。
Dynamic HTML（DHTML）の事はここで解説はしません。
ここで専門的な事を述べても混乱するだけですので！
Dynamic HTML（DHTML）の事をもっと知りたい方は、
ご自分で検索してください。

JSファイルやHTMLファイルの保存

３番目・・・『 test-test.HTMLファイルをパソコンに保存します。』

このTEXTファイルは、先ほどとは違い、JavaScript ( DHTML ) の記述がありません。
「test-test.HTMLファイル」
HTMLファイルを１番目の時と同じ方法で、パソコンの「マイドキュメント」に、ファイル名の場所に、test-test.html と記入して保存して下さい。

４番目・・・『 JS ファイルをパソコンに保存します。』

「tokei3.js ファイル」
上のリンク「clock3.js ファイル」をクリックし、記述をメモ帳にコピぺして下さい。
JSファイルのソースを下記の方法で、パソコンの「マイドキュメント」に保存して下さい。
メモ帳の左上のファイルと書いてある所をクリックして、名前を付けて保存を選択します。
ファイル名の場所に、tokei3.js と記入して下さい。
ファイルの種類、文字コードのところは何もしないでね！
保存する場所はパソコンの「マイドキュメント」にして下さい。
最後に保存ボタンをクリックすれば、パソコンに tokei3.js ファイルが保存されています。
「hoshi4.js ファイル」
上のリンク「hoshi4.js ファイル」をクリックし、記述をメモ帳にコピぺして下さい。
JSファイルのソースを下記の方法で、パソコンの「マイドキュメント」に保存して下さい。
メモ帳の左上のファイルと書いてある所をクリックして、名前を付けて保存を選択します。
ファイル名の場所に、hoshi4.js と記入して下さい。
ファイルの種類、文字コードのところは何もしないでね！
保存する場所はパソコンの「マイドキュメント」にして下さい。
最後に保存ボタンをクリックすれば、パソコンに hoshi4.js ファイルが保存されています。

JS File や HTML ファイルをメモ帳で編集します。

５番目・・・『 HTMLファイルを編集します。』

「マイドキュメント」に保存されたtest-test.HTMLファイルを編集します。
test-test.HTMLファイルを編集するには、パソコンの「マイドキュメント」の上でダブルクリック or 右クリックして開くを選択して、「マイドキュメント」を開いてください。
保存した「test-test.htmlファイル」の上で右クリックして「プログラムから開く」を選択して、次に「 Notepad 」を選択します。
「 Notepad 」とはメモ帳のことですよ。
「 Notepad 」が見つからない場合は、パソコンで「 Notepad 」を一度も使用していない為です。
「プログラムから開く」を選択して、次に「プログラムの選択」を選択します。
「ファイルを開くプログラムの選択」というところで「 Notepad 」を探してください。
必ずありますから・・・・・見つけましたら「 Notepad 」の上でクリックして、一番下にあるＯＫボタン押して完了です。
「 test-test.HTMLファイル」のメモ帳が開きましたよね。
test-test.HTMLファイルの中の記述に下記の書き込み部分があります。

まず、ここの部分を削除してください。
削除した部分に、先ほど保存したJSファイルを呼び出すタグを記入します。
下記のどちらか好きな方のタグを、削除した部分に記入して下さい。
<script src="hoshi4.js" type="text/javascript"></script>
<script src="tokei3.js" type="text/javascript"></script>
編集が終わりましたら、
HTMLファイルを、パソコンの「マイドキュメント」に保存して下さい。
メモ帳の左上のファイルと書いてある所をクリックして、「上書き保存」を選択します。上書き保存をクリックしただけで、パソコンに保存されています。
HTML(ホームページ作成)を手打ちタグで作る方もこの方法で編集しています。
CSSファイルやJSファイルの編集の仕方もこの方法で編集しますので、必ず習得してください。
メモ帳「 Notepad 」について
JavaScript 外部ファイルの保存の仕方 - 外部ファイル化のページも一読して下さい。

６番目・・・パソコンに編集し保存された「test-test.HTMLファイル」の確認

パソコンの「マイドキュメント」に保存された「test-test.HTMLファイル」を確認してみましょう。
パソコンの「マイドキュメント」の上でダブルクリック or 右クリックして開くを選択して、「マイドキュメント」を開いてください。
先ほど編集し直して保存した「test-test.htmlファイル」の上でダブルクリック or 右クリックして開くを選択して、「test-test.htmlファイル」を開いてください。
ちゃんと出来ていればパソコン上で、 JavaScript 外部ファイル ( js File ) から呼び出された物が表示されているはずです。

JavaScript 外部ファイル ( js File ) の作成のポイント

基本

JavaScript 外部ファイル ( js File ) の作成は、これら（上記）の作業を常にしますので、必ず習得出来るまで、頑張ってください。
まずは・・JavaScript 外部ファイルのサンプルリストの中の簡単なサンプルより挑戦（コピペ）し、メモ帳で・・その記述を自分の好きなデザイン（タグなどの変更）に改造しましょう。
HP改造前の基礎知識編のHP改造前の準備編のところも読んで下さい。
こちらも参照。魔法の i -ランドの画像倉庫に外部スクリプトファイルをアップする方法
JavaScript 外部ファイル ( JS File ) の記述が出来るようになり、パソコンにも保存が出来る様になりましたら、自分の使用しているサーバーにアップし、各自のＨＰにて動作等の確認して、異常がなければ完成です。

追記・・上記の事柄に挑戦された方々へ

パソコンの中だけでもJavaScript 外部ファイル ( js File ) の動作等の確認は出来ます。
まず最初に自分の Webサイトのソースを表示させ、そのソースを自分のパソコンに保存しておきます。
メモ帳の左上のファイルと書いてある所をクリックして、名前を付けて保存を選択します。
ファイル名を自分の好きな「半角英数字」名前 + .html に書き直して下さい。
例・・　bisoy.html　
ファイルの種類、文字コードのところは何もしません。
保存する場所はパソコンの「マイドキュメント」にして下さい。
最後に保存ボタンをクリックすれば、パソコンにHTMLファイルとして保存されています。

JS File や HTML ファイルの編集作業

パソコンに保存した・・貴方のWebサイトの　HTMLファイル　　に、パソコンに保存した JavaScript 外部ファイル ( js File ) の呼び出しタグを追加して、上書き保存します。
例・・この外部ファイル ( js File ) のタグを追加してみましょう。
　<script src="hoshi4.js" type="text/javascript"></script>　
記述する場所は<body>部分より後に。

魔法のｉ－らんどをご利用の場合

魔法のｉ－らんどのＨＰのソースの最初の方に下記と同じ部分があります。
ソースの中から見つけて下さい。 [ｹｰﾀｲMode表示]</b></a></font></div><br>
その部分のすぐ後にJavaScript 外部ファイル ( js File ) の呼び出しタグを追加します。
[ｹｰﾀｲMode表示]</b></a></font></div><br><script src="hoshi4.js" type="text/javascript"></script>

パソコンに編集し保存された HTMLファイルの確認

パソコンの「マイドキュメント」に保存された「HTMLファイル」を確認してみましょう。
パソコンの「マイドキュメント」の上でダブルクリック or 右クリックして開くを選択して、「マイドキュメント」を開いてください。
先ほど保存した「WebサイトのHTMLファイル」がありますよね！！！
パソコンに保存してある「WebサイトのHTMLファイル」の上でダブルクリック or 右クリックして開くを選択して、「HTMLファイル」を開いてください。
一連の作業がしっかりと出来ていれば・・・パソコン上で JavaScript 外部ファイル ( js File ) が追加されている貴方のWebサイトが表示されているはずです。

見本

『 test-test.html 』

下記の見本のページは JavaScript を使用して別窓表示です。
何も無いソースの見本
このファイルには JavaScript の記述がありません。（何も無い状態です。）
ちゃんと出来ていればパソコン上(ローカル)で、
JavaScript 外部ファイルから呼び出された物が表示されています。