• 締切済み

jsファイルのエラーについて

詳しい方回答お願いします。参考のサイトはhttp://www.animetheme.com/sidebar/のsystem anime →extra animetion→animed picture→video gamesから取りました。 jsファイルを起動すると、 'document'が宣言されていません。 桁 42 文字 1 エラーコード 800A1391 と出ます。コードは下記になりますが間違っているところがあれば教えて頂けないでしょうか? 導入参考動画http://www.youtube.com/watch?v=CvPJl46yHvQをみると他の方は普通にできる人もいれば、書き換えている人もいらっしゃるみたいです。 ちなみにパソコンはDell vistro ,windows7,ネット環境下です。 コード // Touhou - Flandre Scarlet (scalable) var EV_width = 458 var EV_height = 600 //var EQP_ref_width = 578+5 //var EQP_ref_height = 400+6 var EQP_parts_path = 'parts' var EQP_allow_resize = true; var EQP_ps = [ {src:"back1_431x575", o_min:-1} ,{src:"LP_419x372", g_num:[0],g_EQ:[[1]]} ,{src:"LB_436x424", g_num:[0],g_EQ:[[2]]} ,{src:"LC_446x481", g_num:[0],g_EQ:[[3]]} ,{src:"LG_439x548", g_num:[0],g_EQ:[[4]]} ,{src:"LY_383x590", g_num:[0],g_EQ:[[5]]} ,{src:"LO_359x504", g_num:[0],g_EQ:[[6]]} ,{src:"LR_321x443", g_num:[0],g_EQ:[[7]]} ,{src:"RR_185x454", g_num:[1],g_EQ:[[8]]} ,{src:"RO_161x510", g_num:[1],g_EQ:[[9]]} ,{src:"RY_157x580", g_num:[1],g_EQ:[[10]]} ,{src:"RG_96x547", g_num:[1],g_EQ:[[11]]} ,{src:"RC_86x482", g_num:[1],g_EQ:[[12]]} ,{src:"RB_96x426", g_num:[1],g_EQ:[[13]]} ,{src:"RP_122x382", g_num:[1],g_EQ:[[14]]} ,{src:"Flan_428x582", o_min:-1} ,{src:"Levateinn_395x504", g_num:[2],g_EQ:[[15]]} ,{src:"Hand_227x317", o_min:-1} ,{src:"eyes_259x507", g_num:[2],g_EQ:[[0]]} ] // Core document.write('<script language="JavaScript" src="js/EQP.js"></scr'+'ipt>')

みんなの回答

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

それを直接実行しても当然動作しませんよ そのJSファイルだけじゃなにもできません 全てのリソースを適切な位置に置いてHTMLファイルに記述してください

cypher0223
質問者

補足

この他にも2つのpsdファイルが入っていました。申し訳ないのですがもし宜しければもう少し詳しく教えて頂けないでしょうか?何分素人なので、動画を参考に言われたとおりにしかできませんでした。

