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
第09回Web講座
Search
北海道科学大学 電子計算機研究部
July 26, 2017
Programming
0
60
第09回Web講座
Javascript 演習
北海道科学大学 電子計算機研究部
July 26, 2017
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
56
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
Other Decks in Programming
See All in Programming
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
620
Deep Dive into ~/.claude/projects
hiragram
14
11k
効率的な開発手段として VRTを活用する
ishkawa
0
150
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
790
フロントエンドのパフォーマンスチューニング
koukimiura
5
1.8k
CDK引数設計道場100本ノック
badmintoncryer
2
360
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
340
ニーリーにおけるプロダクトエンジニア
nealle
0
890
What's new in AppKit on macOS 26
1024jp
0
140
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
97
34k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Invisible Side of Design
smashingmag
301
51k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Practical Orchestrator
shlominoach
189
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Why Our Code Smells
bkeepers
PRO
336
57k
Transcript
第九回ネットワーク チーム講座資料 JavaScript
概要 • 算術演算子について • 値渡しと参照渡し • JavaScriptにおける型変換 • DOMについて •
consoleオブジェクトについて
条件式 それぞれ以下の場合に論理値の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の値の反対を返す)
算術演算子 加算:+ (プラス) 減算:- (マイナス) 乗算:* (アスタリスク) 除算:/(スラッシュ) 剰余:%(パーセント) ※x
% 2 ⇒ xを2で割った余り 通常の計算式と同様に、()内>乗除>加減 の順に計算する。 この他の複雑な計算を行う場合、Mathオブジェクト内のプロパティ・ メソッドを使用する。
データ型と算術演算子 算術演算子は、前後の値のデータ型に応じて処理が変わる。 • 全て数値型(論理型)の場合、通常の計算処理を行う • 文字列化した数値が含まれる場合、 • +演算子は加算ではなく結合処理 • その他は文字列から数値型に戻して計算処理を行う
• 上記以外の場合、(通常の文字列・配列などの場合) • +演算子は結合処理 • その他はNaN(Not a Number)という特殊な値を返す
データ型と算術演算子
プリミティブ型 データ型は2種類に大別することが出来る。 1. プリミティブ型(数値型、文字列型、論理型など) 一つの値のみを持ち、他の値やデータを持たない。 2. オブジェクト型(配列型、オブジェクト型、関数型など) プリミティブ型以外。
値渡しと参照渡し 変数 a を他の変数に代入すると、a に入っているデータの型に応じて 異なる処理を行う。 1. 値渡し a のデータ型がプリミティブ型(または正規表現型)である時
2. 参照渡し a のデータ型がオブジェクト型(正規表現型以外)である時
実践 JavaScriptコンソールを使って、以下の通り入力してみよう。
値渡し このように、変数に入った値そのものを他の変数に代入すること を値渡しという。 何らかの処理を経てa,bの内一方の値が変わった後も、もう一方は 元々の値を保持することが出来る。
実践
解説 以下のように変数を宣言したとき、 変数 a にオブジェクトそのものが入るのではなく、メモリ上にオ ブジェクトを作成して、a にはそのオブジェクトのメモリ上の場所を 示す値(=参照)を入れているだけ。 var a
= {num: 100}
解説 「var a = {num: 100};」と宣言したとき、メモリ内にオブジェクトA が作成された後、aにはメモリ内のオブジェクトAの参照が入る。 メモリ オブジェクトA {num:
100}; var a = メモリ.オブジェクトA オブジェクトA {num: 100};
解説 この状態で「var b = a;」を宣言すると、aに入っているのは「オブ ジェクトAの参照」であってオブジェクト本体ではないため、bにも 同様に参照が入る。 メモリ オブジェクトA {num:
100}; var a = メモリ.オブジェクトA var b = メモリ.オブジェクトA var b = a; オブジェクトA {num: 100};
解説 ここで、「a.str = “network”;」を実行した場合、aの参照先であるオ ブジェクトAに対して「キー”str”、値”network”」の要素が追加される。 メモリ オブジェクトA {num: 100, str:”network”};
var a = メモリ.オブジェクトA var b = メモリ.オブジェクトA 追加
参照渡し 変数bは何ら変更していないが、変数bが参照しているオブジェクトA が変更されたため、bの値も変更されたように見える。 メモリ オブジェクトA {num: 100, str:”network”}; var a
= メモリ.オブジェクトA var b = メモリ.オブジェクトA 参照
参照渡し オブジェクト型の変数 a を他の変数 b に代入したとき、「一方の オブジェクトを変更したとき、もう一方も同じ変更を行う」かのよ うに見えるが、実際には「オブジェクト型変数 a に入っている参照
をbに代入しており、a も b も同じオブジェクトを参照している」。 この仕組みを「参照渡し」という。
型変換 • 文字列への変換 • 文字列への変換その2 • 数値への変換 • 数値への変換その2 •
文字列→配列 • 配列→文字列 var num = Number(値); parseInt(値); var str = String(値); num.toString(); var arr = “string”.split(“i”); arr.join(“i”);
.toStringメソッド 何らかの値(主に数値)を文字列化する。nullとundefined以外の データ型の変数に使用できる。 引数として指定した数値を基数とした数に変換した後、文字列化す る。引数を指定しない場合、10進数として解釈する。 num.toString(基数);
.toStringメソッド
parseInt関数 文字列化された数値を数値化する。(float数の時はparseFloat関数) 第一引数に変換したい文字列と、第二引数に文字列を数値に変換す る際の基数を指定する。 第二引数を省略した場合、基本的には10進数として、第一引数が0か ら始まる場合は8進数、0xから始まる場合は16進数と解釈する。 parseInt(文字列, 基数);
parseInt関数
比較
parseFloat関数 返す値がfloat数の時は、parseInt関数の代わりにparseFloat関数を使 用する。 使い方はほぼ一緒だが、第二引数は存在しない。 parseFloat(文字列);
.splitメソッド 指定した区切り文字で文字列を分割し、配列化する。 引数として区切り文字を指定して使用する。カンマ区切りのデータ 群などを分割する際などに使用する var arr = 文字列.split(区切り文字);
.joinメソッド 配列に入っているすべての要素を繋いで文字列化する。 各要素を区切る文字列を引数として指定する。引数を省略した場合、 区切り文字は自動的にカンマ( , )となる。 arr.join(区切り文字);
split & join
consoleオブジェクト コンソールに何らかの出力を行う機能をまとめたオブジェクト。 主として変数の値の変化を見るためなど、デバッグに使用する。 • console.log( ) … ()内の内容を表示 • console.error(
) … 〃 エラーとして表示 • console.info( ) … 〃 強調して表示 • console.table( ) … ()内の配列・オブジェクトをテーブル形式で表示
変数のスコープ 変数には、その宣言の仕方によって有効範囲が異なる。 それを変数のスコープといい、以下の2種類が存在する。 1. グローバル変数…varをつけずに宣言した場合 プログラム全体から参照することが出来る。 2. ローカル変数…varをつけて宣言した場合 宣言した関数の中でだけ参照することが出来る。 ※グローバル変数は基本的に使用しないので変数の宣言時は必ず「var」をつける
おしまい 次回JQueryについて