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
580
Why The Washington Post uses WordPress lightning
yurivictor
1
13k
Why the Washington Post uses WordPress
yurivictor
3
450
Other Decks in Technology
See All in Technology
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
Building Products in the LLM Era
ymatsuwitter
10
4.4k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
2.5Dモデルのすべて
yu4u
2
610
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Experiences People Love
moore
139
23k
The Invisible Side of Design
smashingmag
299
50k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Into the Great Unknown - MozCon
thekraken
35
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Code Review Best Practice
trishagee
66
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
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