ICT基礎第13回

2024-07-11 2024-07-11
JavaScript

今日のフォルダの準備

Windows: C:\Users\[ユーザ名]\Documents\ict に移動し, 13 というフォルダを作成しておく
- C:\Users\[ユーザ名]\Documents\ict\13 というフォルダ構成になる
Mac: /Users/[ユーザ名]/Documents/ict/ に移動し, 13 というフォルダを作成しておく
- /Users/[ユーザ名]/Documents/ict/13

今日のサンプルファイル集

下記のどちらかからからダウンロードできます

サンプルファイル集 (ICT-13-samples.zip)
WebClassの授業資料

Windowsの人は必ずzipファイルを展開すること!! zipファイルの中では作業できません.

プログラミング

概要

コンピュータに何らかの仕事をさせるための手順をまとめた命令 (群) をプログラミングと呼びます.

人間に何らかの仕事をしてもらうためには, ある程度曖昧な手順や伝え方でも概ね伝わりますが, コンピュータの場合は, 細かく1つ1つ指定しなければ伝わりません.

そこで, 「どのような順番でどのような命令を実行するのか」を事細かにまとめる必要があります.

そう言われると非常に面倒なもののように思えますが, 人間よりも曖昧さがなく, かつ, 命令に忠実に実行する (再現性が高い) 点はプログラミングの大きなメリットです.

CPUやメモリの動作等を意識して組んでいくタイプのプログラミングだと習得するのは大変ですが, 現在は, そういった細かい部分を意識しないでも動作してくれるものが多くありますので, 以前よりもかなりやりやすくなっていると思います.

一般に人工知能 (AI. Artificial Inteligence) と呼ばれるものも単純な命令の集まりでできていますし, プログラミングへの心理的抵抗が減り, 簡単なプログラミングができるだけでも大きな意味がありますので, 初めての方は是非挑戦してみましょう.

必要性と意義

2020年度より, プログラミングは小学校で必修化されています.

算数の得意/不得意に個人差があるように, 全員がプログラミング上級者になることはないと思いますが, 簡単な計算なら誰でもできるように, ある程度の基礎は身につけている人の割合は増えていくはずです.

人間では途方も無い時間がかかる作業も, プログラムを組めば一瞬で終わることも多くあります.

現在では多くの分野でコンピュータが使用されています. その際に使われているシステムをただ使うだけではなく, 作ることができれば, 自分がやらなくても良いことに時間を割く必要がなくなります.

また, プログラミング能力を鍛えることは論理的思考力を鍛えることにもつながるため, その意味でも実社会に出た際に, 役立つことでしょう.

実際にプログラミング言語を身につける際は, 本でもネット上の資料でも何でも活用してみると良いです. また, GMSには, いくつかの言語についての講義があります. 講義の良いところは質問できる点ですから, それらの講義を受講して, わからないことがあったらどんどん質問すると良いです. 本やネットで独習していると, 理解に詰まってしまうことがあるでしょうが, 講義なら質問し放題なのでどんどん活用すると良いです.

プログラミング言語

現在, 世の中には様々な種類のプログラミング言語があります.

これらのプログラミング言語にはそれぞれ「目的」「計算の速さ」「実行できる環境」「命令できることの深さ↔知る必要の多さ」など様々な特徴があります.

例:

アセンブリ
C言語
C++
C#
Python
HTML
CSS
JavaScript
Swift
Java
Fortran
Scratch

等々...

この内のどれか1つが「全てを網羅する完璧なプログラミング言語!!」...というわけではありません. 上記の通り, 言語ごとに特徴があるため, 状況によって使い分けるのが良いと思います.

どの言語から学んだらよいか? という疑問もあると思いますし, 世の中にはこの順序で学ぶべき!! と主張している人もいます. もちろん, それらの情報を集めて参考にするのは良いのですが, まずは, 少しずつでも成果物 (ホームページ, ゲーム, アプリ等) を作り切って慣れていくことが大切です.

