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
440
gulpやめてLaravel Mixはじめた話
takanashi66
1
180
LT-WordPressの開発をプラグインで管理する
takanashi66
0
330
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
180
CSS Grid Layout Module
takanashi66
0
94
webサイトのiPhone X 対応
takanashi66
0
1.5k
web制作におけるGitフロー
takanashi66
0
510
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
290
Other Decks in Technology
See All in Technology
ジョブマッチングサービスにおける相互推薦システムの応用事例と課題
hakubishin3
3
620
Deno+JSRでパッケージを作って公開する
askua
0
110
Microsoft Intune アプリのトラブルシューティング
sophiakunii
1
390
マイベストのデータ基盤の現在と未来 / mybest-data-infra-asis-tobe
mybestinc
2
1.9k
フルカイテン株式会社 採用資料
fullkaiten
0
40k
元旅行会社の情シス部員が教えるおすすめなre:Inventへの行き方 / What is the most efficient way to re:Invent
naospon
2
260
ドメイン名の終活について - JPAAWG 7th -
mikit
29
16k
私はこうやってマインドマップでテストすることを出す!
mineo_matsuya
0
180
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
340
Fargateを使った研修の話
takesection
0
170
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
120
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Done Done
chrislema
181
16k
How to Ace a Technical Interview
jacobian
276
23k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
75
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Language of Interfaces
destraynor
154
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
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