Introduction to JavaScript

1. Introduction to JavaScript Client Side JS Programming Group @ M-GO Sponsored By Module 2 www.mgo.com

2. Module 2 Topics A copy of the html file used in this lesson can be found here: • The glorious debugger • Breakpoints • The Watch • The Console • Basic grammar • Comments • Naming conventions (camelCase) • var statements • Strings and numbers • Concatenation and adding • Truthy and falsy values – type coercion • Flow Control • If, else, else if • while • do…while • for • try/catch • Disruptive statements • return • break • throw http://goo.gl/0FFLN8

3. THE DEBUGGER

4. Debugging - Breakpoints • Breakpoints stop code execution • There are two types of breakpoints • debugger; • Interactive breakpoint

5. Debugging – Step Control • Continue: Keep going until the next breakpoint. • Step Over: Go to the next line, if the next line is a function, run the function and go to the line after it. • Step Into: Go to the next line, if the next line is a function, go into the function. • Step Out: If you’re in a function, finish the function and stop when the function returns to the line that called it. • Break All: Stop running now – wherever the flow happens to be. Chrome’s Step Controls

6. Debugging – The Watch • Watch expressions allow you to evaluate code at runtime to see what it would do if you were actually to place it in your program. • Watch expressions can be added two ways • “Add To Watch” content menu • Manually typing an expression into the watch

7. Debugging – The Console • The console gives you a place to output text data. Very useful for large, asynchronous or long running tasks and much more. • You can send data to the console using the console.log(<your text here>); command. • You can use the console as an REPL. What’s REPL? What’s asynchronous!? REPL: Read Evaluate Print Loop. I.e.: a “live” place to type code. Pronounced “reah-pull” Asynchronous: Something that happens later. We’ll cover asynchronous in a later module.

8. Basic Grammar • Almost statements get a ; at the end. If you omit the ; at the end of a statement that requires it, the JavaScript engine you’re using will add it for you! That’s a terrible, bad, ugly thing but you must live with it. Make sure you add ; to the lines that require them. • What lines require ; you ask? Everything but functions and flow control* * This is not 100% true, it’s like 87% true. For a full andannoying description of JavaScript grammar see JavaScript: The Good Parts – Appendix D. Syntax Diagrams. However, to get you started, these are good guidelines to follow.

9. Comments Only use me for formal documentation • Block Comments • Line Comments Use me often! But make sure I don’t come after code on the same line. That can be confusing. Unless you’re writing formal JSDoc documentation comments, use line comments!

10. Naming Conventions • Everything is camel case – unless it’s a constructor or a namespace like object. • Camel case: thisIsCamelCaseBecauseItLooksLikeACamelsHump • Note that the first character is lower case! • If it’s a constructor or a namespace, the first letter should be capitalized. • Avoid underscores! Don’t do this:_myVar or my_varor any variation thereof. • Don’t name your child “Placenta” What the hell is a constructor? What the hell is a “namespace like object”? You keep saying things that mean nothing to me. Don’t worry, we’ll cover namespaces and constructors in later lessons.

11. var statements • var declares a variable. This is how data (objects, functions, strings, numbers, arrays) are referenced. There are other ways, but this is the primary way. • var statements declare variables inside of the closure in which they are written. • What’s a closure? • Functions are closures. This is where the declared variable is available. Outside of the closure, the variable will not be available. • We’ll cover closures and the implications of closures in more depth later. I DON’T UNDERSTAND CLOSURE!! It’s OK, you don’t need to for now

12. Strings and Numbers • A string is a segment of text data. Strings begin with ‘ or “ and end with a matching ‘ or “. • Numbers don’t have ‘ or “ surrounding them… and they are numbers. • If a number is quoted, it isn’t a number, it’s a string.

13. Concatenation and Adding • Now that we know numbers and strings are different types of data, we can learn what that really means. • When you add a number to a string the number is implicitly converted into a string and then concatenated. This implicit conversion is called type coercion.

