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
roppongirb_20250911
igaiga
1
250
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
3
590
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
350
AWSで始める実践Dagster入門
kitagawaz
1
750
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
はじめてのOSS開発からみえたGo言語の強み
shibukazu
4
1k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Invisible Side of Design
smashingmag
301
51k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Cult of Friendly URLs
andyhume
79
6.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Scaling GitHub
holman
463
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
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