命令一覧

教育用JavaScript 命令一覧

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

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という属性に文字列を指定すると，クリック時にその文字列の関数を呼び出す．
- それ以外の属性は、HTMLの通常の属性として新しい要素に設定される。
'テキスト'には，文字列を指定．<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/>");
}

命令リストに戻る

setAttr('要素', '属性名', '属性値')

要素に属性を設定する．

'要素'には要素の名前またはIDを文字列で指定する．あるいはonClickで呼び出された関数の第１引数の値を指定する．
'属性名' には，その要素のもつ属性の名前を指定する．例えば<button name="test" class="big">という要素なら"name"や"class"
'属性値' には，設定した属性の値を指定する．例えば<button name="test" class="big">という要素なら"test"や"big"

setAttrの例：
HTML

<html>
    <div id="result">色が変わります。</div>
</html>

JavaScript

for (i=0;i<10;i++) {
    setAttr("result","style","color:green;");
    wait(500);
    setAttr("result","style","color:yellow;");
    wait(500);
}

命令リストに戻る

命令一覧

教育用JavaScript 命令一覧

addText(要素名,文字)

setText(要素名,文字)

getText(要素名)

getNumber(要素名)

onClick(要素名, 命令名)

onTouch(命令名)

changeImage(要素名,画像アドレス)

move(要素名,x,y)

rotate(要素名,角度)

resize(要素名,横比率,縦比率)

transform(要素名, 角度, 横比率, 縦比率)

wait(時間)

rnd(値)

setBGColor(色)

dist(x,y)

angle(x,y)

sqrt(x)

sin(x)

cos(x)

tan(x)

getkey('文字')

setInterval(命令名,時間)

setTimeout(命令名,時間)

setCanvas(要素名)

setColor(r,g,b)

fillRect(x,y,横幅,縦幅)

fillOval(x,y,横幅,縦幅)

drawLine(x1,y1,x2,y2)

clearRect(x,y,横幅,縦幅)

fillText(文字,x,y)

waitClick(要素名)

callServer('サーバのURL', '入力')

newElement('タグ名', '属性', 'テキスト')

getAttr('要素', '属性名')

setAttr('要素', '属性名', '属性値')

Bit Arrow

使い方

教員の方へ