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回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 09, 2019
Education
0
47
第06回Network講座2019
北海道科学大学 電子計算機研究部
July 09, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
37
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
40
第07回Network講座2019
densan
0
40
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
62
第03回Network講座2019
densan
0
30
Other Decks in Education
See All in Education
財務分析 - 入門編
lsuzuki
0
330
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.1k
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
1.6k
3 занятие. Канва бизнес-модели #ideaNN 2.02.2024.
karlov
0
190
Introduction - Lecture 1 - Information Visualisation (4019538FNR)
signer
PRO
0
3.5k
「小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル基本方針」
codeforeveryone
0
800
Oracle Database 23c Database In-Memory 関連新機能
oracle4engineer
PRO
2
210
スクフェスの学びにチームを惹き込め! 社内同時視聴会のすゝめ!
pokotyamu
0
550
論文の読み方 / How to survey
kaityo256
PRO
167
110k
第1回全国商業高校Webアプリコンテスト総括
asial_corp
0
360
パフォーマンス・チューニング入門
oracle4engineer
PRO
2
350
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Building Adaptive Systems
keathley
29
1.8k
How GitHub (no longer) Works
holman
301
140k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Building an army of robots
kneath
300
41k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Become a Pro
speakerdeck
PRO
8
4.4k
A Philosophy of Restraint
colly
195
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Transcript
ネットワークチーム 第6回 2019 北海道科学大学 電子計算機研究部
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 関数名 = (引数) => {
処理; return 返り値; } let square = (num) => { let squ = num *num; return squ; } 構文
関数の呼び出し 関数を実行することを関数を呼び出すという。 36 関数名(引数); let a = square(3); 構文 aに9が代入される
書いてみよう 37 function square(num) { let squ = num *num;
return squ; } function greet() { console.log(Hi!); } let a = square(3); console.log(a); greet();
関数まとめ 関数とは ⚫ 処理をひとまとめにした命令群。 ⚫ 関数を実行する事を、関数を呼び出すという。 ⚫ 関数を呼び出す際に、値を渡すことができる。 この値を引数(ひきすう)という。 ⚫
関数は呼び出し元へ実行結果の値を返すことができる。 この値を返り値又は戻り値という。 構文 38 関数の宣言 function 関数名(引数) { 処理; return 返り値; }
即時関数 即時関数とは ⚫ 関数を定義すると同時に実行する機能。 構文 39 (function (引数) { 処理;
}(渡す値)); (function () { 処理; }());
書いてみよう 40 (function () { alert('危険!危険!危険!危険!危険!¥n このPCはウイルスに感染しています!¥n 今すぐPCをスキャンしてください!¥n 危険!危険!危険!危険!危険!’); }());
分岐
分岐 条件に応じで処理の内容を変えたい時がある。 そのようなときは、条件分岐を使用する。 42 let testScore = 20; if (testScore
< 30) { alert(“再試!”); } else { console.log(“遊んでOK”); } テストの点が30点 未満なら再試。 それ以外なら遊び。
if文 if文は処理を分岐するときに使用する。 条件が真ならば、{ } 内の処理が行われる。 43 if (条件) { 処理;
} else if (条件) { 処理; } else { 処理; } 構文 条件が偽であれば 下の else if が判定される。 いずれにも当てはまらない場合 else の処理が実行される。
書いてみよう 44 let testScore = window.prompt("テストの点を入力してください。", ""); if (testScore <
30) { alert("再試!"); } else{ alert("遊んでOK"); }
繰り返し
繰り返し 同じような処理を何度も書くのはとても面倒。 そのため、プログラミングには繰り返し処理がある。 46 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文は繰り返す回数が決まっているときに使用する。 47 for (最初だけ実行; ループの条件; 1ループごとに実行) { 処理; }
構文 for (let i = 0; i <= 4; i++) { console.log(i); }
while文 while文は繰り返す回数が決まっていないきに使用する。 48 while (ループの条件) { 処理; } 構文 for
(true){ 処理; } ←無限ループ
書いてみよう 49 let num; while (1) { num = window.prompt("数当てゲーム(1~5)",
""); if (num == 3) { break; } } alert("正解!");
無限アラート事件
無限アラート事件 51 https://www.sanspo.com/geino/news/20190304/tro19030418410013-n1.html 「アラートを無限ループで表示させる」 というサイトのURLを掲示板に貼り付けたら 逮捕された事件
逮捕されてみよう 52 for( ; ; ){ window.alert(" ∧_∧ ババババ¥n( ・ω・)=つ≡つ¥n(っ
≡つ=つ¥n`/ )¥n(ノΠU¥n何回閉じても無駄ですよ~ ww¥nm9(^Д^)プギャー!!¥n"); }
本日はここまで お疲れ様でした