JavaScriptで値の取得方法とは?

このQ&Aのポイント
  • JavaScriptの値の取得方法について教えてください。
  • 外部で得た値をJavaScriptで取得する方法を教えてください。
  • 特定の要素やオブジェクトのプロパティをJavaScriptで取得する方法を教えてください。
回答を見る
  • ベストアンサー

javascriptでの値の取得について

すごく素人だと思うのですが。 この手のタイプで得られる値を外部で取得できないのでしょうか? 戻り値で返すわけにもいかないですし、よく理解できていません var val: ○.○=function(){ここで得た値をvalに入れたい} 例1 var target; ・・・ request.onreadystatechange=function(){ if(request.readyState==4 && request.status==200){ //target=request.responseText;みたいなことをしたい } } 例2 var width,height; ・・・ image.onload=function(){ //width=image.width; height=image.height;みたいなことをしたい }

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

  • ベストアンサー
  • gorusura
  • ベストアンサー率59% (25/42)
回答No.5

function func(){ var val; request.res=function(){val=response;} return val; } これだと、undefinedしか帰りませんよ。 request.resが実行されていません。 function func(){ var val; request.res=function(){val=response;} request.res(); return val; } こういうことなんでしょうか? 例1 var target; ・・・ request.onreadystatechange=function(){ if(request.readyState==4 && request.status==200){ //target=request.responseText;みたいなことをしたい } } alert(target); ↑このalert(target); で、request.responseText の値を表示したい、というような希望でしょうか。 上記の例なら、同期通信を使用すれば、ちゃんと表示されます。 非同期通信なら、無理です。 素直に、 var target; ・・・ request.onreadystatechange=function(){ if(request.readyState==4 && request.status==200){ //target=request.responseText;みたいなことをしたい alert(target); } } とするしか方法はありません。 例2 var width,height; ・・・ image.onload=function(){ //width=image.width; height=image.height;みたいなことをしたい } 以降の処理! この場合、onloadの実行が終わるまで、以降の処理!を実行したくないのなら、以降の処理!をimage.onload内に入れるか、関数にして、function abc(){以降の処理!} 、 image.onload 内に、abc(width,height); 等として、引数を渡したりして、対応して下さい。

w7test
質問者

お礼

回答ありがとうございます

w7test
質問者

補足

同期通信ですか・・・ そちらの方向でやることにします

その他の回答 (5)

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.6

> 値が入るまで待機する方法ってないんでしょうか? だったら、コールバック関数の中に書けばいいだけです。 値が入るタイミング(イベントが発生するタイミング)=コールバック関数が呼ばれるタイミングなのですから。 var val: ○.○=function(){  ここで得た値をvalに入れたい  alert(val);←やりたい処理を書く  func(); ←関数にしたければ、その関数をここで呼び出してください。      その場合valは引数で渡した方が良いとは思いますが。 }

w7test
質問者

お礼

回答ありがとうございます

w7test
質問者

補足

やはり中に書くか、中から外部関数に引っ張り出す方法ですね・・・ 再帰処理から呼出しているのでreturnできないとまずいので 同期処理にすることにしました。 じゃあはじめからそうしろよと怒られそうですがw いちおう心の中でずっと疑問におもっていましたので。 2回も回答いただきありがとうございました。

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.4

> var val: > ○.○=function(){ここで得た値をvalに入れたい} > alert(val);←これがぬけていました。 当たり前の話ですが、functionが実行された後でないと valは未定義のままですよ。 本当にその通り書いたなら、alert実行時点ではfunctionはまだ実行されていません。

w7test
質問者

お礼

回答ありがとうございます

w7test
質問者

補足

ですよねー 値が入るまで待機する方法ってないんでしょうか? (それがfunction内ってことなんでしょうけれどw) function func(){ var val; request.res=function(){val=response;} return val; } みたいな形が理想です。 何件か勉強のために作っているプログラムがあるのですが 全部この部分で保留になっている状態です それと調べるためのキーワードもよくわかっていません コールバック関数?でいいのでしょうか?

  • hideishi
  • ベストアンサー率55% (5/9)
回答No.3

<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- var wk_global = "abcde"; function testfunc(){ alert("testfunc:wk_global= " + wk_global); wk_global="wxyz"; testfunc2(); } function testfunc2(){ alert("testfunc2:wk_global= " + wk_global); } //--> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT type="button" value="クリックしてね!" onClick="testfunc()"> </FORM> </BODY> </HTML> 関数の外側で定義した変数(wk_global)は、すべての関数から参照可能です。

w7test
質問者

お礼

回答ありがとうございます。 回答いただいたものに関してはとりあえず理解してるつもりです。 No.2さんの言われてることが近いです。

回答No.2

ファイル読み込みの結果をすぐに利用したいという いつもの初心者によくある質問ってことでいいですか? ファイル読み込みの結果を利用するなら ちゃんとファイル読み込み待たないといけません bodyの読み込み終わったってイベントは つまり使ってる画像も全部読み込まれたってことなので bodyのonloadのリスナーでファイル読み込み結果を利用する処理をすれば あとから動的に読み込んでるんでない限りは大丈夫なはずです

w7test
質問者

お礼

回答ありがとうございます

w7test
質問者

補足

var val: ○.○=function(){ここで得た値をvalに入れたい} alert(val);←これがぬけていました。 できると思うのですが・・・できないんですよねー

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

いまいち何がしたいのか良くわからないけど そのコメントをはずせば普通に代入されると思うけど?

w7test
質問者

お礼

回答ありがとうございます。

w7test
質問者

補足

質問の仕方がまずかったですね・・・ function内で代入したあと function外で使いたい っていうのを書き忘れてました。

関連するQ&A

  • この「Javascript」が機能しないのはなぜでしょうか?

    あるサイトにJacascriptで動くボタンがあります。 しかしこのボタンが動作しないPCがあり、とても困っています。 2台のPCがありまして、同じブラウザFirefox3.0.7を入れております。どちらもJacascript機能を「有効」にしています。 しかし片方が正常に動くのに、片方はエラーはでずステータスバーに「完了」と表示されるのですが正常に動きません。 スクリプトとブラウザどちらに問題があるのでしょうか?(ブラウザでしょうか?) ちなみにIE7とoperaでは正常動作しました。 ちなみにソースは、 ■mycard.js function addMyCard(id){ var request; if (window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { request = new ActiveXObject('Microsoft.XMLHTTP'); } } else { // no support } if(navigator.userAgent.indexOf("Firefox") != -1){ request.onload = function() { if (request.readyState == 4 && request.status == 200){ if (request.responseText == 'true'){ document.getElementById('mycard_add'+id).style.display = 'none'; document.getElementById('mycard_list'+id).style.display = 'block'; } } }; } else { request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200){ if (request.responseText == 'true'){ document.getElementById('mycard_add'+id).style.display = 'none'; document.getElementById('mycard_list'+id).style.display = 'block'; } } }; } request.open('GET', './mycard2.php?id='+id+'&mode=add', true); request.send(null); if(navigator.userAgent.indexOf("Firefox") != -1){ request.onload = function() { if (request.readyState == 4 && request.status == 200){ window.location.reload(); } }; } else { request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200){ window.location.reload(); } }; } } ■HTMLファイルのほうは <dt> <div id="mycard_add100"><a href="javascript:void(0);" onclick="addMyCard(100)"><img src="images/contents/btn_mycard.jpg" width="90" height="20" alt="Myカード追加" /></a></div> <div id="mycard_list100" style="display:none;"><a href="mycard_list.php"><img src="images/btn_mycard2.jpg" width="90" height="20" alt="Myカード" /></a></div> </dt> といった感じです。 スクリプト自体は友人が書いたもので私は全然分からないので もし誤りがある場合は、どの部分か教えていただければ幸いです。 よろしくお願い致します。

  • Javascriptで外部HTMLの値を取得したい

    WEB初心者です。 Javascriptを使用して、 外部HTMLソースを取得し、その中のある値だけを取得するロジックをご教示ください。 取得した外部HTMLソースに正規表現が使えるなら、下記になるかと思います。 /_xyz" value="([^<]+)">/ キャプチャした値を呼び出し元のHTMLで使用したいです。 ”こんな感じのロジックになります”とご教示いただけますとたすかります。 よろしくお願いいたします。 下記サンプルプログラムを見つけたのですが、 ソース全体ではなくソースの中のある値だけが欲しいです。 --------------------------------------------------------------------------------------------- <?xml version="1.0"> <!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"> <head> <title>javascriptでHTMLのソースを取得</title> <script language="javascript" type="text/javascript"> function createhttprequest(){ var request=null; if("XMLHttpRequest" in window){ request= new XMLHttpRequest(); } else if("ActiveXObject" in window){ try{ request=new ActiveXobject("Msxml2.XMLHTTP"); }catch(e){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ } } } return request; } var request; function requestsorce(url){ request=createhttprequest(); request.open("GET",url,true); request.onreadystatechange=sorceget; request.send(null); } function sorceget(){ if (request.readyState == 4 && request.status == 200){ document.form1.sorce.value=request.responseText; } else{ } } </script> </head> <body> テキストボックスにurlを入力してソース取得ボタンを押してください。 <form name="form1"> <input type="text" name="urlbox" size="40"> <input type="button" value="ソース取得" onclick="requestsorce(document.form1.urlbox.value)"> <textarea name="sorce" rows="120" cols="100"> ここにソースを表示 </textarea> </form> </body> </html>

  • jQueryの関数から変数を取得

    次のうち変数valを取得してこれとは別の関数で利用したいのですが、どうやればこの変数を取得出来るのでしょうか? 単純な関数だと関数名を付けて戻り値にvalを指定してそれを呼び出してあげれば良いと思うのですが、この場合はどうしたら良いのか分からず頭を悩ませています。 var timer = false; var replaceWidth = 320; var prefWidth = parseInt( $( window ).width() ); $( window ).resize( function () { if( timer !== false ) { clearTimeout( timer ); } timer = setTimeout( function () { var self = $( this ); var windowWidth = parseInt( $( window ).width() ); if( windowWidth <= replaceWidth && replaceWidth < prefWidth ) { var val = 1; } else if( replaceWidth < windowWidth && prefWidth <= replaceWidth ) { var val = 10; } prefWidth = windowWidth; }, 200 ); });

  • returnがundefinedになってしまう。

    登録フォームhtml(php)からonclickで呼び出すvalidate functionから、ある値の有効性をチェックする別のcheck_data functionを呼び出しています。 check_data functionのソースは以下です。 function check_data(data) { var ajaxRequest; try{ //Opera 8.0+,Firefox,Safari ajaxRequest = new XMLHttpRequest(); }catch(e){ //Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ //something went wrong alert("your browser broke!"); return false; } } } //Create a function that will receive date sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState==4){ var ajaxDisplay = document.getElementById('data_msg'); ajaxDisplay.innerHTML = ajaxRequest.responseText; var val = ajaxRequest.responseText; return val; } } var date = new Date(); var timestamp=date.getTime(); //var data = document.getElementById('data').value; data = data; var queryString = "?tm=" + timestamp + "&data=" + data; ajaxRequest.open("GET","data_check.php" + queryString, true); ajaxRequest.send(null); } これを validate functionから var vdata = check_data(data); alert(vdata); みたいな感じで呼び出しています。 alertにしているのは単に値が正確に返っているかチェックするためです。 しかし、このvdataに入ってるはずの値がundefinedになってしまうのです。 check_data function内でvar val = ajaxRequest.responseText; をalert(val)する場合には正確な値がalertされるのですが、 validate functionから呼び出してvar vdata = check_data(data); する部分で何故かundefinedになってしまうのです。 responseTextでデータが取得される前にreturnされてしまいundefined になるのかとも思うのですが、たとえばreturn val;の代わりにreturn 10; などにしてもvalidate functionから呼び出すと、undefinedになってしまいます。 何が問題なんでしょうか? IE6とFireFox3.03で同様の結果になります。 因みに function test() { var test = 'ok'; return test; } をvalidate functionから呼び出した場合は キチンと'ok'がalertされます。

  • 配列に格納したXHRのreadyStateを参照

    複数のHTMLファイルの更新日時をJavaScriptで調べる必要があり(サーバ側では仕様上できません)以下のように書いたのですが、readyStateで参照すると全てurls[2]の値になってしまいます。(つまり「/infomation/index.html」の更新日時)どのように回避すればよいのでしょうか。 onload=function () { var urls = new Array(3); urls[0] = "/about/index.html"; urls[1] = "/news/index.html"; urls[2] = "/infomation/index.html"; var request = new Array(); for(i=0;i<urls.length;i++){ request[i] = new XMLHttpRequest(); request[i].open("GET", urls[i]); request[i].send(null); request[i].onreadystatechange = function () { if (request[i].readyState == 4) { var lmdfd = request[i].getResponseHeader("Last-Modified"); 以下、更新日時の確認処理 } } } }

  • flash javascript php の引数受け渡しで

    http://61.197.170.205/~tobacco/htdocs/test.php があり。戻り値があります。 javascriptに var req_argument = null; function File_Request(data, fileName){ //XMLHttpRequestオブジェクト(ブラウザー対策できてるものとして) var http_obj = new XMLHttpRequest(); http_obj.open("POST", fileName); http_obj.onreadystatechange = function(){ if(http_obj.readyState == 4){ req_argument = http_obj.responseText; } } http_obj.setRequestHeader('Content-Type','text/plain;charset=UTF-8'); http_obj.send(data); } function flash_kick(argument) { File_Request(argument, "http://61.197.170.205/~tobacco/htdocs/test.php"); return req_argument; } を設置したページを用意し、さらにactionscript上に以下と「bt_test」ボタン・「kakunin_text_box」のあるflashを配置しました。 import flash.external.*; bt_test.addEventListener(MouseEvent.MOUSE_UP, test_action); function test_action(e){ var argument:String = "渡したい引数"; var s:String = String(ExternalInterface.call("flash_kick", argument)); kakunin_text_box.text = s; }; うまくいかず、http_obj.readyState == 4を待ってくれないのでnullが戻ってきます。 どのような処理をするとスムーズにphpの返り値をflashへ受け渡せるのか、ご教授いただけると嬉しいです。 質問用書き換え時に文法エラーあったらごめんなさい。

    • ベストアンサー
    • AJAX
  • Ajax テキストエリアについて

    作ったテキストエリアにXmlHttpObjを出力したいのですがどのようにすればいいでしょうか? テキストエリアは <textarea id="text" style="width:100%; height:300px;"disabled></textarea><br> というように作りました。 XmlHttpObjは var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ alert(xmlhttp.responseText); } } function onButtonclick(){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; xmlhttp.open("GET", "data.txt"); xmlhttp.send(null); } このようにしました。(仮で出力をアラート形式にしております。) 回答よろしくお願いします。

    • ベストアンサー
    • AJAX
  • textarea内のxmlデータを読み込みたい

    javascriptでxmlのファイルを読み込む時には var request = GXmlHttp.create(); request.open("GET", "hogehoge.xml", true); request.onreadystatechange = function() { if (request.readyState == 4) { : とか書くと思うのですが、ファイルからではなくtextarea内にある xmlフォーマットで入力されたデータを読み込むにはどのように したらいいのでしょうか?

    • 締切済み
    • XML
  • 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となります。  対応の方法をお教えください。

  • JSONのデータから商品名の取得の仕方

    今現在下記の記述でJSONを取得しています。 ===== <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ===== このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。

    • ベストアンサー
    • AJAX