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
Intro to Javascript
Search
Yuri Victor
May 25, 2013
Technology
6
1.6k
Intro to Javascript
From Society for News Design iPad workshop.
Yuri Victor
May 25, 2013
Tweet
Share
More Decks by Yuri Victor
See All by Yuri Victor
HIG
yurivictor
2
590
Why The Washington Post uses WordPress lightning
yurivictor
1
13k
Why the Washington Post uses WordPress
yurivictor
3
460
Other Decks in Technology
See All in Technology
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
OPENLOGI Company Profile for engineer
hr01
1
34k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
怖くない!はじめてのClaude Code
shinya337
0
400
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
PO初心者が考えた ”POらしさ”
nb_rady
0
210
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Become a Pro
speakerdeck
PRO
29
5.4k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Automating Front-end Workflow
addyosmani
1370
200k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for humans not robots
tammielis
253
25k
KATA
mclloyd
30
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Transcript
JS
@yurivictor
WHAT IS JAVASCRIPT?
JAVASCRIPT IS A MULTI-PARADIGM, WEAKLY TYPED, PROTOTYPE-BASED INTERPRETED PROGRAMMING LANGUAGE
ORIGINALLY INTENDED FOR WEB BROWSERS SO CLIENT-SIDE SCRIPTS COULD INTERACT WITH THE USER, CONTROL THE BROWSER, COMMUNICATE ASYNCHRONOUSLY AND ALTER THE DOCUMENT CONTENT
NO!
THAT’S SCARY
JAVASCRIPT LET’S YOU DO COOL STUFF ON THE WEB* *AND
BEYOND
YES!
LET’S DO THAT
LET’S TALK TUTORIALS
HERE’S A SECRET
TUTORIALS SUCK
alert( 'Hello SND' );
NO!
PROGRAMMING TUTORIALS SUCK BECAUSE THEY TEACH PROGRAMMING
NO!
LET’S LEARN HOW TO BUILD COOL STUFF
YES!
THREE THINGS
ADDING
REMOVING
MOVING
LET’S TALK JAVASCRIPT
JAVASCRIPT IS STRANGE
JAVASCRIPT IS POWERFUL
HERE’S A SECRET
USE GOOGLE
YOU ARE GOING TO
10 LINES OF CODE
10 NEXT APPS
5 MINUTES PER LINE
WE’RE GOING TO LEARN
VARIABLES
FUNCTIONS
IF/ELSE
JQUERY
LET’S GET IT STARTED(HA)
OPEN YOUR TEXT EDITOR
SAVE A NEW FILE AS awesome.html
DRAG THE FILE INTO YOUR BROWSER
<h1>0</h1> <h2>AWESOMENESS</h2> <button id="decrease">-</button> <button id="increase">+</button> <script src="jquery.min.js"></script> <script> var
awesomeness = 0; // We suck $( 'button' ).click( function() {! ! if ( $( this ).attr( 'id' ) === 'increase' ) { ! ! awesomeness = awesomeness + 10; ! } else { ! ! awesomeness = awesomeness - 1; ! } ! $( 'h1' ).text( awesomeness ); } ); </script>
None
SAME CODE AS
None
None
SAME CODE AS
None
WHAT’S NEXT
ANIMATION
DATA
WORLD DOMINATION
HOW TO KEEP GOING
READ OTHER’S CODE wapo.st/ThoL6P
BUILD REAL THINGS
BREAK STUFF
LEARN JS PROPERLY bit.ly/TwAwZr
None