wmyers/fewd-week4-refresher.md

## fewd-week4-refresher.md

      
    Raw
  

              fewd-week4-refresher.md
            
          
    ##Week 4 Refresher Notes
###Introduction to Programming

A program is a set of instructions
Programming is writing instructions in a way the computer can understand
Programming is about changing the way you think
Programming is about changing the way you think to be more like the way a computer executes instructions

###Pseudo code

Pseudo code is programming without using the syntax of a programming language
Pseudo code trains the brain for programming
You use a mixture of natural language and high-level generic syntax like if and repeat
You join words together with underscores to make meaningful nouns and verbs
my_email_inbox
get_my_email
Use simple arithmetic operators +, -, =, >, <

####Thermostat pseudo code
get target_temperature
target_temperature = 72
repeat forever,
      current_temperature = get_sensor_reading
      if target_temperature > (current_temperature+5),
          turn_on_heater
      if target_temperature <= current_temperature,
          turn_off_heater

###JavaScript
JavaScript is the behaviour of a website.

HTML - Document Structure
CSS - Looks, Style
JavaScript - Logic, Functionality, Behavior

####JavaScript and the Document DOM
JavaScript in the browser has an API (application program interface) for accessing and editing the DOM (the document object model) of an HTML document. The DOM is a hierarchical tree representation of the structure of the HTML.
The DOM is accessible as a global object that JavaScript can access directly. There is also a global object to access the browser window.

document - this refers to the document DOM
window - this refers to the browser window

You access the properties of objects using dot syntax (object.property)
NB: the document DOM is also a property of the window (window.document)
####Control flow
Just as HTML and CSS code is read across and down the page, it is the same for JavaScript code.
JavaScript is normally externally linked in the <head> of the HTML, similarly to CSS, using a <script> tag.
Unlike the CSS <link> tag which is empty, <script></script> tags have a closing tag. so you can write JavaScript directly between the tags in the HTML file. If you were doing the same in CSS you would use the <style></style> tags.
But just as with CSS, it is better to write your JavaScript in an external file and set the path to it with the src attribute of the <script> tag:
<head>
  ...

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

This is the point at which the JavaScript code will be executed, which will be before the page <body> has fully loaded.
####Accessing DOM elements after they have loaded
If you are adding some behavior to a DOM element with JavaScript you have to make sure that the page is loaded first. There are several ways to do this:

Put the <script> tag at the end of the <body> rather than in the <head>
Put your JavaScript inside a window.onload function event listener

window.onload = function(){
  //do something after the page has loaded
}


If using jQuery there is a different syntax for a ready event listener:

$(document).ready(
  function(){
    //do something after the page has loaded
  }
);


Or you can use the new defer attribute in your <script> tag - but remember this attribute is not yet fully supported by all browsers.

<head>
  ...

  <script defer type="text/javascript" src="page.js"></script>
</head>

####Events
An event is something that happens that other things can respond to. An object triggers an event, and an event listener (or handler) fires when the event is triggered.
E.g. the click event occurs when the user clicks on an element.
You might bind an event listener to a DOM element using JavaScript when the page loads for the first time. So you will need to make sure that the DOM is ready.
window.onload = function(){
  //create a 'click' event listener function
  var clickEventListener = function (){
    alert('The button was clicked!')
  }

  //select a button by its id and add the event listener to it
  document.getElementById('myButton').addEventListener("click", clickEventListener);
}

or in jQuery:
$(document).ready(
  function(){
    //create a 'click' event listener function
    var clickEventListener = function (){
      alert('The button was clicked!')
    }

    //select a button by its id and add the event listener to it
    $('myButton').click(clickEventListener);
  }
);

###jQuery
jQuery is a JavaScript library that you can use as a go-between to make it easier to add JavaScript behaviour to a web page.
jQuery is written in JavaScript. JavaScript is a very flexible language so jQuery creates a syntax that is more simple for developers to do things like query the DOM, change the style of HTML elements etc.
jQuery syntax enables you to select HTML elements using CSS syntax, something that is only recently possible with vanilla JavaScript.
One of the other big attractions of jQuery is that it abstracts away browser quirks. This means that it provides one simple API but under the hood it checks which browser it is running on and makes adjustments as necessary - but you don't have to worry about it.
However jQuery has certain disadvantages:

Because it is a man in the middle (between your webpage and the native JavaScript API in your browser) it can have a significant impact on the performance of your web page - it can make things a lot slower.
Also it is a fairly large additional file to download for a user to view your web page.
Also because of evergreen browsers (browsers which automatically update themselves) like Chrome and Firefox, there are less cross-browser compatibility issues than there used to be when jQuery was created. Native JavaScript APIs are now more reliable.

A good website to check whether you still need jQuery is http://youmightnotneedjquery.com/
However it is still worth learning some jQuery to use as a stepping stone to using vanilla JavaScript syntax.
jQuery defines the $ symbol as a global variable for the jQuery library. To select a DOM element with jQuery you use the most basic syntax using () invocation parentheses, passing in a CSS selector string (text) e.g:
$('p')

This selects all the p tags in your HTML document. The value(s) returned from this selector expression can be passed to a jQuery method using dot syntax. The method will apply some behaviour to the selected element(s). All this can be done with a small amount of code.
/* this hides all the <p> tags on your web page*/
$('p').hide()

/* this hides or reveals all the <p> tags on your web page with a sliding transform*/
$('p').slideToggle()

/* this adds a click event listener to all <a> tags which hides or reveals all <p> tags on your web page with a sliding transform*/
$('a').click(
  function(){
    $('p').slideToggle();
  }
)