Week 6 | March 14, 2016

What is JavaScript?

Lesson Prep

  • Open: Class Website (Week 6), GitHub, Slack
  • Open your website in sublime
  • Create a new directory called js-intro
  • Create a new file inside js-intro called index.html and paste in the code below:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Intro to JavaScript</title>
    </head>
    <body>
      <div id="container"></div>
    </body>
    </html>

Objectives for Javascript

  • Write introductory JavaScript from scratch to add interactivity to your web pages
  • How to use basic libraries, including jQuery plugins and Underscore templating.
  • A feel for the capabilities and limitations of programming
  • Understand the basics of functional programming: loops, control structures and data types, which provide a foundation for any language

Javascript, A History

An 'Old' Language

  • Was created in 1995 by Brendan Eich
  • In 1996-1997 was taken to the ECMA Board to set standards, which could then be implemented by other browsers
  • The base for modern javascript was released in 1999 as ECMAScript 3
  • Originally, Microsoft had no intention of properly implementing JS into IE

Present Day

  • In 2005, partly in response to a paper released by Jesse James Garret, JS began its renaissance, spearheaded by open source communities
  • Out of this, libraries like Prototype, MooTools, jQuery and more were released
  • The latest rounds of innovation have produced developments like the NodeJS platform, HTML5 APIs, moustache templates, Backbone and more

Mobile Implications

With the fast surge of mobile devices and Apple's decision to forego supporting Adobe's Flash - which had previously been the go-to technology for creating on-page interactions and animations - JavaScript became even more important because it was already native to browsers on any device.

What do we use it for?

Javascript v. jQuery

  • Javascript is the language, jQuery is the library
  • jQuery is essentially a set of shortcuts to doing common tasks with JavaScript
  • Use the jQuery website to look up specific uses

Adding Javascript to Your Page

The following methods are true whether you are using native JavaScript, a library like jQuery, plugins, etc.

Internally

You can add the following at any point in your HTML file, however, it is best to add it to the bottom of the page, before your closing </body> tag

<script type="text/javascript">Your Script Here</script>

Externally

Almost the same as adding internal script, except you add a source attribute to the <script> tag, and nothing in between

<script type="text/javascript" src="js/main.js"></script>

Javascript Vocab

Variables

Variables are symbolic names for values in your code

  • Javascript is case-sensitive
  • You can declare variables in two ways:
    • Using the keyword var. For example var x = 1025; or var x = "Hello, World!";
    • Simply declaring. For example x = 1025. This method creates a global variable and should be used sparingly.

Values

Javascript recognizes the following value types:

  • Numbers: 42, 1025, 3.14
  • Boolean (Logic): True / False
  • Strings: "Hello, World!"
  • null: A special keyword assigned as a representation of no value
  • undefined: A variable that has been declared but has not been assigned a value

Scope

  • When you declare a variable outside of a function it is called a global variable because it is available to all functions in a document
  • When you declar a variable inside a function it is called a local variable because it is only available inside that function

Object-Oriented Programming

  • Objects: In programming, something that has a value, which can be a variable, function or data structure
  • Class: In OOP this is an object that is used to created instances of itself - it is a blueprint for building a specific object
  • Methods: Behaviors associated with a class that are executed when the program is run
  • Extra Reading about OOP

The DOM

Definition

DOM = Document Object Model

Nodes

In the DOM, everything is a node - HTML elements are element nodes and attributes are attribute nodes and text inside of elements are text nodes.

Manipulating the DOM

When we refer to the DOM, which we do a lot in JavaScript, we are simply referring to the layout of nodes that make up a page.

The DOCUMENT

Native JavaScript

To use methods, JavaScript uses document to refer to your HTML. By calling document, we can access the entire DOM (all the nodes!) on the page.

Dot Notation

In JavaScript, this is the way by which we can access various properties, including methods, of an object. Start with the top level object and use dots to "drill down".

document Methods

For example, there are a number of methods we can use to access or set properties of our document.

The syntax is document.yourproperty or document.yourmethod()

Check your work

You can use a log statement to check the value of any variable in your brower's console.

console.log(var);

Native Methods & Exercises

write to the page

  • document.write() to add text to a page

Storing Information

We use variables to "store" information. Whenever we create an HTML or text node, we then have to store it and create a reference to it using a variable, which we can then add to the page at a point of our choosing. Create references to the following:

  • document.createElement() to create an HTML element
  • document.createTextNode() to create text
  • document.appendChild() to put your text node into your HTML

Accessing Nodes

To refer to specific nodes on the page that we want to change, we can create a reference to them using methods like:

  • document.getElementsByTagName()
  • document.getElementsById()
  • Add your node to the page using appendChild

Functions

What are they?

Functions in JavaScript combine a series of events or actions into one step. This is useful when there is a series of actions you want to perform more than once. REMEMBER:

  • Functions are also objects!
  • There are multiple ways to create and run functions but basic syntax stays the same.
  • You can create a reference to an anonymous function using a variable or write a named function.

Syntax - Storing a function

var myFunc = function(param){
    console.log("RUN MY FUNCTION");
}

note: All lines of JavaScript should end with a semi-colon.

Arguments / Parameters

Can be passed to your function so that the events within the function can be run on different objects. The parameter is a placeholder name for whatever value we pass to it.

Run your Function

Just putting a function in your code will not automatically run that function. To call the function, type the name of the function with a set of parathenses after it (which is where you will pass your parameter if you have one): myFunc(param);

A Lack of Class

In other programming languages there are classes, which can be repeated. We can simulate this in JS using named functions:

function addItem(param){
    console.log("ADD AN ITEM");
}

And then to run, call the name of the function: addItem(param);

Practice

Write a function on your homepage that triggers an alert when the user loads the page. HINTS:

  • Use a named function.
  • Unless specified, a function will run as soon as the page loads.
  • There are special keywords in JavaScript that mean or do specific tasks - you should not use these keywords as variable names. One of those is alert.
  • To put together strings and variables, use concatenation, which is adding a plus sign between the two: 'Hello,' + name;

Assignment

Reading

  • Read in JavaScript&JQuery, Chapters 2 &5 (pages 184-227).

Worksheet

  • Download the Week6Worksheet.docx worksheet from Slack
  • Put your name at the top and answer the questions. You should be able to answer based on today's lesson and your reading, or you can use Google.
  • Send it to me via DM in Slack

Exercise

  • Sign up for Codecademy
  • Go to the JavaScript section (NOT jQuery) and go to section 3, Introduction to Functions in JS. Complete lessons 1-7.
  • Take a screenshot of your last lesson (there will be a green bar telling you you've succeeded and can move on) and send to me via DM in Slack.