JavaScriptを外部ファイルにする方法とは?

このQ&Aのポイント
  • JavaScriptの一部を外部ファイルにすることで、コードをすっきりさせることができます。
  • 外部ファイルにJavaScriptを保存し、それを読み込むことで、HTMLファイルがシンプルになります。
  • ファイルが分割されるため、コードの管理が効率的になり、修正や保守が容易になります。
回答を見る
  • ベストアンサー

このJavaScriptを外部ファイルにしたいのですが

下記のjavascript部分を外部ファイルにしてすっきり させたいのですが方法がわかりません。 どなたかよろしくお願いします。 <head> <script type="text/javascript"> <!-- var txt = new Array(4); txt[0] = "ホームページへようこそ!!"; txt[1] = "4月になりました"; txt[2] = ""; txt[3] = "お車は駐車場へ入れましょう。"; var speed1 = 50; var speed2 = 300; var i = 1; var k = 0; var j = 0; var tID1,tID2; var nai; function txtScr(){ if(k >= txt.length){k = 0;} nai = txt[k].substring(0,i); document.formd.denkou.value = nai; i++; if(i > txt[k].length){ i = 0; k++; } if(i == 0){ clearTimeout(tID1); Scr(); }else{ tID1 = setTimeout("txtScr()",speed1); } } function Scr(){ document.formd.denkou.value = nai.substring(j,nai.length); j = j + 1; tID2 = setTimeout("Scr()",speed2); if(j > nai.length){ j = 0; clearTimeout(tID2); txtScr(); } } //--> </script> </head> <body onLoad="txtScr();"> <form name="formd" action="index.html" STYLE="margin: 4px;"> <noscript class="red"> JavaScriptの表示を有効にするか<br> JavaScript対応ブラウザで見てください。<br> </noscript> <input type="text" name="denkou" value="お知らせ" size="60%" tabindex="6" accesskey="f" style="background-color:#ccffcc;color:#333333;border:0px none #ffffff;font-size:22px;font-weight:bold;"> </form>

質問者が選んだベストアンサー

  • ベストアンサー
  • KI401
  • ベストアンサー率53% (44/82)
回答No.1

<!--から//-->までの内容を何でもいいから適当に名前をつけて保存(テキスト)。 とりあえずhoge.jsとでもして話を進める。 head内に <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="hoge.js"></script> を記述する。 終わり。 外部スクリプトぐらいググろうや?

nayamihito
質問者

お礼

すっきりしました。 ありがとうございます。

