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
590
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
740
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
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
110
GoのWebAssembly活用パターン紹介
syumai
3
9.5k
XSLTで作るBrainfuck処理系
makki_d
0
180
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
330
イベントストーミングから始めるドメイン駆動設計
jgeem
4
800
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
620
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.2k
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
360
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
130
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
100
生成AIで日々のエラー調査を進めたい
yuyaabo
0
480
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
270
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
GraphQLとの向き合い方2022年版
quramy
46
14k
BBQ
matthewcrist
89
9.7k
Designing Experiences People Love
moore
142
24k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Agile that works and the tools we love
rasmusluckow
329
21k
How STYLIGHT went responsive
nonsquared
100
5.6k
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”; }