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
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
350
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
370
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
880
o11yツールを乗り換えた話
tak0x00
1
120
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
150
alecthomas/kong はいいぞ
fujiwara3
6
1.4k
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
3
130
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
220
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Unsuck your backbone
ammeep
671
58k
Building Applications with DynamoDB
mza
95
6.5k
Docker and Python
trallard
45
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
4 Signs Your Business is Dying
shpigford
184
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Embracing the Ebb and Flow
colly
86
4.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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