1つの言語に慣れれば, 他の言語は文法が少し違うだけで, プログラムの書き方は大体似ていることも多いです.

自然言語における「スペイン語と英語が似ている」と近い

なお, プログラミング言語を学習し始める際の最初の大きな壁が環境構築です.

言語によっては, まずプログラミング言語を実行できる環境を整えるための手順に躓くことも多いのですが, 現在は, 環境構築が不要で, すぐにプログラミングを開始できるものも揃っているので, 最初はその辺りから手をつけ始めてみても良いかもしれません.

Scratch
- https://scratch.mit.edu/
- 視覚的な部品を組み合わせることで, プログラミングの基礎を学ぶことができる
- あくまで教育用
HTML, CSS, JavaScript
- 基本的にはテキストエディタ (VS Code等) とブラウザ (Chrome等) があれば, ある程度は実行できる
- JavaScriptは内容によってはサーバが必要な場合もある
Processing
- ダウンロードしてくるだけで利用できるプログラミング言語
- https://processing.org/
- カメラや画像処理, 電子工作との連携などが簡単に実行できるので便利
p5.js
- Processingでできる内容をブラウザだけでできるようにしたもの. JavaScriptベース.
- https://p5js.org/ が公式ページ
- https://editor.p5js.org/ が実際に試せるページ
  - ログイン等もせずにすぐに使える点が利点
  - アカウントを作ってログインするとコードを保存したりできる
Python
- 基本的には自分のPCに環境構築する必要がある
- https://www.python.org/
- 世界的に人気が高く, AIや宇宙, 統計など様々な分野で利用されている
  - 様々なライブラリ (便利ツール) が充実しているため, 高度な計算も簡単に実装できる
  - 視覚的に実行しやすいライブラリとしては, jupyter がある.
- とにかく試すだけなら, Google Colaboratory がオススメ. Googleアカウントがあれば, ブラウザからアクセスするだけでpythonを実行できる

論理的思考とアルゴリズム

物事を順序立てて考えることを論理的思考と呼びます. プログラミングをする際には, 論理的に思考に基づいて

成果物の目標を明確にし,
目標達成に必要な要素を用意し,
それらの要素を適切な順序で並べる

という作業が必要になります.

この「目標を達成するための手順」をアルゴリズムと呼びます.

例: 朝食

例えば, 朝食としてトーストと目玉焼きを作るとしましょう.

目標: トーストと目玉焼きの朝食
用意:
- 材料: 食パン, 卵, 油, バター
- 器具: コンロ, フライパン, オーブントースター
手順:
1. フライパンに火を付ける → 油を引く → 卵を割って中身をフライパンに落とす → 7分待つ → 取り出す (約8分)
2. オーブントースターに食パンを入れる → オーブントースターをONにする → 3分待つ → 取り出す (約4分)

上記の「手順」が1つのアルゴリズムに相当します. ここでは, トーストと目玉焼きを順々に実行し, 合計で約12分かかりました.

しかし, 実際に皆さんが調理する場合, トーストと目玉焼きの作業をある程度並行して作業するでしょう. 例えば, 「フライパンに卵を入れたらトーストの準備をする」などです. この場合, 7分の待ち時間にトーストが出来上がるため, 全体で約8分で済みます.

このように, 手順によっては, より短時間で簡単に目標を達成することができます. これが効率の良いアルゴリズムの例です.

例: 足し算

他の例は, 1から100までの足し算です.

これを真面目に計算すると,

\begin{matrix} 1 + 2 = 3 \to 3 + 3 = 6 \to 6 + 4 = 10 \to \dots \to 4950 + 100 = 5050 \end{matrix}

のようになります. このような計算方法も1つのアルゴリズムです. しかし, このやり方だと, 簡単な足し算を99回も実行しなければならず, 非常に面倒です.

そこで, 最初と最後から順に足し合わせを考えてみると

