JavaScriptの勉強中にわからない部分について

このQ&Aのポイント
  • JavaScriptの勉強中に、解説がなくわからない部分が出てきました。質問でもらえると助かります。
  • ランダムに描画する多角形の数値を変更すると、描かれる多角形の数や形状が変化します。
  • 変数名randomIやnTo、nFromは、プログラム内で使用される変数の名前です。randomIは指定範囲のランダムな整数を返す関数で、nToとnFromはその関数に渡される引数です。
回答を見る
  • ベストアンサー

JavaScriptについて

本を読みながら勉強しているのですが解説が乗っていなくてわからない部分があるので教えてください <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //ランダムに50個多角形の表示 for (var i = 0; i < 50; i++) { randomDraw(); } //指定範囲のランダムな整数を返す関数 function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; } //ランダムに多角形を描画する関数 function randomDraw() { //パス指定 ctx.beginPath(); //点をランダムに決定 var n = randomI(2,7); ctx.moveTo(randomI(0,canvas.width),randomI(0,canvas.hright)); for (var i = 0; i < n; i++) { ctx.lineTo(randomI(0,canvas.width),randomI(0,canvas.height)); } ctx.closePath(); //描画 ctx.fillStyle = "#" + randomI(0,0xFFFFFF).toString(16); ctx.fill(); } </script> </body> </html> というコードでランダムに50個多角形を描画するというものです function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; ここのrandomIとnToとnFromというのは変数名ですか?これはいったい何者ですか? var n = randomI(2,7); ここの数字を変更すると何かが変わるのですがうまく言葉にできません 何がどう変わるのか教えてください

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

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.2

randomI グローバル変数で、中身は関数オブジェクトです。 オブジェクト指向言語である JavaScript では、関数もオブジェクトの一種です。 グローバル変数なので、一度生成されたら廃棄されません。 nTo / nFrom 関数内のローカル変数で、中身は関数の呼び出し元が指定したオブジェクトです。 randomI(2,7) と実行されたら、nTo = 2, nFrom = 7 ですね ローカル変数なので、関数が呼び出される毎に生成されて廃棄されます。 var n = randomI(2,7) 上記が実行されると、グローバル変数 randomI の中身である 関数オブジェクトが以下の様に実行されます。 * ローカル変数 nFrom に 2 を設定する * ローカル変数 nTo に 7 を設定する * ローカル変数 f に 6(=7-2+1) を設定する * システム関数 random を実行し、テキトーな0以上1「未満」の実数を取得 * ローカル変数 f(=6) と乗算して、0以上「6未満」の実数を取得 * システム関数 floor を実行し、0以上「5以下」の「整数」を取得 * ローカル変数 nFrom と和算して、2以上7以下の整数を取得 * 計算した「2以上7以下の整数」を関数の戻り値とする というわけで、 「最小値と最大値を指定すれば、その範囲内でテキトーな整数を考えてくれる」 処理を行ないます ローカル変数 n はその後の処理で、描画する多角形の辺の個数に使用するので、 最小値や最大値を変更すると、描画される図形の形状にいろいろと影響するでしょうが、 うまく言葉にできません。

DreamyLife_615
質問者

お礼

ありがとうございます!! すごくわかりやすくて理解できました!

その他の回答 (1)

  • hitomura
  • ベストアンサー率48% (325/664)
回答No.1

> ここのrandomIとnToとnFromというのは変数名ですか?これはいったい何者ですか? 「本を読みながら勉強している」というのであるならば、関数についての説明ページがあるはずです。そこを読みましょう。 もし関数の説明のところでこのようなコードが出てきたのなら、「解説が乗っていな」いという事はないはずです。コードが書かれたページの前後をもう一度探してみてください。 > var n = randomI(2,7); > ここの数字を変更すると何かが変わるのですがうまく言葉にできません > 何がどう変わるのか教えてください 描画される図形が何角形から何角形までか、その数から1を引いたらどうなるかを見るとわかると思います。

