• Describe the origins as well as provide impetus for its use and necessity.
• Created by: Brenda Eich of Netscape (Mozilla).
• Originally called Mocha, then LiveScript, then leveraging the popularity of Java --> JavaScript.
• Standardized as part of ECMA
  • ECMA: European Computer Manufacturers Association
  • Standardization of C#, parts of CD-ROM, C++, in addition to JavaScript
• A little additional information about the transformation

• We are going to start by learning in the environment that JavaScript was originally designed for... the browser.
• What browser? Google Chrome
• Why Google Chrome? Chrome has a very good implementation of JavaScript within it, not to say that others such as Firefox, Opera, Edge do not, but Chrome has some additional tools that are a more convenient for our purpose.
  • Show the console
  • Discuss some of the Developer Tools found in Chrome that can make life easier
• We are also going to need a "doorway" into the browser which is an html file.
  • I have created a template project for us to organize our code:
  • Template URL: need url
    • Need to add some instructions to the html page so people are reminded of what to do with the page.
• Why are we using those names in the project?
• Review the structure of the file.
• MORE

• Dynamic
• Interpreted
• Scripting Language

• Examples of Learning
• New Experiences
• Perseverance

• Multiline Comments
• Single Line Comments

• What are values?
• What are expressions?
• What are statements?

• +, -, /, *, %

• +, -

• ==, ===, !==, !=, <, >, <=, >=
• Data types that these work on --> COMPARABLES

• &&, ||

• "As you can see, we can manipulate the data or information a multitude of ways. However, as you can see there are surprising results sometimes. This is a result of how the language is representing this information. We have numbers as we see, but we have interacted with other types of data. We will soon there is a great deal think about data."

• string
• number
• boolean
• null
• undefined
• object

• Illustration of the typeof operator.
• We will continue to see these new operators crop up from time to time.
• Careful: typeof sometimes provides odd values

• Explicit Type Conversion
  • number to string
    • +(unary), Number, parseInt/parseFloat(???)
  • string to number
    • toFixed, String
• Implicit Type Conversion
  • ==/===
  • != vs. !==
  • string concatenation
  • number vs boolean
    • 1 == true
    • 0 == false
  • string vs boolean
    • '' == false
    • 'anything in here' == true
  • objects vs

• Things can have what are called fuzzy truth/false values.
• {} is always true
• Falsy values:
  • 0
  • ''
  • null
  • undefined
  • false
  • NaN
    • Careful with NaN
    • To test if something is a NaN then use the isNaN function
    • typeof NaN
• Truthy values:
  • Not Falsy

• String
  • Used for conversion
• Function
• Number
• Array
• Object
• Error
• RegExp
• Date

What is a string?

• A collection of characters
• Arranged in a sequence thus order matters
• Zero based index
• Quotes and escape characters

Impetus for using strings

• Text is a useful means of transferring and relating data
• Word documents are text
• Web Page are just specially formatted text documents
  • Oversimplifying

How can I use a string?

• Creation of strings
  • String Literals
    • We have used these several times in other videos
    • This is the go to for most of the creation of strings
  • String builtin function
    • Useful for type conversion of other types into strings
    • Careful of the results
      • String({}) => '[object Object]'

String properties:

• length
  • nice to know the number of characters in a string
  • positional index is fixed at the upper limit of length

String methods:

• NOTE: Strings are immutable. Methods do not change the original string. Instead, a new copy of the string is returned.
• accessing individual characters
  • charAt()
  • [] notation
• accessing sequence of characters
  • substr(start, [length])
    • from start position to the end or length, whichever is shorter
  • substring(start, end)
    • from the start index to end index
• finding characters/sequence of characters
  • indexOf
  • includes
  • endsWith
  • startsWith
• obtaining a changed version
  • split
  • slice
  • toLowerCase
  • toUpperCase
  • trim

Operator:

• Concatenation (+)
  • attempts type coercion for other types
  • not very helpful sometimes
• You will be tempted to try others
  • -, /, *
• '' == false
• '' === false
• '' != true

Final Thoughts:

Strings are a great way to relate and inspect data. However, strings are just the beginning to our data interactions. We have learned creation and basic manipulation of strings using methods from the string object.

What is an array?

How do I make an array?

• Consider trying to ensure that everything is the same 'type'

How do I access parts of an array?

Can I alter an array after I make it?

Array Properties:

• length
  • The number of 'things' inside of the array.

Array Methods:

• Mutating the Array:
  • push
  • pop
  • splice(where, howManyToRemove, replacement...)
  • concat
    • adds to the end of the array
• Getting something new out of the array:
  • join([separator])
  • slice(start, [end])
  • map(current, index, array)
  • filter(current, index, array)
  • forEach(current, index, array)