\begin{aligned} 1 + 100 & = 101 \\ 2 + 99 & = 101 \\ ⋮ \\ 50 + 51 & = 101 \end{aligned}

と, 全て101になることがわかります. この101のペアは50個ありますので,

\begin{matrix} 50 \times 101 = 5050 \end{matrix}

となり, 簡単な計算1つで求められることになります. したがって, こちらの方が効率の良いアルゴリズムとなります.

JavaScript

静的/動的なウェブページ

前回までに制作したHTML+CSSのウェブページは「静的なウェブページ」と呼ばれます. これは, 何度アクセスしても同じページが表示され, 変化がないためです.

一方, Amazonなどの通販サイトなどは, その時々の在庫状況に応じて表示が変わります. また, 欲しい物リストやカートに商品を入れると, 同じページ内で表示が変わることでしょう, このように, 状況によって表示が変わるウェブページを「動的なウェブページ」と呼びます.

もちろん, 在庫数だけが異なるHTML+CSSの静的ウェブページを複数用意することでもその時々の在庫状況を正しく表示することはある程度可能です. しかし,

無限に近いパターン数のページを予め作っておく必要がある
在庫数以外の変わらない部分も毎回読み込む必要がある

など非効率的です.

一方, 動的なウェブページであれば, 変更部分だけを再読み込みすれば良いので, 効率的です.

動的なウェブページの実装にはJavaScript, PHPなどのプログラミング言語を使うことが通例です.

JavaScriptについて

JavaScriptは (基本的には) ウェブブラウザ内で動くプログラミング言語です. 特に, 動的なウェブページを実装する際によく使用され, HTMLとCSSをリアルタイムに書き換えていくことができます.

そのウェブページを訪れた人 (クライアント) のブラウザ側の処理によって画面表示を変化させるため, クライアントサイドのプログラミング言語と呼ばれることもあります.

逆に, そのウェブページを訪れた人の画面表示の変化をサーバ側の処理で実行する例としては, PHPというサーバサイドのプログラミング言語があります.

現在ではウェブブラウザ内にとどまらず, 単体のアプリケーションの開発にも使用されており, 様々な環境で動作し且つ比較的軽量なアプリ開発に向いています.

なお, 名前の似ているJavaというプログラミング言語とは無関係です

JavaScriptはHTML, CSSと同様にVS Codeなどのテキストエディタを用いて開発していきます.

簡単に実装するには, HTML内に


<script>
    内容あれこれ...
</script>

のように直接記述することも一応可能です. ただし, この書き方だとどこに何のJavaScriptを書いたのかの管理がしづらくなります. そのため, 実際には, JavaScriptをapp.jsなどの別ファイルに分け, それをHTML内で


xxxxxxxxxx
<script src="app.js"></script>

などのように記述するのが通例です.

開発ツール (検証) のコンソールでの簡易テスト

jsファイルを一々用意するのが面倒くさくて, 一時的に機能を試したい程度であれば, ブラウザの開発ツール (検証) のコンソールを利用するのが手です.

ただし, ブラウザ画面を再読み込み (リロード) すると内容が消えてしまうので, あくまで簡易テスト用として使うのが良いです.

JavaScriptの導入


xxxxxxxxxx
.
├── app.js
└── index.html

というファイル構成の場合, HTML内で

<head>.....</head> or <body>.....</body>の中に,
<script src="./app.js"></script>を書く

と, そのHTMLでapp.jsというJavaScriptを読み込んだことになります.

CSSの場合と似ていますよね.

index.html


xxxxxxxxxx
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gk9999</title>
</head>
<body>
    aiueo
    <script src="./app.js"></script>
</body>
</html>

app.js


xxxxxxxxxx
console.log("hello!!");

