4. Javascript

4. Javascript

Lesson objectives

  • Students self learn through UDACITY course: https://classroom.udacity.com/courses/ud803

  • Students understand how to find help on the internet

  • Understand variables

  • Understand basic javascript syntax (if, for loops)

  • Understand functions

  • Understand how to use the browser console and debugger

Lesson time to deliever:

2 days (6 sessions, 9hrs)

Teacher instruction

This is a relatively easy 2 days for the teacher: The students will mostly self learn through the udacity course

  • Students go through udacity course (https://classroom.udacity.com/courses/ud803)

  • In every 1.5 hr session, give students roughly 1h15m to go through course. Then spend 15 mins checkpointing them to ensure they stay on track. Mini quiz (e.g. multiple choice questions), go over bits that class is struggling with.

  • At end of wednesday 1 or start of Thursday give them the Fizz buzz challenge (see below). Should take 30 mins-1hr to complete. This tests their knowledge of selection (if statements) and iteration (for loops).

  • Order to cover lessons:

Session

Lesson

Wednesday 1

Wednesday 2

Wednesday 3

Thursday 1

Thursday 2

Thursday 3

May need to teach this one using material below rather than using udacity course due to time constraints

You need to cover an estimated 2hr lesson in effectively 1h15m in each session. Encourage students to go through lessons quickly. Give students homework if unable to do in time

There is some additional material below:

  • Go through basics (see below: Arrays, objects, selection, for loops) and explain difference between let and var (prefer let), and == vs === (prefer ===) Then cover functions in javascript

  • Cover getting help: - Stackoverflow - I use this for JS reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

  • Datatypes: Cover this sparingly and more through examples. Don't cover bigInt, or the max and min of number (Never hit those limits myself)

History of Javascript

JS has a very interesting history so try to get that across:

  • It was invented in weeks. Most languages are invented in months or years

  • It was named Javascript to steal from the popularity of Java which was the hottest language at that time. Backfired now as JS is most popular language in the world and Java is gaining the benifits of that...

  • The browser wars. Can make it into a cool game

  • JS didnt change in 10 years. Can talk about the drama between Mircosoft (supported by Yahoo on the commitee) that had its own browser scripting language (JScript) vs the other 4 members of the committee. But best thing for JS as people invented tools to fill in its gaps and it was really stable when JScript and Flash it's main competitors were constantly changing.

  • Ajax - Asynchronous programming. Got invented for JS by open source projects. Now used in most other languages

  • End with Modern js frameworks which we will cover in the future (React.js, vue.js, angular)

Course materials

Code pen

https://codepen.io/ My favourite html/js playground. Tons of work people have done

Debugging

Enuse you: Cover opening the browser debugger by pressing F12. Chrome is recommended browser as it is the easiest for debugging.

Then execute the js code in the browser console so students get used to it. But also switch to html file + js file so don't forget that.

debugger; // This line of code causes execution to stop here when debugger open

JS Basics:

Open browser. Press F12. Now have developer console. Can run js code

// Set a variable
var a = "Hello World";  // Strings can be '' or "". Pick one and stick to it for your code
console.log(a); // Note console almost always there (but not always)

// Create an object
var it = { a: 20, b: "Test" }
console.log(it.a)

// semi-colons (;) are optional. Js will automatically fill for you

// this is also a dictionary
console.log(it["a"])

// Arrays
var myArr = ['a', 'b', 'c'];

// This is equivalent to a list in C#
console.log(myArr[0]);   // 'a'
myArr.push(10) // Not typed, so can add anything
myArr[2] = "Testing the world";
console.log(myArr);


// Selection
let b = 10
if(a === 2){
  // will discuss == vs === in a sec
  console.log("b is 2");
} else if(b > 0) {
  console.log("b Positive");
} else {
  console.log("b is negative");
}

// For loop
let str = '';
for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str);

// Can do a For each on an array
var array1 = ['a', 'b', 'c'];

array1.forEach(function(x){ console.log(x)});

// new ES2015 way with function shorthand
array1.forEach(element => console.log(element));

== Vs ===

https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons

"0" == 0; // True
"0" === 0; // False

// Quirk of js
"abc" == new String("abc")       // true
"abc" === new String("abc")      // false
// because ...
typeof "hello world"             // "string"
typeof new String('hello world') // "object"

As a general rule always use === and never ==

let vs var vs const

If don't use a keyword, variable is declared on Global scope. Aka global variable. Bad!

"var" original way of declaring a variable. Behaves a bit funkily at times

"let" is new way - Prefer over var. Difference is around how they behave within scopes. E.g. a for loop. If you have programmed before "let" behaves the way you are used to. "var" is different

"const" - Constant. Value is not allowed to change (aka be set again) (Prefer this over let when can use)

let a = 10;
var b = 10;
const c = 10;

// Let variable is not visible outside of the loop
for(let i = 0; i <10; i++){
  // ...
}
console.log(i); // undefined

// But var variable is
for(var j = 0; j <10; i++){
  // ...
}
console.log(j); // 10

No strong types in javascript

var mycar = {
  brand: "Honda",
  model: "Accord",
  year: 1998
};

Functions

function myFunc(theObject) {
  theObject.brand = "Toyota";
}

/* Pass object reference to the function */
myFunc(mycar);

// other way to define a function
var myFunction = function() {
  theObject.brand = "BMW";
}

// or with this way. In stack traces when error get a better error message (but no one does this way)
var myFunction = function namedFunction(){
    statements
}

myFunction(mycar);

Arrow functions (save for full course)

The arrow function expression (=>). Very similar to C#

(t) => { console.log(t); }

Self invoking functions (save for full course)

(function() {
    statements
})();

The function invokes as soon as the script is loaded. See it alot in jquery

$(function () {
  // code to run once all view elements are initialised
})();

Function hoisting (save for full course)

Scripted but functions get read first so can call them from anywhere in script

Teacher Recommendations

What worked well in the past

What hasn't worked well in the past

Class Ex: Fizz buzz

HW Fizz Buzz -Fun drinking game and teaching tool for division for kids. Count from 1 to 100. For each number output "This is X out of 100" Any number divisible by three is replaced by the word fizz and any number divisible by five by the word buzz. Numbers divisible by 3 and 5 become fizz buzz.

Sample output:

This is 1 out of 100 This is 2 out of 100 Fizz This is 4 out of 100 Buzz Fizz This is 7 out of 100 ...

Example Multiple choice questions

What you want to do here is create questions that inform you of the gaps in their knowledge. For example:

  1. What happens here?

da === 3

a. da is now 3 (if answer this know need to spend more time explaining variable assignment) b. We are comparing da to 3

if(da [?] 3){
    // do something
}

2. What should be in [?] a. = (if answer this know need to spend more time explaining variable assignment) b. == (if answer this know need to spend more time explaining == vs ===) c. ===

3. What happens if I pass in more parameters to a function than it has slots? 4. What happens if I pass in less?

Previous3. Bootstrap and user inputNext5. Self learning skills

Last updated