introduction to javascript n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to JavaScript PowerPoint Presentation
Download Presentation
Introduction to JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 25

Introduction to JavaScript - PowerPoint PPT Presentation

  • Uploaded on

Introduction to JavaScript. Client Side JS Programming Group @ M-GO. Sponsored By. Module 4. Module 4 Topics. Types typeof Strings Creating String properties and methods Arrays Creating Array properties and methods Numbers Creating Parsing Objects Creating

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Introduction to JavaScript' - bridie

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduction to javascript

Introduction to JavaScript

Client Side JS Programming Group @ M-GO

Sponsored By

Module 4

module 4 topics
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 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
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
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)
  • toUpperCasereturns the string uppercase, toLowerCase returns the string lowercase.
  • split returns an array split at the specified character
types arrays
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
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
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
Types: Numbers
  • Creating a number should only be done using the number literal, never use the Number constructor.


What gives!? Go back to the interesting stuff!

types numbers1
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.lengthandString.length are both are numbers.
types numbers parsing
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
Types: Objects
  • Creating an object should always be done with the object literal notation, never use the Object() constructor.

Objects are sooo cool!


types objects1
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
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
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
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
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 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
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
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 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.
  • Some expressions can result in NaN.
  • NaNmeans not a number.
  • You can reference NaN by using NaN
  • The only way to test for NaN is with isNaN();
regexp basics
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
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 codeusing 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 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-GO

Sponsored By

Contact Me: Tony Germaneri