コンソール (検証のConsoleタブ) の中に記録 (log) を表示せよ, という意味
" (ダブルクォーテーション) or ' (シングルクォーテーション) で囲んだ内容は文字列として扱う
console.log(表示したいこと)を1つのコマンドと呼ぶ
最後の; (セミコロン) は文の終わりを示す記号
- 各行の中でコマンドが終わったら最後に;を付ける.
- 日本語の。 (句点) のようなもの
ここでは総じて「hello!!という文字列をコンソールに表示せよ」という意味になる

Tips

日本語の内容が必要な場合を除き, ほぼ全ての場合において半角英数記号を使用します. 最初のころは特に「全角文字を間違えて入力」などのミスをしがちなので, 徐々に慣れていきましょう.

また, 試しているとエラーが何度も出てくると思います. エラーは「なんかよくわかんないのが出て怖い」ものではなく, 「ここから先に進めなくて上手くいかなくなったよ」というコンピュータからのメッセージなので, 怖がらずにメッセージの内容を読んで自分のコードを見直してみましょう.

コメント化

実際にはプログラムとして実行しない内容を「コメント」と呼びます.

ある行で// (スラッシュ2回) を入力すると, その行のそれ以降の内容はコメントになります.

キーボードショートカット
- Windows
  - Ctrl + K → Ctrl + C
  - Ctrl + /
- Mac
  - Command + K → Command + C
  - Command + /

index.html


xxxxxxxxxx
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    aiueo
    <script src="./app.js"></script>
</body>
</html>

app.js


xxxxxxxxxx
console.log("hello!!");
//console.log("goodbye!!");

基本的な演算

JavaScriptでエクセルや他のプログラミング言語等と同様に様々な数値計算ができます.

ここでは基本的な演算を紹介します.

index.html (変更なし)


xxxxxxxxxx
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    aiueo
    <script src="./app.js"></script>
</body>
</html>

app.js (追加)


xxxxxxxxxx
console.log(1 + 1);
console.log(10 - 5);
console.log(3 * 4);
console.log(10 / 5);
console.log(10 % 3); //余り

```
xxxxxxxxxx
console.log(1 + 1);
```
- +: 足し算
- 1 + 1 でも1+1でも同じ. 半角スペースは結果に影響を与えないので, 人間が読みやすいように半角スペースをどれだけ入れてもOK


xxxxxxxxxx
console.log(10 - 5);

-: 引き算


xxxxxxxxxx
console.log(3 * 4);

*: 掛け算


xxxxxxxxxx
console.log(10 / 5);

/: 割り算


xxxxxxxxxx
console.log(10 % 3);

%: 余り
10を3で割った余りなので, 結果は1

変数

数学で「横の長さをXと置き, 縦の長さをYと置く」と書いた時, X, Yは変数と呼ばれるものでした.

プログラミング言語でも同じように, (ほぼ) 任意の文字列を変数の名前 (変数名) として使用することができます.

変数名に使用する文字 (慣習)
- 半角アルファベットのa ~ z, A ~ Z
- _ (アンダースコア)
- $ (ダラー)
- 半角数字の0 ~ 9
推奨しない文字 (慣習)
- 全角文字
  - 一応使えるが, 半角の演算子など, 半角英数記号を入力することが殆どなので面倒であり, 場合によっては上手く動作しない (バグ) の原因になりうるため使わない方が良い
使用できない変数名
- 数字のみ, 数字から始まる名前
  - NG: 123, 12apple
  - OK: apple12
- 予約語と同じ名前
  - プログラミング言語の中で特別な意味を持たされている文字列を「予約語」と言います.
  - 予約語の例: break, for, if, ...

最初に変数を使用する際はlet or constを変数名の前に半角スペースを開けて付けます.

letは後から内容を変更できる変数
constは後から内容を変更できない変数

を意味します.

OK: let apple=100;
OK: const banana=100;
NG: letapple=100;
OK: let apple = 100;


xxxxxxxxxx
let apple = 100;
apple = 200;


xxxxxxxxxx
let apple = 100;
let apple = 200;


