2017年06月 / 05月≪ 123456789101112131415161718192021222324252627282930≫07月

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--:--  |  スポンサー広告  |  EDIT  |  Top↑

2007.11.04 (Sun)

外部JSのブログへの導入について

<お知らせ~>
お遊びで設置しました(o^-^o) ご訪問記念に、お気軽に書いちゃってくださいねこちら

以下本編

皆様こにゃにゃちわ
今日は朝から息子①の受験する予定の中学の学校案内に参加してきました。日曜なのに珍しく早起きしたものですから眠くてたまらないのですが、気合い気合いで頑張ってますよ

さて本日は、以下以前から書こう書こうと思いつつ放置していた(ぉぃ)ジャバスクリプト関連の記事です。興味のない方は読み飛ばしてください。興味はあるけど難しそう・・・と思われた方は、なるべくわかりやすく書くように頑張りますのでまずは読んでみてから考えてください(笑)

今日扱うテーマは「JavaScriptファイルの外部化」です。
ご存知の方も多いかと思われますが、検索ロボットくんは、htmlファイル内に直接書かれたJavaScriptの記述を嫌う傾向にあるそうです。JavaScriptは記述がどうしても長くなりがちなので、ソースも複雑化して後から修正しようと思ったときに専ら「自分で書いたソースだけども何が何だかわけがわかりません」と言う状態になります(笑)
なので、ソースの簡略化のためにも、JavaScript(長いので以下JSと表記)やスタイルシート(長いのでCSSと呼びましょうw)は外部化することをお薦めします。
CSSに関してはまたの機会にするとして、今日はJSの外部化について説明します。

まず、次のふたつのJSが含まれるhtmlを見比べてください
サンプル① サンプル②

一見同じに見えますが、ソースを見て下さい。①は長いJSの記述がありますが、②はシンプルにJSを呼び出すためのタグのみが記述されています。
ちなみにサンプル②が呼び出している外部JSファイルはこちら
サンプル①のソース内の記述と見比べてみてください。外部JSファイルには宣言やコメントが記述されていませんね。外部JSファイルは宣言やコメントは記述せず、命令文のみを記述します。
詳細はJavaScript External File様の外部ファイルJSファイル関連の項目内「外部ファイルの基礎編⇒外部ファイルの基礎知識」を参照して下さいとてもわかりやすい解説がなされています

外部JSファイルは、ほとんどのブログで設置可能です。
ファイルのアップローダーがあればOKのはず。
外部JSファイルの作成ですが、私はメモ帳で作ってますメモ帳にJSを記述したら拡張子を.js、文字コードをUTF-8で保存します。ファイル名はお好きに命名してくだされw

さて、外部JSの作成と出来上がったJSファイルをhtmlから呼び出す方法はここまでですが、これをブログで流用する場合(サイドバーへ呼び出す場合)ですが、JSの記述に数字や日本語が含まれている場合、ただ単に呼び出しタグを記述しただけでは思いっきり文字化けする場合があります

先ほど「文字コードをUTF-8で保存します」と書いたとおり外部JSファイルは文字コードUTF-8で保存されていますから、サイドバーに入れる呼び出しタグは

<SCRIPT TYPE="text/javascript" SRC="あなたの作成したJSファイル名.js"charset="UTF-8"></SCRIPT>


のように、かならず、表示させる文字コードの記述を追加して下さい。
うまく設置できていれば、当ブログサイドバー一番下「フリーエリア」のようになるはずです。

と言うことでかなり端折って説明しましたが、おおまかにはこんな感じです、と言うことで

JSについてお勉強したい方は
JavaScript External File様で。
JSを使った楽しい仕掛けをページに導入したい方は
うさのJavaScript講座様で。
私がいつも参考にさせて頂いているサイト様です

また、この記事、及びサイト作成・運営に関するご質問は随時お受けしています。コメント欄またはサイドバー内メールフォームからどうぞ。
ご質問への回答は、ブログをご覧の皆様の参考になりそうなものは記事内で紹介させていただくこともございますのでご了承下さい

では、今から簡単10秒メシの材料を買いにスーパーへ行ってきます
また後程お会いしましょう

何も出ませんがとりあえず押してみましょう(笑)
スポンサーサイト

テーマ : 主婦の日常日記 - ジャンル : 日記

17:03  |  HTMLチップス  |  CM(7)  |  EDIT  |  Top↑

Comment

●こんばんは(〃∇〃)

今日はJSの外部化ですね。

あたしは、いつも思うんですが、全く分からない方に、出来る限り分かりやすく説明するのって難しいですよね・・・。

個人個人に、これをこうやって・・・って説明の方が、楽かも?と思ってしまったなちゅでした。

