JavaScript for Web Developer

class: center, middle, inverse, title-slide

# JavaScript for Web Developer
## Introduction to JavaScript
### Laxmikant
### 2019-09-28

---

#  What you need to know

Client Server Communication

Basic HTML
   Your Content
   Tags
   ids
   classs
  
Basic CSS
   Your Layout
   Styling by tag name e.g p {text:align:'';color='black';... }
   Styling by id e.g. #widget {border:"1px solid blue";}
   Styling by class name p.error {color:"red"...}
  
Basic JavaScript
   Your Functionality

Client Side Development Skills

#  What is JavaScript

+ What programming is
+ What JavaScript is
+ How JavaScript used in the web pages
+ What J avaScript can do
+ When alternatives should be considered

---
#  What is JavaScript

JavaScript Programming

+ Variables and Data Types
+ Browser Input and Output
+ Statements and Commands
+ Conditions
+ Loops
+ Arrays an Sorting
+ Functions, Parameters and Returning Data
+ Error Handling and Debugging

---
#  What is JavaScript

Advanced JavaScript Programming

+ String and Number Manipulations
+ Object Oriented Programming
+ Regular Expressions *
+ Anonymous Functions *
+ Closures *
+ Recursion *
+ Programming Patterns *

---
#  What is JavaScript

+ What is HTML5
+ What is CSS3
+ JavaScript APIs
+ Document Object Model
+ Event Handling
+ HTML 5 Forms

What you will learn about HTML5

---
#  What is JavaScript

+ Custom Input Controls (Password Checker)
+ Java Script Animation
+ Load Data From Server using AJAX
+ HTML5 Audio and Video Control
+ Canvas Element
+ HTML5 Scalable Vector Graphics
+ HTML5 Geo Location

What you will learn about JavaScript

---
#  What is JavaScript

+ HTML5 File Handling
+ Web Workers
+ HTML5 Local Storage (Cookie, Session Storage)
+ HTML5 Offline Application
+ Manipulating Browser History

What you will learn about JavaScript

---
#  What is JavaScript

Browser Developer Sources
![](assets/img/image6.png)

---
#  What is JavaScript

JavaScript Libraries
+ Specialized JS Libraries
    + Backbone JS
    + jQuery UI
    + Box 2D
![](assets/img/image7.png)

---
#  What is HTML5

+ Invented in 1990 and reached V4 by 1997
+ XHTML 1.0 but minor upgrade
+ MS won the first Browser War and W3C started focus on future
+ XHTML 2.0 not backward compatible
+ Web Hypertext Application Technology Working Group (WHATWG) work on HTML5 in 2004
+ Radical Evolution of HTML4
+ Added Few Dozens new Elements
+ 2009 W3C dropped XHTML2.0 and Join HTML5

HTML5: The Technology Evolution

---
#  What is HTML5

+ Simply HTML
+ An Evolution of HTML4
+ Available to Use Today
+ Work is Progress and it will never be complete as specification is a living document
+ Even a Browser fully implemented it but provide fallback

HTML5: The Technology

---
#  What is HTML5

+ Provide for most Radical Features like
    + Rounded Corner,  Animation , 3D Transformations
+ But Still CSS and Evolution of earlier version
+ Available to Use Today
+ Work is Progress so need to add vendor Prefix like
    + Webkit  (Safari, Chrome)
    + MS  (Microsoft)
    + MSO (Microsoft Office)
    + MOZ (Mozilla)
+ Still work in progress by become modularized
+ Stable feature like Border Radius used without prefix

CSS3: The Technology

---
#  What is HTML5

+ All Browsers are keep on adding new features
+ Need Browser Application Programming Interface
+ Work is Progress so need to add vendor Prefix
+ Still work in progress by become modularized
+ Stable feature accepted and start using common code

JavaScript: The Technology

---
#  What is HTML5

+ 2010 Most IT Companies Led by Apple Give the term HTML5
+ HTML5 is Combination of
    + HTML5 Tags
    + CSS3 Properties
    + JavaScript APIs
+ HTML5 = Cool new web stuff

HTML5: The Marketing Hype

---
#  What is HTML5

HTML5: The Marketing Hype
![](assets/img/image8.png)

---
#  Web Browsers

+ Mozilla 2004
+ Chrome
+ IE
+ Opera

---
#  Development Tools

+ Editor
+ Web Server

---
#  Quiz

+ What is NodeJS ?
+ What is WHATWG?
+ What is W3C?
+ What are Vendor Prefix?