関連するQ&A

  • masonry.jsで並べた画像を綺麗に敷き詰める

    こんにちは、お世話になります。 大分レイアウト、アニメーションのjsの仕組みを理解してきたんですが masonry.jsはまだちょっと解りません。 これを使ってサイトいっぱいに画像を敷き詰めるにはどのような記述を追加すればよいでしょうか? ご教示お願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } $grid.infiniteScroll({ path: getPath, append: '.grid__item', outlayer: msnry, scrollThreshold: 40, hideNav: '.pagination', status: '.page-load-status', }); }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> </ul> <div class="page-load-status"> <p class="infinite-scroll-request"> <i class="fa fa-spinner fa-spin"></i>Loading... </p> <p class="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> <div class="pagination"> <a href="page2.html" class="pagination__next">もっと見る</a> </div> </body> </html> CSS--------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid.are-images-unloaded .image-grid__item { opacity: 0; } .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .page-load-status { display: none; /* hidden by default */

    • ベストアンサー
    • CSS
  • jsファイルの編集

    こんにちは。 WordPressでプラグイン内のjsファイルで、記事投稿画面でアイコンを選択するとそのアイコンがテキスト内に画像リンクとして張られるのですが、 <img src="画像の場所" border="0" alt="画像の名前" /> と表示されるのですが、ここのなかにclass関数?を入れたいのですが、どのようにjsファイルを編集すると挿入されるのでしょうか。 怪しいと思ったのは、jsファイル内の最初の var EmojiDialog = { init : function(ed) { tinyMCEPopup.resizeToInnerSize(); }, insert : function(file) { var altname = file.slice(0,file.lastIndexOf('.')); var ed = tinyMCEPopup.editor, dom = ed.dom; ed.execCommand('mceInsertContent', false, dom.createHTML('img', { src : tinyMCEPopup.getWindowArg('plugin_url') + '/img/' + file, border : 0, alt : altname })); } }; と、そのあとに画像の場所を示す記述があって その最後にあった。 var aImages = img_ary ; var iCols = 23; var iColWidth = parseInt( 100 / iCols, 10 ) ; var iRows = Math.ceil( aImages.length / iCols ); var iColHeight = parseInt( 500 / iRows, 10 ) ; var i = 0; var sTableHtml = '<table class="emoji" border="0" cellspacing="2" cellpadding="2" align="center">'; while ( i < aImages.length) { sTableHtml += '<tr>'; for(var j = 0 ; j < iCols ; j++) { if (aImages[i]) { var sFileName = aImages[i]; sTableHtml += '<td width="' + iColWidth + '%" height="' + iColHeight + 'px" align="center" class="DarkBackground" onmouseover="this.className=\'LightBackground\';" onmouseout="this.className=\'DarkBackground\';" onclick="EmojiDialog.insert(\'' + sFileName + '\');"><img src="img/' + sFileName + '" border="0" /></td>'; } else { sTableHtml += '<td width="' + iColWidth + '%" height="' + iColHeight + 'px" align="center" class="DarkBackground" onmouseover="this.className=\'LightBackground\';" onmouseout="this.className=\'DarkBackground\';">&nbsp;</td>'; } i++; } sTableHtml += '</tr>'; } sTableHtml += '</table>'; pallet_container.innerHTML = sTableHtml; } }; 以上の場所です。 もしかしたら、jsファイルではタグを挿入する作業はしていないのでしょうか?

  • QRcode.jsで生成したQRコードを画像で取得

    QRcode.jsを使い下記の下記のコードでQRコードを生成することが出来ます。しかし、そのコードをcanvasを使って画像として取得することは可能みたいですが、そのための方法が分かりません。検索してもjqueryを使用したのが多く占めただせさえjavascriptの素人には無理筋です。 <!DOCTYPE html> <html> <body> <div id="qrcode"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://github.com", width: 128, height: 128, colorDark : "#ffffff", colorLight : "#000000", correctLevel : QRCode.CorrectLevel.H }); </script> </body> </html> 最終的には、var image = canvas.toDataURL()の形にして渡したいと思っています。 どうかよろしくお願いいたします。

  • jQuery でスライドショーをストップ

    jQueryを使い、トップページを背景となる写真3枚を全画面で フェードイン→フェードアウトという風にループしています。 3枚目の写真でそのまま静止させたいのですが、どのようにしたら3枚目の写真でストップするのでしょうか? 以下のもののファイルを書き換える必要があると思いますのでソースを記述しました。 fadechanger.js fitter.js HTMLページのソースとfadechanger.js、fitter.js どちらのファイルのソースを書き換えればよいのでしょうか? 初めてjQueryを使ってみたので全くの初心者です。 どうぞよろしくお願いします。 HTMLページのソース <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/fitter.js"></script> <script src="js/fadechanger.js"></script> <script src="js/imgloader.js"></script> <script src="js/transition.js"></script> <script> $(function() { // オプションの一括指定 var options = { imglist: [ "photo/0.jpg", "photo/1.jpg", "photo/2.jpg", ], width: 1000, height: 1100, minWidth: 600, minHeight: 660, callback: function() { var self = this; // ローディング表示を終了 $("#loading").hide(); // 末尾の要素をフェードイン self.find("img").eq(-1).fadeIn(function() { // フェード切り替え開始 self.fadechanger({ selector: "img" }); }); // fitter起動 self.fitter(options); } } // loader $("#imgContainer").imgloader(options); // transition $("#header a").transition(); }); </script> fadechanger.jsのソース (function($) { /** * fadechanger */ $.fn.fadechanger = function(options) { var self = this, defaults = { speed: 3000, wait: 3000, selector: "" }, config = $.extend({}, defaults, options); self.find(config.selector).show(); (function() { var arg = arguments; self.find(config.selector).eq(-1).delay(config.wait).fadeOut(config.speed, function() { $(this).prependTo($(this).parent()).show(); arg.callee(); }); })(); return this; }; })(jQuery); fitter.jsのソース (function($) { /** * fitter */ $.fn.fitter = function(options) { var self = this, defaults = { width: 1000, height: 1100, minWidth: 600, minHeight: 660, selector: "img" }, config = $.extend({}, defaults, options); // resize $(window).resize(function() { var w = $(window).width(), h = $(window).height(); // 最小サイズ設定 if (w < config.minWidth || h < config.minHeight) { return false; } // IE 6 if ($.browser.msie && $.browser.version < 7) { self.width(w).height(h); } // 画像サイズ変更。後ろはIE用 if (w / h > config.width / config.height) { self.find(config.selector).width(w).height(w * config.height / config.width); } else { self.find(config.selector).height(h).width(h * config.width / config.height); } }).resize(); return this; }; })(jQuery);

  • テーブルとテーブルの間の隙間

    以下の様なHTMLでIE6で表示した場合、●Aと●Bの間に、微妙な隙間が入ってしまいます。 どうやっても隙間が無くなりません。 ●Aの部分には、画像がランダムに表示されるようなスクリプトを記述していますが、 そのスクリプトを削除したら、ちゃんと隙間が無くなるのです(^^;) これって方法はありますか?どうにかランダムに表示させたいので、アドバイス下さい。 ============================ <script language="javascript" src="../js/top.js"></script> </HEAD> <BODY topmargin="0"> <DIV align="center"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> ●A <TR> <TD width="800"><SCRIPT LANGUAGE="JavaScript">random_img2()</SCRIPT> <noscript><IMG src="../img/1.jpg" alt="" width="800" height="300"></noscript></TD> </TR> ●B <TR> <TD width="800"><A href="../index.html">HOME</A> &gt;&gt; TEST</TD> </TR> </TBODY> </TABLE> ============================ ※実際のHTMLには●Aと●Bという文字は入っておりません。 以下はtop.jsで記述している内容です。 ============================ function random_img1(num1,num2) { if((num1 - num2) > 0) { var big = num1 var small = num2 } else { var big = num2 var small = num1 } var range = big - small + 1 var number = Math.floor(Math.random()*range) + small return(number) } function random_img2() { var img_src = "../img/" + random_img1(1,3) + ".jpg" document.write("<IMG SRC='" + img_src + "'>") } ============================

    • ベストアンサー
    • HTML
  • JavaScript/jQuery で元画像ファイルのサイズの取得

    JavaScript/jQuery で元画像ファイルのサイズの取得 次のコードを考えましたが、動作が不確定な点があります。状況と対応方策をお教えください。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="subf/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var pW; var pH; $(function() { newImg(); alert(pW); alert(pH); }); function newImg() { var newImg = new Image(); newImg.src = 'subf/' + "HighJinks_Ni.jpg"; alert("New Image"); //この行をコメントとすると pW=0,pH=0 となる。   pW=(newImg.width); pH=(newImg.height); } </script> </head> <body> </body> </html>  上のコードで画像のwidth とheight の値が得られるのですが、alert("New Image"); の行をコメントとすると、正確な値得られず0となります。  対応の方法をお教えください。

  • このjsはどういうことですか?

    function handleFiles(files) { l("アイコン変更!!1"); if (files.length > 0) { l("アイコン変更!!2"); var file = files[0]; if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { l("アイコン変更!!3"); var reader = new FileReader(); reader.onload = function(evt) { load(evt.target.result) } ; reader.readAsDataURL(file) } } } function load(src) { l("アイコン変更!!load"); img = new Image(); img.onload = function() { analyze() } ; img.src = src } function analyze() { l("アイコン変更!!analyze"); if (!img) return; SmartCrop.crop(img, { width: 100, height: 100, debug: false }, draw) } function draw(result) { l("アイコン変更!!draw"); selectedCrop = result.topCrop; drawCrop(selectedCrop) } function drawCrop(crop) { l("アイコン変更!!drawCrop"); canvas.width = 100; canvas.height = 100; ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height); img_src = canvas.toDataURL(); var img_tag = $('<img>').attr('src', img_src); $('#file_span').html(img_tag); $('#b_change_profile').prop('disabled', false) } function img_selected_clear() { $('img.selected', '#icon_table').each(function() { $(this).removeClass('selected') }) } function emit_change_icon_name() { var data = {}; data.selected_my_icon = selected_my_icon; data.character_name = $("#ipt_change_character_name").val(); socket.json.emit('change_icon_name', data) } $(function() { $('#canvas_wrap').hide(); $('#i_file').change(function(e) { handleFiles(this.files) }); 回答できる方、回答よろしくお願いします。 できれば一つずつ解説してもらえると嬉しいです。

  • 複数の.jsファイルって実行できますか?

    初心者:Ajax勉強中です。 prototype Rico batefx を一つの画面で使用したいと思っています。 読み込み順はこんな感じになっています ------------------------------------------------- <script src="prototype.js" type="text/javascript"></script> <script src="rico.js" type="text/javascript"></script> <script src="bytefx_OS.js" type="text/javascript"></script> <script src="index.js" type="text/javascript"></script> -------------------------------------------------- index.jsは -------------------------------------------------- function k(){ dndMgr.registerDraggable( new Rico.Draggable("sample","box") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox1") ); } function start(){ bytefx.size(document.getElementById("txt_box"), {width:600, height:0}, 100); } function n(name,objW,objH){ bytefx.size(document.getElementById(name), {width:objW, height:objH}, 10); } -------------------------------------------------- 最初に表示される画面ではbatefxのリサイズ処理は正常に動作します。 その後のRicoによる、Draggable、Dropzoneを実行します。 そうすると最初に動作していたbatefxのリサイズ処理が動作しなくなってしまいます。 原因を調べていてもいまいちよくわかりません。 解かる方おりましたら、是非ご教授のほどをおねがいいたします。

  • js 引用符

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。

  • JSが正常な動作しないのはなぜ?

    HPを、ファイルから読み込んで表示するように変更しようと、Adobe Spry(Tab)とPrototype.jsを使って、JSで組みました。 内容は、csvファイルを読み取って、HTMLコードを生成し、Spryの指定のID(tabPanel1)に挿入して、Spryを起動するようにしています。が、最後のSpryがなぜか(タブ機能が)機能しません。起動直前にブレイクポインタを入れてとめると、ちゃんとタブが機能するようになります。デバッグ環境はFireFox3.5.7+FireBug on WindowsXP SP3+Apache2.5です。 問題のソースですが下記の通りです。 var TAB = String.fromCharCode( 9 ) ; var LFR = String.fromCharCode( 13 ) + String.fromCharCode( 10 ) ; window.onload = function() { // データファイルの読み取り var myData = new Ajax.Request( "data/linkdata.csv" , { method: "get", onSuccess:function(httpObj){ var line = httpObj.responseText ; var col = new Array(3) ; var bFlg = false ; var src1 = "<ul class='TabbedPanelsTabGroup'>" ; var src2 = "<div class='TabbedPanelsContentGroup'>" ; //var list = line.split("\n") ; var list = line.split( LFR ) ; for ( var i = 0; i < list.length ; i++ ){ if ( list[ i ].length == 0 ) break ; var dlist = list[ i ].split(TAB) ; if ( dlist[ 0 ].length > 0 ) { // 表題の設定 if ( bFlg ) { src2 += "</TABLE></div></div>" ; } src1 += "<li class='TabbedPanelsTab' tabindex='0'>" ; src1 += dlist[ 0 ] ; src1 += "</div></li>" ; src2 += "<div class='TabbedPanelsContent'>" ; src2 += dlist[ 0 ] ; src2 += "<TABLE width='605' bgcolor='#ffffff' border='2'>" ; src2 += "<TR>" ; src2 += "<TD align='center' width='150' bgcolor='" + "'><b>名称</b></TD>" ; src2 += "<TD align='center' width='450' bgcolor='" + "'><b>内容</b></TD></TR>" ; }else{ // 明細の設定 src2 += "<TR>" ; src2 += "<TD><FONT size=-1><A target='_blank' href='" + dlist[2] + "'>" src2 += dlist[ 1 ] + "</A></FONT></TD>" ; src2 += "<TD><FONT size=-1>" + dlist[3] + "</FONT></TD>" ; src2 += "</TR>" ; bFlg = true ; } } src1 += "</ul>" ; src2 += "</div>" ; $('tabPanel1').innerHTML = src1 + src2 ; }, onFailure:function(httpObj){ $('tabPanel1').innerHTML = "エラーにより読み込めませんでした"; } }); var tbObj1 = new Spry.Widget.TabbedPanels("tabPanel1"); } ここ数日ははまっていて、最後の関門でどうしてもうまく行きません。見ただけではわかりませんかもしれませんが、よろしくお願いします。なお、こちらはJSをはじめてからまだ、1年未満です。

専門家に質問してみよう