第06回Web講座2018

ネットワークチーム第６回北海道科学大学電子計算機研究部

INDEX ⚫ JavaScriptとは ⚫ JavaScript の書き方 ⚫ 変数 ⚫ スコープ
⚫ 配列 ⚫ 関数 ⚫ 分岐 ⚫ 繰り返し 2

JavaScriptとは

JavaScriptとはプログラミング言語の一種 Webページでとてもよく使われる事実上の標準技術（デファクトスタンダード）他のプログラミング言語より比較的簡単に扱うことができる 4

コンパイラ言語とスクリプト言語 5 コンパイラ言語（ C C++ Go など）コンパイルソース
コード機械語リンカー実行可能プログラムソースコード実行実行逐一翻訳スクリプト言語（ JavaScript PHP など）スクリプト言語は、コンパイラ言語に比べて処理が遅いが簡単・手軽に書くことができる

JavaとJavaScript JavaとJavaScriptは別物メロンとメロンパンインドとインドネシア玉木宏と玉置宏
くらい違う 6

JavaScript の書き方

JavaScriptの書き方（デベロッパーツール） 1. デベロッパーツールを起動して “Console” タブをクリックする 2. コンソールに以下を入力してエンター alert("単位が足りません！"); 3. アラートが表示された
8

JavaScriptの書き方（scriptタグ内に記述） 1. HTML文書内に<script>タグを記述する場所はどこでも良いが、<head>タグの最後尾が推奨 2. <script>タグ内に以下を入力して保存 alert(1 + 1); 3.
保存したHTML文章をブラウザで開く 4. アラートが表示された 9

JavaScriptの書き方（.jsファイルに記述） 1. HTML文書内に、以下の<script>タグを入力 <script src="./js/test.js"></script> 2. “./js/test.js“ を作成し、test.js の画像の通り入力 3.
保存したHTML文章をブラウザで開く 4. アラートが表示された 10 test.js

変数について variable

変数のイメージ変数とは値を入れておくための箱 12 変数名は自由につけることができる num 変数→

変数の宣言変数を使うには、変数を用意する必要があるこれを変数の宣言という 13 let 変数名; const 変数名; var 変数名;
num let num; 構文

変数の代入変数には、値を入れることができる。変数に値を入れることを代入するという。 14 変数名 = 値; num num =
3; 構文

変数の初期化変数を宣言すると同時に値を代入することができる。これを変数の初期化という。 15 let 変数名 = 値; foo let
foo = 3; 構文

書いてみよう 16 let num; num = 3; console.log(num); let foo
= 5; console.log(foo);

変数の演算 + や – を、プログラミングでは演算子という。変数と演算子を使うことで計算ができる。 17 num let bar
= num + foo; bar foo + 代入

書いてみよう 18 let num = 3, foo = 3; let
bar = num + foo; console.log(bar);

変数まとめ変数とは ⚫ プログラム上で、処理に使う数値などのデータ（値）に名前をつけて保持するためのもの。 ⚫ 変数を使用するには、最初に変数を宣言する必要がある。 ⚫ 変数に値を入れる事を、値を代入するという。 ⚫
変数の宣言と同時に値を代入することを初期化と呼ぶ。構文 19 変数の宣言 var 変数名 ; var 変数名1, 変数名2 ; 値の代入変数名 = 値; 変数の初期化 var 変数名 = 値;

変数の型 let const 変数の型 ⚫ C言語などのプログラミング言語では「整数はint型」「文字列はchar型」といったように代入する値によって方を指定する必要がある。しかし、JavaScriptに変数の型はない。 ⚫
近年では、var の代わりに let const の使用が推奨されている。 const ⚫ 変数を定数（再代入不可）にする。 ⚫ 円周率 π（3.1415…）など、値を書き換える必要が無い変数に使用する。 let ⚫ 値を書き換える必要がある変数に使用する。 20

データ型 21 データ型名値数値型数値（実数 8進数 16進数浮動小数点数）文字列型
文字列（「”」、「’」で囲んだ値）論理型 true/false 配列型複数の値を入れた変数オブジェクト型キーと値を対応付けた連想配列 null 何もないことを表す値 undefined 未定義の値 JavaScriptの変数には何でも入れることができるがデータには種類がある。これをデータの型という。

書いてみよう 22 let str1 = “Hello ”; let str2 =
“World!”; console.log (str1 + str2);

スコープ

スコープスコープとは ⚫ 変数や関数を参照できる（代入や呼び出しができる）範囲のこと。 ⚫ どこからでも参照できる変数はバグの原因！ ⚫ 小さな部品（モジュール）を組み合わせて大きなプログラムを作るのが定石。
var ⚫ 関数スコープ ⚫ 関数内からならどこからでも参照できてしまう。 let ⚫ letで宣言した変数は、ブロック｛｝内でのみ有効。 24

