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 6

AsynchronousJavaScript

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

Thanks!

Made with Slides.com