Final Thoughts:

Arrays are greatly useful. When you need to keep a group of similar items together and operate on those values as a groups. Then arrays is where it is at!

What is an object?

• A grouping of properties and behaviors that represent some concrete 'thing'.

• Conceptual Example: Car

  • Car

    • Properties:
      • number of wheels
      • color
      • horsepower
      • fuelLevel
      • speed
    • Methods:
      • accelerate
      • stop
      • move
      • toString

  • What are methods?

How can I create an object? (A couple of common ones)

• Literal
• with the new keyword
  • Constructor Function
• There are others such as Object.create() and the default object Constructor

What is the use of an object?

JavaScript: An Object Oriented Programming Language

Sample: Object Literal Representing Person

Sample: Person as a constructor function

• Simple evaluations
• The boolean type | true and false (yes and no)

• Warning computers only do what you tell them to.
• We have to plan carefully to address all of the possible decisions.

• If
  • Day of the week print out
    • if 'Friday' print 'Yayyyy the weekend!'
    • otherwise print 'Working for the weekend!'
• If with Else
  • What is the meaning of life?
  • Start with testing for 42 without an else
  • add an else because you do not want to always print the second string
• If chained with else if
  • I want to add a little flair for some fun
• switch
  • Simple switch
  • values fall through
  • make sure that you have a default case
  • don't forget the break
  • Example: Grading Scale?

• Common Applications
  • Games
  • Searching through a collection

• for:
  • standard C style loop
  • for(var i = 0; i < end; i += 1){}
  • Example: Searching an array for a specific element
• while:
  • continue until break
  • Example: Create an array of numbers from start, to stop, by step
  • may never run
• do while:
  • similar to while but runs at least one time
• for...in:
  • Iterates over the properties of an object
  • Can cause some weirdness with arrays so should be specific to objects
  • Properties that you should expect are around
  • Example: Gather the keys of an object

• Infinite loops
  • Wreck your day
• For loops are when you know how many
• While loops are for until something happens
• There are ways to make a for loop and while accomplish the same process.
• Careful: Loop indices are not block scoped (they stay around after the loop is finished)

• careful of the syntax versus runtime errors
• syntax is caught very quickly however; runtime is sometimes a ticking time bomb

• What is function scope?
• Why do we care?

• Functions can be passed as arguments to other functions

• Function Expressions
  • Named
    • Example: Implement filter function
      • Remove elements
  • Unnamed
    • Example: Implement map function
• Function Declaration
  • Hoisting

• What is a closure?
  • A function that has access to the environment (scope) where it was originally created
  • Has access to the state of that environment
  • State may not always be what you think it should be
• Example: double, triple, multiplier
• Example: pluck a property of an object

Object Literal Example:

• What are properties?
• What are methods?
• Car
  • Properties:
    • color
    • make
    • model
    • numberOfWheels
    • numberOfDoors
  • Methods:
    • move
    • stop
    • turnLeft

Creation a function that makes these objects

• Factory Pattern
• Car class
  • Emphasize that you are refactoring the to save some work

Create a constructor function for Car

• Car to start with in the factory

Start the discussing about copying each of the methods in the Car objects. These lead to heavier objects

• Defined as the number of milliseconds since Jan 1 1970 @ 00:00:00 UTC.
• That is a mouthful.
• However, JS Dates take some time to wrap your head around.

• Create Dates:
  • new Date() vs Date()
  • Notice that in the console of the browser that you have a different looking output. That is because the Date() without the new operator returns a string.
  • The new keyword creates a new date object.
• Other ways to create Date objects:
  • new Date('January 21, 2011 03:24:00')
  • new Date('YYYY-mm-ddTHH:MM:SS')
  • new Date(year, month, day)
  • new Date(year, month, day, hour, minute, second)
    • Careful with the two year dates
  • Formats are important:
    • Issues: "2015-3-25"(inconsistent), "2015/03/25"(inconsistent), "25-03-2015"(inconsistent)

• getTime/setTime -> milliseconds since January 1, 1970
• getDate/setDate -> day of the month
• getDay -> get the weekday
• getFullYear/setFullYear -> Get the 4 digit year
• getHours/setHours -> 0 to 23
• getMilliseconds/setMilliseconds -> milliseconds of the current second
• getMinutes/setMinutes -> get the minutes of the current local date time
• getSeconds/setSeconds -> get the seconds of the current local date time

• length
  • this provides a length of the number of objects handled by the Date constructor

• What is the difference between (new Date()).now() and Date.now()?
• The Date builtin object has a set of static methods for you to use. This is actually the case of the Date.length property. This are available on the object as functions instead of on the Date objects that are created.