関連するQ&A

  • JavaScriptでのアニメーション

    JavaScriptで書いたアニメーションをHTML5上で動かそうとしているのですが、うまくいきません。いろいろなサイトで調べましたが原因がわからなかったのでどなたか解決法を教えてください。 任意の値X,Yを入力、これを始点の座標としてそこからランダムな色の円が動くというアニメーションを作りたいです。しかし、X,Yの値を任意に入力させようとするとアニメーションそのものが動かなくなってしまいます。座標をあらかじめ指定しておくとうまく動くのですが……。 任意の値を入れてもきちんと動くように直したいのですが、方法がわかりません。どなたかご教授願います。 以下コード。これより上と下は省略してあります。 <script type="text/javascript"> var speedX = 3.0;   var speedY = 4.0; var locX = parseInt(document.getElementById("x").value); var locY = parseInt(document.getElementById("y").value);  //locX,locYを予め指定しておくとその位置からきちんとアニメーションが動くが、上のようにすると動かなくなる var ctx; function anim(){ var canvas = document.getElementById('mycanvas'); if (canvas.getContext){ ctx = canvas.getContext('2d'); setInterval(draw, 60); } } function draw(){ ctx.globalCompositeOperation = "source-over"; var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle = rgba; ctx.fill(); ctx.globalCompositeOperation = "lighter"; locX += speedX; locY += speedY; if(locX < 0 || locX > 800){ speedX *= -1; } if(locY < 0 || locY > 600){ speedY *= -1; } ctx.beginPath(); ctx.fillStyle = rgba; ctx.arc(locX, locY, 5, 0, Math.PI*2.0, true); ctx.fill(); } </script> </head> <body> <p><label>X </label><input id="x"> <label>Y </label><input id="y"> <button type=button onclick="anim();">start</button></p>

  • JavaScript/HTML5での図形の描写

    canvasを使って図形の描写をするコードを書いています。 javascript初心者なりに考え、調べたのですがどうしてもわからなかったのでどなたか教えてください。 「入力された値を半径とした円をcanvas内のランダムな位置に、ランダムな色で複数描写する」という風にしたいのです。値は好きなだけ入れれるようにしてあります。現段階でランダムな位置に描写することはできるのですが、黒縁の白い円しか描写できません。「ランダムに彩色する」部分をどのように記述したらよいのかご教授願います。 【以下書いたコード】 function draw() { var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); var r = parseInt(document.getElementById("radius").value); ctx.beginPath(); var drawPointX = Math.floor( Math.random() * 1200 ) + 1; var drawPointY = Math.floor( Math.random() * 600 ) + 1; ctx.arc( drawPointX, drawPointY, r, 0, Math.PI*2, true ); //ランダムな色を生成・彩色する var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle=rgba; ctx.stroke(); }

  • 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>

  • HTML5のcanvasで描画がされない

    HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。 コードは以下の通りです。 ・index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript" src="paint.js"></script> </head> <body onLoad="draw()"> <canvas id="mycanvas"width="800" height"800"> </canvas> </body> </html> ・paint.js function draw() { //描画コンテキストの取得 var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true); } } このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか? よろしくお願いします。

  • 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>

  • 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のタイプミス

    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; // pointオブジェクト 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.length ; 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; //下 default: paint(); return; } //自分or壁に衝突 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>

  • HTML5,JavaScriptのアプリについて

    現在Monacaでスマホのアプリを作っております 3×3のパズルを作ったのですがわからない点があるので教えてください コードは <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <style> *{ margin:0; padding:0; position: absolute;} #title { background-color: blue; color: white; padding:3px; font-size:14px; width:320px; height:14px; } #game_canvas { top:20px; width:320px; height:320px; } </style> </head> <body> <div id="title">8puzzle</div> <canvas id="game_canvas" width="320" height="320"></canvas> <script> //設定 var main_image = "img/photo.png"; var panels = []; var cell_w = 320 / 3; //横に4分割 var cell_h = 320 / 3; //縦に4分割 var pos_array = [[-1,0],[1,0],[0,-1],[0,1]]; //上下左右の座標 //Canvasのコンテキストを取得 var canvas = document.getElementById("game_canvas"); var con = canvas.getContext("2d") //画像の読み込み var image = new Image(); image.src = main_image; image.onload = function() { con.drawImage(image,0,0); setTimeout(shufflePanel,3000); } //パネルのシャッフル function shufflePanel() { //パネルを初期化 for (var i = 0; i < 9; i++) { panels[i] = i; } //シャッフル for (var j = 0; j < 9 ; j++) { var r = Math.floor(Math.random() * 9); var tmp = panels[r]; panels[r] = panels[j]; panels[j] = tmp; } drawPanels(); } //パネルを番号に応じて描画 function drawPanels() { for (var i = 0; i < 9; i++){ var no = panels[i]; var pcol = no % 3; var prow = Math.floor(no / 3); var px = pcol * cell_w; var py = prow * cell_h; var tx = (i % 3) * cell_w; var ty = Math.floor(i / 3) * cell_h; if (no == 8) { //穴の表示 con.beginPath(); con.fillStyle = "#CCCCCC"; con.fillRect(tx, ty, cell_w, cell_h); } else { //画像を切り取って表示 con.drawImage(image, px, py, cell_w, cell_h, tx, ty, cell_w, cell_h); } //枠を描画 con.beginPath(); con.moveTo(tx + cell_w, ty); con.lineTo(tx, ty); con.lineTo(tx, ty + cell_h); con.strokeStyle = "#999999"; con.stroke(); } } //ユーザーのtouchイベントに反応する canvas.ontouchstart = function(e) { //for iPhone if (e.touches.length > 0){ var t = e.touches[0]; checkPanelXY(t.clientX, t.clientY); } e.preventDefault(); }; canvas.onmousedown = function(e) { //for PC checkPanelXY(e.clientX, e.clientY); }; function checkPanelXY(sx, sy) { //タップされたパネルを取得する var col = Math.floor(sx / cell_w); var row = Math.floor((sy-20) / cell_h); var no = row * 3 + col; //穴の上なら何もしない if (panels[no] == 8) { return } //穴に接リンしているか確認 for (var i = 0; i < pos_array.length; i++) { var row2 = pos_array[i][0] + row; var col2 = pos_array[i][1] + col; var check = getPanelNo(row2, col2); if (check == 8) { swapPanel(row, col, row2, col2); } } }; //行(row)と列(col)からパネル番号を返す function getPanelNo(row, col) { //範囲外なら-1を返す if (col < 0 || row < 0 || col >= 3 || row >= 3){ return -1; } return panels[row * 3 + col]; } //パネルを入れ替える function swapPanel(row1, col1, row2, col2) { var index1 = row1 * 3 + col1; var index2 = row2 * 3 + col2; var tmp = panels[index1]; panels[index1] = panels[index2]; panels[index2] = tmp; drawPanels(); } </script> </body> </html> です 動くことは動くのですが私の知識だとまだ理想には程遠いです、、、 理想としては 1.パズル完成後「CLEAR」の表示(ダイアログで表示したいです) 2.完成までかかった時間の表示 3.パズルの画面が中央に来てほしい 4.タブレットで使用したときに画面が小さいのでディバイスごとに適した大きさにしたい 5.今は用意した画像を読み込ませていますが自分で撮った写真などを読み込ませたい 説明がへたくそで申し訳ございません 最優先としては3,4の実装です 3,4を詳しく書くと スマホ、タブレットともに画面の中央に大きく表示ということです 始めたばかりの初心者なのでなるべく噛み砕いて教えていただけると嬉しいです

  • html5canvasの文字枠のずれ

    html5のcanvasで、枠付きの文字列を描画しようとしたら、表示がおかしくなったのですが、理由がわかりません。ブラウザはchromeです。 一部のフォントとサイズのときだけ起きるのですが、それ以外で作れば問題ないのでしょうか。 <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.lineWidth=2; ctx.font = "bold 22px 'MS P明朝'" ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.strokeText("aa0.3", 10, 25); ctx.fillText("aa0.3", 10, 25); </script>

  • JavaScriptで数値をimgに設定する

    JavaScriptで 下記のソースにてランダムで出した数値を htmlの width="" height=""に 設定するには どのようにすればよいのでしょうか? <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <script> var width = Math.floor(Math.random() * 400) + 1; var height = Math.floor(Math.random() * 400) + 1; </script> <img src="hoge.jpg" alt="" width="" height=""> </body> </html>