• ベストアンサー

PHPの値をJavascriptへ

6chanの回答

  • ベストアンサー
  • 6chan
  • ベストアンサー率46% (91/194)
回答No.2

JavaScriptは、ブラウザが動作しているコンピュータ上で動作。 PHPは、Webサーバが動作しているコンピュータで動作。 ということで、素直に連携できないかと考えます。 No.1さんのように、JavaScriptをPHPで出力するようにする。 もしくは、 PHP処理とJavaScript処理が別のリクエストで行われるのなら、 Cookieを使って渡す、などの方法がかんげられます。

この回答がついた質問に戻る
回答 全件
phpでJSONを吐き出させればいいだけですよ。
Ajaxにすればいいんじゃない?
・phpで件の処理が発生する前にvarで定義するものを書いてしまう …
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • PHPとjavascriptを融合させたカウントダウンを作りたい

    PHPとjavascriptを融合させたカウントダウンを作りたい 宜しくお願い致します。 現在、アクセスした時刻から時計が「0秒」を指すまでのカウントダウンを 表示させているのですが、 これを、PHPで取得したサーバー時刻を使ったカウントダウンにしたい と思っています。 現在、利用しているjavascriptは、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { date=new Date(); second=date.getSeconds(); var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ なのですが、これを、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { second=<?php print date(s) ?>; var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ というイメージでカウントダウンさせたいのですが、 何か方法はございますでしょうか？それともPHPを利用する時点で 不可能な話でしょうか？ (試しに後述のスクリプトを実践してみた所、案の定PHPで取得した秒で カウントダウンは止まってしまいます) それでは宜しくお願い致します。

  • javascriptで困ってます

    下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>

  • PHP内にJavaScript

    下記のようなはじめての訪問者に対してようこそ！と表示するJavaScriptをPHP内で動かすにはどのように記入すればよいのでしょうか？ ==================================================== <script language="JavaScript"> var key = "freekeyword"; var n = 0; var cookies = document.cookie.split("; "); for(var i=0;i<cookies.length;i++){ var str = cookies[i].split("="); if(str[0] == key){ // n = str[1]; } } window.onload = function() { if(n == 0){ document.getElementById('welcome').innerHTML = 'ようこそ！'; } n++; setCookie(key,n); } function setCookie(key,val){ document.cookie = key + "=" + escape(val) + "; "; } </script> ==================================================== このスクプリトを下記<head>内にどのように記入すればよいので しょうか？ PHPの文法などほとんど分からないレベルなのでそもそも質問 自体間違ってるかもしれませんがPHP内で同様の動作をさせたい のです。よろしくお願いします ==================================================== <?php echo ' <html> <head> </head>'; echo ' <body> <div id="welcome"></div> </body></html>'; ?> ====================================================

    • ベストアンサー
    • PHP
  • javascriptで困っています。教えてください

    html5でcanvasに描いた画像をsave_buttonを押してlocalStorageで保存して、それをload_buttonをおして読み込もうとしているのですが、うまくいきません。 canvas.toDataURL();でデータを6bit毎に分割できています。 それを保存して、 var base64 = window.localStorage.getItem("saveKey");で読み込むこともできています。 その後canvasに描画できません。 よろしくお願いします。 var canvas = document.getElementById("myCanvas"); $("#save_button").click(function () { 　　 // Canvasからbase64エンコーディングされた画像データを取得する var canvas = document.getElementById("myCanvas"); var base64 = canvas.toDataURL(); // LocalStorageに保存する window.localStorage.setItem("saveKey", base64); }); $("#load_button").click(function () { // LocalStroageからデータを取得する var base64 = window.localStorage.getItem("saveKey"); // Imageオブジェクトを作成し、src属性にデータを設定する var image = new Image(); image.src = base64; image.onload = function(){ // 画像の読み込みが終わったら、Canvasに画像を反映する。 canvas.drawImage(image, 0, 0); } });

  • javascriptからphpの呼び出し

    javascriptの初心者です。宜しくお願い致します。 php5で、開発していますが、javascriptからphpを呼んで、 結果をリアルタイムに画面に表示させる方法が分かりません。 【やりたい事】 １．画面上に、現在の日時を表示させる。 ２．5秒毎に、phpを呼び出し(DB接続し結果を取得)して、 　　その結果を、画面上に表示させる。 　　※DBへの接続は、javascript内ではやりたくありません。 下記に、現在時刻を表示するjavascriptがありますが、 この中で、5秒毎に、phpを呼び出したいのですが、 出来るのでしょうか？ </head> <script language="Javascript"> <!-- function time_disp() { d = new Date(); document.all.nowdate.value = d.toLocaleString(); window.setTimeout("time_disp()", 1000); } --> </script> <body onload="time_disp();"> <input type="text" name="nowdate" size="30" readonly> <input type="text" name="data1" readonly> ←phpから取得した値1 <input type="text" name="data2" readonly> ←phpから取得した値2 </body>

  • javascriptのcanvasについて

    先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [ 　'hair1.png', 　'hair2.png', 　'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>

  • Javascriptの関数について

    Internet Explorer の右クリックメニューに登録するスクリプトを作っています。 たとえば、いま表示しているページのURLを表示する場合、 <script type="text/javascript"> var parentWindow = window.menuArguments; var URL = parentWindow.document.URL; window.onload = function() { 　　kansuu(URL); }; kansuu = function(url) { 　　alert(url); } </script> ↑は動きます。 また、 var parentWindow = window.menuArguments; var URL = parentWindow.document.URL; window.onload = kansuu(URL); function kansuu(url) { 　　alert(url); } ↑も動きます。 ところが、 var parentWindow = window.menuArguments; var URL = parentWindow.document.URL; window.onload = kansuu(URL); kansuu = function(url) { 　　alert(url); } は動きません。 なぜでしょうか？ 理由を教えていただけると嬉しいです。 よろしくお願いします。

  • javascriptの問題数を増やしたいです。

    javascriptの出題問題数を増やしたいです。 どこの数値を変更すればいいですか？ 今１０問までですけれども例えば４０問まで増やしたいとすればどの数値を変更すればいいですか？ window.onload = function(){ var data = location.href.split("?")[1]; var nowQ = data.substr(0,2); var allQ = data.substr(2,2); var okQ = data.substr(4,2); var nowA = data.substr(6,2); 参考URL https://www.kuuneruch.com/javascript01/ よろしくお願いします。

  • javascriptでphpに値を渡す

    javascriptの値をPHPに渡す、若しくはjavascriptでリダイレクト <script type="text/javascript"> if (navigator.geolocation) { // 現在の位置情報を取得 navigator.geolocation.getCurrentPosition( // （1）位置情報の取得に成功した場合 function (pos) { var location = pos.coords.latitude +","; location += pos.coords.longitude ; document.getElementById("location").innerHTML = location; }, // （2）位置情報の取得に失敗した場合 function (error) { var message = ""; switch (error.code) { // 位置情報が取得できない場合 case error.POSITION_UNAVAILABLE: message = "位置情報の取得ができませんでした。"; break; // Geolocationの使用が許可されない場合 case error.PERMISSION_DENIED: message = "位置情報取得の使用許可がされませんでした。"; break; // タイムアウトした場合 case error.PERMISSION_DENIED_TIMEOUT: message = "位置情報取得中にタイムアウトしました。"; break; } window.alert(message); } ); } else { window.alert("本ブラウザではGeolocationが使えません"); } </script> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 上記のコードで緯度経度を取得しています。この緯度経度が3333333（var location部） だとしたらhtt//hogehoge.com/3333333へリダイレクトさせたいです。 のでvar location部をphpに渡してリダイレクトさせるか、若しくはjavascriptで上記URLにリダイレクトさせる必要があります。 何か良い方法はないでしょうか？当方お手上げ状態です。

  • javascriptの打ちミスしてる所を知りたい。

    参考書の通り打ちました。参考書では、蛇を上下左右キーで操作し、餌を食べさせるゲームと書いておりましたが、灰色のイメージが出るだけで、蛇っぽいのは出ません。 たぶんどっかでタイプミスしてると思うのですが、どこだかわかりません。 教えてください。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W,H,S=20; var snake=[],foods=[]; var keyCode=0; var point=0; var timer=NaN; var ctx; function Point(x,y){ this.x=x; this.y=y; } function init(){ var canvas = document.getElementById('field'); W=canvas.width/S; H=canvas.height/S; ctx =canvas.getContext('2d'); ctx.font ="20px sans-serif"; snake.push(new Point(W/2,H/2)); for(var i=0; i<10;i++){ addFood(); } timer=setInterval("tick()",200); window.onkeydown =keydown; } function addFood(){ while(true){ var x =Math.floor(Math.random()*W); var y =Math.floor(Math.random()*H); if(isHit(foods,x,y)|| isHit(snake.x,y)){ continue; } foods.push(new point(x,y)); break; } function isHit(data,x,y){ for(var i=0;i<data.lenght;i++){ if(data[i].x==x && data[i].y==y){ return true; } } return false; } function moveFood(x,y){ foods =foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } function tick(){ var x=snake[0].x; var y=snake[0].y; switch(keyCode){ case 37:x--;break; case 38:y--;break; case 39:x++;break; case 40:y++;break; defaule:paint(); return; } if(isHit(snake,x,y) || x<0 ||x>=W || y<0||y>=H) { clearInterval(timer); paint(); return; } snake.unshift(new Point(x,y)); if(isHit(foods,x,y)){ point+=10; moveFood(x,y); }else{ snake.pop(); } paint(); } function paint(){ ctx.clearRect(0,0,W*S,H*S); ctx.fillStyle="rgb(256,0,0)"; ctx.fillText(point,S,S*2); ctx.fillStyle="rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p.x*S,(p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p.x*S,(p.y+1)*S); }); } function keydown(event){ keyCode=event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する