関連するQ&A

  • javascriptタグを外部にしたい

    <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> DWでデフォルトでロールオーバーイメージを使ってスクリプトが出ています。SEO的にこれを外部に移したいのですが、どうやればいいのでしょうか?CSSと同じ記述でいいのでしょうか・・・ SEO的にはスクリプト自体使わないほうがいいのはわかっています

  • JavaScriptを外部ファイルにするとロールオーバーが機能しない

    ホームページビルダー11を使っているのですが、 JavaScriptを外部ファイルにして読み込ませると、ロールオーバー部分の画像のみ切り替わりません。 ////////////////////////////////////////////////// ■外部ファイルの記述内容■ <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_ROV_50 function HpbImgPreload() { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var imgName = HpbImgPreload.arguments[0]; var cnt; swImg[imgName] = new Array; for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++) { swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image(); swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt]; } } } } function HpbImgFind(doc, imgName) { for (var i=0; i < doc.layers.length; i++) { var img = doc.layers[i].document.images[imgName]; if (!img) img = HpbImgFind(doc.layers[i], imgName); if (img) return img; } return null; } function HpbImgSwap(imgName, imgSrc) { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var img = document.images[imgName]; if (!img) img = HpbImgFind(document, imgName); if (img) img.src = imgSrc; } } } HpbImgPreload('_HPB_ROLLOVER1', 'images/request.gif', 'images/request2.gif'); //--> </SCRIPT> ////////////////////////////////////////////////////// 外部ファイル読み込み時のhtmlタグ <SCRIPT type="text/javascript" scr="images/ファイル名"></SCRIPT> 恐らく、ホームページビルダーの独自性の問題だと思うのですが、 どうすればロールオーバーを機能させることができるでしょうか? 宜しくお願いいたします。

  • JavaScriptについての質問です。

    ガウスの消去法による解の求め方をプログラムしたいのですが、上手くいかなかったので質問しました。以下のプログラムから実行はできるのですが、解が求められていませんでした。 どこを変えればきちんとできるのでしょうか、回答お願いします。 var A=[[1,-1,1],[1,2,0],[2,0,3]],b=[5,1,9]; WScript.Echo("ガウスの消去法の解:\n"+Gauss(A,b)); function Gauss(A,b) { var s,x=new Array(A.length),M=new Array(A.length); for(var i=k+1;i<A.length-1;k++) { for(var i=k+1;i<A.length;i++) { M[i]=new Array(A.length); M[i][k]=(A[i][k])/(A[k][k]); for(var j=k+1;j<A.length ;j++) A[i][j]=A[i][j]-(M[i][k]*A[k][j]); b[i]=b[i]-(M[i][k]*b[k]); } } for(var i=A.lengh-1;i>=0;i--) { s=0; for(var k=i+1;k<A.length;k++) s+=A[i][k]*x[k]; x[i]=(1/A[i][i])*(b[i]-s); } return x; }

  • アメーバブログに外部Javascriptを利用して、以下を実現したいの

    アメーバブログに外部Javascriptを利用して、以下を実現したいのですが可能でしょうか? 【実現したい】 ・各記事に表示 ・リツイートボタン ・各ソーシャルブックマーク ・「Facebookのいいね」ボタン 【可能な限り一つのjavascriptで実現したい】 リツイートボタンを実現しているjavascriptに、「各ソーシャルブックマーク」と「facebookのいいねボタン」を組み込みたいです。 ▼リツイートボタンのjavascript▼ <!-- $(document).ready(function(){ var tid = 'twitteracount'; var page_url = location.href; if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) { var entries = $(".newentrytitle a"); var classname = ".updatetime"; var flg = 0; } else { var entries = $(".foot a:contains('記事URL')"); var classname = "div.entry .subContents"; var flg = 1; } for (i = 0; i < entries.length; i++) { var url = entries[i]; if (flg == 0) { title = entries.eq(i).text(); } else { title = $("div.entry h3.title").eq(i).text(); } var twitter_btn = '<p>この記事を共有する</p><a href="http://twitter.com/home/?status=' + encodeURIComponent('RT @'+tid+': '+title + ' ' + url) + '" target="_blank"><img border="0" alt="ツイッターに投稿する" src="../common/twitter/button/twitter-button038.png" /></a>'; $(classname).eq(i).append(' <div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px dotted rgb(153, 153, 153); padding: 8px;">' + twitter_btn + '</div> '); } }) // --> ▼ソーシャルブックマーク▼ <a href='javascript:location.href="http://b.hatena.ne.jp/add?mode=confirm&amp;url="%2bencodeURIComponent(location.href)%2b"&amp;title="%2bencodeURIComponent(document.title);' style="font-size:12px; text-decoration:none;"><img src="common/img/hatenasbm.gif" alt="はてなブックマーク" width="14" height="12" /></a>

  • javascript バブルソート

    javascriptでバブルソートの実装をしています。 リストにある数値を取得して昇順 or 降順したいのですがうまくいきません。 方法を教えていただけないでしょうか。 よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript"> function bubbleSort(){ var liVal = document.getElementsByTagName("li"); var array = []; for(var i = 0; i < liVal.length; i++){ for(var j = 0; j < liVal.length-i-1; j++){ array[j] = parseInt(liVal[j].innerHTML); if(array[j] > array[j+1]){ var n = array[j]; array[j] = array[j+1]; array[j+1] = n; } } } } </script> </head> <body> <ul> <li>10</li> <li>5</li> <li>48</li> <li>22</li> <li>679</li> </ul> <p><a href="javascript:void(0);" onclick="bubbleSort()">ソート(降順)</a></p> </body> </html>

  • javascriptについて

    現在HPを作成していてjavaのプルダウンメニューを設置していますが 最初からメニューが開いた状態になります。ちなみにsdmenu.jsを使用しています。 最初開いた時にメニューが閉じるようにできますでしょうか? function SDMenu(id) { if (!document.getElementById || !document.getElementsByTagName) return false; this.menu = document.getElementById(id); this.submenus = this.menu.getElementsByTagName("div"); this.remember = true; this.speed = 4; this.markCurrent = true; this.oneSmOnly = false; } SDMenu.prototype.init = function() { var mainInstance = this; for (var i = 0; i < this.submenus.length; i++) this.submenus[i].getElementsByTagName("span")[0].onclick = function() { mainInstance.toggleMenu(this.parentNode); }; if (this.markCurrent) { var links = this.menu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) if (links[i].href == document.location.href) { links[i].className = "current"; break; } } if (this.remember) { var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); var match = regex.exec(document.cookie); if (match) { var states = match[1].split(""); for (var i = 0; i < states.length; i++) this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); } } }; SDMenu.prototype.toggleMenu = function(submenu) { if (submenu.className == "collapsed") this.expandMenu(submenu); else this.collapseMenu(submenu); }; SDMenu.prototype.expandMenu = function(submenu) { var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var links = submenu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) fullHeight += links[i].offsetHeight; var moveBy = Math.round(this.speed * links.length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight + moveBy; if (newHeight < fullHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = ""; mainInstance.memorize(); } }, 30); this.collapseOthers(submenu); }; SDMenu.prototype.collapseMenu = function(submenu) { var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight - moveBy; if (newHeight > minHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = "collapsed"; mainInstance.memorize(); } }, 30); }; SDMenu.prototype.collapseOthers = function(submenu) { if (this.oneSmOnly) { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); } }; SDMenu.prototype.expandAll = function() { var oldOneSmOnly = this.oneSmOnly; this.oneSmOnly = false; for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className == "collapsed") this.expandMenu(this.submenus[i]); this.oneSmOnly = oldOneSmOnly; }; SDMenu.prototype.collapseAll = function() { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); }; SDMenu.prototype.memorize = function() { if (this.remember) { var states = new Array(); for (var i = 0; i < this.submenus.length; i++) states.push(this.submenus[i].className == "collapsed" ? 0 : 1); var d = new Date(); d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); } };

  • Javascriptで二次元配列で高次元の配列サイズを取得する方法を教えてください。

    Javascriptで二次元配列で高次元の配列サイズを取得する方法を教えてください。 var data = [ [1,2,3], [4,5,6], [7,8,9] ]; for (var i = 0; i < data.length; i++){ for (var j = 0; j < data[i].length; j++){ <--- ここで lengthのオブジェクトがNullというエラーになります。 alert(data[i][j]); } } よろしくお願いいたします。

  • JavaScript → VB 関数の中の関数

    あるページのプログラムをVBに置き換えて利用したいのですが、 どう書き換えたらvbに実装できるかわかりません このページのスクリプトです。 http://lagstyle.com/icm/icm.html var getTotalProbability = function(player, rank) { var ranking = []; var ret = 0; // 内部関数で再帰 var makeRanking = function() { // 自分の順位なら、最後の順位に自分を入れて確率を計算 if(rank == ranking.length) { ranking.push(player); ret += getProbability(ranking); ranking.pop(player); return; } for(var i = 0; i < 10; i++) { if(i == player) { continue; } for(var j = 0; j < ranking.length; j++) { if(ranking[j] == i) { break; } } if(j != ranking.length) { continue; } // 他人を次の順位に入れて再帰する ranking.push(i); makeRanking(); ranking.pop(i); } }; makeRanking(); return ret; }; JavaScriptの 関数の中の関数、 再帰などを vbに置き換えて実装することは可能でしょうか? またその方法を教えていただきたいです。

  • パス付きサイトのjavascript解析

    とあるwebサイトにjavascriptでパスがかかっていたので、ソースを読んだのですがなぜそうなるのかがわかりませんでした。 javascriptの勉強をするために、どういう仕組みでパスをかけているのかを教えて下さい。 (パスを教えてくださいと言っているわけではありません。私のそのサイトへの入室を許可されているのでパスは知っています。) どの変数をどこへ渡してどうこう程度でいいのでお願いします。 <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function _HpbChkPwd(keyin,escEncrypted,defaultUrl,target) { var encrypted = unescape(escEncrypted); var indexbase = " !\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~"; var passlen = keyin.length; var enqlen = encrypted.length; var decrypted = ""; var decryptedPassword = ""; var decryptedPath = ""; var targetUrl = ""; var i, j, k, chr1, chr2, nbase; var needPassword = "%u30D1%u30B9%u30EF%u30FC%u30C9%u3092%u5165%u529B%u3057%u3066%u304F%u3060%u3055%u3044%u3002"; var badPassword = "%u30D1%u30B9%u30EF%u30FC%u30C9%u304C%u6B63%u3057%u304F%u3042%u308A%u307E%u305B%u3093%u3002"; if (passlen <= 0) { alert(unescape(needPassword)); return ; } for (i = 0, j = passlen - 1, k = 0 ; i < enqlen ; i++, j--, k=0) { if (j < 0) { j = passlen - 1; } chr1 = indexbase.indexOf(keyin.charAt(j)); chr2 = indexbase.indexOf(encrypted.charAt(i)); if (chr2 < (chr1 + j)) { nbase = (chr1 + j - chr2) / 0x5f; k += (0x5f * Math.ceil(nbase)); } k += (chr2 - chr1 - j); decrypted += indexbase.charAt(k); } if (typeof(opener) == "undefined") { window.close(); return ; } if ((typeof(opener.closed) == "unknown") || opener.closed) { window.close(); return ; } opener.document.isOpened = false; decryptedPassword = decrypted.substring(decrypted.length - passlen, decrypted.length); if (keyin == decryptedPassword) { decryptedPath = decrypted.substring(0, decrypted.length - passlen); passlen = decryptedPath.length; for (i = 0 ; i < passlen ; i++) { chr1 = decryptedPath.charAt(i); if (chr1 == "%") { chr2 = decryptedPath.substring(i, i+6); targetUrl += chr2; i += 11; } else targetUrl += chr1; } if ((typeof(opener.closed) != "unknown") && ! opener.closed) opener.open(targetUrl,"_blank"); window.close(); } else { if (defaultUrl.length) { if ((typeof(opener.closed) != "unknown") && ! opener.closed) opener.open(defaultUrl,"_blank"); } else { alert(unescape(badPassword)); } window.close(); } } //--> </SCRIPT> </HEAD> <BODY onload="document.keyinform.keyin.focus()" onblur="document.keyinform.keyin.focus()" onerror="window.close();"> <DIV align="center"> <P>パスワードを入力してください。</P> <FORM name="keyinform" method="POST" onsubmit="_HpbChkPwd(keyinform.keyin.value,'ztt%24syPF%5B%5E%5ErMaRUIPOFM','http://yahoo.co.jp/','nakami');return false;"> <INPUT size="20" type="password" name="keyin"> <INPUT type="button" name="CheckPassword" value="OK" onclick="_HpbChkPwd(keyinform.keyin.value,'ztt%24syPF%5B%5E%5ErMaRUIPOFM','http://yahoo.co.jp/','nakami');">

  • javascriptを勉強しているのですが。

    毎日こつこつと参考書を見ながらjavascriptを勉強しています。サイトのソースを見て勉強する方法を最近しているのですが、壁に当たってしまったようなので質問させていただきました。 function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } 質問1:上記のようなスクリプトを見かけたのですが、最初のif文には{}があるのですが、if(!d.MM_p) d.MM_p=new Array();と for(i=0;i<a.length; i++)の部分では{}が見あたらないのですがなぜでしょうか。 if文をしよう使用する場合には{}を使うと参考書に書いてありましたが、これには記述されていないのですが、普通に使用できているようなのですがなぜでしょうか。 質問2://v3.0とは何かのバージョンを示しているのでしょうか。 初歩的な質問で申し訳ありませんが、1つでもいいのでどなたかアドバイスをお願いします。

専門家に質問してみよう