WDIM387 / Advanced Scripting


Instructor: Dan Muzyka

danmuzyka.ai@gmail.com

About Dan


Co-department head of Drupal team at ServerLogic

Full-stack (front end and back end) developer




About You?

Course Goals


  • Reinforce JavaScript language fundamentals.
  • Explore JavaScript topics of interest to the class.
  • Emphasize skills and practices essential in a professional web development job.
  • Have fun learning together.




Your Goals?




Survey

Git


For help: http://git-scm.com/book


GitHub: https://github.com/aipdx-wdim387


For each assignment:

  • Clone the repository
  • Create a branch named after your name
  • Push branch to your GitHub account
  • Make a pull request

Google Plus Community


https://plus.google.com/communities/117165978595626110280


Place for discussion between class sessions.




Break




Let's Talk JavaScript!




DAta Types and Operators

Undefined


Variable exists, but has no value.


// Declare variable

var zombieCure;


// The declared variable is not initialized

// var zombieCure = "Special Elixir";


console.log(zombieCure);

Undefined


What happens here?


// The variable is not declared

// var undeadFriends = "John and Jane";


console.log(undeadFriends);

Typeof


Operator that returns the data type, as a string.


console.log(typeof zombieCure);

console.log(typeof undeadFriends);

Booleans


Two possible values:

  • true
  • false



Booleans


Case-sensitive:


// Returns "boolean"

console.log(typeof true);


// Any guesses what the following return?

console.log(typeof True);

console.log(typeof TRUE);

Equality (==)


Compare two values and determine if they match.


var myUndefined;


console.log(myUndefined == zombieCure); // This returns true

Equality (==)


What will these return? 


console.log(zombieCure == undeadFriends);

console.log(typeof zombieCure == undefined);

console.log(typeof zombieCure == "undefined");

Not Equal (!=)


Determine whether two values are different.


// Returns true

console.log(typeof zombieCure != "string");

Null


A special data type that represents an empty value.


Technically, an empty object pointer.


var zombieIntelligence = null;

// The following returns "object"

console.log(typeof zombieIntelligence);

Null


JavaScript has some unexpected behavior with undefined and null.


var zombieCure; // value is undefined

var zombieIntelligence = null;


// The following line, oddly, returns true.

console.log(zombieCure == zombieIntelligence);

Identically Equal (===)


Checks that both the value and the data type are identical.


var zombieCure;

var zombieIntelligence = null;

// Returns false

console.log(zombieCure === zombieIntelligence);

Identically Not Equal (!==)


var zombieCure;

var zombieIntelligence = null;


// Returns false

console.log(zombieCure != zombieIntelligence);


// Returns true

console.log(zombieCure !== zombieIntelligence);

Numbers


Represents both integers and floating-point values.


var numZombiesChasingMe = 12;

var milesRunFleeingZombies = 3.04;

Numbers


Integers can be represented in base ten, base sixteen (and other formats).


var numBrainsEaten = 10; // Base ten

var ten = 0xA; // Base sixteen (hexadecimal)


// Returns true

console.log(numBrainsEaten == ten);

Numbers


var numBrainsEaten = 10; // Base ten

var ten = 0xA; // Base sixteen (hexadecimal)

// What do you think this returns?

console.log(numBrainsEaten === ten);


Numbers


JavaScript is not exact in arithmetic.


var threeTenths = 0.1 + 0.2;

console.log(threeTenths);

// Above displays 0.30000000000000004

Numbers


JavaScript can use e-notation to represent large or small numbers.


// Returns true

console.log(5.1e6 == 5,100,000);


// Returns true

console.log(5e-7 == 0.0000005);

Numbers


JavaScript can only work with numbers in a certain range...anything outside that range becomes infinity or negative infinity.


console.log(1.8e308)

console.log(-2e350)

Numbers


You can access JavaScript's presentation of infinity directly.


Number.POSITIVE_INFINITY

Number. NEGATIVE_INFINITY


// What do you think these return?
console.log(-2e350 === Number.NEGATIVE_INFINITY);
console.log(1.8e308 !== Number.POSITIVE_INFINITY);

Numbers


Not a number (NaN) is returned from operations that don't result in valid numbers.



Numbers


Convert data to numbers.


Number()

parseInt()

parseFloat()

Numbers


parseInt("10");

parseInt("10.5");

parseInt(9, 16);

parseInt(10, 16);

parseInt(0xA, 16);

parseFloat("10.5");

parseFloat("10.0");

parseInt("Hello, class!");

parseFloat("1.2e7");

Numbers


parseInt("1.2e7");

parseInt("A");

parseInt("A", 16);

parseInt("54321 blast off");

Number("20");

Number(null);

Number(true);

parseInt(true);

Number(undefined);

Numbers


Test whether a value is a number using isNaN().


// Returns true

console.log(isNaN("Hello, class!"));


var helloNum = parseInt("Hello, class!");

// What does this return?

console.log(isNaN(helloNum));

Strings


Sequence of zero or more characters. Enclosed in quotes.


var instructorName = "Dan Muzyka";

Strings


Represent specific characters using character literals.


\n  New line

\r  Carriage return

\t  Tab

\'  Single quote mark

\"  Double quote mark

Strings


var instructorName = "Dan\tMuzyka";

console.log(instructorName);


var instructorName = "Dan\nMuzyka";

console.log(instructorName);


var awesomeInstructor = "Chris \"illepic\" Bloom";

console.log(awesomeInstructor);

Strings


You can convert other data types to strings with toString().


var zombiesEatBrains = true;

var brainsEatenToday = 3;


zombiesEatBrains.toString();

brainsEatenToday.toString();

Strings


What do you think the following return?


var zombieIntelligence = null;

var zombieFriends;

console.log(zombieIntelligence.toString());

console.log(zombieFriends.toString());

console.log(undeadFriends.toString());


Strings


What do you think the following return?


console.log(null.toString());

console.log(3.toString());

console.log(true.toString());

Strings


Other string methods.


var instructorName = "Dan Muzyka";

console.log(instructorName.charAt(1)); // returns "a"

console.log(instructorName.toLowerCase()); // returns "dan muzyka"

console.log(instructorName.length); // returns 10

Objects


More on these in a future class session. For now, here is an example.


var zombieDan = {

   height: "6 feet",

   weight: "100 lbs"

}

Logical OR Operator (||)


Compares two values, often booleans. When comparing booleans, if either is true, the comparison returns true.


// Returns true

console.log(true || false);

console.log(false || true);

console.log(true || true);


// Returns false

console.log(false || false);

Logical OR Operator (||)


More general rule that applies to booleans and non-booleans:

If first value is truthy, first value is returned. Otherwise, second value is returned.


var myObject = oldObject || null;

// How could this be useful?

Logical AND Operator (&&)


Compares two values, often booleans. When comparing booleans, if either is false, the comparison returns false.


// Returns true

console.log(true && true);


// Returns false

console.log(true && false);

console.log(false && true);

console.log(false && false);

Logical AND Operator (&&)

More general rule that applies to booleans and non-booleans:

If first value is falsey, first value is returned. Otherwise, second value is returned.


// What do these return?

console.log(null && undefined);

console.log(undefined && null);

console.log("" && null);

console.log("" && undefined);




Break