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

More Related Content

What's hot (20)

JQuery
JQueryJQuery
JQuery
DevTalk
 
jQuery
jQueryjQuery
jQuery
Vishwa Mohan
 
Week3
Week3Week3
Week3
Will Gaybrick
 
20131108 cs query by howard
20131108 cs query by howard20131108 cs query by howard
20131108 cs query by howard
LearningTech
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
Karol Depka Pradzinski
 
Html dom & j query
Html dom & j queryHtml dom & j query
Html dom & j query
hafeez1216
 
JQuery
JQueryJQuery
JQuery
Jacob Nelson
 
Css Selectors
Css SelectorsCss Selectors
Css Selectors
Igor Ognichenko
 
Applied component i unit 2
Applied component i unit 2Applied component i unit 2
Applied component i unit 2
Pramod Redekar
 
jQuery
jQueryjQuery
jQuery
Jay Poojara
 
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
Andrea Zaza
 
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
Gabriel Omar Cotelli
 
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
Ramco Institute of Technology, Rajapalayam, Tamilnadu, India
 
TDD With Typescript - Noam Katzir
TDD With Typescript - Noam KatzirTDD With Typescript - Noam Katzir
TDD With Typescript - Noam Katzir
Wix Engineering
 
Jquery
JqueryJquery
Jquery
baabtra.com - No. 1 supplier of quality freshers
 
fuser interface-development-using-jquery
fuser interface-development-using-jqueryfuser interface-development-using-jquery
fuser interface-development-using-jquery
Kostas Mavridis
 
MongoDB at ZPUGDC
MongoDB at ZPUGDCMongoDB at ZPUGDC
MongoDB at ZPUGDC
Mike Dirolf
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
Arwid Bancewicz
 
Informasjonsintegrasjon – hva er utfordringene
Informasjonsintegrasjon – hva er utfordringeneInformasjonsintegrasjon – hva er utfordringene
Informasjonsintegrasjon – hva er utfordringene
Stian Danenbarger
 
Django introduction @ UGent
Django introduction @ UGentDjango introduction @ UGent
Django introduction @ UGent
kevinvw
 

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
Michael Sturgeon
 
Java script basics
Java script basicsJava script basics
Java script basics
Shrivardhan Limbkar
 
Js ppt
Js pptJs ppt
Js ppt
Rakhi Thota
 
Java Script basics and DOM
Java Script basics and DOMJava Script basics and DOM
Java Script basics and DOM
Sukrit Gupta
 
Java script -23jan2015
Java script -23jan2015Java script -23jan2015
Java script -23jan2015
Sasidhar Kothuru
 
8 introduction to_java_script
8 introduction to_java_script8 introduction to_java_script
8 introduction to_java_script
Vijay Kalyan
 
Java script
Java scriptJava script
Java script
Jay Patel
 
Java script
Java scriptJava script
Java script
Sadeek Mohammed
 
Java script
Java scriptJava script
Java script
Fajar Baskoro
 
Project charter-template
Project charter-templateProject charter-template
Project charter-template
Fajar Baskoro
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
Aaron Gustafson
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
Bryan Basham
 
Java script ppt
Java script pptJava script ppt
Java script ppt
The Health and Social Care Information Centre
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
Javascript
JavascriptJavascript
Javascript
guest03a6e6
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
Nicholas Zakas
 
Session 3 Java Script
Session 3 Java ScriptSession 3 Java Script
Session 3 Java Script
Muhammad Hesham
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
Sehwan Noh
 
Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
Christian Heilmann
 
Ad

Similar to Java Script Basics (20)

JavaScript!
JavaScript!JavaScript!
JavaScript!
RTigger
 
Getting Started with jQuery
Getting Started with jQueryGetting Started with jQuery
Getting Started with jQuery
Akshay Mathur
 
Web technologies-course 09.pptx
Web technologies-course 09.pptxWeb technologies-course 09.pptx
Web technologies-course 09.pptx
Stefan Oprea
 
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
 
Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScript
Lilia Sfaxi
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
Salvatore Fazio
 
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
smitha273566
 
Interacting with the DOM (JavaScript)
Interacting with the DOM (JavaScript)Interacting with the DOM (JavaScript)
Interacting with the DOM (JavaScript)
Florence Davis
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
GOPAL BASAK
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Siva Arunachalam
 
Part 7
Part 7Part 7
Part 7
NOHA AW
 
Hibernate Tutorial for beginners
Hibernate Tutorial for beginnersHibernate Tutorial for beginners
Hibernate Tutorial for beginners
rajkamal560066
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
prince Loffar
 
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
Sean Burgess
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
Gill Cleeren
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
musrath mohammad
 
WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS
WEB DESIGNING  VNSGU UNIT 4 JAVASCRIPT OBJECTSWEB DESIGNING  VNSGU UNIT 4 JAVASCRIPT OBJECTS
WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS
divyapatel123440
 