xxxxxxxxxx
const apple = 100;
apple = 200;

index.html (変更なしなので割愛)

app.js (追加)


xxxxxxxxxx
let apple = 100;
let apple2 = 300;
console.log(apple);
console.log(apple2);
const banana = 200;
// banana = 400;
console.log(banana);

関数

index.html (変更なしなので割愛)

app.js (追加)


xxxxxxxxxx
calcTest(10000);

function calcTest(x){
    console.log(123 + x);
}


xxxxxxxxxx
function 関数名 (引数){
    処理内容
}

で定義した関数 (処理をひとまとめにしたもの) を


xxxxxxxxxx
関数名(引数);

という形で呼び出すことができます.

条件分岐 (if, else if, else)

index.html (変更なしなので割愛)

app.js (追加)


xxxxxxxxxx
let participants = 10;
let capacity = 200;
console.log("participants="+participants, " capacity="+capacity)
if (participants <= capacity/10) {
    console.log("ガラガラです");
} else if (participants < capacity) {
    console.log("空きがあります");
} else {
    console.log("定員を超えています");
}


xxxxxxxxxx
if (条件A){
    条件Aを満たす場合の処理
}
else if (条件B){
    条件Bを満たす場合の処理
}
else {
    条件A, Bを満たさない場合の処理
}

という形で, 条件分岐を実施します.

繰り返し (for)

index.html (変更なしなので割愛)

app.js (追加)


xxxxxxxxxx
// 繰り返し (for)
for (let i=0; i<9; i++){
    console.log(i)
}
// 結果: 0, 1, 2, 3, 4, 5, 6, 7, 8

for (let i=0; i<9; i+=2){
    console.log(i)
}
// 結果: 0, 2, 4, 6, 8


xxxxxxxxxx
for (初期値の定義; 終わりの条件; 繰り返し幅){
    繰り返す実行内容
}

という形で, 繰り返しの処理を実施します.

ボタンを押すと文字が変わる

index.html (追加, 修正)


xxxxxxxxxx
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gk9999</title>
</head>
<body>
    <button>クリック</button>
    <p>pタグのテキストです</p>
    <script src="./app.js"></script>
</body>
</html>

app.js (追加, 修正)


xxxxxxxxxx
let p = document.querySelector("p");
console.log(p.innerText);
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
    p.innerText="変更したよ";
});


xxxxxxxxxx
let p = document.querySelector("p");

HTMLの中からpタグを探して抽出し, pという変数名に代入


xxxxxxxxxx
console.log(p.innerText);

抽出してきたpタグ内のテキストをコンソールに表示


xxxxxxxxxx
let btn = document.querySelector("button");

HTMLの中からbuttonタグを探して抽出し, pという変数名に代入


xxxxxxxxxx
btn.addEventListener("click", () => {
    p.innerText="変更したよ";
});

抽出してきたbuttonをクリックしたら, pタグの中のテキストを「変更したよ」に変更する

JavaScript (描画)

サンプル

javascriptを用いて動く絵を作っていきます.

描画の初期処理とループ処理

02/index.html (新規)


xxxxxxxxxx
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="600" height="400" id="canvas" style="border: solid 1px;"></canvas>
    <script src="./app.js"></script>
</body>
</html>

02/app.js (新規)


x
// 初期値, 変数の設定
let canvas;
let ctx;

// 初期設定, ループの実行
setup();
loop();

// 初期設定
function setup(){
    console.log("start!!");
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval("loop()", 1000);
}

// ループ
function loop(){
    console.log("Loop!!");
}

setup という関数を用意し, 実行していることで, ここがゲームの起点 (初期処理) となります.


xxxxxxxxxx
canvas = document.querySelector("#canvas");

index.html内のgameCanvasというidを持ったcanvasタグを取得し, canvasという名前の変数に入れています.

