命令一覧
命令一覧
- HTML要素の操作
- addText：文字を追加する
- setText：文字を表示する
- getText：文字を取得する
- getNumber：数値を取得する
- changeImage：画像を変える
- move：要素を動かす
- rotate：要素を回転させる
- resize：要素を拡大/縮小させる
- transform：要素の回転、拡大/縮小を同時に行う
- setBGColor：背景の色を変える
- 入力関連
- 数学関数
- 動作制御
- wait：少し待つ
- setInterval：一定間隔である動作を繰り返す
- setTimeout：一定の時間をおいて動作を行う
- グラフィックス
addText(要素名,文字)
要素名で指定した要素の最後に文字を追加する。
例: こんにちは と書かれた要素に ！ を追加する
HTML
<html> <body> <span name="moji">こんにちは</span> </body> </html>
JavaScript
// JavaScript
addText("moji","!");
setText(要素名,文字)
要素名で指定した要素に文字を設定する。
例: こんにちは と書かれた要素を こんばんは に書き換える
HTML
<html> <body> <span name="moji">こんにちは</span> </body> </html>
JavaScript
// JavaScript
setText("moji","こんばんは");
getText(要素名)
要素名で指定した要素に書かれた文字を取得する。
例: ボタンが押されたらテキストエリアに書かれた文字を表示する
HTML
<html>
<body>
<input name="nyuryoku">
<button name="hyouji">表示</button>
<span name="moji"></span>
</body>
</html>
JavaScript
// JavaScript
onClick("hyouji",hyouji);
function hyouji(){
m=getText("nyuryoku");
setText("moji",m);
}
getNumber(要素名)
要素名で指定した要素に書かれた数値を取得する。
例: ボタンが押されたらテキストエリアに書かれた数値を足し算する
HTML
<html>
<body>
x<input name="x"><br>
y<input name="y">
<button name="add">x+y</button><br>
x+y=<span name="result"></span>
</body>
</html>
JavaScript
// JavaScript
onClick("add",add);
function add(){
x=getNumber("x");
y=getNumber("y");
result=x+y;
setText("result",result);
}
onClick(要素名, 命令名)
要素名で指定した要素がクリックされたときの動作を設定する。
例: ボタンが押された時に、HTMLの内容を変更する
HTML
<html> <body> <span name="moji">こんにちは</span> <button name="change">変更</button> </body> </html>
JavaScript
// JavaScript
onClick("change", change);
function change() {
setText("moji","こんばんは");
}
- 新サーバでは，onClickで指定された関数の第１引数にクリックされた要素が渡されます．getAttrと組み合わせて，どのボタンが押されたかを判別可能になります．
onTouch(命令名)
実行画面内がタッチされたときの動作を設定する。
実行される関数側で、タッチされた座標（横、縦）の値と、タッチの情報(タッチされた瞬間： “start”、 タッチされたまま動いている: “move”、 タッチが離された： “end”)を受け取ることができる。
例: 画面がタッチされたとき、文字をその場所に移動し、文字をタッチの情報にする。
HTML
<html> <body> <span name="label">こんにちは</span> </body> </html>
JavaScript
// JavaScript
onTouch(moveLabel);
function moveLabel(mx,my,state) {
move("label",mx,my);
setText("label",state);
}
changeImage(要素名,画像アドレス)
要素名で指定した要素の画像を、画像アドレスで指定されたものに変更する
例：1秒後に猫の画像がボールの画像に変わる
HTML
<html> <body> <img src="images/neko1.png" name="n"> </body> </html>
JavaScript
// Javascript
wait(1000);
changeImage("n", "images/ball.png");
move(要素名,x,y)
要素名で指定した要素を、座標(x,y)に移動する。
例：文字を(100,100)の位置に移動させる
HTML
<html> <body> <span name="moji">文字</span> </body> </html>
JavaScript
// Javascript
move("moji",100,100);
rotate(要素名,角度)
要素名で指定した要素の画像を、指定された角度回転させる。
画像のサイズも同時に変えたいときは、transformを使用する。
例：猫の画像を30度右回転させる
HTML
<html> <body> <img src="images/neko1.png" name="n"> </body> </html>
JavaScript
// Javascript
rotate("n",30);
resize(要素名,横比率,縦比率)
要素名で指定した要素の画像を、指定された比率で拡大/縮小する。
画像の回転も同時に行いたいときは、transformを使用する。
例：猫の画像を横2倍に拡大、縦に80%縮小させる
HTML
<html> <body> <img src="images/neko1.png" name="n"> </body> </html>
JavaScript
// Javascript
resize("n",2,0.8);
transform(要素名, 角度, 横比率, 縦比率)
要素名で指定した要素の画像を、指定された角度回転させ、指定された比率で拡大/縮小する。
wait(時間)
指定した時間処理を中断する。単位はミリ秒(1000と指定すると1秒待つ)
rnd(値)
0から与えられた値未満の整数をランダムで返す
例：ランダムな場所に文字を置く
HTML
<html> <body> <span name="moji">文字</span> </body> </html>
JavaScript
// Javascript
move("moji",rnd(200),rnd(200));
setBGColor(色)
背景色を指定された色に変更する。
色には "red" "blue" のような英語の名称や、"rgb(100,200,50)"のように、赤、緑、青の比率（最大255）を指定して書く
dist(x,y)
2点間の距離を計算する。
2つの要素間の距離を測りたいときは、xとyの差分を与えるとよい
例：ネコとボールの直線距離を表示する
HTML
<html>
<body>
<span name="t">距離:</span>
<img src="images/neko1.png" name="n">
<img src="images/ball.png" name="b">
</body>
</html>
JavaScript
// Javascript
x=100;
y=140;
bx=180;
by=200;
move("n",x,y);
move("b",bx,by);
d=dist(x-bx,y-by);
addText("t",d);
angle(x,y)
2点間の角度を計算する。
2つの要素間の角度を測りたいときは、xとyの差分を与えるとよい
例：ネコとボールの角度を表示する
HTML
<html>
<body>
角度:<span name="angle"></span>
<img src="images/neko1.png" name="n">
<img src="images/ball.png" name="b">
</body>
</html>
JavaScript
// Javascript
x=100;
y=140;
bx=180;
by=200;
move("n",x,y);
move("b",bx,by);
d=angle(x-bx,y-by);
addText("t",d);
sqrt(x)
引数の平方根(ルート)を計算する。
例：ルート2を表示する
HTML
<html>
<body>
<span name="s"></span>
</body>
</html>
JavaScript
// Javascript
r=sqrt(2);
addText("s",r);
sin(x)
引数の角度からサイン(正弦)を計算する。
例：45°の正弦を表示する
HTML
<html>
<body>
<span name="s"></span>
</body>
</html>
JavaScript
// Javascript
s=sin(45);
addText("s",s);
cos(x)
引数の角度からコサイン(余弦)を計算する。
例：30°の余弦を表示する
HTML
<html>
<body>
<span name="c"></span>
</body>
</html>
JavaScript
// Javascript
c=cos(30);
addText("c",c);
tan(x)
引数の角度からタンジェント(正接)を計算する。
例：30°の正接を表示する
HTML
<html>
<body>
<span name="t"></span>
</body>
</html>
JavaScript
// Javascript
t=tan(30);
addText("t",t);
getkey(文字)
指定したキーが押されたかを検知する。
押されていると1、押されていないと0を返す。
文字の指定の仕方は、
A-Z : "a" ～ "z" 0-9 : "0" ～ "9" カーソルキー : "left", "up" , "right" , "down"
例：Aが押されているかどうかを表示する
HTML
<html>
<body>
<span name="a"></span>
</body>
</html>
JavaScript
// Javascript
while(true){
if(getkey("a")==1){
setText("a","押されている！");
}
else{
setText("a","押されていない！");
}
wait(100);
}
setInterval(命令名,時間)
一定間隔で命令をずっと繰り返す。
setTimeout(命令名,時間)
一定時間が経ったら命令を一度だけ行う。
setCanvas(要素名)
キャンバスへの描画で使うキャンバスを選択する。
例：キャンバスを設定して四角形を描く
HTML
<html>
<body>
<canvas name="c"></canvas>
</body>
</html>
JavaScript
// Javascript
setCanvas("c");
fillRect(10,20,50,90);
setColor(r,g,b)
キャンバスへ描画する色をr,g,bで決める。
例：赤で四角形を描いて緑で円を描く
HTML
<html>
<body>
<canvas name="c"></canvas>
</body>
</html>
JavaScript
// Javascript
setCanvas("c");
setColor(255,0,0);
fillRect(10,20,50,50);
setColor(0,255,0);
fillOval(100,100,40,40);
fillRect(x,y,横幅,縦幅)
選択されているキャンバスにx,yの位置を左上として四角形を描画する。
例：四角形を描く
HTML
<html>
<body>
<canvas name="c"></canvas>
</body>
</html>
JavaScript
// Javascript
setCanvas("c");
fillRect(10,20,50,90);
fillOval(x,y,横幅,縦幅)
選択されているキャンバスにx,yの位置を右上とし，横幅縦幅の大きさの四角形の内接円を描画する。
例：円を描く
HTML
<html>
<body>
<canvas name="c"></canvas>
</body>
</html>
JavaScript
// Javascript
setCanvas("c");
fillOval(10,20,50,90);
drawLine(x1,y1,x2,y2)
選択されているキャンバスにx1,y1の場所からx2,y2の場所へ線を描画する。
例：線を描く
HTML
<html>
<body>
<canvas name="c"></canvas>
</body>
</html>
JavaScript
// Javascript
setCanvas("c");
drawLine(20,20,100,150);
clearRect(x,y,横幅,縦幅)
x,yの位置を左上としてそこから横幅,縦幅分を消す(何も書いていなかった状態に戻す)。
例：四角形と円を描いた後で一定の範囲を消す
HTML
<html>
<body>
<canvas name="c"></canvas>
</body>
</html>
JavaScript
// Javascript
setCanvas("c");
setColor(255,0,0);
fillRect(10,20,50,90);
setColor(0,255,0);
fillOval(50,60,70,100);
clearRect(30,40,50,50);
fillText(文字,x,y)
x,yの位置に文字を描く。
例：文章を描く
HTML
<html>
<body>
<canvas name="c"></canvas>
</body>
</html>
JavaScript
// Javascript
setCanvas("c");
fillText("こんにちは",50,50);
waitClick(要素名)
要素がクリックされるまで待つ。
例：クリックされると文章が追加される。
HTML
<html>
<body>
<span name="hello">おはよう</span>
</body>
</html>
JavaScript
// Javascript
addText("hello","こんにちは");
waitClick("hello");
addText("hello","こんばんは");
※以下の命令は新サーバのみで使用できます．
callServer(サーバのURL, 入力)
サーバ側のPythonプログラムを呼び出す．
- サーバのURLには，Pythonプロジェクトで作成したプログラムを「サーバで実行」し，「別ページで表示」で表示されるページのURLを指定
- 入力には，Pythonプログラムがinput()で入力を行う場合，入力するテキストを指定．入力が複数回の場合，それぞれ改行"\n"で区切って指定
- 戻り値は，Pythonプログラムの出力（printで表示されるもの）
newElement(タグ名, 属性, テキスト)
新しいHTML要素を作成する．
- タグ名は<button>であれば，"button"など
- 属性は，オブジェクトで指定．<button name="test" class="big"> であれば{name:"test", class:"big"} など
- parentという属性を文字列で指定すると，parentで指定されたidまたはnameをもつ要素の子要素として追加する．指定がない場合は<body>に追加する．
- onClickという属性に文字列を指定すると，クリック時にその文字列の関数を呼び出す．
- テキストには，文字列を指定．<button>OK</button>であれば，"OK"など
getAttr(要素, 属性名)
要素から属性を得る．
- 要素には要素の名前またはIDを文字列で指定する．あるいはonClickで呼び出された関数の第１引数の値を指定する．
- 属性名 には，その要素のもつ属性の名前を指定する．例えば<button name="test" class="big">という要素なら"name"や"class"
- 戻り値はその属性の値．上の例で"class"を属性名に指定すれば，"big"が戻り値になる．
newElementとgetAttrの例：
HTML
<html>
<div name="buttonList"></div>
<div name="result"></div>
</html>
JavaScript
//５個のボタンを置く
for (var i=0;i<5;i++) {
newElement("button",{
parent:"buttonList", //buttonListの配下に置く．
name:"button"+i, //名前を設定
onClick: click, //クリックされたらclick関数を呼ぶ
},"ボタン"+i);//ボタンに書く文字
newElement("br",{parent:"buttonList"});//改行する
}
function click(b) {
// bに押されたボタンが渡される
var name=getAttr(b,"name");//ボタンbの名前を取得
addText("result", name+"が押されました<br/>");
}
