JS Fundamentals
Who is Michael Cole?
Wide Range of Experience
- 10 years in corporate
- 10 years freelance
- 2 yrs Digital Nomad
- Fullstack + DevOps
Traveled working remotely.
- Learned to surf in Ecuador
- Learned Spanish in Colombia
- SCUBA instructor and guide
- Entrepreneur in Thailand
Talented devs name their terms.
Code is everywhere.
Most people select options.
Programmers *make* choices.
Welcome :-)
Hard work and constant learning.
How the Web Works
Firehose Lecture - 30 mins
Variables, Logic, Funtions
Interactive Lecture - 1 hr
Practice Practice Practice
Rest of the day
How the Web Works
pre-1993 - Dialup BBS
Have your computer call your friends computer. Every BBS was an island.
Essentially same as today: email, chat, downloads, and games.
Web Browser History
1993 - Before Mosaic
Lynx (text based http)
Gopher (before http)
Email (no spam yet), and ...
1993 - After Mosaic
IE 1 (Mosaic Rebranded)
Mosaic
Web Browser History
The First Browser Wars
Internet Explorer
Netscape
Firefox
1996 - 2009
Microsoft licensed Netscape, then gave away IE for free by bundling with Windows.
Netscape created the Mozilla Foundation, and Firefox to promote web standards.
Different Browsers had different scripting languages. Netscape (now Mozilla) proposed JavaScript as ECMAScript Standard in 1997
1996
2009
Web Browsers
1996 - 2009
Web Applications were incredibly hard.
Each browser was different: Scripting, DOMs, CSS
Write for one browser, then `port` to others.
Firefox won because of standards and the Firebug debugger
jQuery began to standardize
The Second Browser War
2009 - Present
IE
FF
Chrome
- Developers wanted standards and features.
- Users suffered.
- Web applications were Slow.
- Thin front-end
Google in 2009
Why use Chrome?
- People use IE because it's already installed
- People use Firefox because it's "web standards"
- Why will people use Google Chrome?
-
Open Source: Chromium
-
Better Dev Tools than Firebug
-
Super fast "V8" JS Engine (which became Node.js)
Modern Web
-
JavaScript everywhere
-
Multiple supported browsers
-
Standards based
- http://caniuse.com
-
"responsive" Mobile Designs
- http://getbootstrap.com
Web Servers?
1990: Document web
-
Apache web server.
-
Documents - HTML / CSS / Images
-
Semantic structure
-
Server Side Includes for headers/footers
-
Today called "static site generators"
Example: http://powma.com
2000: Single Server Web
-
Java - Enterprise Web App
-
PHP - "Pretty good Home Page" - commodity hosting
Dynamic Pages, often starting from one file.
One Server for all requests.
Example: http://wikipedia.org
Problems: It does not scale. Not interactive. Impossible chat server problem.
2010: Multi-Server Web
-
DevOps, Heroku - the Stateless Server
-
Frameworks: Ruby on Rails, Symfony
-
Content Management Systems
-
Beginning of the "Cloud"
-
jQuery - front-end bling, still HTML
"Stateless" Web servers, separate databases
Databases start to scale with replication.
Example: http://whitehouse.gov
Problem: Still Hard to scale.
2014: Modern Web
-
Single Page App: MEAN stack
-
Servers evolve REST API's.
-
Front-end/back-end split. The Browser becomes it's own application.
- JavaScript framework on Front-end
- Node.js / Express on Back-end
- Document Databases in Production
Example: https://app.humongous.io
Problem: It's complicated :-) Also, there's never been more opportunity to learn.
JS - The most installed language
-
Lighter weight than Java / .NET
-
Faster than PHP
-
Asynchronous - like the web
-
NPM Package Manager
-
One language for web client+server
-
Embedded scripting (NodeBots)
-
Actively Developed (ES6 & 7)
http://alpha.ideavis.co/529cc5f/?utm_content=bufferd15ac&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer
Variables, Logic, Funtions
Interactive Lecture - 1 hr
The Console
Write and run JS line by line
Open Browser (Chrome of FF)
Right click anywhere
Inspect Element
Click Console
Make it big, we'll be here awhile
Variables
A place to keep your stuff
x = 'hello world'
Expressions
Resolve to a single value
x = 'hey there,'
x + ' you look great!'
x === 'goodbye world'
Conditional Statements
Doing things at the right time
// This is a comment
x = 'morning'; // Assignment
if (x === 'morning') { // Comparison
console.log(x + ' coffee');
console.log('breakfast');
} else { /* part of if/else */
console.log('snack');
}
else if
Sequential tests
hour = 11;
if (hour < 9) {
alert('breakfast');
} else if(hour > 12) {
alert('lunch');
} else {
alert('brunch');
};
Function Declaration
Making a Recipe
function whatsNow(x) { // A Parameter
if (x === 'morning') {
console.log(x + ' coffee');
console.log('breakfast');
} else {
console.log('snack');
}
}
Function Calls
Baking a Cake from a Recipe
whatsNow('morning'); // an argument
whatsNow('afternoon');
console.log(whatsNow); // What?!
Function Calls
Returning a value
function howManyChars(x) {
return x.length;
};
howManyChars('hello moon');
Taking off the training wheels
Too much code for the console
http://jsbin.com/bovinu/2/edit?js,console
http://jsbin.com/tagaru/1/edit?js,console
Global Scope Bad
Everyone hates it:
-
It causes bugs
-
It looks amateurish
-
Trolls will troll you
-
The mind can hold ~25 lines of code
What did we miss?
- ES6 has block scope with `let`
- http://stackoverflow.com register
- http://github.com register
- operator precedence javascript mozilla
- arrays
- objects
It's over!
Firehose off
Learning JS
By michaelcole
Learning JS
- 945