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
第07回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 16, 2019
Education
0
46
第07回Network講座2019
北海道科学大学 電子計算機研究部
July 16, 2019
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
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
第03回Network講座2019
densan
0
39
Other Decks in Education
See All in Education
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
510
データ分析
takenawa
0
8k
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
450
サンキッズゾーン 春日井駅前 ご案内
sanyohomes
0
470
2025年度春学期 統計学 第5回 分布をまとめるー記述統計量(平均・分散など) (2025. 5. 8)
akiraasano
PRO
0
140
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
240
著作権と授業に関する出前講習会/dme-2025-05-01
gnutar
0
200
Common STIs in London: Symptoms, Risks & Prevention
medicaldental
0
130
バックオフィス組織にも「チームトポロジー」の考えが使えるかもしれない!!
masakiokuda
0
110
ThingLink
matleenalaakso
28
4.1k
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
150
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Bash Introduction
62gerente
613
210k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Pragmatic Product Professional
lauravandoore
35
6.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fireside Chat
paigeccino
37
3.5k
Transcript
ネットワークチーム 第7回 2019 北海道科学大学 電子計算機研究部
INDEX ⚫ オブジェクト ⚫ DOM ⚫ HTMLの操作 ⚫ 関数・メソッドの呼び出し 2
オブジェクト
オブジェクトとは JavaScriptのオブジェクトとは 名前(キー)と値のペア の集まり このペアをプロパティという 4 user1 name : ”Gouda”
age : 19 num : 2173056 user2 name : ”Kanda” age : 19 num : 2173068
オブジェクトの生成 JavaScriptでは オブジェクトを変数に入れることができる。 5 let name = { key1:value1, key2:value2
}; 構文 let name = new Object(); name.key1 = value1; name.key2 = value2;
オブジェクトへのアクセス オブジェクトの要素へアクセスするためには . (ピリオド)又は [“ ”] を使用する。 6 name.key1 =
value; 構文 name key1 : *** key2 : *** name key1 : value key2 : *** name[“key1”] = value;
書いてみよう 7
メソッド オブジェクトは関数を持つことができる。 このとき、オブジェクトの中の関数を メソッドという 8 let name = { method:function()
{ 処理; } }; 構文
書いてみよう 9
DOM
DOMとは Document Object Model HTMLの要素を、JavaScriptなどのプログラムから 操作するための仕組み HTML文書をツリー状の集合として扱う これをDOMツリーという DOMツリーでは HTMLの各タグや要素をノードと呼ぶ
11
DOMツリー 12 <html> <body> <h1> <p> 見出し netteam <head> <title>
DOMツリー Document ノード
HTMLの操作 getElementsBy
getElementsBy – メソッド document(HTMLファイル)から 指定した条件を満たす要素を取得するメソッド 14 構文 用途 .getElementsByClassName(クラス名); 指定したクラスの要素を
配列で取得 .getElementsByName(name属性値); 指定したname属性値を持つ 要素を配列で取得 .getElementsByTagName(要素名); 指定したタグの要素を 配列で取得 .getElementById(ID名); 指定したID名を持つ要素を 取得(配列ではない)
書いてみよう 15
要素へのアクセス 取得した要素にアクセスするには 以下の方法がある 16 構文 用途 .innerHTML 要素にアクセス タグを含む .innerText
要素にアクセス タグを含まない .textContent .innerTextとほぼ同じ
書いてみよう 17 P16の続きから 文字が書き換えられた!
書いてみよう 18 添字を忘れずに
書いてみよう 19
要素の追加1 20
要素の追加2 21
関数・メソッドの呼び出し
ボタンによる呼び出し ボタンに関数を設定することで ボタンが押下されたときに関数を呼び出すことができる 23
書いてみよう 24
本日はここまで お疲れ様でした