うさぎに↓「で、さいきんどうよ」と聞かれてしまったので(笑)

近況報告w

最近、疲れが取れなくて、寝ても寝ても眠たいです。胃潰瘍も再発の兆しが・・・(;_;)
なちゅ |  2007年11月04日(日) 20:22 |  URL |  【コメント編集】

●>管理人より

>なちゅさん
(*¨)(*..)(*¨)(*..)うんうん ほんと難しいですi-240
訪問者さんは当然、初心者さんから上級者さんまで幅広いですから、どこに焦点を当てて解説したら良いのか非常に悩みますねi-238
余談ですが以前役員がらみの仕事で、PC教室の講師を頼まれたんですが、PC教室は開講すると絶対に初心者さんからは「難しくて分からない!」上級者さんからは「簡単すぎてつまらない」と苦情が来るとかでi-182結局、PC教室はやめておやつ作り教室に変更しました(笑)
体調大丈夫ですか?i-230頑張りすぎは禁物ですよi-199時々は一日のんびりリラックスして、疲れを取って下さいねi-228
hiro |  2007年11月04日(日) 22:21 |  URL |  【コメント編集】

こんばんは^^

息子さん、中学受験なんですね。頑張れ~息子さん!

JavaScriptですか。。
わたしには未知の世界です><
昔勉強したような記憶があるのですが、
毎日死滅していく脳細胞と共に、消えてしまいました^^;;

わたしもブログに何か一つくらい遊びを入れたいなって
思っているので、
その時はこの記事を参考にさせていただきます。
ユキチャピ |  2007年11月05日(月) 18:21 |  URL |  【コメント編集】

●今はほとんど理解不能ですが

こんばんわ。望月です。

今日の記事に対するコメントは・・無理です。

それで、映画のことを。

昨日行きました。でも

人が多くて、Always・・は観ませんでした。

違う洋画を観ました。

予定外の映画でした。

でも、それなりに、

そこそこ楽しみましたよ。

では、またです。
望月です |  2007年11月05日(月) 20:32 |  URL |  【コメント編集】

●>管理人より

>ユキチャピさん
そうなんですよ実は(;^_^A
私は特にお受験派でもなく、反対派でもなく、と言う感じなんですけど本人が一度受験に挑戦してみようかなぁと言うので、私の実家の方にある私立を見学に行きました。ここからは少し遠いんですけど、歴史のある良い校風の学校なので。息子も実際に学校を見てさらに乗り気になったようですw
JavaScriptはセキュリティ対策やページデザインなど実用性のあるものから、ページに効果を入れるものまで色々あるのですが、まずはお試しにページにちょっと効果をつけるような楽しいものから取り入れてみて下さい(o^-^o)
文字書きも晴れてわいどになったので(笑)これからは時々実用記事もUPしていきますので参考になるものがあれば(あるのだろうかw)ご自由に取り入れて下さいね。

>望月かずさん
映画の記事拝見しましたよ~(o^-^o)
Always・・・やっぱり人多かったですか(||||▽ ̄)
こちらは朝だったからか田舎だからか(笑)思っていたより空いていたので、割りに良い席で鑑賞することができました。
夏休みにドラえもん(笑)観にいった時はすごかったですけどねぇ。席が無くて最前列で観ました(;^_^A
それにしてもかずさんのブログ、絶好調で順位上げてますねー!私も応援してますよー(o^-^o)
hiro |  2007年11月06日(火) 07:56 |  URL |  【コメント編集】

●とても参考になりました。

JSについて。
とても参考になりましたよ。
繭 |  2007年11月06日(火) 21:37 |  URL |  【コメント編集】

●>管理人より

>繭さん
こんばんはi-179
ほんとですかi-237そう言って頂けると嬉しいです。
この手の記事は、壊死しかかってる左脳フル活動で必死こいて書いてるわりに読者ウケが悪いという、書き甲斐ない事この上ない感じなので(笑)少しでもお役に立てれば書いた甲斐があります~i-237
それにしても、私ほんとに繭さんのファンで、過去日記拝見して、楽しい記事に笑い、悲しい記事に泣きつつ、いっぱいパワーも貰いましたi-237
お休みの間も、絶対帰ってきてくれるはずi-199って、もういい加減宣伝メールにウンザリしかけていたエディタからも退会せずに(笑)待ってて良かったですi-237
音楽活動もされてたんですよねi-236実は私も昔バイオリン齧ってました(;^_^A
いっぱい才能をお持ちの繭さんは私の憧れです。これからもブログでパワーをお裾分けしてくださいねi-234
hiro |  2007年11月06日(火) 23:11 |  URL |  【コメント編集】

コメントを投稿する


 管理者だけに表示  (非公開コメント投稿可能)

▲PageTop

 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。