Introduction to JavaScriptModule 4

Client Side JS Programming Group @ M-GO Sponsored By

www.mgo.com

Module 4 Topics• Types

– typeof– Strings

• Creating• String properties and methods

– Arrays• Creating• Array properties and methods

– Numbers• Creating• Parsing

– Objects• Creating• Setting keys• Checking if keys exist• String notation• for in

– hasOwnProperty• Object.keys

• Math– Limits and Infinity– 64bit float precision

• Infinity• NaN• RegExp basics

typeof

• typeof is an operator that always returns a string that describes the type of object to the right of the typeof operator.

• typeof works for basic types like object, function, string and number.

Types: Strings

• Creating a string should only be done using string literals, not the String() constructor

Everyone knows about strings! Get to the good stuff!

Types: Strings: Properties and Methods

• Each character is a member in an array of characters. Each character can be referenced by its index number.

• Substring returns a new string starting at the index specified in the first argument and goes on to the index specified in the second argument.

• Length property returns the number of characters in the string.• indexOf returns the index of a character or series of characters

(another string)• lastIndexOf return the last index of a character or series of characters

(another string)• toUpperCase returns the string uppercase, toLowerCase returns the

string lowercase.• split returns an array split at the specified character

Types: Arrays• Creating an array should only be done using

the array literal, never use the Array constructor.

Now that’s more like it!

Types: Array

• Arrays are lists of objects.• Arrays can contain any type of object, string,

objects, functions, even other arrays.• Arrays are always only one dimensional, think of

an array as a column in an excel spreadsheet.• Because arrays can contain other arrays this

allows you to create structures that look and for the most part behave as multidimensional arrays

Types: Arrays: Properties and Methods

• length returns the index of the last member of the array – not the number of members.

• indexOf returns the first index where the member matches the reference passed to the indexOf function.

• join returns all members of the array into a new string separating each member by the character passed to the join function.

• Array has a huge number of methods that do a huge number of things. Some of these are slice, splice, push, pop, shift, unshift, concat, map, reduce.

Types: Numbers

• Creating a number should only be done using the number literal, never use the Number constructor.

IMAGE HERE

What gives!? Go back to the

interesting stuff!

Types: Numbers

• Numbers in JavaScript can be integers or floating point numbers a.k.a. decimals. The only difference is the presence of the decimal point. It is not a different type.

• Numbers can be used with math operators like +, * and / as well as with the Math object.

• Numbers show up in a lot of places. For example, Array.length and String.length are both are numbers.

Types: Numbers: Parsing• When you turn a string into a number it is called “parsing”. You can use

the native functions parseInt and parseFloat to parse strings into floats and integers.

• When you invoke parseInt or parseFloat it is absolutely necessary to include the radix a.k.a. numbering base a.k.a. the number 10.

• That means you can also parse numbers of other numbering bases like base these popular bases 8, 16, 32, 32 and 64. Yeah, they’re popular, they go to parties, they know other popular math principles like * and - and even the snobby +.

Types: Objects• Creating an object should always be done with

the object literal notation, never use the Object() constructor.

IMAGE HERE

Objects are sooo cool!

Types: Objects

• Everything is an object.• Objects are key value pairs. Think of an object as a

dictionary. Think of keys as the word in the dictionary entry and the value as the definition of that word.

• The key can be any type of object. The value can be any type of object. Even an object. This allows you to create tree like structures, class like structures, namespace like structures, pretty much anything. Making expressive objects is the bread and butter of JavaScript!

Types: Objects: for in

• For in allows you to loop though each key in the object.

• Be careful, it will also loop though the object’s prototype chain. Make sure you use hasOwnProperty when using for in loops.

Types: Objects: Object.keys()

• Object.keys() creates an array of the keys in the object.

• It can be easier than using “for in” loops because it does not contain keys belonging to other object’s in the prototype chain.

Types: Objects: Refinement• You can access the keys in your object by using the dotted

refinement, or you can do it with string refinement.

• Always use dotted refinement unless you have a specific need to use string refinement.

• String refinement is a great way to access object keys dynamically. For example if you want to access the key that is referenced by the argument in a function. It may not seem like a big deal now, but it is quite a big deal.

Types: Objects: Removing Keys

• To remove a key from an object, set the key’s value to undefined.

• To check if a key exists, compare it to undefined, if it matches, the key does not exist.

Math

• Math is an object!• Math object has a ton of super fun mathy methods.• min, max, random, abs, floor.• A lot more you may or may not ever use, for

example Math.cos will return the cosine of an angle.• Math also has a few constants.• Math.E is Euler’s number• Math.PI is about 3.14159• Check out Math on MDN to learn more

Math: Limits• All numbers in JavaScript are signed 64 bit

floats.• Signed means it can have a - (minus) sign

indicating a negative number.• 64 bit means the maximum number is 253 or

9,007,199,254,740,992 and the minimum number is -253 or -9,007,199,254,740,992.

• You can theoretically run out of numbers, but if you do you most likely have done something terribly wrong.

Math: 64 bit float precision • When you do math in JavaScript consider that floating point

numbers may not behave exactly the way you expect. This is absolutely by design and not an error. It can be both vexing and annoying, but as the late Frank Sinatra said “That’s life”.

• If you need to do precision floating point math, for example when calculating money , determine your desired decimal resolution, multiply all number involved in the equation by that much .0 = x10, .00 = x100, .000 = x1000 etc., and run them through Math.floor() or Math.celi(), do your math, then divide by the number you multiplied by earlier.

Infinity

• Infinity is a number greater than the maximum number JavaScript can produce (> 21024).

• -Infinity is a number below the minimum number JavaScript can produce (< 21024).

• You can test to see if a number is Infinity with the isFinite(n) function which will return false if the number is infinite.

NaN• Some expressions can result in NaN. • NaN means not a number.• You can reference NaN by using NaN• The only way to test for NaN is with isNaN();

RegExp Basics

• We’ll learn more about regular expressions later, but for now here are two common and simple methods.

• ( ) is a “capture group”. This means it saves the data matched within the ( ) and you can call it back up later using $1, $2, $3 etc. for each ( ) you create. $1 refers to the first capture group $2 the second, etc..

Code Like a Sir!• It’s dangerous to go alone. Always ask for advice from friends

or strangers that write code too. • When you’re done ask yourself “am I repeating myself?” Look

for ways to reduce the number of lines of code you’ve written without adding complexity. Less code is usually easier to maintain.

• Write documentation for your code in your code using JSDoc.• If you’re stuck and can’t figure out how to start, write

comments in your code listing everything you think you want to do, then hack away at each item one at a time, then leave the comments in there to help you remember you were thinking.

• When you encounter a problem don’t let your first thought be “what library can fix this for me” ask yourself “can I tackle this on my own with just JS?”. And consider that maybe someone else might have the same problem and already solved it using just JS.

• Don’t forget to use http://jslint.com/ to lint your code when you’re done. It may be distressful, but it’s absolutely worth it.

• Never give up! My motto is VQP Vincit Qui Patitur. Who Endures Conquers! Or in the words of Kirk Lazarus “SURVIVE”

Client Side JS Programming Group @ M-GOSponsored By

www.mgo.comContact Me: Tony GermaneriEmail Tony.Germaneri@mgo.comHangouts TonyGermaneri@gmail.comSkype tony.germaneri.mobile