JavaScript I – Day 4

Geekwise Academy

 

 

Instructors:

Corey Shuman

Aaron Lurz

 

 

Slack Channel:

https://geekwise-js1.slack.com

Github:

https://github.com/coreyshuman/Geekwise-JavaScript-I

Lesson plans:

http://coreyshuman.github.io/Geekwise-JavaScript-I/html/

Today’s Topics

·         Review Assignment

·         Do Operator review task

·         Review topics from day 3

o   Operators

o   Control Flow

·         Text Adventure Game Tutorial

·         New Topics

o   Intrinsic Objects

§  String Functions

§  Number Functions

§  Date Functions

o   Function Basics

o   Truthy, Falsy

 

 

 Operator Review Task

 

Write a small JS program that will:

 

Text Adventure Game Tutorial

 

See code on Github under Day 4:

https://github.com/coreyshuman/Geekwise-JavaScript-I/tree/master/Day%204

 

Intrinsic Objects

·         String Object

o   Strings can be treated as objects in JavaScript. This gives us access to special built-in functions to use on strings.

o   length(), substring(x,y), toUpperCase(), …

o   More string functions: http://www.w3schools.com/js/js_string_methods.asp

var strA = "0123456789";

 

// this code sets strB to "456"

var strB = strA.substring(4,7);

 

var str1 = "airplane";

// set str2 to "AIRPLANE"

var str2 = str1.toUpperCase();

·         Math Object

o   Contains functions to perform mathematical operations and conversions

o   Math.PI, Math.round(), Math.sqrt(), …

·         Date Object

o   The Date object can be used to represent and compare dates, as well as get the current system time.

var today = new Date();

var thisYear = today.getFullYear();

·         Number Object

o   The number object contains special numeric constants that are important to JavaScript.

o   Number.MAX_VALUE, Number.MIN_VALUE, Number.NaN, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY

 

 

 

Reference for more Intrinsic Object Information:

https://msdn.microsoft.com/en-us/library/4zx5dkc9(v=vs.94).aspx

 

Function Basics

 

We've talked about functions during our first few classes, but up until now we've not really looked at what they are, how they work, and most importantly, how we can write our own.

Let’s define a JavaScript function as: a set of statements that performs a task or calculates a value

Functions allow you to perform a series of tasks, and return a value that can be used later.

If a function does not return a value, it will automatically return undefined.

To define a function requires four things:

·        The function keyword followed by...

·        The name of the function

·        A list of arguments to the functions enclosed in parentheses and separated by commas

·        The statements that define the functions enclosed in curly brackets

Try it: Create a function that logs "hello world" to the console.

   

function helloWorld() {

    console.log("hello world");

}

   

Let’s pick that apart line by line:

1.      function helloWorld() { - the function keyword followed by an arbitrary function name. In this case helloWorld. The function does not take any arguments so we just have an empty set of parentheses. Then we have an opening curly bracket to start our JavaScript statements.

2.      console.log("hello world"); - the functions body. In this case, we are simply logging "hello world" to the console.

3.      } - closing curly brace, ends our function definition

Great, run that in the console. What happens?

JavaScript functions need to be "called" or "invoked". Simply writing the function only makes the JavaScript interpreter aware that it exists, it does not call it right away.

You call a function by using its name, followed by a set of parenthesis. Recall other functions we've used, the functions are always called with the parentheses. console.log(...) parseInt(...), etc...

So, let’s call our function

Try it: alter your code to call the function

   

function helloWorld() {

    console.log("hello world");

}

 

helloWorld(); 

 

Now you should see your console.log appear. So we called the function, and JavaScript executed the code found inside it.

Now create a function that takes 1 argument, and log that to the console instead of the hard coded "hello world" string. While we’re at it, rename it to something more appropriate, like log.

Try it: Create a function called log that accepts one argument, and logs it to the console.

   

function log(stuff) {

    console.log(stuff);

}

 

log("the fox jumps over the lazy dog");

   

Notice, we do not use the var keyword when working with our function arguments. The arguments are scoped to that function (more on this later).

Try it: Call your log function without passing any arguments, what gets logged to the console?

Great, now we're getting somewhere, we can define our own functions that accept arguments and do something with them. It's also worth pointing out that functions can also call other functions.

 

 

 

 

Truthy / Falsy

Certain values in JavaScript, when evaluated, are considered "falsy" or "truthy"

The following values are always falsy:

·         false

·         0 (literal number zero)

·         "" empty string

·         null

·         undefined

·         NaN (Not a number)

All other values are truthy, including "0" (zero in quotes), "false" (false in quotes), empty functions, empty arrays, and empty objects.

Assignment

 

Write a function that takes a string as an argument (input), capitalizes only the first letter, and returns the updated string. For example, if I pass the string “corey” into the function, it will return “Corey”. You should be able to test is like this:

 

 
var name = "corey";
name = capitalize(name);
console.log(name); // Corey