14. Boolean Logic My invention is the basis of all Computers. So I’m kind of a big deal. All logic can be expressed as Boolean expressions. In programming we use the two Boolean values “true” and “false”. We also create statements that can be evaluated to “true” and “false” for example: 5 === 10 is “false” 1 === 1 is “true”. Prior to the invention of Boolean logic, people would just say “huh? Are you talking to me?” It was indeed a dark time for logic. George Boole 1815 - 1864 *George was known to throw awesome keg parties.

15. !, != and !== • ! Will invert a Boolean value. Think of ! as the word “not”. • If you use a ! on a non-Boolean value, it will coerce the value into a Boolean value. This is awesome! It’s also quite confusing. • != means not equal to. It is the opposite of ==. • !== means type safe not equal to. It is the opposite of ===. • Never use != always use !==.

16. Truthy and Falsy values • More type coercion! All of the values on the left are considered the same as false when coerced into a Boolean value. Using == (coercive equal) Using === (type safe equal) Pro Tip: Always use === never use ==

17. Flow Control • Flow control statements allow you to alter the flow of the program. • Rather than moving from one line to the next, you can create statements that alter the path the code follows. • You can make your code execute some lines and not others or execute a set of lines many times.

18. Flow Control - If, else if, else • “if” will run if the condition is true. • “else if” will run code if the previous “if” was not true. • “else” will run if all other “if” blocks are not true. • Syntax:

19. Flow Control - while • while will continue to run the code in the while block so long as the while condition statement is true. • If the statement is not true, the code inside of the block will not be executed. • If your condition statement is always true, your code will continue to loop forever. Or at least until you stop paying your electric bill or you shut off your browser.

20. Flow Control – do…while • Exactly like the while statement, with the exception that it will always run at least one time. • This is because the condition is evaluated after each time the code block is executed, rather than before as with the while loop.

21. Flow Control - for • “For” is for looping a specific number of times. • For loops have 4 parts • Initilization • Condition • Increment/Decrement • Code block for(<initilization>;<condition>;<increment>){ // code to execute } * There is another form of the for statement that we will cover in a later module called the “for in” statement.

22. Flow Control - try / catch • When you expect you might cause an error with a statement, you can put it within a try / catch block. It will “try” your code and “catch” any errors that your code might “throw”. • If no error is thrown, the catch block is never executed. • When an error is thrown, the variable defined in catch, in this case “e”, will contain information about the error, usually in the form of an “Error” object. In this example, the object blah does not exist, so it is not possible to access the property blah of nothing.

23. Flow Control – Disruptive Statements • Disruptive statements cause the code path to exit loops and functions and throw errors. • return, break, throw are all disruptive statements. • They are called disruptive statements because they would distract other children, making the teacher send them to the vice principal and resulting in a call home to their parents.

24. Flow Control – Disruptive Statements: return • return: causes the function to exit to the code that called the function. Optionally you can supply a value to return. • We’ll learn more about return and functions in a later module.

25. Flow Control – Disruptive Statements: break • break causes the current loop to immediately end. • In this example, the console will not output a value higher than 5 even though the loop would have continued otherwise. • break will cause the code to exit the loop that it is declared in, it will not exit outer loops.

26. Flow Control – Disruptive Statements: throw • throw will cause an exception to be thrown. • If a throw statement isn’t inside of a try/catchblock it will cause your program to terminate and write an error to the console. And so I told the chap! You can’t review my code while yours is throwing so many unhandled exceptions! * Exception is really just another way of saying error, but you can say exception to sound more knowledgeable and smug around other programmers.

27. Code Like a Sir! • Write DRY code and DAMP comments and error messages DRY: Don’t Repeat Yourself DAMP: Descriptive and meaningful phrases. • Follow quality coding guidelines. • Use standard naming conventions • Use correct indentation like it was going to save your life. • Use code quality tools like http://jslint.com/. • Don’t develop bad habits! • Don’t hesitate to ask for help. • If you’re willing to put up with internet trolls, you can find help in IRC #javascript • And of course Google! Avoid w3schools, use MDN (Mozilla developer network) or Stack overflow

28. Client Side JS Programming Group @ M-GO Sponsored By www.mgo.com Contact Me: Tony Germaneri EmailTony.Germaneri@mgo.com HangoutsTonyGermaneri@gmail.com Skype tony.germaneri.mobile