Java Script Introduction


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Java Script Introduction

  1. 1. JavaScript Introduction Aaron Conran Text: JavaScript The Definitive Guide By David Flannagan
  2. 2. Case Sensitive <ul><li>Example: </li></ul><ul><li>myVar </li></ul><ul><li>myVAr </li></ul><ul><li>These are not the same variable. </li></ul>
  3. 3. (Optional) Semicolons <ul><li>JavaScript allows you to omit semicolons at the end of your statements. </li></ul><ul><li>However this can create nasty bugs and cause difficult to debug problems. </li></ul><ul><li>Use them at the end of statements and make your life easier. </li></ul>
  4. 4. Comments <ul><li>JavaScript supports both C and C++ style comments </li></ul><ul><li>// this is a comment </li></ul><ul><li>/* this is another comment */ </li></ul>
  5. 5. Comments (JSDoc) <ul><li>Comments which begin with /** </li></ul><ul><li>Note the 2 stars will be picked up by JSDoc </li></ul><ul><li>JSDoc allows you to document your JavaScript classes in a formal manner similar to JavaDoc. </li></ul><ul><li>Allows code and documentation to always be synchronized. </li></ul><ul><li>For more information: </li></ul><ul><li> </li></ul>
  6. 6. JavaScript Reserved Words <ul><li>Avoid the use of reserved words as variables and function names in your JavaScript. </li></ul><ul><li>For a full list </li></ul><ul><li>Flanagan p19-20 </li></ul><ul><li>Examples: </li></ul><ul><ul><li>break </li></ul></ul><ul><ul><li>if </li></ul></ul><ul><ul><li>switch </li></ul></ul><ul><ul><li>in </li></ul></ul><ul><ul><li>class </li></ul></ul>
  7. 7. JavaScript DataTypes <ul><li>Numbers </li></ul><ul><li>Strings </li></ul><ul><li>Booleans </li></ul><ul><li>Functions </li></ul><ul><li>Objects </li></ul><ul><li>Arrays </li></ul><ul><li>null </li></ul><ul><li>undefined </li></ul><ul><li>Date </li></ul><ul><li>Error </li></ul>
  8. 8. Numbers <ul><li>Integer (whole) </li></ul><ul><li>Hexadecimal & Octal </li></ul><ul><li>Floating-points (decimal) </li></ul><ul><li>You can add, multiply divide and subtract numbers with their respective operator: +, *, /, & - </li></ul><ul><li>The Math library of JavaScript also exposes a number of useful methods: </li></ul><ul><ul><li>Math.abs(num) </li></ul></ul><ul><ul><li>Math.sin(num) </li></ul></ul><ul><ul><li>Math.ceil(num) </li></ul></ul><ul><ul><li>Full reference p 659-669 </li></ul></ul>
  9. 9. Special Numeric Values (Table 3-1) p25 Special value to represent negative infinity Number.NEGATIVE_INFINITY Special value to represent infinity Number.POSTIVE_INFINITY Special not a number value Number.NaN Smallest (closest to zero) representable number Number.MIN_VALUE Largest representable number Number.MAX_VALUE Special not-a-number value NaN Special value to represent infinity Infinity Meaning Constant
  10. 10. Strings <ul><li>“ zero or more Unicode characters enclosed within single or double quotes” </li></ul><ul><li>Examples: </li></ul><ul><ul><li>“” </li></ul></ul><ul><ul><li>‘ myForm’ </li></ul></ul><ul><ul><li>“ testing” </li></ul></ul><ul><ul><li>“ This is a longer string” </li></ul></ul>
  11. 11. Escape Sequences <ul><li>To encode special values like new lines and ‘s in JavaScript strings you utilize a backslash </li></ul><ul><li>Example: </li></ul><ul><ul><li>var menuText = ‘What’s this?’; </li></ul></ul>
  12. 12. Escape Sequences (Table 3-2) p27 The Latin-1 character specified by the octal digits XXX, between 1 and 377. Not support by ECMAScript v3; do not use this escpae sequence. XXX The Unicode character specified by the four hexadecimal digits XXXX uXXXX The Latin-1 character specified by the two hexadecimal digits XX xXX Backslash (u005C) Apostrophe or single quote (u027) ’ Double quote (u022) ” Carriage return (u00D) Form feed (u000C) f Vertical tab (u000B) v Newline (u000A) Horizontal tab (u0009) Backspace (u0008)  The NUL character (u0000) Character represented Sequence
  13. 13. Adding Strings <ul><li>You can also add (or concatenate) strings simply by adding them. </li></ul><ul><li>Example: </li></ul><ul><li>var anotherString = ‘new’; </li></ul><ul><li>var newVariable = ‘Something ‘ + anotherString; </li></ul><ul><li>When adding numbers they will automatically be converting to strings. </li></ul><ul><li>Example: </li></ul><ul><li>var x = 12; </li></ul><ul><li>var newString = x + ‘ dozen eggs’; </li></ul>
  14. 14. Converting Strings To Numbers <ul><li>Utilize the parse Number utility functions to extract numbers from strings. </li></ul><ul><ul><li>parseInt </li></ul></ul><ul><ul><li>parseFloat </li></ul></ul><ul><li>Example: </li></ul><ul><li>var x = “11”; </li></ul><ul><li>var xNum = parseInt(x); </li></ul>
  15. 15. Booleans <ul><li>true </li></ul><ul><li>(Other truthy values) </li></ul><ul><li>1 </li></ul><ul><li>{} </li></ul><ul><li>‘ ‘ - space </li></ul><ul><li>‘ my String’ </li></ul><ul><li>false </li></ul><ul><li>(Other falsey values) </li></ul><ul><li>undefined </li></ul><ul><li>null </li></ul><ul><li>0 </li></ul><ul><li>“” – empty string </li></ul>
  16. 16. Equals vs Strictly Equals <ul><li>There is a strictly equals operator in JavaScript which will also check type as well as value. To show how this relates to boolean values: </li></ul><ul><li>== Equals </li></ul><ul><ul><li>Works for Truthy values </li></ul></ul><ul><li>=== Strictly Equals </li></ul><ul><ul><li>Works for truth only </li></ul></ul><ul><li>!= Not Equals </li></ul><ul><ul><li>Works for Falsey values </li></ul></ul><ul><li>!== Strictly Not Equals </li></ul><ul><ul><li>Works for false only </li></ul></ul>
  17. 17. Objects <ul><li>JavaScript Objects are similar to ColdFusion Structures. </li></ul><ul><li>They consist of zero to many key-value pairs. </li></ul><ul><li>They can be nested infinitely deep. </li></ul><ul><li>They provide an associative array or hash map. </li></ul><ul><li>Example: </li></ul><ul><li>// using the Object constructor </li></ul><ul><li>var newObj = new Object(); </li></ul><ul><li>newObj.x = 10; </li></ul><ul><li>newObj.y = 20; </li></ul><ul><li>// OR using the Object literal syntax </li></ul><ul><li>var newObj = {x: 10, y: 20}; </li></ul>
  18. 18. Object Literal <ul><li>Object literal is the preferred way to create objects because it is concise and consistent with JSON-syntax. </li></ul><ul><li>When utilizing object literal syntax key value pairs are separated by colon’s. </li></ul><ul><li>Keys are called properties </li></ul>
  19. 19. Functions <ul><li>Functions are actually a datatype too </li></ul><ul><li>Example: </li></ul><ul><li>var myFn = function() {console.log(‘hi’);}; </li></ul><ul><li>function myFn() {console.log(‘hi’);} </li></ul><ul><li>These are 2 different ways of defining a similar function. There is also a Function constructor, however it’s use is limited because it can only create functions in the global scope. </li></ul>
  20. 20. Functions as Properties <ul><li>Properties of Objects can be any data type including Functions. </li></ul><ul><li>Example: </li></ul><ul><li>var myObject = {myFun: function() {console.log(‘hi’);}}; </li></ul><ul><li>myObject.myFun(); </li></ul>
  21. 21. Arrays <ul><li>Arrays can be defined using 2 syntaxes as well. </li></ul><ul><li>Example: </li></ul><ul><li>// Utilizing the Array constructor </li></ul><ul><li>var myArray = new Array(); </li></ul><ul><li>myArray[0] = 12; </li></ul><ul><li>myArray[1] = 232; </li></ul><ul><li>// OR using the Array literal syntax. </li></ul><ul><li>var myArray = [12,232]; </li></ul>
  22. 22. Arrays (cont.) <ul><li>Arrays can be infinitely nested </li></ul><ul><li>Arrays can be sparse </li></ul><ul><li>Arrays can store unlike datatypes </li></ul><ul><li>Full reference available p 602-611 </li></ul><ul><li>Arrays provide a number of useful properties and methods such as: </li></ul><ul><ul><li>length – property which defines how many elements are in the Array </li></ul></ul><ul><ul><li>push – method which pushes another element on the Array when utilized as a Stack </li></ul></ul><ul><ul><li>pop – method which pops an element off an Array when utilized as a Stack </li></ul></ul>
  23. 23. null vs undefined <ul><li>null </li></ul><ul><li>“ null is a special keyword which indicates no value” </li></ul><ul><li>undefined </li></ul><ul><li>“ undefined is returned when you use either a variable that has not been declared but never had a value assigned to it or an object property that does not exist” </li></ul>
  24. 24. null vs undefined <ul><li>Both of these equate to a falsey value. </li></ul><ul><li>var myVar; </li></ul><ul><li>// what is the value of myVar? </li></ul>