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
クイズJavaScript王決定戦
Search
coboco
November 28, 2018
Technology
0
490
クイズJavaScript王決定戦
HTML5 4th Anniversary@GMO
秋のJavaScript祭@富士通クラウドテクノロジーズ
Monaca UG TOKYO #7 〜忘年LT大会〜@アシアル
で使ったスライドです。
coboco
November 28, 2018
Tweet
Share
More Decks by coboco
See All by coboco
ペットのにおい検知IoT
coboco
0
580
技術書の原稿はWordで書いちゃダメゼッタイという話
coboco
6
240
Other Decks in Technology
See All in Technology
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
0
110
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
61
18k
Janus
bkuhlmann
1
490
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
200
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.6k
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
150
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
640
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
318
37k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Web Components: a chance to create the future
zenorocha
305
41k
Designing Experiences People Love
moore
136
23k
Unsuck your backbone
ammeep
662
57k
The Mythical Team-Month
searls
215
42k
What's new in Ruby 2.0
geeforr
337
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
11
4.6k
Designing for Performance
lara
601
67k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
A designer walks into a library…
pauljervisheath
199
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Transcript
URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
1 JavaScript 決定戦 クイズ 王
第1問 2 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.
◼ 以下の実行結果は?(A or B) 3 問題 let x = "0";
if(x) { console.log("A"); } else { console.log("B"); } 3 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
◼ 条件式における値の評価 • 論理値以外の値を条件式として指定すると、以下のように判定される 条件式の論理値判定 true false 0以外の数値 1文字以上の文字列 オブジェクト(中身が空でも)
0 空文字("") undefined null 4 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
◼ データ型一覧 5 JavaScriptのデータ型は2種類に分類できる 型の分類 代表的な型 プリミティブ型 (1つの値のみを持つ) 数値、文字列、論理値 null(値が存在しない)
undefined(値が定義されていない) オブジェクト型 (データの集合体) オブジェクト、関数、配列など 5 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
6 オブジェクトの基本 ◼ プロパティとメソッド • オブジェクトは、複数のデータの集合体である • オブジェクト内のデータには、オブジェクトの属性値を保持する「プロ パティ」と、何らかの操作を行う「メソッド」がある オブジェクト
プロパティ メソッド 6 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
7 オブジェクトの種類 ◼ Objectオブジェクトはすべてのオブジェクトのベース Object String (文字列) Array (配列) Function
(関数) ・toString() ・valueOf() ・hasOwnProperty() … 7 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
第2問 8 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.
◼ 以下の実行結果は?(true or false) 9 問題 let a = "hoge";
let b = new String("hoge"); console.log(a == b); 9 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
10 プリミティブ型の文字列 ◼文字列リテラルは、以下の二種類 • シングルクォート・ダブルクォートのどちらでも可 'hoge' "hoge" 10 URL :
https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
11 オブジェクトの生成 ◼ オブジェクトの生成方法 • Objectオブジェクトの生成は、オブジェクトリテラル{}で代用することが可能 • Arrayブジェクトの生成は、配列リテラル[]で代用することが可能 ◼オブジェクト生成の例 var
変数名 = new オブジェクトの型名(引数); var list = new Array(1,2,3); 11 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
12 JavaScriptの文字列は2種類 ◼文字列にはプリミティブ型とオブジェクト型の二種類がある • 文字列リテラルはプリミティブ型となる let a = "hoge"; //
プリミティブ型 let b = new String("hoge"); // オブジェクト型 12 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
プリミティブ型とラッパーオブジェクト プリミティブ型(文字列) "hoge" オブジェクト型(String) ・length ・replace() ・substr() "hoge" … ◼
プリミティブ型は1つの値だけ、オブジェクト型は複数のメソッド やプロパティを持つ 13 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
◼ JavaScriptの等価演算子には二種類ある 14 等価演算子 演算子 説明 例 結果 == 緩やかな等価演算子
5 == '5' true === 厳密な等価演算子 5 === '5' false != 緩やかな不等価演算子 5 != '5' false !== 厳密な不等価演算子 5 !== '5' true 14 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
第3問 15 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.
◼ 以下の実行結果は?(true or false) 16 問題 let a = new
String("hoge"); let b = new String("hoge"); console.log(a === b); 16 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
17 オブジェクト生成の仕組み ◼ オブジェクト生成時の流れ ① オブジェクトの生成時に、コンストラクタという関数が実行される ② コンストラクタは、新しくオブジェクトを生成し、それを戻り値として 返却する(このオブジェクトをインスタンスと呼ぶ) var
list = new Array(1,2,3); list Arrayのコンストラクタ インスタンス 17 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
◼ プリミティブ型は値そのものを比較する ◼ オブジェクト型は参照しているオブジェクトが同じかどうかを 比較する 18 値の比較、参照の比較 a b "hoge"
"hoge" 18 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
19 同じオブジェクトを参照している例 a b "hoge" "hoge" let a = new
String("hoge"); let b = a; console.log(a == b); この場合は同じオブジェクトを 参照しているのでtrue 19 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
第4問 20 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.
◼ 以下の実行結果は? 21 問題 console.log("hoge".length); A) 4 B) null C)
undefined D) エラー 21 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
◼ プロパティを呼び出した場合、プリミティブ値から対応する ラッパーオブジェクトへの暗黙的な変換が行われる ラッパーオブジェクトへの暗黙的変換 "hoge".length "hoge" ・length ・replace() ・substr() "hoge"
… プリミティブ型 ラッパーオブジェクト 変換 22 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
第5問 23 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.
◼ 以下の実行結果は? 24 問題 let array = [10, 20, 30];
array[9] = 99; console.log(array.length); A) 3 B) 4 C) 9 D) 10 24 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
25 配列のインデックス 0 1 2 10 20 30 9 99
◼ インデックスは連番でなくても割り振ることができる ◼ lengthプロパティは最大インデックス+1を返す 25 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
何問正解しましたか? 26 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.
温泉の素(ニューヨク剤)をプレゼント!! 27 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.
温泉といえば・・・? コミッター募集中! 28 URL : https://ja.monaca.io/ Copyright © Asial Corporation.
All Right Reserved. https://ja.onsen.io/
ありがとうございました! 29 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All
Right Reserved.