SlideShare a Scribd company logo
2
Most read
7
Most read
9
Most read
JavaScript
- Vidyut Singhania
Wha’ ?
• JavaScript
• Scripting language of
the Web
Why
..?
• 1. HTML – Define
CONTENT of WP
• 2. CSS – Specify LAYOUT of
WP
• 3. JS – Specify the
BEHAVIOR of WP
Who
gives ?!
• YOU should!
• This single language forms
the basis for various other
languages – AJAX, JSON for
eg!
Speaking in English
Extremely
popular &
widespread
Scripting
Lang. for PC
Primarily
used for
Client-side
Scripting
Highly
used in
Web
Browsers
JS
• Built by Brendan Eich of Mozilla fame.
• Though originally called “Mocha”, it was shipped
as JavaScript when deployed on NetScape.
• It is a cross-platform, OO scripting language.
• Enable dynamic WPs through user interaction
and on-screen special effects.
• Provides Server-Side (MongoDB/Node.js) &
Client-Side Scripting (rollover, alert)
• P.S. NOT THE SAME AS JAVA!
Types of JS
Types of JS
Client Side
Scripting
Supplies objects to
control the browser
& its DOM
Allow apps to place
elements on HTML
form & respond to
user events
Server Side
Scripting
Allow app to
communicate with RDB
or perform file
manipulation on server.
Share info across users
of an app or connect
with other apps using
LiveConnect & Java.
Components of JS
JS Tags Description
<script> & </script> Only JS statements b/w these tags
<script src=“myScript.js”></script> Using/Importing external JS files
var price = 10 || var name=“Smith” Declare variables using keyword ‘ var ‘
alert(“msg”) || confirm(“msg”) ||
prompt(“msg”)
Inbuilt functions in JS
function showAlert(“msg”)
{
alert(“msg")
}
User defined functions in JS
objName || objName.propName ||
objName.methodName()
Refer to an object, property of obj & method
of obj respectively
Math – provides for math calculations
Date – provides date & time info
String – provides for string manipulation
Some of the built-in language objects of JS
Document Object
• The Document object represents the Web page
that is loaded in the browser window, and the
content displayed on that page, including text
and form elements.
• Document Methods
– You can use the methods of the document object to
work on a Web page.
– Here are the most common document methods:
• • write() - write a string to the Web page
• • open() - opens a new document
• • close() - closes the document
Formatting What is Written
• Document Properties
– • bgColor
– • fgColor
– • linkColor
– • vlinkColor
– • title
– • lastModified
DOM formatted Example
<SCRIPT language="JavaScript">
function newPage() {
var userName = prompt("Please enter your name:","")
document.write("<H1>Welcome " + userName +
"</H1><BR>")
document.write("<H2>to your new home page.</H2>")
}
</SCRIPT>
Window Object
• The window object represents the browser window.
• There are only two main window properties. They are:
– • status - set the status bar message
– • self - stores the name mof the current window
• Window Methods
• The window methods are mainly for opening and closing new
windows.
• The following are the main window methods. They are:
– • alert() - to display a message box
– • confirm() - to display a confirmation box
– • prompt() - to display a prompt box
– • open() - to open a new window
– • close() - to close a window
Window Attributes
• If the default new window does not suit your needs,
you can specify different features of the window when
you open it. The complete syntax of the
"window.open" is as follow:
– window.open(URL, windowName, featureList)
• By default, if you do not specify any features, then a
window will have all of them. The following are the
window attributes:
– • toolbar
– • menubar
– • scrollbars
– • resizeable
– • status
– • location
– • directories
Events
• some of the most common events:
– • onLoad - occurs when a page loads in a browser
– • onUnload - occurs just before the user exits a
page
– • onMouseOver - occurs when you point to an
object
– • onMouseOut - occurs when you point away
from an object
– • onSubmit - occurs when you submit a form
– • onClick - occurs when an object is clicked
Advantages Disadvantages
JavaScript

More Related Content

PPTX
Presentation of bootstrap
PPT
DJango
PPTX
Cyber crime ppt
PPTX
Input output statement in C
PPT
Javascript
PDF
Flexbox and Grid Layout
PDF
ChatGPT and the Future of Work - Clark Boyd
PPTX
Automation Testing
Presentation of bootstrap
DJango
Cyber crime ppt
Input output statement in C
Javascript
Flexbox and Grid Layout
ChatGPT and the Future of Work - Clark Boyd
Automation Testing

What's hot (20)

PPTX
Lab #2: Introduction to Javascript
PPTX
PPTX
Html5 and-css3-overview
PDF
Intro to HTML and CSS basics
PPT
Introduction to BOOTSTRAP
PPTX
Dom(document object model)
PPT
JavaScript Tutorial
PDF
Basics of JavaScript
PPSX
Introduction to Html5
PPT
JavaScript Basics
PDF
Basic Details of HTML and CSS.pdf
PPTX
Event In JavaScript
PDF
PPTX
PPTX
Java script
PPTX
Javascript 101
PPTX
Flex box
PPTX
PPTX
An Introduction to the DOM
Lab #2: Introduction to Javascript
Html5 and-css3-overview
Intro to HTML and CSS basics
Introduction to BOOTSTRAP
Dom(document object model)
JavaScript Tutorial
Basics of JavaScript
Introduction to Html5
JavaScript Basics
Basic Details of HTML and CSS.pdf
Event In JavaScript
Java script
Javascript 101
Flex box
An Introduction to the DOM
Ad

Similar to JavaScript (20)

PPT
Easy javascript
PPT
Learn javascript easy steps
PPT
INTRO TO JAVASCRIPT basic to adcance.ppt
PPTX
Going Offline with JS
PDF
JavaScript DOM & event
PDF
Intro JavaScript
PDF
JavaScript and BOM events
PPTX
JS & NodeJS - An Introduction
PPTX
Going offline with JS (DDD Sydney)
PDF
Front end for back end developers
PDF
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
PDF
Masterin Large Scale Java Script Applications
PPTX
An overview of JavaScript
PPTX
Introduction to Jquery
PPTX
Windows 8 DevUnleashed - Session 1
PPTX
Introduction to JavaScript, functions, DOM
PPTX
node_js.pptx
PPTX
Learning About JavaScript (…and its little buddy, JQuery!)
PDF
Introduction to JavaScript
PPTX
Javascript
Easy javascript
Learn javascript easy steps
INTRO TO JAVASCRIPT basic to adcance.ppt
Going Offline with JS
JavaScript DOM & event
Intro JavaScript
JavaScript and BOM events
JS & NodeJS - An Introduction
Going offline with JS (DDD Sydney)
Front end for back end developers
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Masterin Large Scale Java Script Applications
An overview of JavaScript
Introduction to Jquery
Windows 8 DevUnleashed - Session 1
Introduction to JavaScript, functions, DOM
node_js.pptx
Learning About JavaScript (…and its little buddy, JQuery!)
Introduction to JavaScript
Javascript
Ad

Recently uploaded (20)

PPTX
Cloud computing and distributed systems.
PPTX
MYSQL Presentation for SQL database connectivity
PDF
HCSP-Presales-Campus Network Planning and Design V1.0 Training Material-Witho...
PDF
Transforming Manufacturing operations through Intelligent Integrations
PDF
madgavkar20181017ppt McKinsey Presentation.pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Modernizing your data center with Dell and AMD
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Chapter 2 Digital Image Fundamentals.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Advanced IT Governance
PPT
Teaching material agriculture food technology
PDF
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
PDF
Empathic Computing: Creating Shared Understanding
PDF
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Cloud computing and distributed systems.
MYSQL Presentation for SQL database connectivity
HCSP-Presales-Campus Network Planning and Design V1.0 Training Material-Witho...
Transforming Manufacturing operations through Intelligent Integrations
madgavkar20181017ppt McKinsey Presentation.pdf
20250228 LYD VKU AI Blended-Learning.pptx
Modernizing your data center with Dell and AMD
Reach Out and Touch Someone: Haptics and Empathic Computing
Chapter 2 Digital Image Fundamentals.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Diabetes mellitus diagnosis method based random forest with bat algorithm
Chapter 3 Spatial Domain Image Processing.pdf
Advanced IT Governance
Teaching material agriculture food technology
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
Empathic Computing: Creating Shared Understanding
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows

JavaScript

  • 2. Wha’ ? • JavaScript • Scripting language of the Web Why ..? • 1. HTML – Define CONTENT of WP • 2. CSS – Specify LAYOUT of WP • 3. JS – Specify the BEHAVIOR of WP Who gives ?! • YOU should! • This single language forms the basis for various other languages – AJAX, JSON for eg!
  • 3. Speaking in English Extremely popular & widespread Scripting Lang. for PC Primarily used for Client-side Scripting Highly used in Web Browsers
  • 4. JS • Built by Brendan Eich of Mozilla fame. • Though originally called “Mocha”, it was shipped as JavaScript when deployed on NetScape. • It is a cross-platform, OO scripting language. • Enable dynamic WPs through user interaction and on-screen special effects. • Provides Server-Side (MongoDB/Node.js) & Client-Side Scripting (rollover, alert) • P.S. NOT THE SAME AS JAVA!
  • 5. Types of JS Types of JS Client Side Scripting Supplies objects to control the browser & its DOM Allow apps to place elements on HTML form & respond to user events Server Side Scripting Allow app to communicate with RDB or perform file manipulation on server. Share info across users of an app or connect with other apps using LiveConnect & Java.
  • 7. JS Tags Description <script> & </script> Only JS statements b/w these tags <script src=“myScript.js”></script> Using/Importing external JS files var price = 10 || var name=“Smith” Declare variables using keyword ‘ var ‘ alert(“msg”) || confirm(“msg”) || prompt(“msg”) Inbuilt functions in JS function showAlert(“msg”) { alert(“msg") } User defined functions in JS objName || objName.propName || objName.methodName() Refer to an object, property of obj & method of obj respectively Math – provides for math calculations Date – provides date & time info String – provides for string manipulation Some of the built-in language objects of JS
  • 8. Document Object • The Document object represents the Web page that is loaded in the browser window, and the content displayed on that page, including text and form elements. • Document Methods – You can use the methods of the document object to work on a Web page. – Here are the most common document methods: • • write() - write a string to the Web page • • open() - opens a new document • • close() - closes the document
  • 9. Formatting What is Written • Document Properties – • bgColor – • fgColor – • linkColor – • vlinkColor – • title – • lastModified
  • 10. DOM formatted Example <SCRIPT language="JavaScript"> function newPage() { var userName = prompt("Please enter your name:","") document.write("<H1>Welcome " + userName + "</H1><BR>") document.write("<H2>to your new home page.</H2>") } </SCRIPT>
  • 11. Window Object • The window object represents the browser window. • There are only two main window properties. They are: – • status - set the status bar message – • self - stores the name mof the current window • Window Methods • The window methods are mainly for opening and closing new windows. • The following are the main window methods. They are: – • alert() - to display a message box – • confirm() - to display a confirmation box – • prompt() - to display a prompt box – • open() - to open a new window – • close() - to close a window
  • 12. Window Attributes • If the default new window does not suit your needs, you can specify different features of the window when you open it. The complete syntax of the "window.open" is as follow: – window.open(URL, windowName, featureList) • By default, if you do not specify any features, then a window will have all of them. The following are the window attributes: – • toolbar – • menubar – • scrollbars – • resizeable – • status – • location – • directories
  • 13. Events • some of the most common events: – • onLoad - occurs when a page loads in a browser – • onUnload - occurs just before the user exits a page – • onMouseOver - occurs when you point to an object – • onMouseOut - occurs when you point away from an object – • onSubmit - occurs when you submit a form – • onClick - occurs when an object is clicked

Editor's Notes

  • #3: All modern HTML pages are using JavaScript