Skip to content

Latest commit

 

History

History
322 lines (224 loc) · 7.91 KB

readme.md

File metadata and controls

322 lines (224 loc) · 7.91 KB
Raw

Javascript Primitives

Objectives

  • understand the history of JavaScript and its purpose as a language
  • conceptualize JavaScript variables and data structures
  • utilize primitives and operators in order to solve problems using JavaScript

History

Then

  • developed by Brendan Eich (for Netscape, now Mozilla)
  • 10 days
  • went through a few different names before settling on JavaScript (Java was popular)
  • taken to ECMA for standardization

Now

  • JavaScript is THE front-end language
  • clunky, things to complain about, but it works and is web-driven!
  • tons of open source libraries
  • also used as a backend language, using Node.js
  • working on ECMAScript 6

Comments

Comments come in two forms

Line comments

// descriptive stuff

Multi-line comments

/**
  These
  are
  comments on
  many lines
*/

Numbers

Numbers are one of the types of values we want to be able to interact and play with in JS.

Integers

 ..., -1, 0, 2, 3, 4, 5, ...

Floats (or Decimal numbers)

 2.718, 3.14, .5, .25, etc

In JS these are both the same type of object, which it calls Numbers.

This can infrequently cause problems!

0.1 * 0.2 = 0.020000000000000004

How to deal with floating point precision in JavaScript

Exercise

2 + 2 * 3

How would you get the 2 + 2 to execute before the * 3? In other words, how would you change this expression to get 12?

Strings

Strings are collections of letters and symbols known as Characters, and we use them to deal with words and text in Javascript. Strings are just another type of value in Javascript.

"John"
'Jane'

Exercise

You can use operators on strings too! Try typing "John" + "Jane". This is called String concatenation

Tangent: Type coercion

Try this...

"1" + 1

Without removing the quotes, how would you get this to equal 2?

Booleans

Booleans are a type that can only have one of two values: true or false.

true
false

Operator Review

+ (add)
- (subtract)
* (multiply)
/ (divide)
% (modulus)

Special Number Operators

Javascript can be a little cheap with the number of operations it allows you to do. For example, how is someone supposed to square a number or cube a number easily? Luckily there is a special Math object with some very useful methods.

  • Taking a number to some power? Then just use Math.pow
// 3^2 becomes
Math.pow(3,2);
// => 4

// 2^4 becomes
Math.pow(2,4);
// => 16
  • Taking a square root
// √(4) becomes
Math.sqrt(4);
// => 2
  • Need a random number? Then use Math.random.
// The following only returns a random decimal
Math.random();
// => .229375290430

/**
  The following will return a
  random number between 0 and 10
*/
Math.random() * 10;
  • Since Numbers can be Floats or Integers we often want to get rid of remaining decimal places, which can be done using Math.floor.
// Remove the decimal
Math.floor(3.14)
// => 3

Math.floor(3.9999)
// => 3

Variables

Having made some expressions it becomes evident we want to store these values.

var myNumber = 1;
// or also

var myString = "Greetings y'all!";

The main note to make here is that these variables should always have the var keyword and use camelCase

Objects Everywhere

In Javascript we just discussed two types of values we can use. We call these values objects, which for now just means that in addition to storing some data you also get to use some helpful methods when you are working with them.

In JavaScript, almost everything is an object (primitive types are the exception).

  • If you want to turn a number into a string you can use a helpful method called toString.
myNumber.toString()
// => "1"

Common String / Number methods

  • Numbers
  • Strings
    • .split('') - converts a string into an array split in a provided character
    • .indexOf('s') - returns the index of the first appearance of a provided string
    • .toUpperCase() - converts a string to all caps
    • .toLowerCase() - converts a string to all lowercase
    • .replace('old', 'new') - replaces the first appearance of a string with a new string

Note that most of these functions are called on an object, while functions like parseInt() and parseFloat() only take in arguments.

Arrays

Unfortunately, strings and numbers are not enough for most programming purposes. What is needed are collections of data that we can use efficiently, Arrays.

Arrays are great for:

  • Storing data
  • Enumerating data, i.e. using an index to find them.
  • Quickly reordering data
var friends = ['Moe', 'Larry', 'Curly'];
// => ['Moe', 'Larry', 'Curly']

Items in an array are stored in sequential order, and indexed starting at 0 and ending at length - 1.

// First friend
var firstFriend = friends[0];
// => 'Moe'

// Get the last friend
var lastFriend = friends[2]
// => 'Curly'

Group Exercise

Grab the person next to you. One person, create a variable that equals a comma delimited string with at least four of your favorite foods.

var favorites = "noodles,bread,cheese,filet mignon";

Have the second person turn that string into an array, then the first person should ask the second what their third favorite food is.

Array Methods

  • .pop() - remove and return the last element in an array
  • .push('element') - add an element to the end of an array
  • .shift() - remove and return the first element in an array
  • .unshift(3) - add an element to the beginning of an array
  • .concat([1, 2]) - concatenate two arrays together
  • .slice(1, 3) - return a copy of a portion of an array
  • .splice() - alter an array by adding or removing elements
  • .reverse() - reverse the array
  • .sort() - sort the elements in an array
  • .join(' ') - take an array and join the elements together as a string

Objects

Why use objects to store key and value pairs? They are like arrays except that data is not stored in any sorted order and keys do not have to numbered indexes.

Creating

var friend = {firstName: "Jane", lastName: "Doe"}

Accessing

friend.firstName
friend.lastName

friend['firstName']
friend['lastName']

Exercise

1.) How would you represent the following using an object?

John, Doe, 36, 1234 Park st.

(Hint: think in terms of firstname, lastname, age, address)

2.) Once you've represented the above as an object, update John's address to 1234 Park ln.

3.) Using a combination of Objects and Array, how would you represent the following data:

Moe, Doe, 31, 1234 Park st.
Larry, Doe, 36, 1234 Spark st.
Curly, Doe, 36, 1239 Park st.
Jane, Doe, 32, 1239 Spark st.
Emma, Doe, 34, 1235 Spark st.
Elizabeth, Doe, 36, 1234 Park st.
Elinor, Doe, 35, 1230 Park st.
Mary, Doe, 31, 1231 Park st.
Darcy, Doe, 32, 1224 Park st.
Grey, Doe, 34, 1214 Park st.
Lydia, Doe, 30, 1294 Park st.
Harriet, Doe, 32, 1324 Park st.

Reference

Values, variables, and literals

re-introduction to JavaScript

MDN JavaScript documentation