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
後期第二回ネットワーク講座
Search
北海道科学大学 電子計算機研究部
October 31, 2016
Education
1
60
後期第二回ネットワーク講座
北海道科学大学 電子計算機研究部
October 31, 2016
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
6 занятие. Четыре тактики метода "8 кубиков"бизнес-модели #ideaNN 1.03.2024.
karlov
0
160
phygital__le_magasin_augmenté.pdf
martine
0
2.6k
[SemanaX-UFCG-2024] Guia descomplicado de entrevistas FAANG
hugaomarques
2
460
「ロータリーって何?」と訊かれたら:国際ロータリー 2720地区 2023-2024年度 公共イメージ部門 副委員長・ 熊本南ロータリークラブ・ 株式会社ヒデコーポレーション 代表 大津 英敬 氏
2720japanoke
0
570
Monaca Educationを活用した課題解決型の探究学習の実践
asial_edu
0
210
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
1.4k
第1回全国商業高校Webアプリコンテスト総括
asial_corp
0
410
論文の読み方 / How to survey
kaityo256
PRO
177
120k
墓までもっていくはずだった話
takuro_nakajima
PRO
0
1.5k
Canva
matleenalaakso
0
170
執筆テーマの決め方
sapi_kawahara
1
180
「小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル基本方針」
codeforeveryone
0
1.4k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.3k
RailsConf 2023
tenderlove
8
550
Building Your Own Lightsaber
phodgson
100
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Become a Pro
speakerdeck
PRO
13
4.6k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
GraphQLとの向き合い方2022年版
quramy
33
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
How to name files
jennybc
65
93k
Transcript
ネットワークチーム 後期第二回講座資料 JavaScript復習
目次 • JavaScriptの復習 • koa.jsの導入とテスト
関数の宣言 「関数」とは、予め指定された一定の処理 を行い、結果を返す命令群。 引数とは、関数が処理を行うために参照する値であり、必要ない場 合省略できる。逆に、カンマで区切って複数指定することも出来る。 function 関数名(引数) { 処理; return
返り値; } var 関数名 = function(引数) { 処理; return 返り値; };
変数の宣言 「変数」とは、プログラム内で処理に使う何ら かの値(数値、文字列など)を保持するものである。 変数の宣言は、以下の通り記述して行う。 var 変数名; var 変数1, 変数2; var
変数名 = 値;
データ型 数値や文字列など、プログラム内で扱うデータの種類のこと。 データ型は、以下のもの等が存在する。 データ型名 対応する値 数値型 数値(実数、8進数、16 進数、浮動小数点数) 文字列型 文字列(「”」、「’」で
囲んだ値) 論理型 true/false データ型名 対応する値 配列型 複数の値を入れた変数 オブジェクト型 キーと値を対応付けた連 想配列 null 何もないことを表す値 undefined 未定義の値
配列(Array) 格納した順番に応じて、値に「添え字」と呼ばれる数値を対応させ て保持する変数。一つの変数に対して複数の値を格納できる。 値を呼び出す場合は “変数名[添え字]” のように記述する。N個の値を 格納した場合、添え字は「0」から始まり「N-1」までである。 以下のように宣言する。 この場合は値を呼び出す際「変数[0]」と指定すると値1、「変数[3]」 と指定すると値4である。
var 変数 = [値1, 値2, 値3, 値4];
連想配列(オブジェクト/Object) 配列における添え字の代わりに「キー(key)」と呼ばれるものと対 応付けて値を保持する変数。添え字は数値のみであるが、キーは文 字列も指定することが出来る。 以下のように宣言する。値1を呼び出す場合、「変数.キー1」と記述 する。 var 変数 = {
キー1 : 値1, キー2 : 値2 };
変数の型 JavaScriptの変数には、「型」は存在しない。 よって、宣言した変数には数値でも文字列でも配列でも、なんでも 入れることが出来る。 しかし、データそのものには「型」が存在するため、その変数の中 に入っている値のデータ型について、注意が必要である。 (後述する四則演算や条件式を書く際に重要となる)
条件式 それぞれ以下の場合に論理値のtrueを返す。 1. 「a == b」 ・・・ aとbの値が等しい場合 2. 「a
!= b」 ・・・ aとbの値が異なる場合 3. 「a === b」 ・・・ aとbの値とデータ型が共に等しい場合 4. 「a !== b」 ・・・ aとbの値とデータ型が共に異なる場合 基本的に条件式は「a === b」「a !== b」を使う。
条件式 以下の場合に論理値のtrueを返す。 • 「a <= b」 ・・・ aがb以下 • 「a
>= b」 ・・・ aがb以上 • 「A && B」 ・・・ 論理値A,Bが共にtrue • 「A || B」 ・・・ 論理値A,Bのどちらかがtrue • 「!A」 ・・・ 論理値Aがfalse(Aの値の反対を返す)
関数の呼び出し 呼び出す際は、以下の通り記述する。 ※引数や返り値(結果)が無い関数もある。 引数が無い場合、引数は何も入力せず、括弧内はカラでよい。 関数名(引数); var a = 関数名(引数);
メソッド 呼び出し方が違い、オブジェクトに対して作用する関数である。 呼び出す際は、以下のように記述する。 オブジェクト.メソッド名(引数);
getElementsBy-メソッド document(HTMLファイル上)から、引数に指定した検索条件を満 たす要素を(主に配列として)取得するメソッド。 • .getElementsByClassName(クラス名); • .getElementsByName(name属性値); • .getElementsByTagName(要素名) ;
• .getElementById(ID名); ・・・このメソッドのみ、配列ではなく一意の オブジェクトとして要素を取得する。
getElementsBy-メソッド getElementsByClassNameメソッドで要素を取得したvideos変数は配 列となっているが、getElementByIdメソッドで要素を取得したcanvas 変数は単なるオブジェクトである。
.addEventListenerメソッド ターゲットに対して特定のイベント(操作)があったとき、指定し た関数を実行するというメソッド。 以下のように記述する。 ターゲット.メソッド名(“イベントタイプ”, 関数名);
算術演算子 加算:+ (プラス) 減算:- (マイナス) 乗算:* (アスタリスク) 除算:/(スラッシュ) 剰余:%(パーセント) ※x
% 2 ⇒ xを2で割った余り 通常の計算式と同様に、()内>乗除>加減 の順に計算する。 この他の複雑な計算を行う場合、Mathオブジェクト内のプロパティ・ メソッドを使用する。
データ型と算術演算子 算術演算子は、前後の値のデータ型に応じて処理が変わる。 • 全て数値型(論理型)の場合、通常の計算処理を行う • 文字列化した数値が含まれる場合、 • +演算子は加算ではなく結合処理 • その他は文字列から数値型に戻して計算処理を行う
• 上記以外の場合、(通常の文字列・配列などの場合) • +演算子は結合処理 • その他はNaN(Not a Number)という特殊な値を返す
データ型と算術演算子
プリミティブ型 データ型は2種類に大別することが出来る。 1. プリミティブ型(数値型、文字列型、論理型など) 一つの値のみを持ち、他の値やデータを持たない。 2. オブジェクト型(配列型、オブジェクト型、関数型など) プリミティブ型以外。
型変換 • 文字列への変換 • 文字列への変換その2 • 数値への変換 • 数値への変換その2 •
文字列→配列 • 配列→文字列 var num = Number(値); parseInt(値); var str = String(値); num.toString(); var arr = “string”.split(“i”); arr.join(“i”);
consoleオブジェクト コンソールに何らかの出力を行う機能をまとめたオブジェクト。 主として変数の値の変化を見るためなど、デバッグに使用する。 • console.log( ) … ()内の内容を表示 • console.error(
) … 〃 エラーとして表示 • console.info( ) … 〃 強調して表示 • console.table( ) … ()内の配列・オブジェクトをテーブル形式で表示
復習ここまで
koa.jsの導入 • 作業用フォルダでコマンドプロンプトを開き、 以下のコマンドを実行する npm install koa
①
②
③ npm install koa
koa.js • express.js の後継アプリケーションフレームワーク • 大きな特徴として、「ジェネレーター」という機能を使える • 作業用フォルダ内に新たに ”koa_test.js” というファイルを作成
次ページの通り記述する
koa_test.js
実行 • コマンドプロンプト上で ”node koa_test.js” と入力し実行 • ブラウザで http://localhost:3000 を開くと「Hello
koa.js」を表示
None