```
xxxxxxxxxx
ctx = canvas.getContext("2d");
```
- 今回は2次元の横スクロールゲームなので, canvasの中の表示形式を2dにします (3D表示のゲーム等を作りたい場合はwebglにします)
```
xxxxxxxxxx
setInterval("loop()", 1000);
```
```
xxxxxxxxxx
function loop(){
    console.log("Loop!!");
}
```
- setIntervalという関数を使って, loopという関数を1000ミリ秒ごとに実行する設定をします.
- $1000 {\rm ~[ms]}/60\approx 16 {\rm ~[ms]}$ として, setInterval("loop()", 16); 程度にすることが多いです.

背景

白い背景の上に赤い四角を描いていきます

canvas

app.js (追加, 修正)


xxxxxxxxxx
// 初期値, 変数の設定
let canvas;
let ctx;
let x = 100;
let y = 100;
let vx = 0;
let vy = 0;
let size = 20;

// 初期設定, ループの実行
setup();
loop();

// 初期設定
function setup(){
    console.log("start!!");
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval("loop()", 16);
}

// ループ
function loop(){
    // console.log("Loop!!");
    drawBackground();
    drawRect();
}

// 背景の描画
function drawBackground(){
    ctx.fillStyle = "rgb(255,255,255)"
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// 四角の描画
function drawRect(){
    ctx.fillStyle = "rgb(255,0,0)"
    ctx.fillRect(x, y, size, size);
}

壁での反射

app.js (追加, 修正)


xxxxxxxxxx
// 初期値, 変数の設定
let canvas;
let ctx;
let x = 100;
let y = 100;
let vx = 0;
let vy = 0;
let size = 20;

// 初期設定, ループの実行
setup();
loop();

// 初期設定
function setup(){
    console.log("start!!");
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval("loop()", 16);
}

// ループ
function loop(){
    // console.log("Loop!!");
    drawBackground();
    calcPosition();
    drawRect();
}

// 背景の描画
function drawBackground(){
    ctx.fillStyle = "rgb(255,255,255)"
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// 四角の描画
function drawRect(){
    ctx.fillStyle = "rgb(255,0,0)"
    ctx.fillRect(x, y, size, size);
}

// 四角の位置の計算
function calcPosition(){
    let nextX = x + vx;
    let nextY = y + vy;
    if (nextX < 0){
        nextX = 0;
        vx *= -1;
    }
    else if (canvas.width < nextX){
        nextX = canvas.width;
        vx *= -1;
    }
    if (nextY < 0){
        nextY = 0;
        vy *= -1;
    }
    else if (canvas.height < nextY){
        nextY = canvas.height;
        vy *= -1;
    }
    x = nextX;
    y = nextY;
}

キー入力

キー入力ができるようにします

app.js


xxxxxxxxxx
// 初期値, 変数の設定
let canvas;
let ctx;
let x = 100;
let y = 100;
let vx = 0;
let vy = 0;
let size = 20;

// 初期設定, ループの実行
setup();
loop();

// 初期設定
function setup(){
    console.log("start!!");
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    document.onkeydown = keydown;
    setInterval("loop()", 16);
}

// ループ
function loop(){
    // console.log("Loop!!");
    drawBackground();
    calcPosition();
    drawRect();
}

// 背景の描画
function drawBackground(){
    ctx.fillStyle = "rgb(255,255,255)"
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// 四角の描画
function drawRect(){
    ctx.fillStyle = "rgb(255,0,0)"
    ctx.fillRect(x, y, size, size);
}

// 四角の位置の計算
function calcPosition(){
    let nextX = x + vx;
    let nextY = y + vy;
    if (nextX < 0){
        nextX = 0;
        vx *= -1;
    }
    else if (canvas.width < nextX){
        nextX = canvas.width;
        vx *= -1;
    }
    if (nextY < 0){
        nextY = 0;
        vy *= -1;
    }
    else if (canvas.height < nextY){
        nextY = canvas.height;
        vy *= -1;
    }
    x = nextX;
    y = nextY;
}

// キーボードを押したときの処理
function keydown(e){
    console.log(e.code);
    // move1step(e);
    moveAuto(e);
}

// 1ステップごと移動
function move1step(e) {
    let delta = 10;
    if (e.code == "ArrowUp"){
        y -= delta;
    }
    else if (e.code == "ArrowDown"){
        y += delta;
    }
    else if (e.code == "ArrowLeft"){
        x -= delta;
    }
    else if (e.code == "ArrowRight"){
        x += delta;
    }
}

// 自動で移動
function moveAuto(e){
    let delta = 1;
    if (e.code == "ArrowUp"){
        vy -= delta;
    }
    else if (e.code == "ArrowDown"){
        vy += delta;
    }
    else if (e.code == "ArrowLeft"){
        vx -= delta;
    }
    else if (e.code == "ArrowRight"){
        vx += delta;
    }
}


xxxxxxxxxx
document.onkeydown = keydown;


xxxxxxxxxx
// キーボードを押したときの処理
function keydown(e){
    console.log(e.code);
}

keydownという関数を作成し, キーボードが入力された場合の処理を書けるようにする
e.codeで実際に入力されたキーを取得できる


xxxxxxxxxx
// 1ステップごと移動
function move1step(e) {
    let delta = 10;
    if (e.code == "ArrowUp"){
        y -= delta;
    }
    else if (e.code == "ArrowDown"){
        y += delta;
    }
    else if (e.code == "ArrowLeft"){
        x -= delta;
    }
    else if (e.code == "ArrowRight"){
        x += delta;
    }
}

矢印キーを押すたびに, 移動するパターン


xxxxxxxxxx
// 自動で移動
function moveAuto(e){
    let delta = 1;
    if (e.code == "ArrowUp"){
        vy -= delta;
    }
    else if (e.code == "ArrowDown"){
        vy += delta;
    }
    else if (e.code == "ArrowLeft"){
        vx -= delta;
    }
    else if (e.code == "ArrowRight"){
        vx += delta;
    }
}

矢印キーを押すたびに速さが変わるパターン

課題

提出締切: ● ICT基礎木4: 2024-07-18 14:40 ● ICT基礎木5: 2024-07-18 16:20

講義内で作成したtryフォルダをzipにまとめ, 学生番号_ICT_13.zip (例: gk9999_ICT_13.zip) に変更し, 提出してください

tryフォルダ

大学アンケート

先週と同じアナウンスです. 回答済みの方は読まなくて大丈夫です!!

先週 or 今週は大学のアンケートもあります. いつもの出席アンケートとは別の追加アンケートですので, 未回答の方はこちらもご協力お願いします.

WebClassの本授業ページの「令和6年度学生による授業アンケート」です.

なお, 大学のアンケートの設問数は15問程度, 回答は10分程度, 回答者は匿名化されます.

スマートフォン・PCからWebClassにアクセスし, 授業時間内に回答をしてください (授業アンケート期間内であれば, 授業時間以外での回答も可能です)

回答手順が不明な場合にはKONECOに配信されている「授業アンケートの回答方法について」をご確認ください.

提出締切: 2024/07/15 (月)

ICT基礎 第13回

今日のフォルダの準備

今日のサンプルファイル集

プログラミング

概要

必要性と意義

プログラミング言語

論理的思考とアルゴリズム

例: 朝食

例: 足し算

JavaScript

静的/動的なウェブページ

JavaScriptについて

開発ツール (検証) のコンソールでの簡易テスト

JavaScriptの導入

Tips

コメント化

基本的な演算

変数

関数

条件分岐 (if, else if, else)

繰り返し (for)

ボタンを押すと文字が変わる

JavaScript (描画)

描画の初期処理とループ処理

背景

壁での反射

キー入力

課題

大学アンケート

関連記事

Keywords

JavaScript

ICT基礎第13回