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
井上拓
May 13, 2017
Technology
0
180
ゼロからはじめるjavascript基礎のき
広島フロントエンド勉強会 Vol.9のスライド
井上拓
May 13, 2017
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
690
Laravel Mixではじめるwebpack
takanashi66
0
450
gulpやめてLaravel Mixはじめた話
takanashi66
1
180
LT-WordPressの開発をプラグインで管理する
takanashi66
0
330
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
180
CSS Grid Layout Module
takanashi66
0
95
webサイトのiPhone X 対応
takanashi66
0
1.5k
web制作におけるGitフロー
takanashi66
0
520
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
290
Other Decks in Technology
See All in Technology
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
2
230
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
560
Application Development WG Intro at AppDeveloperCon
salaboy
0
200
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
120
SDN の Hype Cycle を一通り経験してみて思うこと / Going through the Hype Cycle of SDN
mshindo
1
130
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
Mastering Quickfix
daisuzu
1
110
The Role of Developer Relations in AI Product Success.
giftojabu1
1
150
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
Next.jsとNuxtが混在? iframeでなんとかする!
ypresto
1
100
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Producing Creativity
orderedlist
PRO
341
39k
How GitHub (no longer) Works
holman
310
140k
Building Applications with DynamoDB
mza
90
6.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Facilitating Awesome Meetings
lara
50
6.1k
Statistics for Hackers
jakevdp
796
220k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Transcript
ౡϑϩϯτΤϯυษڧձ Vol.9 θϩ͔Β͡ΊΔJavaScript جૅͷ͖ CodeCode Ҫ্
JavaScriptͰԿ͕Ͱ͖Δͷ͔Δ ඪ
ࠓճͷ༰ॳ৺ऀ͚Ͱ͢ɻ JavaScriptͷશͯΛཏ͍ͯ͠ ΔΘ͚Ͱɺ͋Γ·ͤΜɻ ඪ
࣍ • JavaScriptͱ • JavaScriptΛॻ͘४උ • JavaScriptͰHello World • DOMૢ࡞
• ࿅श • ·ͱΊ
JavaScriptͱ
JavaScriptͱ • 1995ʹωοτεέʔϓ͕ࣾ։ൃ • ΫϩεϓϥοτϑΥʔϜͰಈ࡞͢ΔɺΦϒδΣΫ τࢦͷεΫϦϓτݴޠ • ࣌Java͕ਓؾͩͬͨͷͰͦΕʹ͔͋ͬͯ JavaScriptͱ໋໊ JavaͱJavaScriptผʂ
JavaScriptͱ • IE3ʹ࣮͞Εരൃతʹීٴ ͔͠͠ɺϒϥβ͝ͱʹݴޠ༷ͷಠ֦ࣗு • ECMAScriptͱͯ͠ඪ४Խ ES2015
JavaScriptͷछྨ • ΫϥΠΞϯταΠυJavaScript ϒϥβͱͦͷυΩϡϝϯτΦϒδΣΫτϞσϧ (DOM) Λ੍ޚ͢ΔΦϒδΣΫτΛఏڙ͢Δ • αʔόʔαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτΛఏڙ͢Δ
DEMO
σϞ https://goo.gl/ODJqaN https://goo.gl/Vt1edI Github https://goo.gl/cJPWlW εϥΠυ
JavaScriptΛॻ͘४උ
CodePen
CodePen http://codepen.io/ ᶃ ᶄ ᶅ ᶆ
//HTMLʹॻ͘ <script> //͜͜ʹίʔυΛॻ͘ </script> //֎෦͔ΒಡΈࠐΉ <script src=“PATH/TO/JS“></script> <script></script>
document.addEventListener("DOMContentLoaded", function(){ //͜͜ʹίʔυΛॻ͘ }, false); DOMͷඳը͕ऴΘ͔ͬͯΒ࣮ߦ
Hello World
alert(“Hello World”); alert() • ϒϥβ͕ͭϙοϓΞοϓػೳ • ଟ༻ݫېʂ
console.log(“Hello World”); console.log() • JavaScriptͷσόοάػೳͷͻͱͭ • ։ൃπʔϧͷίϯιʔϧʹදࣔ͞ΕΔ • ফ͠Εʹҙ •
IE9Ͱόά͕͋Δ
Πϕϯτ
Πϕϯτ • ΠϕϯτɺϚεϘλϯΛΫϦοΫͨ͠ɺ ϖʔδ͕ಡΈࠐ·ΕͨͳͲͷಈ࡞͕ىͬͨ͜ ࣌ʹൃੜ + ΫϦοΫ + ϚεΦʔόʔ
+ ϩʔυ
let btn = document.getElementById('btn'); btn.addEventListener('click', function(){ alert('Hello World'); }); <button
id=“btn">Hello</button> HTML JavaScript Πϕϯτ
let btn = document.getElementById('btn'); btn.addEventListener('click', function(){ alert('Hello World'); }); JavaScript
Πϕϯτ
ม • ࠶ར༻Ͱ͖ΔΑ͏ʹ໊લΛ͚ͭͨശ • มΛ͏ʹએݴ͕ඞཁ var let • ϓϩάϥϜͰͷʮ=ʯ͍͠Ͱͳ͘ɺೖ let
btn = document.getElementById('btn');
DOMͱ • HTMLυΩϡϝϯτΛπϦʔߏͱͯ͠දݱͨ͠ͷ • ѻ͍͍ͨཁૉΛಛఆ͠ૢ࡞Ͱ͖ΔΑ͏ʹ͢ΔΈ Document Object Model
ؔ • ಉ͡ॲཧΛ·ͱΊͯఆٛ͠ɺԿ͍ճ͠ ͕Ͱ͖ΔΑ͏ʹͨ͠ͷ btn.addEventListener('click', function(){ alert('Hello World'); });
let btn = document.getElementById('btn'); let btn2 = document.getElementById('btn2'); function onBtn(elm){
elm.addEventListener('click', function(){ alert('Hello World'); }); } onBtn(btn); onBtn(btn2); <button id=“btn”>Hello</button> <button id=“btn2">Hello</button> HTML JavaScript ؔ Ϙλϯ͕૿͑ͨ߹ function ໊ؔ(ԾҾ){ ॲཧ } ໊ؔ(Ҿ);
Ϙλϯ͕100ݸʹͳͬͯ େৎʂ
let btn = document.getElementsByClassName('btn'); for(let i = 0; i <
btn.length; i++) { btn[i].addEventListener('click', function(){ alert('Hello World'); }); } <button class=“btn">Hello</button> <button class=“btn">Hello</button> HTML JavaScript Ϋϥε
Ϋϥε • Ϋϥεͷऔಘ • btnͷத • ෳ͋Δ͔Βॱ൪ʹॲཧ͠ͳ͍ͱ͍͚ͳ͍ let btn =
document.getElementsByClassName('btn'); <button class=“btn”>Hello</button> <button class=“btn">Hello</button>
܁Γฦ͠ • ࢦఆͨ͠ճɺಉ͡ॲཧΛ܁Γฦ͢ • forจ for(let i = 1; i
<= 10; i++){ console.log(i); } 10ճ܁Γฦ͢ 1 2 3 4 5 6 7 8 9 10 ݁Ռ
ԋࢉࢠ • < > <= >= • ΠϯΫϦϝϯτ
ऴΘͬͨΒiΛ+1͢Δ i = i + 1; for(let i = 0; i < btn.length; i++) for(let i = 0; i < btn.length; i++)
length • จࣈྻͷ͞(ݸ)Λऔಘ͢ΔϓϩύςΟ • ࠓճͷ߹2ݸ for(let i = 0; i
< btn.length; i++) <button class=“btn”>Hello</button> <button class=“btn">Hello</button> for(let i = 0; i < 2; i++)
ྻ • ࿈൪ׂ͕ΓৼΒΕͨมͷू߹ btn[i].addEventListener('click', function(){ ࣮มʮbtnʯͷதྻ ఴ͑ࣈ 0 <button
class=“btn”>Hello</button> 1 <button class=“btn”>Hello</button> දΈ͍ͨʹͳͬͯΔ(ఴ͑ࣈ0͔Βελʔτ)
let btn = document.getElementsByClassName('btn'); for(let i = 0; i <
btn.length; i++) { console.log(i + “൪ͷɿ”+ btn[i]); } <button class=“btn">Hello1</button> <button class=“btn">Hello2</button> HTML JavaScript ྻ 0൪ͷɿ<button class=“btn”>Hello1</button> 1൪ͷɿ<button class=“btn">Hello2</button> ݁Ռ
ཁૉͷऔಘ • HTMLͷཁૉΛऔಘ let btn = document.getElementById('btn'); let btn =
document.getElementsByClassName('btn'); let btn = document.getElementsByTagName('button'); let btn = document.querySelectorAll(‘.button');
݅ذ
let btn = document.getElementById("btn"); btn.addEventListener('click', function(){ let cnf = confirm("ࠓ·ͰώϩϑϩʹࢀՃͨ͜͠ͱ͋Γ·͔͢ʁ\nOK:
YES\nΩϟϯηϧ: NO"); if(cnf == true){ alert("ຖ͋Γ͕ͱ͏͍͟͝·͢ʂ"); }else{ alert("ࠓޙͱΑΖ͓͘͠ئ͍͠·͢ʂ"); } }); <button id=“btn">࣭</button> HTML JavaScript ࣭
݅ذ • ݅ʹΑ࣮ͬͯߦ͢ΔॲཧΛม͑Δ • ifจ if(cnf == true){ alert("ຖ͋Γ͕ͱ͏͍͟͝·͢ʂ"); }else{
alert("ࠓޙͱΑΖ͓͘͠ئ͍͠·͢ʂ"); } true or false
ԋࢉࢠ • == let x = 1; if(x == 1){
//͜͜ͷॲཧ͕࣮ߦ͞ΕΔ } x͕1ͷͱ͖(true)
else x͕0ͷͱ͖(false) let x = 0; if(x == 1){ //͜͜ͷॲཧ࣮ߦ͞Εͳ͍
}else{ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ }
͞Βʹ݅ΛՃ͢Δ x͕2ͷͱ͖(true) let x = 2; if(x == 1){ //͜͜ͷॲཧ࣮ߦ͞Εͳ͍
}else if(x == 2){ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ }else{ //͜͜ͷॲཧ࣮ߦ͞Εͳ͍ }
࿅श
͓Έ͘͡ ʮ͓Έ͘͡ʯϘλϯΛԡ͢ͱେ٢ɾத٢ɾখ ٢ɾڟɾେڟͷ5ͭͷ݁Ռ͕ϥϯμϜʹฦͬͯ͘ ΔΑ͏ͳJavaScriptΛ࡞Δ let rand = Math.floor(Math.random() * 5)
+ 1; let rand = Math.floor(Math.random() * 5) + 1;
͓Έ͘͡ɹώϯτ //1ʙ5·ͰΛϥϯμϜʹฦ͢(ٖࣅཚ) let rand = Math.floor(Math.random() * 5) + 1;
document.getElementById() //idͷऔಘ addEventListener('click', function(){} //ΫϦοΫ͞Εͨ࣌ͷΠϕϯτ if() //݅ذ alert() //ग़ྗ <button id=“btn">͓Έ͘͡</button> HTML JavaScript
͓Έ͘͡ɹ͑ //#btnΛऔಘ let btn = document.getElementById("btn"); btn.addEventListener('click', function(){ //1͔Β5·ͰͷཚΛੜ let
rand = Math.floor(Math.random() * 5) + 1; if(rand == 1){ alert("େ٢"); }else if(rand == 2){ alert("த٢"); }else if(rand == 3){ alert("খ٢"); }else if(rand == 4){ alert("ڟ"); }else if(rand == 5){ alert("େڟ"); }else{ alert("Τϥʔ"); } }); JavaScript
·ͱΊ
·ͱΊ • ϒϥβͰಈ͘།Ұͷϓϩάϥϛϯάݴޠ • ECMAScriptͱͯ͠ɺඪ४Խ • DOMΛͬͯɺHTMLͷ༰Λૢ࡞Ͱ͖Δ • Ϣʔβͷૢ࡞Λݩʹɺ࣮ߦͰ͖Δ
Ͱɺ͜Ε ΄ΜͷҰ෦
Ωʔϫʔυ • Ξχϝʔγϣϯ • Ajax • ΦϒδΣΫτࢦ • this •
ϥΠϒϥϦɾϑϨʔϜϫʔΫ
ϥΠϒϥϦɾϑϨʔϜϫʔΫ
ϥΠϒϥϦɾϑϨʔϜϫʔΫ • jQuery • React • AngularJS • Vue.js •
Backbone.js • Knockout.js
ϥΠϒϥϦɾϑϨʔϜϫʔΫͰɺ JavaScriptɺ͞ΒʹศརʹͳΔ
ͦͯ͠ɺJavaScript webΞϓϦʹ͔͍ͬͯΔ
͞ΒʹֶͿͨΊʹ • MDN https://developer.mozilla.org/ja/docs/Web/ JavaScript