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
190
ゼロからはじめるjavascript基礎のき
広島フロントエンド勉強会 Vol.9のスライド
井上拓
May 13, 2017
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
730
Laravel Mixではじめるwebpack
takanashi66
0
500
gulpやめてLaravel Mixはじめた話
takanashi66
1
210
LT-WordPressの開発をプラグインで管理する
takanashi66
0
350
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
200
CSS Grid Layout Module
takanashi66
0
110
webサイトのiPhone X 対応
takanashi66
0
1.6k
web制作におけるGitフロー
takanashi66
0
600
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
300
Other Decks in Technology
See All in Technology
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
頭部ふわふわ浄酔器
uyupun
0
230
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
5
1.3k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
380
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
420
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
330
アノテーション作業書作成のGood Practice
cierpa0905
PRO
0
190
Retrospectiveを振り返ろう
nakasho
0
130
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
340
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
310
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
880
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Language of Interfaces
destraynor
162
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Building Applications with DynamoDB
mza
96
6.7k
BBQ
matthewcrist
89
9.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Code Review Best Practice
trishagee
72
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.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