SlideShare a Scribd company logo
1 of 11
JavaScript Essentials
For Java Dev
Mak Bhatamrekar
http://www.meetup.com/myajip/
Agenda
 JS Development Tools
 Part1 - Core Javascript Concepts
 Part2 - JSON and JS Classes
 JQuery & Ajax
 How to Optimize JS
Dev Env
 Project setups using Eclipse IDE
 Sublime Text2 Editor
 Firebug Debugging
 Fast development with JSFiddle
 Fiddler HTTP Proxy
JavaScript
Part1
Essential Skills Java Developer should know
What is JavaScript
 Browser Only understands Html(Content) , CSS(styles), and
Javascript,
 It’s a Scripting language, runs on client, gives the capability
to change HTML/CSS dynamically.
 Initially used only from
 Client Side Validations, Animations,DOM Manipulation
 but now, we can develop Enire UI client with html,css,JS and
connect to backend using AJAX, JSON.
 Jquery and MVC Frameworks like Backbone, Angular,Amber to
name a few are getting more popular.
Javascript Notes
Object Desc
OOPS In JS everything is an Object except
null,undefined,boolean,number and string.
window Top level object which repesents browser window. Has
document, history objs in it
http://www.w3schools.com/jsref/obj_window.asp
document Represent HTML Document
http://www.w3schools.com/jsref/dom_obj_document.asp
http://jsfiddle.net/mbhatamb/uXgEa/
DOM Document Object Model, Internal represetation of the html
document in browser.
http://csszengarden.com/
onLoad() Event http://jsfiddle.net/mbhatamb/Bq9Ke/
<body>, <frame>, <frameset>, <iframe>, <img>, <input
type="image">, <link>, <script>, <style>
Javascript Notes Contd.
Object Desc
When to Load Define the script at the end of body, while CSS in head
<html>
<link rel="stylesheet" type="text/css"
href="/css/normalize.css"/>
<body>
<html tags>..
<script > //your javascript</script>
</body>
</html>
Esp. 3rd Party Scripts
Operators 5==‘5’ for compare and 5===‘5’ (false) for strict compare
http://www.w3schools.com/js/js_comparisons.asp
Functions Vs
Function
Expressions
function myfunc(){ //body}; or var abc = function(){}.
(second is called as functionexpression, and cannot be
invoked until loadded. E.g
http://jsfiddle.net/mbhatamb/cX5CP/
Functions
 Functions are first class objects in javascript.
 Functions can have properties
 You can store a function in a Variable
 You can pass a function as a param to another function
 You can have annonymous functions and function
expressions
Javascript Notes Contd.
Object Desc
closures Closure is the local variables for a function - kept alive after
the function has returned,
e.G http://jsfiddle.net/mbhatamb/pzXtd/
** Can be a good Challenge
Call() and apply()
methods
Special way to invoke methods in others Objects
pretending to be methods of our own object
http://jsfiddle.net/mbhatamb/ptjea/
** Can be a good Challenge
typeof var myvar=5 alert(typeof myvar) //alerts "number”.
Also used, if a javascript is not loaded e.g
http://jsfiddle.net/mbhatamb/VXMUP/
Quiz
 Why do I need client side validation when Server side is there and vice versa.
 What is DOM
 Main methods to traverse DOM?
 What is Window.onload() and Documend.onload()
 When should I access my Document Object
 When to load JavaScript and CSS
 What are Global Variables
 How to access Arguments of a function
 What is arguments.callee()
 What is Closures and Why?
Thank You
 Q & A
careerInJava.com

More Related Content

What's hot

Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009borkweb
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptMarlon Jamera
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayChamnap Chhorn
 
Introduction to Javascript programming
Introduction to Javascript programmingIntroduction to Javascript programming
Introduction to Javascript programmingFulvio Corno
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptForziatech
 
Javascript basics for automation testing
Javascript  basics for automation testingJavascript  basics for automation testing
Javascript basics for automation testingVikas Thange
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript TutorialDHTMLExtreme
 
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript CodeUsing RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript CodeThomas Lundström
 
Java Script
Java ScriptJava Script
Java Scriptsiddaram
 
JavaScript Conditional Statements
JavaScript Conditional StatementsJavaScript Conditional Statements
JavaScript Conditional StatementsMarlon Jamera
 
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)Ofer Cohen
 
Introduction to Javascript By Satyen
Introduction to Javascript By  SatyenIntroduction to Javascript By  Satyen
Introduction to Javascript By SatyenSatyen Pandya
 

What's hot (20)

Java script ppt
Java script pptJava script ppt
Java script ppt
 
JS Event Loop
JS Event LoopJS Event Loop
JS Event Loop
 
Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
 
Js ppt
Js pptJs ppt
Js ppt
 
Javascript Basics
Javascript BasicsJavascript Basics
Javascript Basics
 
Introduction to Javascript programming
Introduction to Javascript programmingIntroduction to Javascript programming
Introduction to Javascript programming
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
 
Javascript by geetanjali
Javascript by geetanjaliJavascript by geetanjali
Javascript by geetanjali
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
Javascript basics for automation testing
Javascript  basics for automation testingJavascript  basics for automation testing
Javascript basics for automation testing
 
Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript Tutorial
 
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript CodeUsing RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
 
Java Script
Java ScriptJava Script
Java Script
 
JavaScript Conditional Statements
JavaScript Conditional StatementsJavaScript Conditional Statements
JavaScript Conditional Statements
 
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)
 
