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

PDF
JAVA SCRIPT
PPTX
Java script
PPT
JavaScript Missing Manual, Ch. 1
PPT
Java script programs
PDF
JavaScript Jump Start 20220214
PPT
Java script
PPT
Java script
PPT
Java Script
JAVA SCRIPT
Java script
JavaScript Missing Manual, Ch. 1
Java script programs
JavaScript Jump Start 20220214
Java script
Java script
Java Script

What's hot (20)

PPTX
Introduction to Java Script
DOC
Java script by Act Academy
PPT
JavaScript
PPTX
Java Script
PDF
22 j query1
PDF
10 java script projects full source code
PDF
Node.js Crash Course (Jump Start)
PPTX
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
PDF
Interacting with the DOM (JavaScript)
PDF
Introduction to html & css
PPT
JavaScript & Dom Manipulation
PPTX
Java script writing javascript
PPTX
Java script session 3
PPT
Java script
PDF
1 ppt-ajax with-j_query
PPTX
Javascript inside Browser (DOM)
PDF
Javascript projects Course
PDF
Web Components
PPTX
JavaScript DOM - Dynamic interactive Code
PDF
JavaScript and BOM events
Introduction to Java Script
Java script by Act Academy
JavaScript
Java Script
22 j query1
10 java script projects full source code
Node.js Crash Course (Jump Start)
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Interacting with the DOM (JavaScript)
Introduction to html & css
JavaScript & Dom Manipulation
Java script writing javascript
Java script session 3
Java script
1 ppt-ajax with-j_query
Javascript inside Browser (DOM)
Javascript projects Course
Web Components
JavaScript DOM - Dynamic interactive Code
JavaScript and BOM events
Ad

Viewers also liked (15)

PPTX
Pinned Sites IE 9 Lightup
PPTX
Windows Phone 7 Unleashed Session 2
PPTX
Windows Phone 7 Unleashed Session 1
PDF
JungPumpen_Brochure-912010
PPTX
Presentacion profesional
PDF
Ying's Portfolio 2016
RTF
Reclamacion
PPTX
buscador ninesky
PDF
Daykem
DOCX
MONICA JANE BUEZA RESUME
PPTX
Formación padres "scanning the word"
PDF
verify24x7 (Court Monitoring System)
PPT
JAVA SCRIPT
PDF
Brand, Innovation & Design
PDF
The Rise & Importance of Fintech
Pinned Sites IE 9 Lightup
Windows Phone 7 Unleashed Session 2
Windows Phone 7 Unleashed Session 1
JungPumpen_Brochure-912010
Presentacion profesional
Ying's Portfolio 2016
Reclamacion
buscador ninesky
Daykem
MONICA JANE BUEZA RESUME
Formación padres "scanning the word"
verify24x7 (Court Monitoring System)
JAVA SCRIPT
Brand, Innovation & Design
The Rise & Importance of Fintech
Ad

Similar to Introduction to java_script (20)

PPTX
Internet protocol second unit IIPPT.pptx
PPTX
Lecture 5: Client Side Programming 1
PDF
bcgr3-jquery
PDF
bcgr3-jquery
PPTX
JavaScript performance patterns
PPTX
Jquery Basics
PDF
Resource Registries: Plone Conference 2014
PDF
Resource registries plone conf 2014
PDF
Into The Box 2018 Going live with commandbox and docker
PDF
Going live with BommandBox and docker Into The Box 2018
KEY
前端概述
PPTX
SharePoint Cincy 2012 - jQuery essentials
PDF
GDG İstanbul Şubat Etkinliği - Sunum
PPT
JavaScript Misunderstood
PPT
Sanjeev ghai 12
PDF
Having Fun with Play
KEY
[Coscup 2012] JavascriptMVC
PDF
Introducing jQuery
PDF
The Road to Native Web Components
PDF
Michael North "The Road to Native Web Components"
Internet protocol second unit IIPPT.pptx
Lecture 5: Client Side Programming 1
bcgr3-jquery
bcgr3-jquery
JavaScript performance patterns
Jquery Basics
Resource Registries: Plone Conference 2014
Resource registries plone conf 2014
Into The Box 2018 Going live with commandbox and docker
Going live with BommandBox and docker Into The Box 2018
前端概述
SharePoint Cincy 2012 - jQuery essentials
GDG İstanbul Şubat Etkinliği - Sunum
JavaScript Misunderstood
Sanjeev ghai 12
Having Fun with Play
[Coscup 2012] JavascriptMVC
Introducing jQuery
The Road to Native Web Components
Michael North "The Road to Native Web Components"

Recently uploaded (20)

PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
Microbial disease of the cardiovascular and lymphatic systems
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
RMMM.pdf make it easy to upload and study
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PPTX
202450812 BayCHI UCSC-SV 20250812 v17.pptx
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
Classroom Observation Tools for Teachers
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PDF
Chinmaya Tiranga quiz Grand Finale.pdf
PPTX
Introduction-to-Literarature-and-Literary-Studies-week-Prelim-coverage.pptx
PPTX
Pharma ospi slides which help in ospi learning
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PPTX
GDM (1) (1).pptx small presentation for students
PPTX
Cell Types and Its function , kingdom of life
Final Presentation General Medicine 03-08-2024.pptx
O7-L3 Supply Chain Operations - ICLT Program
Microbial disease of the cardiovascular and lymphatic systems
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
RMMM.pdf make it easy to upload and study
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Supply Chain Operations Speaking Notes -ICLT Program
202450812 BayCHI UCSC-SV 20250812 v17.pptx
STATICS OF THE RIGID BODIES Hibbelers.pdf
Classroom Observation Tools for Teachers
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
102 student loan defaulters named and shamed – Is someone you know on the list?
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Chinmaya Tiranga quiz Grand Finale.pdf
Introduction-to-Literarature-and-Literary-Studies-week-Prelim-coverage.pptx
Pharma ospi slides which help in ospi learning
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
GDM (1) (1).pptx small presentation for students
Cell Types and Its function , kingdom of life

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