Introduction to JavaScript
Module 2
Client Side JS Programming Group @ M-GO
Sponsored By
www.mgo.com
Module 2 Topics
•
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
A copy of the html file used in this
lesson can be found here:
http://goo.gl/0FFLN8
Debugging - Breakpoints
• Breakpoints stop code execution
– There are two types of breakpoints
• debugger;
• Interactive breakpoint
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
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
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
What’s REPL?
What’s
asynchronous!?
as an REPL.
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.
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 and annoying description of
JavaScript grammar see JavaScript: The Good Parts – Appendix D. Syntax Diagrams.
However, to get you started, these are good guidelines to follow.
Comments
• Block Comments
• Line Comments
Only use me for formal
documentation
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!
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_var
or any variation thereof.
What the hell is a
Don’t name your child
constructor? What the hell
is a “namespace like
“Placenta”
object”?
You keep saying things that
mean nothing to me.
Don’t worry, we’ll cover namespaces and
constructors in later lessons.
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
I DON’T
implications of closures in
UNDERSTAND
more depth later.
CLOSURE!!
It’s OK, you don’t need to for now
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.
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.
Boolean Logic
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 was known to throw awesome keg parties.
My invention
is the basis of all
Computers.
So I’m kind of a
big deal.
George Boole
1815 - 1864
!, != 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 !==.
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 ==
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.
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:
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.
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.
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.
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.
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.
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.
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.
Flow Control – Disruptive Statements: throw
• throw will cause an exception to be thrown.
• If a throw statement isn’t inside of a try/catch
block 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.
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
Client Side JS Programming Group @ M-GO
Sponsored By
Contact Me:
Email
Hangouts
Skype
Tony Germaneri
Tony.Germaneri@mgo.com
TonyGermaneri@gmail.com
tony.germaneri.mobile
www.mgo.com