Javascript I

Background

• Javascript is not related to Java in anyway other than trying to get some free publicity
• Javascript was originally intended to be a language used to interact with websites
  • First introduced in 1995 as part of Netscape Navigator

Background (cont'd)

• Now Javascript is a standarized language that is overseen by Ecma
  • The official term for the language is ECMAScript
  • The 6th version of the standard was finalized in June, 2015
  • The 500+ page standard is available for browsing
• Javascript has moved beyond the web for use in databases and desktop programs.

Resources

Eloquent Javascript

Mozilla Developer Network

Developing Javascript Code

• NodeJS
• Web Browser
  • Web Console (Firefox)
  • Javascript Console (Chrome)
  • Show Error Console (Safari, after enabling developer menu)
  • Console Tool (IE 11+, Edge)

Data Types

• Javascript is a dynamically typed language
• Javascript provides 7 data types
  • Undefined
  • Null
  • Boolean
  • String
  • Symbol
  • Number
  • Object

Number

• Only one type for both integers and floats
• Also can hold one of 3 special values
  • -Infinity
  • Infinity
  • NaN

Arithmetic Examples

4 + 1

5

4 - 1

3

4 * 1

4

4 / -2

-2

4 % -2

0

4/0

Infinity

Infinity / Infinity

NaN

Math.sqrt(-1)

NaN

0/0

NaN

String

• Strings in Javascript can be delimited by either single or dobule quotes
• A specific character at position i in a string can be access through bracket notation [i]
• The concatenation operator is +

String Examples

"abc"[0]

'a'

"abc".length

3

"abc" + "abc"

'abcabc'

'Someone said "this" '

'Someone said "this" '

Boolean

• The boolean values in Javascript are true and false
  • 0, NaN and "" are coerced to false
• The operators are
  • && (and)
  • || (or)
  • ! (not)
• To test equality there are two operators
  • == Tests the value only
  • === Tests the value and the type

Boolean Examples

(1 > 0 ) && (1 < 10)

true

'1' == 1

true

'1' === 1

false

'1' != 1

false

'1' !== 1

true

Undefined & Null

• A variable in Javascript that is uninitialized has a value of undefined
• null is used in similar situations
• Testing a variable equal to (==) null actually test null or undefined

Unefined Examples

var undeclared
console.log(undeclared === undefined)
console.log(undeclared === null)
console.log(undeclared == null)
console.log(null == false)
"abc"[200]

true
false
true
false

undefined

Arrays

• Arrays in Javascript are a special type of object
• They can be initialized by listing the elements between square brackets
• They are indexed using []
• There are many methods of the Array object

Array Examples

var arr = [1,2,3,4,5,6]
console.log(arr.length)
arr.push('7')
arr
//arr.pop()
arr

6

[ 1, 2, 3, 4, 5, 6, '7' ]

Type Coercion

• When dealing with two different data types, Javascript will prefer to attempt to cast one of the types rather than throw an error
  • This is known as type coercion
• If type coercion fails, rather throw an error, NaN or undefined are usually returned

Type Coercion Examples

2 - '20'

-18

5 + Number|('1')

1

5 + '1'

'51'

'1' + 2

'12'

'5' * 20

100

'5' * '5'

25

't' * 5

NaN

't' / null

NaN

null == 0

false

'8' / null

Infinity

Variables & Scope

• Variables should always be declared using the keyword var
  • Not necessary always, but easier than trying to remember when to use it and when not to
  • In strict mode is always necessary
• The scope of a variable is the function it was declared in
  • Making a new function is currently the only way to make a new scope

Variables & Scope Examples

var a = 5
if(true)
    {
        var b = 6
    }
a + b

11

var c = 6
function f() {
    var d = 11
}
c + d

NaN

Conditionals & Looping

• Javascript provides the following conditional statements
  • if
  • switch
• And the following looping mechanisms
  • for
  • while
  • do-while
  • Array.forEach

If

• The if statement in Javascript is pretty straightforward

  if (condition) {
    doSomething
  }
  

• The parentheses are not necesary for a single line, but should always be used
• if else looks like this:

  if (condition1){
  }
  else if(condition2){
  }
  else if(condition3){
  }
  else{
  }
  

Switch Statement

• The syntax and mechanics of the swtich statement borrow heavily from other languages
• Cases are marked with case and default provides a catch all case

  switch(toTest){
    case 1:
    case 2:
        doSomething
        break
    case "A":
    case "B":
        somethingElse
        break
    case "D":
        other
        break
    default:
        final
        break
    }
  

If and Switch Examples

var x = '0'
if(x < 0){
    console.log("Negative");
    }
//
/*
Note the triple equals

*/
else if(x === 0){
    console.log("Zero");
}
else{
    console.log("Positive");
}

Positive

undefined

switch('0'){
    case -1:
        console.log("Negative")
        break
    case 0:
        console.log("Zero")
        break
    default:
        console.log("Positive")
        break
}

Positive

undefined

Looping

• The for loop construct is similar to other languages you know

  for(var i = 0; i < 10; i++){
  }
  

• The while and do while syntax is also similar

  var i = 0
  while(i < 10){
    i++
  }
  

Looping Examples

for(var z = 0; z < 10; z++){
    console.log(z * z)
}

0
1
4
9
16
25
36
49
64
81

undefined

var q = 1
while(q < 10){
    q++
}

9

Functions

• Functions in JavaScript are first class objects
• They can be passed into and returned from other functions
  • This means closures are possible
• To declare a function in JavaScript, the keyword is function

  function name(param1, param2, ...){
  }
  

Function Examples

square(10)

function square(x){
    return x*x
}

100

function counter(){
    var count = 0;
    return function(){
        count++
        return count
    }
}

undefined

var c = counter()

undefined

c() + 1

7