命令一覧

命令一覧

命令リスト

  • addText:文字を追加する
  • setText:文字を表示する
  • getText:文字を取得する
  • getNumber:数値を取得する
  • onClick:クリックされたときの動作を設定する
  • onTouch:タッチされたときの動作を設定する
  • changeImage:画像を変える
  • move:要素を動かす
  • rotate:要素を回転させる
  • resize:要素を拡大/縮小させる
  • transform:要素の回転、拡大/縮小を同時に行う
  • wait:少し待つ
  • rnd:ランダムな数字を取得する
  • setBGColor:背景の色を変える
  • dist:二点間の距離を求める
  • angle:二点間の角度を求める
  • sqrt:数の平方根を求める
  • sin:サイン(正弦)を求める
  • cos:コサイン(余弦)を求める
  • tan:タンジェント(正接)を求める
  • getkey:キー入力を調べる
  • setInterval:一定間隔である動作を繰り返す
  • setTimeout:一定の時間をおいて動作を行う
  • setCanvas:使うキャンバスを設定する
  • setColor:キャンバスに描く色を決める
  • fillRect:キャンバスに四角形を描く
  • fillOval:キャンバスに円を描く
  • drawLine:キャンバスに線を描く
  • clearRect:キャンバスから四角形の範囲を消す
  • fillText:キャンバスに文字を描く
  • waitClick:要素がクリックされるまで待つ

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","こんばんは");
}

命令リストに戻る

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","こんばんは");

命令リストに戻る

powered by Quick Homepage Maker 5.1
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional