Introduction
to the Basics of
Javascript Fundamentals
@zachfedor
101
https://slides.com/zachfedor/js-101
Overview
- Brief History
- JavaScript
- Ajax
- jQuery
- Node
- Explore Some Tools
- Learn to Debug
- What's Next?
"Learning JavaScript used to mean you weren't a serious software developer. Today, not learning Javascript means the same thing."
- Tim O'Reilly
A Brief
History
of Javascript
-
1994: Mosaic Communications attempted to create a better browser called Mosaic Netscape
- Brandon Eich
- Microsoft and Oracle competition
- 1995: Mocha > LiveScript > JavaScript
- 1996: ECMA International standards
- 1999: Release of ECMAScript 3
- 2005: Jesse James Garrett creates Ajax
- 2008-9: ES5 and Node
- Today: ES2016 and 2017 is on it's way
PHP
- 1995-1997
- Rasmus Lerdorf
- "I don’t know how to stop it, there was never any intent to write a programming language […] I have absolutely no idea how to write a programming language, I just kept adding the next logical step on the way."
JAVA
- 1991-1995
- Sun Microsystems
- Originally designed for interactive television...
But...
What Is It?
Javascript Is A
- High-Level
- Interpreted
- Dynamic
- Untyped
- Prototype-based
- Scripting
Language
// Hey. I'm a Program!
console.log("Hello World!");
// Variables
var a = 2;
var b = "string";
var c = a + b; // "2string"
// Function
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
}
return n * factorial(n - 1);
}
factorial(3); // returns 6AsynchronousJavaScript
And XML
Ajax is
- HTML and CSS
- DOM
- JSON or XML
- XMLHttpRequest
Tied Together With Javascript
// This is the client-side script.
// Initialize the HTTP request.
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php');
// Track the state changes of the request.
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
// 'This is the returned text.'
console.log(xhr.responseText);
} else {
// An error occurred during the request.
console.log('Error: ' + xhr.status);
}
}
};
// Send the request to send-ajax-data.php
xhr.send(null);// This is beauty of jQuery
$.get('send-ajax-data.php')
.done(function(data) {
console.log(data);
})
.fail(function(data) {
console.log('Error: ' + data);
});jQuery
And The Dom
First off, What's the Dom?
- Programming interface for HTML
- Structured representation of the document
- Group of nodes and objects
Then What's jQuery?
jQuery Demo
Node =
Javascript
everywhere
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
NPM and Gulp Demo
Libraries,
Frameworks,
And Packages!
Framework
encapsulates common application functionality
Library
packages of code used by your application to perform a task
Todo MVC
List of JS Libraries
Node Package Manager
OH $#*%!
I Broke It!
Chrome Dev Tools
Firefox Dev Tools
Dev Tools Demo
Never
Stop
Learning
Theory
Execution
- Replicate a jQuery method in vanilla JS.
- Try a framework. Any framework!
- Only learn one new thing at a time.
- Don't feel pressure to learn something because you feel like you should. Learn something if you want to solve an actual problem.
General Tips
Questions? Comments?
Demands for Clarification?
- Brief history of the language
- JavaScript as a programming language
- Ajax and a new way to talk to the server
- jQuery and a new way to interact with the DOM
- Node and a new way to run JavaScript
- Tools, frameworks, and libraries
- Debugging in the browser
- All the places to keep learning
https://slides.com/zachfedor/js-101