Introduction

to the Basics of

Javascript Fundamentals

@zachfedor

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

source: W3C

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."

source:  Wikipedia

JAVA

• 1991-1995
• Sun Microsystems
• Originally designed for interactive television...

source:  Wikipedia

But...

What Is It?

Javascript Is A

• High-Level
• Interpreted
• Dynamic
• Untyped
• Prototype-based
• Scripting

Language

source:  Wikipedia

// 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 6

AsynchronousJavaScript

And XML

Ajax is

• HTML and CSS
• DOM
• JSON or XML
• XMLHttpRequest

Tied Together With Javascript

source:  Wikipedia

// 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

source: MDN

Then What's jQuery?

http://api.jquery.com/

jQuery Demo

https://github.com/zachfedor/mutech-js101

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

https://github.com/zachfedor/mutech-js101

Libraries,

Frameworks,

And Packages!

Framework

encapsulates common application functionality

Library

packages of code used by your application to perform a task

source: Stack Overflow

Todo MVC

http://todomvc.com/

List of JS Libraries

https://en.wikipedia.org/wiki/List_of_JavaScript_libraries

Node Package Manager

https://www.npmjs.com/​

OH $#*%!

I Broke It!

Chrome Dev Tools

https://developers.google.com/web/tools/chrome-devtools/​

Firefox Dev Tools

https://developer.mozilla.org/en-US/docs/Tools​

Dev Tools Demo

https://github.com/zachfedor/mutech-js101

Never

Stop

Learning

Theory

• Mozilla Developer Network
• Stack Overflow
• JavaScript: The Good Parts
• You Don't Know JS
• Eloquent JavaScript

• Codecademy
• Egghead
• CodePen
• TodoMVC

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

Thanks!

@zachfedor

github

twitter

lancaster slack