SlideShare a Scribd company logo
1 of 18
JavaScript Basics
Ravi Kumar Hamsa
Primitive Data Types
• String
• Number (Integer/Float)
• Boolean
• null
• undefined
• Regex
Introduction
Fully dynamic
not secure
Object Data Types
• Object
• Array
• Date
• Function
Conditions and Loops
• if
• while
• do while
• for
• switch
• == v/s ===
Arguments Passing
primitive data types passed by value
object data types passed by reference
there is no way you can change it
DOM Tree
window
document
head
body
div
p
...
...
Finding DOM node/s
document.getElementById (single node)
document.getElementsByTagName(html
collection)
document.getElementsByClassName(html
collection)
document.querySelector (single node)
document.querySelectorAll (html collection)
Common Node Properties
nodeName
childNodes
firstChild
lastChild
attributes
innerHTML
...
...
DOM Manipulation
• innerHTML
• outerHTML
• createElement
• appendChild (?existing element)
• removeChild
• setAttribute
• removeAttribute
DOM Events
click
mouseenter
mouseleave
mousedown
mouseup
keyup
keydown
window.resize
bubbling v/s capturing
Adding Event Listeners/Handlers
• setting attribute in html
(onclick="jsFunction()")
• setting attribute in JS (el.onclick=function(){})
• addEventListener/attachEvent
Scope of Variables
• var keyword
• default global scope
• var placement in function
• this keyword
• execution scope in callbacks
• Function.call and Function.apply
JQuery
DOM Manipulation
adding/removing classes
setting style
creating nodes
Adding Event Handlers (delegating events)
Ajax Calls
Deferred
crossdomain data loading
iframes
flash
JSONP
CORS
Closures
what is closure
ajax callbacks
setTimeOut callbacks
scope chain
Single Threaded Execution
JavaScript runs on single thread
At any time any one expression is being
evaluated
examples
prototype chain
__proto__
inheritance
variable resolution
performance considerations

More Related Content

What's hot

Applied component i unit 2
Applied component i unit 2Applied component i unit 2
Applied component i unit 2
Pramod Redekar
 
fuser interface-development-using-jquery
fuser interface-development-using-jqueryfuser interface-development-using-jquery
fuser interface-development-using-jquery
Kostas Mavridis
 
Django introduction @ UGent
Django introduction @ UGentDjango introduction @ UGent
Django introduction @ UGent
kevinvw
 

What's hot (20)

JQuery
JQueryJQuery
JQuery
 
jQuery
jQueryjQuery
jQuery
 
Week3
Week3Week3
Week3
 
20131108 cs query by howard
20131108 cs query by howard20131108 cs query by howard
20131108 cs query by howard
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
 
Html dom & j query
Html dom & j queryHtml dom & j query
Html dom & j query
 
JQuery
JQueryJQuery
JQuery
 
Css Selectors
Css SelectorsCss Selectors
Css Selectors
 
Applied component i unit 2
Applied component i unit 2Applied component i unit 2
Applied component i unit 2
 
jQuery
jQueryjQuery
jQuery
 
Reactive Web Applications with Scala & Liftweb - CodeWeek 2015
Reactive Web Applications with Scala & Liftweb - CodeWeek 2015Reactive Web Applications with Scala & Liftweb - CodeWeek 2015
Reactive Web Applications with Scala & Liftweb - CodeWeek 2015
 
RenoirSt - A DSL enabling programmatic cascading style sheet generation
RenoirSt - A DSL enabling programmatic cascading style sheet generationRenoirSt - A DSL enabling programmatic cascading style sheet generation
RenoirSt - A DSL enabling programmatic cascading style sheet generation
 
Service Oriented Architecture-Unit-1-XML Schema
Service Oriented Architecture-Unit-1-XML SchemaService Oriented Architecture-Unit-1-XML Schema
Service Oriented Architecture-Unit-1-XML Schema
 
TDD With Typescript - Noam Katzir
TDD With Typescript - Noam KatzirTDD With Typescript - Noam Katzir
TDD With Typescript - Noam Katzir
 
Jquery
JqueryJquery
Jquery
 
fuser interface-development-using-jquery
fuser interface-development-using-jqueryfuser interface-development-using-jquery
fuser interface-development-using-jquery
 
MongoDB at ZPUGDC
MongoDB at ZPUGDCMongoDB at ZPUGDC
MongoDB at ZPUGDC
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 
Informasjonsintegrasjon – hva er utfordringene
Informasjonsintegrasjon – hva er utfordringeneInformasjonsintegrasjon – hva er utfordringene
Informasjonsintegrasjon – hva er utfordringene
 
Django introduction @ UGent
Django introduction @ UGentDjango introduction @ UGent
Django introduction @ UGent
 

Viewers also liked

Java Script basics and DOM
Java Script basics and DOMJava Script basics and DOM
Java Script basics and DOM
Sukrit Gupta
 

Viewers also liked (20)

HTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the CodeHTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the Code
 
Java script basics
Java script basicsJava script basics
Java script basics
 
Js ppt
Js pptJs ppt
Js ppt
 
Java Script basics and DOM
Java Script basics and DOMJava Script basics and DOM
Java Script basics and DOM
 
Java script -23jan2015
Java script -23jan2015Java script -23jan2015
Java script -23jan2015
 
8 introduction to_java_script
8 introduction to_java_script8 introduction to_java_script
8 introduction to_java_script
 
Java script
Java scriptJava script
Java script
 
Java script
Java scriptJava script
Java script
 
Java script
Java scriptJava script
Java script
 
Project charter-template
Project charter-templateProject charter-template
Project charter-template
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
Session 3 Java Script
Session 3 Java ScriptSession 3 Java Script
Session 3 Java Script
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
 

Similar to Java Script Basics

SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
Mark Rackley
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 

Similar to Java Script Basics (20)

JavaScript!
JavaScript!JavaScript!
JavaScript!
 
Getting Started with jQuery
Getting Started with jQueryGetting Started with jQuery
Getting Started with jQuery
 
Web technologies-course 09.pptx
Web technologies-course 09.pptxWeb technologies-course 09.pptx
Web technologies-course 09.pptx
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
 
Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScript
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
Dom date and objects and event handling
Dom date and objects and event handlingDom date and objects and event handling
Dom date and objects and event handling
 
Interacting with the DOM (JavaScript)
Interacting with the DOM (JavaScript)Interacting with the DOM (JavaScript)
Interacting with the DOM (JavaScript)
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Part 7
Part 7Part 7
Part 7
 
Hibernate Tutorial for beginners
Hibernate Tutorial for beginnersHibernate Tutorial for beginners
Hibernate Tutorial for beginners
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
Web technologies-course 11.pptx
Web technologies-course 11.pptxWeb technologies-course 11.pptx
Web technologies-course 11.pptx
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuery
 
ppt- u 2.pptx
ppt- u 2.pptxppt- u 2.pptx
ppt- u 2.pptx
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
 

Recently uploaded

Recently uploaded (20)

THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 

Java Script Basics