配列について Array

配列とは配列とは、複数の変数を一つに纏めたものである。 26

配列とは配列は変数名と添え字を使って管理する。宣言の方法は以下の通り。 27 var 配列名 = [値1, 値2, 値3];
var 配列名 = new Array(値1, 値2, 値3); var arr = [2, 17, 3]; 構文 arr[0] arr[1] arr[2]

書いてみよう 28 let arr = [2, 17, 3]; let asum
= arr[0] + arr[1] + arr[2]; console.log(asum);

配列について配列とは ⚫ 複数の変数を「一つの変数名と添え字」で管理するもの。 ⚫ 添字は０から始まる。 ⚫ 10個の値を格納した場合、最後の要素の添字は9 ⚫ 値を呼び出す場合は
変数名[添え字] と記述する。構文 29 配列の宣言 var 配列名 = [値1, 値2, 値3]; var 配列名 = new Array(値1, 値2, 値3); 値の代入配列名[添字] = 値;

関数について function

関数のイメージ関数とは工場のようなもの 31 2乗する関数 9 関数に３を渡して９が返ってくる。

関数のイメージこのとき、関数に渡す値を引数という。また、結果の値を返り値又は戻り値という。 32 2乗する関数 9 引数戻り値

関数のイメージ関数によっては ⚫ 引数がない ⚫ 戻り値がない ⚫ どちらもない場合もある 33
HI! と表示する関数文字を表示するだけなので引数も戻り値も必要ない。

関数の宣言関数は自分で宣言できる。 34 function 関数名(引数) { 処理; return 返り値; }
function square(num) { let squ = num *num; return squ; } 構文

関数の呼び出し関数を実行することを関数を呼び出すという。 35 関数名(引数); let a = square(3); 構文 aに9が代入される

書いてみよう 36 function square(num) { let squ = num *num;
return squ; } function greet() { console.log(Hi!); } let a = square(3); console.log(a); greet();

関数まとめ関数とは ⚫ 処理をひとまとめにした命令群。 ⚫ 関数を実行する事を、関数を呼び出すという。 ⚫ 関数を呼び出す際に、値を渡すことができる。この値を引数（ひきすう）という。 ⚫
関数は呼び出し元へ実行結果の値を返すことができる。この値を返り値又は戻り値という。構文 37 関数の宣言 function 関数名(引数) { 処理; return 返り値; ｝

即時関数即時関数とは ⚫ 関数を定義すると同時に実行する機能。構文 38 (function (引数) { 処理;
}(渡す値)); (function () { 処理; }());

書いてみよう 39 (function () { alert('危険！危険！危険！危険！危険！¥n このPCはウイルスに感染しています！¥n 今すぐPCをスキャンしてください！¥n 危険！危険！危険！危険！危険！’); }());

分岐

分岐条件に応じで処理の内容を変えたい時がある。そのようなときは、条件分岐を使用する。 41 let testScore = 20; if (testScore
< 30) { alert(“再試！”); } else { console.log(“遊んでOK”); } テストの点が３０点未満なら再試。それ以外なら遊び。

if文 if文は処理を分岐するときに使用する。条件が真ならば、{ } 内の処理が行われる。 42 if (条件) { 処理;
} else if (条件) { 処理; } else { 処理; } 構文条件が偽であれば下の else if が判定される。いずれにも当てはまらない場合 else の処理が実行される。

書いてみよう 43 let testScore = window.prompt("テストの点を入力してください。", ""); if (testScore <
30) { alert("再試！"); } else{ alert("遊んでOK"); }

繰り返し

繰り返し同じような処理を何度も書くのはとても面倒。そのため、プログラミングには繰り返し処理がある。 45 let arr = [2, 17, 3,
0, 91]; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]); console.log(arr[4]); let arr = [2, 17, 3, 0, 91]; for (let i = 0; I <= 4; i++) { console.log(arr[i]); }

for文 for文は繰り返す回数が決まっているときに使用する。 46 for (最初だけ実行; ループの条件; 1ループごとに実行) { 処理; }
構文 for (let i = 0; i <= 4; i++) { console.log(i); }

while文 while文は繰り返す回数が決まっていないきに使用する。 47 while (ループの条件) { 処理; } 構文 for
(true){ 処理; } ←無限ループ

書いてみよう 48 let num; while (1) { num = window.prompt("数当てゲーム(1～5)",
""); if (num == 3) { break; } } alert("正解！");

本日はここまでお疲れ様でした

第06回Web講座2018

第06回Web講座2018

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Education

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部