A workshop in JavaScript basics with a slight introduction to ES6. The workshop will cover the following topics: 1- Why Learn JavaScript? 2- Data Types 3- Functions 4- Object Oriented Programming 5- Document Object Model 6- Interview Questions 7- Hands-on: a- A Simple Slider b- A Form Validator

1. JavaScript
Module I
by
Mustafa Qamar-ud-Din
m.qamaruddin@outlook.com

2. Agenda

Why JavaScript?

Data Types

Flow Control Structures

Functions
− Nested Functions
− Recursion
− Closures

Error Handling

Objects
− Built-in Objects
− User-defined Objects

Document Object Model
− DOM Level 1
− DOM Level 2
− DOM Level 3

Interview Questions

Recommended Readings

What’s Next?

Hands On

3. Why JavaScript?
"JavaScript is
the only
language that
I’m aware of
that people feel
they don’t need
to learn before
they start using
it."
- Douglas Crockford

4. Why JavaScript?

Web Development
− Client-Side
− Server-Side

Mobile Applications

Windows 8
Applications

Chrome Extensions

VR

Games & Graphics

Desktop Applications
(Elektron)

5. Data Types

Statements

Expressions

Variables
− Hoisting

Constants
− Immutable
Identifiers
− Mutable Values

Operators
− Assignment
− Increment,

Weakly Typed
− Type Coercion
− Dynamic Typing

Primitive Types
− Booleans
− Numbers
− Strings
− Null
− Undefined
− NaN
− Symbols (ES6)

6. Flow Control Structures

if

if / else

if / else if / else

while

do while

for

switch

continue

break

7. Functions (First-class_function)

Nested Functions

Recursion

Closures

Self Invoking Functions

8. Nested Functions
Create a function sum
that will work like
that:
sum(a)(b) = a+b.
Yes, the syntax is
dual brackets. Funny,
isn’t it? For
instance:
sum(1)(2) = 3
Sum(5)(-1) = 4

9. Nested Functions
Create a function sum
that will work like
that:
sum(a)(b) = a+b and
accepts any number of
brackets.
For instance:
sum(1)(2) == 3
sum(5)(-1)(2) == 6
sum(6)(-1)(-2)(-3) ==
0
Sum(0)(1)(2)(3)(4)(5)

10. Closures
Here is a function to create an army of shooters:
function makeArmy() {
var shooters = []
for(var i=0; i<10; i++) {
var shooter = function() { // a shooter is a function
alert(i) // which should alert it's number
}
shooters.push(shooter)
}
return shooters
}
var army = makeArmy()

11. Error Handling

try catch finally

window.onerror

12. Objects

Built-in Objects

User-defined Objects
− Function
− JSON
− Associative Array

Pass by Value & Reference

Prototype Chain

13. Built-in Objects

Number

String
− getIndexOf
− getLastIndexOf
− search

RegEx
− match
− exec
− test

Date
− getTime / setTime

14. Objects

Built-in Objects

User-defined Objects
− Function
− JSON
− Associative Array

Pass by Value & Reference

Prototype Chain

15. Objects

Methods
− is
− hasOwnProperty
− isPrototypeOf
− toString
− toSource
− valueOf
− apply
− bind
− Call

Operators