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
750
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
570
What even is a table? A quick look at Accessibility APIs
edds
8
2.3k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
380
Accessibility and how to get the most from your screenreader - Front End North
edds
3
1k
Using D3.js to visualise your analytics data
edds
0
720
GOV.UK Case Study - Fronteers 2013
edds
2
1k
Using Sass on GOV.UK
edds
8
880
What the flash - Photography Introduction
edds
67
11k
Other Decks in Programming
See All in Programming
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.4k
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
600
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.3k
Immutable ActiveRecord
megane42
0
140
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
150
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
もう僕は OpenAPI を書きたくない
sgash708
5
1.7k
Honoとフロントエンドの 型安全性について
yodaka
7
1.2k
Software Architecture
hschwentner
6
2.1k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Become a Pro
speakerdeck
PRO
26
5.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Optimizing for Happiness
mojombo
376
70k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Facilitating Awesome Meetings
lara
52
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Unsuck your backbone
ammeep
669
57k
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”; }