SlideShare a Scribd company logo
JavaScript
www.PracticalCoding.inwww.PracticalCoding.in
A little Background
➢ JavaScript isn’t JAVA
➢ Developed by Brendan Eich at Netscape
➢ Was called LiveScript
➢ Not a compiled language
➢ Case sensitive :
function oneDrive() is different from function OneDrive()
www.PracticalCoding.inwww.PracticalCoding.in
What’s in a JavaScript Program?
Statements formed from tokens, operators, and identifiers placed
together in an order that is meaningful to a JavaScript interpreter,
which is contained in most web browsers.
www.PracticalCoding.inwww.PracticalCoding.in
Where should I write it ?
➢ <head>...</head>
➢ <body>...</body>
➢ External file included in the HTML file
<html>
<head>
<title>A Web Page Title</title>
<script type="text/javascript">
// JavaScript Goes Here
</script>
<script type="text/javascript" src="myscript.js">
</head>
<body>
<script type="text/javascript">
// JavaScript can go here too
</script>
</body>
</html>
www.PracticalCoding.inwww.PracticalCoding.in
Comments
➢/* This is a multiline
comment */
➢// This is a single line comment
www.PracticalCoding.inwww.PracticalCoding.in
Keywords
www.PracticalCoding.inwww.PracticalCoding.in
Data types
➢Numbers
➢Strings
➢Booleans
➢Null (Empty is not Null)
➢undefined
➢Objects
www.PracticalCoding.inwww.PracticalCoding.in
Math object
➢Math.Random()
➢Math.abs(x)
➢Math.pow(x,y)
➢Math.round(x)
www.PracticalCoding.inwww.PracticalCoding.in
Strings
Open firebug, type a string and explore the
methods available
www.PracticalCoding.inwww.PracticalCoding.in
Date object
Open firebug and explore
www.PracticalCoding.inwww.PracticalCoding.in
For loops
for (var i = 0; i < 1000; i++) {
//do something
)
www.PracticalCoding.inwww.PracticalCoding.in
Operators
➢ Additive operators ( +/- )
➢ Multiplicative operators ( *, /)
➢ Bitwise operators (&,|,^,!,<<,>>,>>>)
➢ Equality operators (==,!=,===,!==)
➢ Relational operators (<,>,>=,<=,in, instanceof)
➢ Unary operators(delete,void,typeof,++,--,+,-,!,~)
➢ Assignment operators
www.PracticalCoding.inwww.PracticalCoding.in
Controlling flow with conditionals and loops
➢ if else conditional statement and ternary operations
➢ switch statement
➢ while loop and a do...while loop
➢ for loops (general, for..each and for..in)
www.PracticalCoding.inwww.PracticalCoding.in
Functions
<script type="text/javascript">
function myFunction() {
var firstArg = arguments[0];
var secondArg = arguments[1];
alert("firstArg is: " + firstArg);
alert("secondArg is: " + secondArg);
}
myFunction("hello","world");
</script>
www.PracticalCoding.inwww.PracticalCoding.in
Function literal
JavaScript does not require functions to be
defined formally.
www.PracticalCoding.inwww.PracticalCoding.in
Objects
Properties
Methods
and whats this ?
www.PracticalCoding.inwww.PracticalCoding.in
Arrays
➢ Creation
➢ Methods
➢ Copying arrays
➢ push() and pop()
➢ Iterating through arrays using for()
Explore arrays in Firebug !
www.PracticalCoding.inwww.PracticalCoding.in
Timers
➢ setInterval()
➢ clearInterval()
➢ setTimeout()
➢ clearTimeout()
www.PracticalCoding.inwww.PracticalCoding.in
Window object
➢ document
➢ frames
➢ history
➢ location
➢ navigator
➢ screen
➢ self/window/parent
www.PracticalCoding.inwww.PracticalCoding.in
Observing the built in properties and methods
var body = document.getElementsByTagName("body")[0];
for (var prop in navigator) {
var elem = document.createElement("p");
var text = document.createTextNode(prop + ": " +
navigator[prop]);
elem.appendChild(text);
body.appendChild(elem);
}
Replace the ‘navigator’ with other objects to check.
www.PracticalCoding.inwww.PracticalCoding.in
Tree structure of DOM
www.PracticalCoding.inwww.PracticalCoding.in
Retrieving Elements
➢getElementById()
➢innerHTML
➢getElementsByTagName()
www.PracticalCoding.inwww.PracticalCoding.in
HTML Collections
➢document.anchors (requires ‘name’)
➢document.forms
➢document.images
➢document.links(requires ‘href’)
www.PracticalCoding.inwww.PracticalCoding.in
Siblings and Children
➢ .childNodes[0]
➢ nextSibling
➢ previousSibling
➢ firstChild
➢ lastChild
www.PracticalCoding.inwww.PracticalCoding.in
Events
onblur() The element lost focus (that is, it is not selected by the user).
onchange() The element has either changed (for example, a user typed into a text field) or lost focus.
onclick() The mouse clicked an element.
ondblclick() The mouse double-clicked an element.
onfocus() The element got focus.
onkeydown() A keyboard key is pressed (as opposed to released) while the element has focus.
onkeypress() A keyboard key is pressed while the element has focus.
onkeyup() A keyboard key is released while the element has focus.
onload() The element is loaded (a document, a frameset, or an image).
onmousedown() A mouse button is pressed.
onmousemove() The mouse is moved.
onmouseout() The mouse is moved off of or away from an element.
onmouseover() The mouse is over an element.
onmouseup() A mouse button is released.
onreset() The form element is reset, such as when a user presses a form reset button.
onresize() The window’s size is changed.
onselect() The text of a form element is selected.
onsubmit() The form is submitted.
onunload() The document or frameset is unloaded.
www.PracticalCoding.inwww.PracticalCoding.in
Learn More
@
www.PracticalCoding.in