Introduction to Javascript By Satyen
Introduction to Javascript By  SatyenIntroduction to Javascript By  Satyen
Introduction to Javascript By Satyen
 
Learn TypeScript from scratch
Learn TypeScript from scratchLearn TypeScript from scratch
Learn TypeScript from scratch
 

Similar to Java scriptforjavadev part1

Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Sopheak Sem
 
JavaScript Miller Columns
JavaScript Miller ColumnsJavaScript Miller Columns
JavaScript Miller ColumnsJonathan Fine
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing UpDavid Padbury
 
JSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph PicklJSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph PicklChristoph Pickl
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015jbandi
 
Intro to ES6 and why should you bother !
Intro to ES6 and why should you bother !Intro to ES6 and why should you bother !
Intro to ES6 and why should you bother !Gaurav Behere
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfAJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfSreeVani74
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Foreverstephskardal
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web TechnologiesPerttu Myry
 

Similar to Java scriptforjavadev part1 (20)

[2015/2016] JavaScript
[2015/2016] JavaScript[2015/2016] JavaScript
[2015/2016] JavaScript
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
 
JavaScript
JavaScriptJavaScript
JavaScript
 
JS basics
JS basicsJS basics
JS basics
 
JavaScript Miller Columns
JavaScript Miller ColumnsJavaScript Miller Columns
JavaScript Miller Columns
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
Java scriptforjavadev part2a
Java scriptforjavadev part2aJava scriptforjavadev part2a
Java scriptforjavadev part2a
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
JSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph PicklJSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph Pickl
 
Training javascript 2012 hcmut
Training javascript 2012 hcmutTraining javascript 2012 hcmut
Training javascript 2012 hcmut
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
 
Intro to ES6 and why should you bother !
Intro to ES6 and why should you bother !Intro to ES6 and why should you bother !
Intro to ES6 and why should you bother !
 
node.js.pptx
node.js.pptxnode.js.pptx
node.js.pptx
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfAJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdf
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
 

More from Makarand Bhatambarekar

More from Makarand Bhatambarekar (7)

Bootstrapping angular js with bower grunt yeoman
Bootstrapping angular js with bower grunt yeomanBootstrapping angular js with bower grunt yeoman
Bootstrapping angular js with bower grunt yeoman
 
Sprintintegration ajip
Sprintintegration ajipSprintintegration ajip
Sprintintegration ajip
 
Sonarjenkins ajip
Sonarjenkins ajipSonarjenkins ajip
Sonarjenkins ajip
 
