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
600
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
490
What even is a table? A quick look at Accessibility APIs
edds
8
2.1k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
310
Accessibility and how to get the most from your screenreader - Front End North
edds
3
870
Using D3.js to visualise your analytics data
edds
0
660
GOV.UK Case Study - Fronteers 2013
edds
2
900
Using Sass on GOV.UK
edds
8
780
What the flash - Photography Introduction
edds
64
11k
Other Decks in Programming
See All in Programming
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
610
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2k
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
160
Namespace, What and Why
tagomoris
3
590
slow types ってなんだろう?
karad
0
210
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
2024 コーディング研修
ckazu
2
620
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
TypeScriptのパフォーマンス改善
yajihum
12
4.9k
Going beyond Apache Parquet's default settings
xhochy
0
150
WebGLで始める コンピュータグラフィックス入門
heller77
0
370
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Raft: Consensus for Rubyists
vanstee
133
6.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Invisible Customer
myddelton
114
12k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Documentation Writing (for coders)
carmenintech
60
4k
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”; }