More Related Content

What's hot (20)

PPTX
Introduction to Java Script
Vijay Kumar Verma
 
DOC
Java script by Act Academy
actanimation
 
PPT
JavaScript
Doncho Minkov
 
PPTX
Java Script
Dr. SURBHI SAROHA
 
PDF
22 j query1
Fajar Baskoro
 
PDF
10 java script projects full source code
Laurence Svekis ✔
 
PDF
Node.js Crash Course (Jump Start)
Haim Michael
 
PPTX
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Ayes Chinmay
 
PDF
Interacting with the DOM (JavaScript)
Florence Davis
 
PDF
Introduction to html & css
sesharao puvvada
 
PPT
JavaScript & Dom Manipulation
Mohammed Arif
 
PPTX
Java script writing javascript
Jesus Obenita Jr.
 
PPTX
Java script session 3
Saif Ullah Dar
 
PPT
Java script
Fajar Baskoro
 
PDF
1 ppt-ajax with-j_query
Fajar Baskoro
 
PPTX
Javascript inside Browser (DOM)
Vlad Mysla
 
PDF
Javascript projects Course
Laurence Svekis ✔
 
PDF
Web Components
Nikolaus Graf
 
PPTX
JavaScript DOM - Dynamic interactive Code
Laurence Svekis ✔
 
PDF
JavaScript and BOM events
Jussi Pohjolainen
 
Introduction to Java Script
Vijay Kumar Verma
 
Java script by Act Academy
actanimation
 
JavaScript
Doncho Minkov
 
Java Script
Dr. SURBHI SAROHA
 
22 j query1
Fajar Baskoro
 
10 java script projects full source code
Laurence Svekis ✔
 
Node.js Crash Course (Jump Start)
Haim Michael
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Ayes Chinmay
 
Interacting with the DOM (JavaScript)
Florence Davis
 
Introduction to html & css
sesharao puvvada
 
JavaScript & Dom Manipulation
Mohammed Arif
 
Java script writing javascript
Jesus Obenita Jr.
 
Java script session 3
Saif Ullah Dar
 
Java script
Fajar Baskoro
 
1 ppt-ajax with-j_query
Fajar Baskoro
 
Javascript inside Browser (DOM)
Vlad Mysla
 
Javascript projects Course
Laurence Svekis ✔
 
Web Components
Nikolaus Graf
 
JavaScript DOM - Dynamic interactive Code
Laurence Svekis ✔
 
JavaScript and BOM events
Jussi Pohjolainen
 

Viewers also liked (15)

PPTX
Pinned Sites IE 9 Lightup
Wes Yanaga
 
PPTX
Windows Phone 7 Unleashed Session 2
Wes Yanaga
 
