Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第06回Web講座2018
Search
北海道科学大学 電子計算機研究部
June 27, 2018
Education
0
82
第06回Web講座2018
北海道科学大学 電子計算機研究部
June 27, 2018
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
40
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
41
第07回Network講座2019
densan
0
41
第06回Network講座2019
densan
0
49
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
63
Other Decks in Education
See All in Education
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.1k
Canva
matleenalaakso
0
160
Railsチュートリアルの歩き方 (第7版)
yasslab
PRO
1
1M
[SemanaX-UFCG-2024] Guia descomplicado de entrevistas FAANG
hugaomarques
2
450
合理的配慮を知るワークショップ/Understanding Reasonable Accommodations (Workshop)
freee
1
1.4k
全員参加型で会社を強くしていく活動を考えてみる
ikefukurou777
0
210
わたしのメタ学習 / My Own Meta Learning #shinjukurb
expajp
0
120
論文の読み方 / How to survey
kaityo256
PRO
175
120k
STEAM教育の枠組で行うプログラミング学習
asial_edu
0
210
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
D&I推進レポート〜テクノロジー分野のジェンダーギャップとその取り組みについて〜
codeforeveryone
1
890
前期教育実習事前指導0221
naradai
0
130
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
32
12k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
In The Pink: A Labor of Love
frogandcode
138
21k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
The Mythical Team-Month
searls
216
42k
Embracing the Ebb and Flow
colly
80
4.1k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Practical Orchestrator
shlominoach
182
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Transcript
ネットワークチーム 第6回 北海道科学大学 電子計算機研究部
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);
配列について 配列とは ⚫ 複数の変数を「一つの変数名と添え字」で管理するもの。 ⚫ 添字は0から始まる。 ⚫ 10個の値を格納した場合、最後の要素の添字は9 ⚫ 値を呼び出す場合は
変数名[添え字] と記述する。 構文 29 配列の宣言 var 配列名 = [値1, 値2, 値3]; var 配列名 = new Array(値1, 値2, 値3); 値の代入 配列名[添字] = 値;
関数について function
関数のイメージ 関数とは工場のようなもの 31 2乗する関数 9 関数に3を渡して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”); } テストの点が30点 未満なら再試。 それ以外なら遊び。
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("正解!");
本日はここまで お疲れ様でした