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
560
Why The Washington Post uses WordPress lightning
yurivictor
1
13k
Why the Washington Post uses WordPress
yurivictor
3
430
Other Decks in Technology
See All in Technology
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
3.9k
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
290
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
AWS Observability ベストプラクティス 大紹介
o11yfes2023
0
150
OPENLOGI Company Profile for engineer
hr01
1
2.1k
From here to resilience - a travel guide
ufried
1
160
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
1.7k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
テストコードを書きながらCompose Multiplatformを乗りこなす
subroh0508
0
140
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
730
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
176
21k
Raft: Consensus for Rubyists
vanstee
133
6.3k
GraphQLとの向き合い方2022年版
quramy
33
12k
Making Projects Easy
brettharned
109
5.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Documentation Writing (for coders)
carmenintech
60
4k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Automating Front-end Workflow
addyosmani
1357
200k
Done Done
chrislema
178
15k
Web development in the modern age
philhawksworth
203
10k
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