PPTX
Windows Phone 7 Unleashed Session 1
Wes Yanaga
 
PDF
JungPumpen_Brochure-912010
Lisa Gabrish
 
PPTX
Presentacion profesional
Cruzcamalab
 
PDF
Ying's Portfolio 2016
Calvin Cheung
 
RTF
Reclamacion
Jake Rayo
 
PPTX
buscador ninesky
Valentin Estrada
 
PDF
Daykem
shell8bomb
 
DOCX
MONICA JANE BUEZA RESUME
Monica Jane Bueza
 
PPTX
Formación padres "scanning the word"
ciausiasmarch
 
PDF
verify24x7 (Court Monitoring System)
Ansuya Sarma
 
PPT
JAVA SCRIPT
Go4Guru
 
PDF
Brand, Innovation & Design
Thomas Stack
 
PDF
The Rise & Importance of Fintech
The Pathway Group
 
Pinned Sites IE 9 Lightup
Wes Yanaga
 
Windows Phone 7 Unleashed Session 2
Wes Yanaga
 
Windows Phone 7 Unleashed Session 1
Wes Yanaga
 
JungPumpen_Brochure-912010
Lisa Gabrish
 
Presentacion profesional
Cruzcamalab
 
Ying's Portfolio 2016
Calvin Cheung
 
Reclamacion
Jake Rayo
 
buscador ninesky
Valentin Estrada
 
Daykem
shell8bomb
 
MONICA JANE BUEZA RESUME
Monica Jane Bueza
 
Formación padres "scanning the word"
ciausiasmarch
 
verify24x7 (Court Monitoring System)
Ansuya Sarma
 
JAVA SCRIPT
Go4Guru
 
Brand, Innovation & Design
Thomas Stack
 
The Rise & Importance of Fintech
The Pathway Group
 
Ad

Similar to Introduction to java_script (20)

PPTX
unit4 wp.pptxjvlbpuvghuigv8ytg2ugvugvuygv
utsavsd11
 
PPTX
Journey To The Front End World - Part3 - The Machine
Irfan Maulana
 
PDF
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
PPTX
Learning About JavaScript (…and its little buddy, JQuery!)
Julie Meloni
 
DOC
javscript
rcc1964
 
PPTX
Javascript note for engineering notes.pptx
engineeradda55
 
PPT
lecture 6 javascript event and event handling.ppt
ULADATZ
 
PPTX
Cordova training : Day 4 - Advanced Javascript
Binu Paul
 
PDF
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
sharvaridhokte
 
KEY
Week3
Will Gaybrick
 
PDF
Java script
Yoga Raja
 
PDF
JavaScript Essentials in 1 Hour (2018)
Ahmed Ibrahim
 
PPTX
Introduction to JavaScript, functions, DOM
LikhithaBrunda
 
PPTX
Java script
bosybosy
 
PPTX
CSC PPT 12.pptx
DrRavneetSingh
 
PPTX
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
1si23bt001
 
PPTX
Coding 101: A hands-on introduction
Bohyun Kim
 
PDF
JavaScript_introduction_upload.pdf
Kongu Engineering College, Perundurai, Erode
 
PDF
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
AAFREEN SHAIKH
 
unit4 wp.pptxjvlbpuvghuigv8ytg2ugvugvuygv
utsavsd11
 
Journey To The Front End World - Part3 - The Machine
Irfan Maulana
 
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
Learning About JavaScript (…and its little buddy, JQuery!)
Julie Meloni
 
javscript
rcc1964
 
Javascript note for engineering notes.pptx
engineeradda55
 
lecture 6 javascript event and event handling.ppt
ULADATZ
 
Cordova training : Day 4 - Advanced Javascript
Binu Paul
 
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
sharvaridhokte
 
Java script
Yoga Raja
 
JavaScript Essentials in 1 Hour (2018)
Ahmed Ibrahim
 
Introduction to JavaScript, functions, DOM
LikhithaBrunda
 
Java script
bosybosy
 
CSC PPT 12.pptx
DrRavneetSingh
 
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
1si23bt001
 
Coding 101: A hands-on introduction
Bohyun Kim
 
JavaScript_introduction_upload.pdf
Kongu Engineering College, Perundurai, Erode
 
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
AAFREEN SHAIKH
 
