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

What's hot (20)

PPTX
Java script
Abhishek Kesharwani
 
PPTX
Lab #2: Introduction to Javascript
Walid Ashraf
 
PPTX
Java script
Shyam Khant
 
PDF
Javascript basics
shreesenthil
 
PPT
JavaScript Tutorial
Bui Kiet
 
PDF
Basics of JavaScript
Bala Narayanan
 
PDF
3. Java Script
Jalpesh Vasa
 
PPT
javaScript.ppt
sentayehu
 
PPT
Introduction to Javascript
Amit Tyagi
 
PPTX
Loops in java script
Ravi Bhadauria
 
PDF
Introduction to HTML5
Gil Fink
 
PDF
Javascript
Vibhor Grover
 
PPT
JavaScript: Events Handling
Yuriy Bezgachnyuk
 
PPTX
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
 
PPSX
Javascript variables and datatypes
Varun C M
 
PPT
Javascript
Manav Prasad
 
PPTX
HTML/CSS/java Script/Jquery
FAKHRUN NISHA
 
PPSX
HTML5 - Forms
tina1357
 
PPT
JavaScript - An Introduction
Manvendra Singh
 
Java script
Abhishek Kesharwani
 
Lab #2: Introduction to Javascript
Walid Ashraf
 
Java script
Shyam Khant
 
Javascript basics
shreesenthil
 
JavaScript Tutorial
Bui Kiet
 
Basics of JavaScript
Bala Narayanan
 
3. Java Script
Jalpesh Vasa
 
javaScript.ppt
sentayehu
 
Introduction to Javascript
Amit Tyagi
 
Loops in java script
Ravi Bhadauria
 
Introduction to HTML5
Gil Fink
 
Javascript
Vibhor Grover
 
JavaScript: Events Handling
Yuriy Bezgachnyuk
 
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
 
Javascript variables and datatypes
Varun C M
 
Javascript
Manav Prasad
 
HTML/CSS/java Script/Jquery
FAKHRUN NISHA
 
HTML5 - Forms
tina1357
 
JavaScript - An Introduction
Manvendra Singh
 

Similar to JavaScript (20)

PPT
Easy javascript
Bui Kiet
 
PPT
Learn javascript easy steps
prince Loffar
 
PPT
INTRO TO JAVASCRIPT basic to adcance.ppt
testvarun21
 
PPTX
Going Offline with JS
brendankowitz
 
PDF
JavaScript DOM & event
Borey Lim
 
PDF
Intro JavaScript
koppenolski
 
PDF
JavaScript and BOM events
Jussi Pohjolainen
 
PPTX
JS & NodeJS - An Introduction
Nirvanic Labs
 
PPTX
Going offline with JS (DDD Sydney)
brendankowitz
 
PDF
Front end for back end developers
Wojciech Bednarski
 
PDF
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
brucelawson
 
PDF
Masterin Large Scale Java Script Applications
Fabian Jakobs
 
PPTX
An overview of JavaScript
Poluru S
 
PPTX
Introduction to Jquery
Gurpreet singh
 
PPTX
Windows 8 DevUnleashed - Session 1
drudolph11
 
PPTX
Introduction to JavaScript, functions, DOM
LikhithaBrunda
 
PPTX
node_js.pptx
dipen55
 
PPTX
Learning About JavaScript (…and its little buddy, JQuery!)
Julie Meloni
 
PDF
Introduction to JavaScript
Jussi Pohjolainen
 
PPTX
Javascript
Mozxai
 
Easy javascript
Bui Kiet
 
Learn javascript easy steps
prince Loffar
 
INTRO TO JAVASCRIPT basic to adcance.ppt
testvarun21
 
Going Offline with JS
brendankowitz
 
JavaScript DOM & event
Borey Lim
 
Intro JavaScript
koppenolski
 
JavaScript and BOM events
Jussi Pohjolainen
 
JS & NodeJS - An Introduction
Nirvanic Labs
 
Going offline with JS (DDD Sydney)
brendankowitz
 
Front end for back end developers
Wojciech Bednarski
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
brucelawson
 
Masterin Large Scale Java Script Applications
Fabian Jakobs
 
An overview of JavaScript
Poluru S
 
Introduction to Jquery
Gurpreet singh
 
Windows 8 DevUnleashed - Session 1
drudolph11
 
Introduction to JavaScript, functions, DOM
LikhithaBrunda
 
node_js.pptx
dipen55
 
Learning About JavaScript (…and its little buddy, JQuery!)
Julie Meloni
 
Introduction to JavaScript
Jussi Pohjolainen
 
Javascript
Mozxai
 
Ad

Recently uploaded (20)

PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
Digital Circuits, important subject in CS
contactparinay1
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Ad

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