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
7.1k
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
810
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
590
What even is a table? A quick look at Accessibility APIs
edds
8
2.5k
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
750
GOV.UK Case Study - Fronteers 2013
edds
2
1.1k
Using Sass on GOV.UK
edds
8
920
What the flash - Photography Introduction
edds
67
11k
Other Decks in Programming
See All in Programming
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
dynamic!
moro
9
6.6k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
CSC305 Lecture 02
javiergs
PRO
1
260
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
880
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
600
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
540
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
540
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Visualization
eitanlees
148
16k
How to train your dragon (web standard)
notwaldorf
96
6.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for Performance
lara
610
69k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Become a Pro
speakerdeck
PRO
29
5.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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”; }