Ad

Recently uploaded (20)

PPTX
Introduction to Indian Writing in English
Trushali Dodiya
 
PPTX
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
PDF
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
PDF
Horarios de distribución de agua en julio
pegazohn1978
 
PPTX
How to Manage Allocation Report for Manufacturing Orders in Odoo 18
Celine George
 
PDF
Characteristics, Strengths and Weaknesses of Quantitative Research.pdf
Thelma Villaflores
 
PPTX
Introduction to Biochemistry & Cellular Foundations.pptx
marvinnbustamante1
 
PDF
QNL June Edition hosted by Pragya the official Quiz Club of the University of...
Pragya - UEM Kolkata Quiz Club
 
PPTX
EDUCATIONAL MEDIA/ TEACHING AUDIO VISUAL AIDS
Sonali Gupta
 
PDF
AI-Powered-Visual-Storytelling-for-Nonprofits.pdf
TechSoup
 
PPTX
Difference between write and update in odoo 18
Celine George
 
PDF
Introduction presentation of the patentbutler tool
MIPLM
 
PPTX
Controller Request and Response in Odoo18
Celine George
 
PPTX
DIGITAL CITIZENSHIP TOPIC TLE 8 MATATAG CURRICULUM
ROBERTAUGUSTINEFRANC
 
PDF
Android Programming - Basics of Mobile App, App tools and Android Basics
Kavitha P.V
 
PDF
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
PPTX
Nitrogen rule, ring rule, mc lafferty.pptx
nbisen2001
 
PDF
Vani - The Voice of Excellence - Jul 2025 issue
Savipriya Raghavendra
 
PPTX
infertility, types,causes, impact, and management
Ritu480198
 
PDF
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
Introduction to Indian Writing in English
Trushali Dodiya
 
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
Horarios de distribución de agua en julio
pegazohn1978
 
How to Manage Allocation Report for Manufacturing Orders in Odoo 18
Celine George
 
Characteristics, Strengths and Weaknesses of Quantitative Research.pdf
Thelma Villaflores
 
Introduction to Biochemistry & Cellular Foundations.pptx
marvinnbustamante1
 
QNL June Edition hosted by Pragya the official Quiz Club of the University of...
Pragya - UEM Kolkata Quiz Club
 
EDUCATIONAL MEDIA/ TEACHING AUDIO VISUAL AIDS
Sonali Gupta
 
AI-Powered-Visual-Storytelling-for-Nonprofits.pdf
TechSoup
 
Difference between write and update in odoo 18
Celine George
 
Introduction presentation of the patentbutler tool
MIPLM
 
Controller Request and Response in Odoo18
Celine George
 
DIGITAL CITIZENSHIP TOPIC TLE 8 MATATAG CURRICULUM
ROBERTAUGUSTINEFRANC
 
Android Programming - Basics of Mobile App, App tools and Android Basics
Kavitha P.V
 
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
Nitrogen rule, ring rule, mc lafferty.pptx
nbisen2001
 
Vani - The Voice of Excellence - Jul 2025 issue
Savipriya Raghavendra
 
infertility, types,causes, impact, and management
Ritu480198
 
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 

