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回Web講座2018
Search
北海道科学大学 電子計算機研究部
July 11, 2018
Education
0
47
第07回Web講座2018
北海道科学大学 電子計算機研究部
July 11, 2018
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
57
第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
110
Other Decks in Education
See All in Education
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
1.1k
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
jvpcubias
0
170
20250807_がんばらないコミュニティ運営
ponponmikankan
0
180
20250830_MIEE祭_会社員視点での学びのヒント
ponponmikankan
1
170
Présentation_1ère_Spé_2025.pdf
bernhardsvt
0
400
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
codeforeveryone
0
340
「実践的探究」を志向する日本の教育研究における近年の展開 /jera2025
kiriem
0
110
核燃料政策を問う─英国の決断と日本
hide2kano
0
200
Adobe Express
matleenalaakso
1
8k
HCI and Interaction Design - Lecture 2 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
1.3k
日本の情報系社会人院生のリアル -JAIST 修士編-
yurikomium
1
130
2025年度春学期 統計学 第15回 分布についての仮説を検証する ー 仮説検定(2) (2025. 7. 17)
akiraasano
PRO
0
120
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Side Projects
sachag
455
43k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Done Done
chrislema
185
16k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
KATA
mclloyd
32
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
ネットワークチーム 第7回 北海道科学大学 電子計算機研究部
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
第一回 演習2(再掲) document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 12 JavaScript で HTML
の内容を 操作(書き換え) している
DOMツリー 13 <html> <body> <h1> <p> 見出し netteam <head> <title>
DOMツリー Document ノード
HTMLの操作 getElementsBy
getElementsBy – メソッド document(HTMLファイル)から 指定した条件を満たす要素を取得するメソッド 15 構文 用途 .getElementsByClassName(クラス名); 指定したクラスの要素を
配列で取得 .getElementsByName(name属性値); 指定したname属性値を持つ 要素を配列で取得 .getElementsByTagName(要素名); 指定したタグの要素を 配列で取得 .getElementById(ID名); 指定したID名を持つ要素を 取得(配列ではない)
書いてみよう 16
要素へのアクセス 取得した要素にアクセスするには 以下の方法がある 17 構文 用途 .innerHTML 要素にアクセス タグを含む .innerText
要素にアクセス タグを含まない .textContent .innerTextとほぼ同じ
書いてみよう 18 P16の続きから 文字が書き換えられた!
書いてみよう 19 添字を忘れずに
書いてみよう 20
要素の追加1 21
要素の追加2 22
関数・メソッドの呼び出し
ボタンによる呼び出し ボタンに関数を設定することで ボタンが押下されたときに関数を呼び出すことができる 24
書いてみよう 25
本日はここまで お疲れ様でした