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 Basics
Search
Edd S
April 18, 2012
Programming
11
7k
JavaScript Basics
Slides for an internal talk I gave while at MintDigital
Edd S
April 18, 2012
Tweet
Share
More Decks by Edd S
See All by Edd S
Using React at Deliveroo - LRUG
edds
0
790
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
580
What even is a table? A quick look at Accessibility APIs
edds
8
2.4k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
400
Accessibility and how to get the most from your screenreader - Front End North
edds
3
1.1k
Using D3.js to visualise your analytics data
edds
0
730
GOV.UK Case Study - Fronteers 2013
edds
2
1.1k
Using Sass on GOV.UK
edds
8
900
What the flash - Photography Introduction
edds
67
11k
Other Decks in Programming
See All in Programming
Cache Strategies with Redisson & Exposed
debop
0
100
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
440
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
140
生成AI時代のフルスタック開発
kenn
8
1.1k
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
310
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
1
280
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
180
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
200
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
1.2k
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
250
Embracing Ruby magic
vinistock
2
310
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
330
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
It's Worth the Effort
3n
184
28k
Optimizing for Happiness
mojombo
378
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
KATA
mclloyd
29
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
A better future with KSS
kneath
239
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Code Review Best Practice
trishagee
68
18k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
JavaScript at Mint and Beyond
var we = “so so so excited”; Variables
we = “so so so excited”; Global Variable
function sit(seat){ sitting = ‘sitting in the ’+seat+‘ seat’; alert(sitting);
} sit(‘front’); alert(sitting); sitting was set globally
function parting(chant){ var location = ‘Back Seat’, mood = ‘happy’,
over; } multiple variable declaration
(we == “so so so excited”) // true
(we === “so so so excited”) // more true
for(var i=0; i < 10; i++){ // ... }
while ( true ) { // for ever and ever
}
for(var node in object){ // ... }
Everything is an Object
function Car(seats){ // code } Car.prototype.mood = function(){ return ‘exciting’;
} var partyVenue = new Car();
var weekDays = [ ‘monday’, ‘tuesday’ ... ]; var weekDays
= new Array(‘monday’, ‘tuesday’ ... ); creating arrays
var seat = { position: ‘front’, activity: ‘kicking’ }; var
seat = new Object(); seat.position = ‘front’; seat.activity = ‘kicking’; creating objects
var App = { inlineSearch: function(){ ... }, ajaxPannels: function(){
... } }; namespacing
for(var node in object){ // ... }
typeof friday === “undefined” // true BB.isDef(friday) existence
if( thursday ){ // } undefined variables cause exceptions
var friday = {}; if( friday.now ) { // }
undefined attributes don’t
function friday(){ return ‘party’; } method
function (){ return ‘party’; } anonymous
(function (){ return ‘party’; }()); self executing anonymous
(function($){ // code that uses jQuery $ here }(jQuery)); pass
through variables into anonymous functions
elm.addEventListener(‘click’, function(e){ // event code }, false); native events
jQuery
None
None
$(‘div.car p.front-seat’); css selectors
$(‘div.car p[rel=“empty”]’); advanced selectors
var $car = $(‘div.car’), $frontSeat = $(‘p.front-seat’, $car); or $frontSeat
= $car.children(‘p.front-seat’); scoped selectors
$(function(){ // execute on DOMReady }); DOMReady Loader
$.each( ... ); object with methods
$(‘<div id=“friday”>partying</ div>’); create nodes
var $seats = $(‘div.seat’); use a $variable name for jQuery
objects
$(‘div.seat’); // [ node1, node2, node3 ... ] jQuery object
is an array of matched nodes
$(‘div.seat’).css(‘background’); get css value
$(‘div.seat’) .css(‘background’, ‘#bada55’); set value
$(‘div.seat’) .css(‘color’, ‘#bada55’) .addClass(‘party’) modifiers return a jQuery object
$friday.bind(‘click’, function(e){ e.preventDefault(); // parting }); jQuery events
BB.bodyID(‘users-index’, function(){ ... }); BB.bodyClass(‘users’, function(){ ... }); restricting execution
<body id=“search-index”> <form method=“get” action=“” id=“search”> <input type=“text” name=“q”> <button
type=“submit”>Search!</button> </form> <div id=“results”> </div> </body> a search page
BB.bodyID(‘search-index’, function(){ var $form = $(‘form#search’); BB.submitInline($form, { success: function(){
// success code here } } });
{ results: [ { title: ‘fun’, url: ‘/fun’ }, {
title: ‘excited’, url: ‘/excited’ }, ... ] } json response
<body id=“search-index”> <form method=“get” action=“” id=“search”> <input type=“text” name=“q”> <button
type=“submit”>Search!</button> </form> <div id=“results”> </div> </body> recap search page
BB.bodyID(‘search-index’, function(){ var $form = $(‘form#search’), $results = $(‘div#results’); BB.submitInline($form,
{ success: function(json){ $.each(json.results, function(i, data){ $results.append(‘<a href=“’+data.url +‘”>’+data.title+‘</a>’); }); } } });
Browser Development
function whichSeatShouldITake(){ var seats = [ ‘Front Left’, ‘Front Right’,
‘Back Left’, ‘Back Right’, ‘Back Middle’], random = Math.round(Math.random()*seats.length)); return “Just sit in the ” + seats[random] + “ seat and shut up”; }