SlideShare a Scribd company logo
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
Ad

Recommended

Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
Visual Engineering
 
Introduction To JavaScript
Introduction To JavaScript
Reema
 
Java script tutorial
Java script tutorial
Doeun KOCH
 
Web development basics (Part-4)
Web development basics (Part-4)
Rajat Pratap Singh
 
Javascript 01 (js)
Javascript 01 (js)
AbhishekMondal42
 
Introduction to JavaScript Programming
Introduction to JavaScript Programming
Collaboration Technologies
 
Javascript
Javascript
Momentum Design Lab
 
JavaScript Basics
JavaScript Basics
Bhanuka Uyanage
 
Java script ppt
Java script ppt
The Health and Social Care Information Centre
 
JS Event Loop
JS Event Loop
Saai Vignesh P
 
Javascript 2009
Javascript 2009
borkweb
 
Introduction to JavaScript
Introduction to JavaScript
Marlon Jamera
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
Js ppt
Js ppt
Rakhi Thota
 
Javascript Basics
Javascript Basics
Vishal Mittal
 
Introduction to Javascript programming
Introduction to Javascript programming
Fulvio Corno
 
Object Oriented Javascript
Object Oriented Javascript
NexThoughts Technologies
 
Javascript by geetanjali
Javascript by geetanjali
Geetanjali Bhosale
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
Forziatech
 
Javascript basics for automation testing
Javascript basics for automation testing
Vikas Thange
 
Javascript tutorial
Javascript tutorial
Abhishek Kesharwani
 
Basic JavaScript Tutorial
Basic JavaScript Tutorial
DHTMLExtreme
 
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
Thomas Lundström
 
Java Script
Java Script
siddaram
 
JavaScript Conditional Statements
JavaScript Conditional Statements
Marlon Jamera
 
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 Satyen
Satyen Pandya
 
Learn TypeScript from scratch
Learn TypeScript from scratch
Mohd Manzoor Ahmed
 
[2015/2016] JavaScript
[2015/2016] JavaScript
Ivano Malavolta
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
 

More Related Content

What's hot (20)

Java script ppt
Java script ppt
The Health and Social Care Information Centre
 
JS Event Loop
JS Event Loop
Saai Vignesh P
 
Javascript 2009
Javascript 2009
borkweb
 
Introduction to JavaScript
Introduction to JavaScript
Marlon Jamera
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
Js ppt
Js ppt
Rakhi Thota
 
Javascript Basics
Javascript Basics
Vishal Mittal
 
Introduction to Javascript programming
Introduction to Javascript programming
Fulvio Corno
 
Object Oriented Javascript
Object Oriented Javascript
NexThoughts Technologies
 
Javascript by geetanjali
Javascript by geetanjali
Geetanjali Bhosale
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
Forziatech
 
Javascript basics for automation testing
Javascript basics for automation testing
Vikas Thange
 
Javascript tutorial
Javascript tutorial
Abhishek Kesharwani
 
Basic JavaScript Tutorial
Basic JavaScript Tutorial
DHTMLExtreme
 
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
Thomas Lundström
 
Java Script
Java Script
siddaram
 
JavaScript Conditional Statements
JavaScript Conditional Statements
Marlon Jamera
 
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 Satyen
Satyen Pandya
 
Learn TypeScript from scratch
Learn TypeScript from scratch
Mohd Manzoor Ahmed
 
Javascript 2009
Javascript 2009
borkweb
 
Introduction to JavaScript
Introduction to JavaScript
Marlon Jamera
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
Introduction to Javascript programming
Introduction to Javascript programming
Fulvio Corno
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
Forziatech
 
Javascript basics for automation testing
Javascript basics for automation testing
Vikas Thange
 
Basic JavaScript Tutorial
Basic JavaScript Tutorial
DHTMLExtreme
 
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
Thomas Lundström
 
Java Script
Java Script
siddaram
 
JavaScript Conditional Statements
JavaScript Conditional Statements
Marlon Jamera
 
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 Satyen
Satyen Pandya
 

Similar to Java scriptforjavadev part1 (20)

[2015/2016] JavaScript
[2015/2016] JavaScript
Ivano Malavolta
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
 
JavaScript
JavaScript
Ivano Malavolta
 
JS basics
JS basics
Mohd Saeed
 
JavaScript Miller Columns
JavaScript Miller Columns
Jonathan Fine
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
 
Java scriptforjavadev part2a
Java scriptforjavadev part2a
Makarand Bhatambarekar
 
JavaScript Growing Up
JavaScript Growing Up
David Padbury
 
Training javascript 2012 hcmut
Training javascript 2012 hcmut
University of Technology
 
Introduction to Javascript
Introduction to Javascript
Amit Tyagi
 
The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015
jbandi
 
JavaScript-Core
JavaScript-Core
tutorialsruby
 
JavaScript-Core
JavaScript-Core
tutorialsruby
 
JavaScript Interview Questions PDF By ScholarHat
JavaScript Interview Questions PDF By ScholarHat
Scholarhat
 
Intro to ES6 and why should you bother !
Intro to ES6 and why should you bother !
Gaurav Behere
 
node.js.pptx
node.js.pptx
rani marri
 
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.pdf
SreeVani74
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
 
Important JavaScript Concepts Every Developer Must Know
Important JavaScript Concepts Every Developer Must Know
yashikanigam1
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
 
JavaScript Miller Columns
JavaScript Miller Columns
Jonathan Fine
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
 
JavaScript Growing Up
JavaScript Growing Up
David Padbury
 
Introduction to Javascript
Introduction to Javascript
Amit Tyagi
 
The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015
jbandi
 
JavaScript Interview Questions PDF By ScholarHat
JavaScript Interview Questions PDF By ScholarHat
Scholarhat
 
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]
GDSC UofT Mississauga
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdf
SreeVani74
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
 
Important JavaScript Concepts Every Developer Must Know
Important JavaScript Concepts Every Developer Must Know
yashikanigam1
 
Ad

More from Makarand Bhatambarekar (7)

Bootstrapping angular js with bower grunt yeoman
Bootstrapping angular js with bower grunt yeoman
Makarand Bhatambarekar
 
Sprintintegration ajip
Sprintintegration ajip
Makarand Bhatambarekar
 
Sonarjenkins ajip
Sonarjenkins ajip
Makarand Bhatambarekar
 
Springaopdecoded ajip
Springaopdecoded ajip
Makarand Bhatambarekar
 
Story ofcorespring infodeck
Story ofcorespring infodeck
Makarand Bhatambarekar
 
JavaScript JQUERY AJAX
JavaScript JQUERY AJAX
Makarand Bhatambarekar
 
Getting Started with J2EE, A Roadmap
Getting Started with J2EE, A Roadmap
Makarand Bhatambarekar
 
Ad

Recently uploaded (20)

Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
ICT Frame Magazine Pvt. Ltd.
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
Edge AI and Vision Alliance
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
ICT Frame Magazine Pvt. Ltd.
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
Edge AI and Vision Alliance
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 

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