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);
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
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
// 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());
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
WDIM387 / Advanced Scripting
By danmuzyka
WDIM387 / Advanced Scripting
- 2,237