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
780
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
390
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
1k
Using Sass on GOV.UK
edds
8
890
What the flash - Photography Introduction
edds
67
11k
Other Decks in Programming
See All in Programming
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
180
趣味全開のAITuber開発
kokushin
0
200
Sharing features among Android applications: experience feedback
jbvincey
0
110
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
150
API for docs
soutaro
2
1.3k
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
810
DataStoreをテストする
mkeeda
0
290
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.6k
リストビュー画面UX改善の振り返り
splcywolf
0
140
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
Qiita Bash
mercury_dev0517
2
200
AI時代の開発者評価について
ayumuu
0
150
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
750
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
550
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A Tale of Four Properties
chriscoyier
158
23k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Speed Design
sergeychernyshev
29
900
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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”; }