Introduction to Javascript

By Kapil Kumawat

Topics

  • Introduction
  • Functions
  • Objects
  • Patterns

Press c from keyboard to open editor in any page.

Introduction

  • Language for programming interactive web pages,
  • ECMAScript 1997
  • ES3 1999
  • ES5 2009
  • ES4 2006

JavaScript Syntax

  • Case sensitivity
  • Whitespace
  • Semicolons
  • Comments
  • Identifiers
  • Keywords

JavaScript Data Types

  • null
  • undefined
  • boolean
  • numbers
  • string
  • object
  • symbol -- added in ES6!

JavaScript Data Types

typeof: operator inspects the type of the given value

JavaScript Syntax Cont.

Special mention:

  • "use strict";

JavaScript Syntax Cont.

Special mention:

  • undefined, NaN and null
  • isNaN
  • === vs ==

Value vs. Reference

Functions

  • Encloses the set of statements
  • Functions are objects
  • Functions Calling

Ways of Calling Functions

  • ()
  • .call()
  • .apply()

Scope os function

Scoping in Javascript

Function-level scope

Functions Dec vs Exp

Function Declaration vs Function Expression

Functions SIFE

SIFE(Self Invoking Function Expression)

A self-invoking anonymous runs automatically/immediately when you create it and has no name, hence called anonymous

Functions Hoisting

Hoisted

Refer

Functions Cont.

Closures

A closure—unlike a plain function pointer—enables a function to access those non-local variables even when invoked outside its immediate lexical scope.

Create Calculator Like this Sum(5)(10) should return 10

Objects

  • Collection of property-value.
  • A property name can be any string, including the empty string.
  • Value can have any defined Datatype of Javascript including other objects.
  • Objects in JavaScript are class-free.

Create Objects

Three common ways to create new objects

Objects Properties

Four common ways to create new properties of objects

Refer defineProperties and defineProperty.

Objects Cont.

Few common things to note:

  • Prototype
    • Delegation / Prototype Chain
  • Reflection
    • typeof
    • hasOwnProperty

Object Functions Model

JavaScript Object Creation

  • Basic
  • Prototype Pattern
  • Module Pattern
  • Closures Pattern

Singleton class

Lets use this knowledge and create a Singleton Object

Singleton class Method 1

Method 1

Singleton class Method 2

Method 2

Debugger Demo

  • $_,$0-4,$$
  • debug/undebug
  • monitor/unmonitor
  • monitorEvents/unmonitorEvents
  • console
  • blackbox
  • breakpoints

Refer

Console Object

  • console.log, console.error, console.dir(object)
  • console.group(title), console.groupCollapsed,console.groupEnd
  • console.time(label), console.timeEnd(label)
  • console.table
  • console.clear
  • console.trace
  • console.count

pass css class to console.

Refer

Future Sessions

  • OOPS Programming
  • DOM Manipulation
  • Design Patterns
  • CSS Basics
  • Memory Leaks
  • jQuery

Thank You

Contact me at kapil@ask4kapil.xyz

Source code of this presentation at Github