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
650
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
520
What even is a table? A quick look at Accessibility APIs
edds
8
2.2k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
330
Accessibility and how to get the most from your screenreader - Front End North
edds
3
930
Using D3.js to visualise your analytics data
edds
0
670
GOV.UK Case Study - Fronteers 2013
edds
2
940
Using Sass on GOV.UK
edds
8
810
What the flash - Photography Introduction
edds
65
11k
Other Decks in Programming
See All in Programming
CSC307 Lecture 12
javiergs
PRO
0
220
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Temporalを取り巻く仕様を整理する
sajikix
0
110
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
CSC307 Lecture 10
javiergs
PRO
0
310
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
유연한 Composable 설계
l2hyunwoo
0
380
Rust.Nagoya #1
codemountains
0
170
Terraformテスト入門
msato
0
530
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
332
56k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
The Language of Interfaces
destraynor
151
23k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Designing Experiences People Love
moore
136
23k
Writing Fast Ruby
sferik
623
60k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Designing for humans not robots
tammielis
247
25k
What's new in Ruby 2.0
geeforr
338
31k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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”; }