Web technologies-course 11.pptx
Web technologies-course 11.pptxWeb technologies-course 11.pptx
Web technologies-course 11.pptx
Stefan Oprea
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuery
colinbdclark
 
ppt- u 2.pptx
ppt- u 2.pptxppt- u 2.pptx
ppt- u 2.pptx
19ME041NAVEENR
 
JavaScript!
JavaScript!JavaScript!
JavaScript!
RTigger
 
Getting Started with jQuery
Getting Started with jQueryGetting Started with jQuery
Getting Started with jQuery
Akshay Mathur
 
Web technologies-course 09.pptx
Web technologies-course 09.pptxWeb technologies-course 09.pptx
Web technologies-course 09.pptx
Stefan Oprea
 
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
 
Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScript
Lilia Sfaxi
 
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
smitha273566
 
Interacting with the DOM (JavaScript)
Interacting with the DOM (JavaScript)Interacting with the DOM (JavaScript)
Interacting with the DOM (JavaScript)
Florence Davis
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
GOPAL BASAK
 
Hibernate Tutorial for beginners
Hibernate Tutorial for beginnersHibernate Tutorial for beginners
Hibernate Tutorial for beginners
rajkamal560066
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
prince Loffar
 
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
Sean Burgess
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
Gill Cleeren
 
WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS
WEB DESIGNING  VNSGU UNIT 4 JAVASCRIPT OBJECTSWEB DESIGNING  VNSGU UNIT 4 JAVASCRIPT OBJECTS
WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS
divyapatel123440
 
Web technologies-course 11.pptx
Web technologies-course 11.pptxWeb technologies-course 11.pptx
Web technologies-course 11.pptx
Stefan Oprea
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuery
colinbdclark
 
Ad

Recently uploaded (20)

Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...
Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...
Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...
Mike Mingos
 
IT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information TechnologyIT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information Technology
SHEHABALYAMANI
 
IT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information TechnologyIT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information Technology
SHEHABALYAMANI
 
Mastering Testing in the Modern F&B Landscape
Mastering Testing in the Modern F&B LandscapeMastering Testing in the Modern F&B Landscape
Mastering Testing in the Modern F&B Landscape
marketing943205
 
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient CareAn Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
Cyntexa
 
Top 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptx
Top 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptxTop 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptx
Top 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptx
mkubeusa
 
How to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabberHow to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabber
eGrabber
 
machines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdfmachines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdf
AmirStern2
 
Config 2025 presentation recap covering both days
Config 2025 presentation recap covering both daysConfig 2025 presentation recap covering both days
Config 2025 presentation recap covering both days
TrishAntoni1
 
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Safe Software
 
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
Ivano Malavolta
 
Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...
The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...
The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...
SOFTTECHHUB
 
Dark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanizationDark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanization
Jakub Šimek
 
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...
Maarten Verwaest
 
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdfKit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Wonjun Hwang
 
Viam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdfViam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdf
camilalamoratta
 
Build With AI - In Person Session Slides.pdf
Build With AI - In Person Session Slides.pdfBuild With AI - In Person Session Slides.pdf
Build With AI - In Person Session Slides.pdf
Google Developer Group - Harare
 
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à GenèveUiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPathCommunity
 
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
CSUC - Consorci de Serveis Universitaris de Catalunya
 
Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...
Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...
Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...
Mike Mingos
 
IT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information TechnologyIT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information Technology
SHEHABALYAMANI
 
IT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information TechnologyIT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information Technology
SHEHABALYAMANI
 
Mastering Testing in the Modern F&B Landscape
Mastering Testing in the Modern F&B LandscapeMastering Testing in the Modern F&B Landscape
Mastering Testing in the Modern F&B Landscape
marketing943205
 
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient CareAn Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
Cyntexa
 
Top 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptx
Top 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptxTop 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptx
Top 5 Benefits of Using Molybdenum Rods in Industrial Applications.pptx
mkubeusa
 
How to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabberHow to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabber
eGrabber
 
machines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdfmachines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdf
AmirStern2
 
Config 2025 presentation recap covering both days
Config 2025 presentation recap covering both daysConfig 2025 presentation recap covering both days
Config 2025 presentation recap covering both days
TrishAntoni1
 
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Safe Software
 
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
Ivano Malavolta
 
Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...
The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...
The No-Code Way to Build a Marketing Team with One AI Agent (Download the n8n...
SOFTTECHHUB
 
Dark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanizationDark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanization
Jakub Šimek
 
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...
Maarten Verwaest
 
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdfKit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Wonjun Hwang
 
Viam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdfViam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdf
camilalamoratta
 
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à GenèveUiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPathCommunity
 

Java Script Basics

  翻译: