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
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
820
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
660
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
540
CDK引数設計道場100本ノック
badmintoncryer
2
590
AIのメモリー
watany
11
1.1k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.7k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
300
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why Our Code Smells
bkeepers
PRO
337
57k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Unsuck your backbone
ammeep
671
58k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
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について