Springaopdecoded ajip
Springaopdecoded ajipSpringaopdecoded ajip
Springaopdecoded ajip
 
Story ofcorespring infodeck
Story ofcorespring infodeckStory ofcorespring infodeck
Story ofcorespring infodeck
 
JavaScript JQUERY AJAX
JavaScript JQUERY AJAXJavaScript JQUERY AJAX
JavaScript JQUERY AJAX
 
Getting Started with J2EE, A Roadmap
Getting Started with J2EE, A RoadmapGetting Started with J2EE, A Roadmap
Getting Started with J2EE, A Roadmap
 

Recently uploaded

Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 

Recently uploaded (20)

Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 

Java scriptforjavadev part1

  • 1. JavaScript Essentials For Java Dev Mak Bhatamrekar http://www.meetup.com/myajip/
  • 2. Agenda  JS Development Tools  Part1 - Core Javascript Concepts  Part2 - JSON and JS Classes  JQuery & Ajax  How to Optimize JS
  • 3. Dev Env  Project setups using Eclipse IDE  Sublime Text2 Editor  Firebug Debugging  Fast development with JSFiddle  Fiddler HTTP Proxy
  • 5. What is JavaScript  Browser Only understands Html(Content) , CSS(styles), and Javascript,  It’s a Scripting language, runs on client, gives the capability to change HTML/CSS dynamically.  Initially used only from  Client Side Validations, Animations,DOM Manipulation  but now, we can develop Enire UI client with html,css,JS and connect to backend using AJAX, JSON.  Jquery and MVC Frameworks like Backbone, Angular,Amber to name a few are getting more popular.
  • 6. Javascript Notes Object Desc OOPS In JS everything is an Object except null,undefined,boolean,number and string. window Top level object which repesents browser window. Has document, history objs in it http://www.w3schools.com/jsref/obj_window.asp document Represent HTML Document http://www.w3schools.com/jsref/dom_obj_document.asp http://jsfiddle.net/mbhatamb/uXgEa/ DOM Document Object Model, Internal represetation of the html document in browser. http://csszengarden.com/ onLoad() Event http://jsfiddle.net/mbhatamb/Bq9Ke/ <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
  • 7. Javascript Notes Contd. Object Desc When to Load Define the script at the end of body, while CSS in head <html> <link rel="stylesheet" type="text/css" href="/css/normalize.css"/> <body> <html tags>.. <script > //your javascript</script> </body> </html> Esp. 3rd Party Scripts Operators 5==‘5’ for compare and 5===‘5’ (false) for strict compare http://www.w3schools.com/js/js_comparisons.asp Functions Vs Function Expressions function myfunc(){ //body}; or var abc = function(){}. (second is called as functionexpression, and cannot be invoked until loadded. E.g http://jsfiddle.net/mbhatamb/cX5CP/
  • 8. Functions  Functions are first class objects in javascript.  Functions can have properties  You can store a function in a Variable  You can pass a function as a param to another function  You can have annonymous functions and function expressions
  • 9. Javascript Notes Contd. Object Desc closures Closure is the local variables for a function - kept alive after the function has returned, e.G http://jsfiddle.net/mbhatamb/pzXtd/ ** Can be a good Challenge Call() and apply() methods Special way to invoke methods in others Objects pretending to be methods of our own object http://jsfiddle.net/mbhatamb/ptjea/ ** Can be a good Challenge typeof var myvar=5 alert(typeof myvar) //alerts "number”. Also used, if a javascript is not loaded e.g http://jsfiddle.net/mbhatamb/VXMUP/
  • 10. Quiz  Why do I need client side validation when Server side is there and vice versa.  What is DOM  Main methods to traverse DOM?  What is Window.onload() and Documend.onload()  When should I access my Document Object  When to load JavaScript and CSS  What are Global Variables  How to access Arguments of a function  What is arguments.callee()  What is Closures and Why?
  • 11. Thank You  Q & A careerInJava.com