Introduction to java_script

  • 2. A little Background ➢ JavaScript isn’t JAVA ➢ Developed by Brendan Eich at Netscape ➢ Was called LiveScript ➢ Not a compiled language ➢ Case sensitive : function oneDrive() is different from function OneDrive() www.PracticalCoding.inwww.PracticalCoding.in
  • 3. What’s in a JavaScript Program? Statements formed from tokens, operators, and identifiers placed together in an order that is meaningful to a JavaScript interpreter, which is contained in most web browsers. www.PracticalCoding.inwww.PracticalCoding.in
  • 4. Where should I write it ? ➢ <head>...</head> ➢ <body>...</body> ➢ External file included in the HTML file <html> <head> <title>A Web Page Title</title> <script type="text/javascript"> // JavaScript Goes Here </script> <script type="text/javascript" src="myscript.js"> </head> <body> <script type="text/javascript"> // JavaScript can go here too </script> </body> </html> www.PracticalCoding.inwww.PracticalCoding.in
  • 5. Comments ➢/* This is a multiline comment */ ➢// This is a single line comment www.PracticalCoding.inwww.PracticalCoding.in
  • 7. Data types ➢Numbers ➢Strings ➢Booleans ➢Null (Empty is not Null) ➢undefined ➢Objects www.PracticalCoding.inwww.PracticalCoding.in
  • 9. Strings Open firebug, type a string and explore the methods available www.PracticalCoding.inwww.PracticalCoding.in
  • 10. Date object Open firebug and explore www.PracticalCoding.inwww.PracticalCoding.in
  • 11. For loops for (var i = 0; i < 1000; i++) { //do something ) www.PracticalCoding.inwww.PracticalCoding.in
  • 12. Operators ➢ Additive operators ( +/- ) ➢ Multiplicative operators ( *, /) ➢ Bitwise operators (&,|,^,!,<<,>>,>>>) ➢ Equality operators (==,!=,===,!==) ➢ Relational operators (<,>,>=,<=,in, instanceof) ➢ Unary operators(delete,void,typeof,++,--,+,-,!,~) ➢ Assignment operators www.PracticalCoding.inwww.PracticalCoding.in
  • 13. Controlling flow with conditionals and loops ➢ if else conditional statement and ternary operations ➢ switch statement ➢ while loop and a do...while loop ➢ for loops (general, for..each and for..in) www.PracticalCoding.inwww.PracticalCoding.in
  • 14. Functions <script type="text/javascript"> function myFunction() { var firstArg = arguments[0]; var secondArg = arguments[1]; alert("firstArg is: " + firstArg); alert("secondArg is: " + secondArg); } myFunction("hello","world"); </script> www.PracticalCoding.inwww.PracticalCoding.in
  • 15. Function literal JavaScript does not require functions to be defined formally. www.PracticalCoding.inwww.PracticalCoding.in
  • 16. Objects Properties Methods and whats this ? www.PracticalCoding.inwww.PracticalCoding.in
  • 17. Arrays ➢ Creation ➢ Methods ➢ Copying arrays ➢ push() and pop() ➢ Iterating through arrays using for() Explore arrays in Firebug ! www.PracticalCoding.inwww.PracticalCoding.in
  • 18. Timers ➢ setInterval() ➢ clearInterval() ➢ setTimeout() ➢ clearTimeout() www.PracticalCoding.inwww.PracticalCoding.in
  • 19. Window object ➢ document ➢ frames ➢ history ➢ location ➢ navigator ➢ screen ➢ self/window/parent www.PracticalCoding.inwww.PracticalCoding.in
  • 20. Observing the built in properties and methods var body = document.getElementsByTagName("body")[0]; for (var prop in navigator) { var elem = document.createElement("p"); var text = document.createTextNode(prop + ": " + navigator[prop]); elem.appendChild(text); body.appendChild(elem); } Replace the ‘navigator’ with other objects to check. www.PracticalCoding.inwww.PracticalCoding.in
  • 21. Tree structure of DOM www.PracticalCoding.inwww.PracticalCoding.in
  • 23. HTML Collections ➢document.anchors (requires ‘name’) ➢document.forms ➢document.images ➢document.links(requires ‘href’) www.PracticalCoding.inwww.PracticalCoding.in
  • 24. Siblings and Children ➢ .childNodes[0] ➢ nextSibling ➢ previousSibling ➢ firstChild ➢ lastChild www.PracticalCoding.inwww.PracticalCoding.in
  • 25. Events onblur() The element lost focus (that is, it is not selected by the user). onchange() The element has either changed (for example, a user typed into a text field) or lost focus. onclick() The mouse clicked an element. ondblclick() The mouse double-clicked an element. onfocus() The element got focus. onkeydown() A keyboard key is pressed (as opposed to released) while the element has focus. onkeypress() A keyboard key is pressed while the element has focus. onkeyup() A keyboard key is released while the element has focus. onload() The element is loaded (a document, a frameset, or an image). onmousedown() A mouse button is pressed. onmousemove() The mouse is moved. onmouseout() The mouse is moved off of or away from an element. onmouseover() The mouse is over an element. onmouseup() A mouse button is released. onreset() The form element is reset, such as when a user presses a form reset button. onresize() The window’s size is changed. onselect() The text of a form element is selected. onsubmit() The form is submitted. onunload() The document or frameset is unloaded. www.PracticalCoding.inwww.PracticalCoding.in