SlideShare a Scribd company logo
2
Most read
6
Most read
8
Most read
JAVASCRIPT
What is JavaScript?
JavaScript is a programming language designed for Web pages
History

First web scripting language

Developed by Netscape and Sun

Initiated by Netscape and called LiveScript

In parallel with this, Sun was developing
Java
Why Use JavaScript?
• JavaScript enhances Web pages with dynamic
and interactive features.
• JavaScript runs in client software.
• JavaScript 1.3 works with version 4.0 browsers.
What can a JavaScript Do?

JavaScript gives HTML designers a
programming tool.

JavaScript can react to events.

Validate data.

It can be used to detect the visitor's browser

Create cookies.

Read/write/modify HTML elements
JavaScript Terminology.
JavaScript programming uses specialized
terminology.
Understanding JavaScript terms is fundamental to
understanding the script.
Objects, Properties, Methods, Events, Functions,
Values, Variables, Expressions, Operators.
Objects
 Objects refers to windows, documents,
images, tables, forms, buttons or links, etc.
 Objects should be named.
 Objects have properties that act as
modifiers.
Client-Side Script

When client makes the request, the HTML and
all scripts will be downloaded into your browser
and then the resultant HTML will be displayed
in the browser is called client-side script.
Example: JavaScript, VB-Script etc.
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first →
JavaScript Page');
</script>
</body>
</html>
Note the symbol for
line continuation
Naming Form Elements in HTML
<form name="addressform">
Name: <input
name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
Forms and JavaScript
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
Objects
Objects refers to windows, documents, images,
tables, forms, buttons or links, etc.
Objects should be named.
Objects have properties that act as modifiers.
Properties
Properties are object attributes.
Object properties are defined by using the object's
name, a period, and the property name.
e.g., background color is expressed by:
document.bgcolor .
document is the object.
bgcolor is the property.
Methods
Methods are actions applied to particular
objects. Methods are what objects can do.
e.g., document.write(”Hello World")
document is the object.
write is the method.
Functions
Functions are named statements that performs
tasks.
e.g., function doWhatever () {statement
here}
The curly braces contain the statements of the
function.
JavaScript has built-in functions, and you can
write your own.
Values
Values are bits of information.
Values types and some examples include:
Number: 1, 2, 3, etc.
String: characters enclosed in quotes.
Boolean: true or false.
Object: image, form
Function: validate, doWhatever
Variables
Variables contain values and use the equal
sign to specify their value.
Variables are created by declaration using
the var command with or without an initial
value state.
e.g. var month;
e.g. var month = April;
The HTML DOM (Document Object Model)
Finding HTML Elements
Finding HTML Elements by Id :
Example: var
x=document.getElementById("intro");
Finding HTML Elements by Tag Name:
Example: var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
Using Separate JavaScript Files.
Linking can be advantageous if many pages use
the same script.
Use the source element to link to the script file.
<script src="myjavascript.js”
language="JavaScript1.2”
type="text/javascript">
</script>
JavaScript RegExp Object
var dob_regex = /^([0-9]){2}(/){1}([0-9]){2}(/)([0-9]){4}$/; //DD/MM/YYYY
var email_regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+.)+[a-zA-Z0-9.-]{2,4}$/;
// email address
var username_regex = /^[w.-]+$/;
// allowed characters: any word . -,
( w ) represents any word character (letters, digits, and the underscore _ ),
equivalent to [a-zA-Z0-9_]
var num_regex = /^d+$/; // numeric digits only
var password_regex = /^[A-Za-zd]{6,8}$/;
// any upper/lowercase characters and digits, between 6 to 8 characters in total
var phone_regex = /^(d{3]) d{3}-d{4}$/; // (xxx) xxx-xxxx

More Related Content

What's hot (20)

PPTX
Event In JavaScript
ShahDhruv21
 
PPTX
Lab #2: Introduction to Javascript
Walid Ashraf
 
PPT
Javascript
Manav Prasad
 
PPSX
Javascript variables and datatypes
Varun C M
 
PPT
JavaScript - An Introduction
Manvendra Singh
 
PPT
Introduction to JavaScript
Andres Baravalle
 
PPTX
ReactJS presentation.pptx
DivyanshGupta922023
 
PPT
Introduction to Javascript
Amit Tyagi
 
PDF
jQuery for beginners
Arulmurugan Rajaraman
 
PPT
SQLITE Android
Sourabh Sahu
 
PPTX
Javascript 101
Shlomi Komemi
 
PDF
JavaScript - Chapter 11 - Events
WebStackAcademy
 
PDF
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
PPTX
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
 
PPT
Mvc architecture
Surbhi Panhalkar
 
PDF
Introduction to HTML5
Gil Fink
 
PPT
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
PPTX
Bootstrap PPT by Mukesh
Mukesh Kumar
 
PPTX
HTML Forms
Ravinder Kamboj
 
PPT
Introduction to html
vikasgaur31
 
Event In JavaScript
ShahDhruv21
 
Lab #2: Introduction to Javascript
Walid Ashraf
 
Javascript
Manav Prasad
 
Javascript variables and datatypes
Varun C M
 
JavaScript - An Introduction
Manvendra Singh
 
Introduction to JavaScript
Andres Baravalle
 
ReactJS presentation.pptx
DivyanshGupta922023
 
Introduction to Javascript
Amit Tyagi
 
jQuery for beginners
Arulmurugan Rajaraman
 
SQLITE Android
Sourabh Sahu
 
Javascript 101
Shlomi Komemi
 
JavaScript - Chapter 11 - Events
WebStackAcademy
 
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
 
Mvc architecture
Surbhi Panhalkar
 
Introduction to HTML5
Gil Fink
 
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Bootstrap PPT by Mukesh
Mukesh Kumar
 
HTML Forms
Ravinder Kamboj
 
Introduction to html
vikasgaur31
 

Viewers also liked (12)

PPTX
Js coding standards
simonKenyonShepard
 
PPTX
Software development best practices & coding guidelines
Ankur Goyal
 
PPS
Xhtml
Samir Sabry
 
PDF
Introduction to XHTML
Hend Al-Khalifa
 
PPTX
Dhtml
Sadhana28
 
PPTX
Dhtml
rahul kundu
 
PPT
Dynamic HTML
Vinil Patel
 
PPTX
JSON: The Basics
Jeff Fox
 
PPTX
Dynamic HTML (DHTML)
Himanshu Kumar
 
Js coding standards
simonKenyonShepard
 
Software development best practices & coding guidelines
Ankur Goyal
 
Introduction to XHTML
Hend Al-Khalifa
 
Dhtml
Sadhana28
 
Dynamic HTML
Vinil Patel
 
JSON: The Basics
Jeff Fox
 
Dynamic HTML (DHTML)
Himanshu Kumar
 
Ad

Similar to Js ppt (20)

PPTX
javaScript and jQuery
Mehrab Hossain
 
PPTX
Javascript
Mozxai
 
PPT
JavaScript & Dom Manipulation
Mohammed Arif
 
PPTX
JavaScript_III.pptx
rashmiisrani1
 
PPS
Advisor Jumpstart: JavaScript
dominion
 
PDF
JavaScript Getting Started
Hazem Hagrass
 
PPTX
Java script
Jay Patel
 
PPTX
JavaScript with Syntax & Implementation
Soumen Santra
 
PDF
8.-Javascript-report powerpoint presentation
JohnLagman3
 
PPTX
Javascript
D V BHASKAR REDDY
 
PDF
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
sharvaridhokte
 
PPTX
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
PPTX
Java script
Sukrit Gupta
 
PPTX
Lecture 5 javascript
Mujtaba Haider
 
PPT
Javascript tutorial
Avinash Malhotra
 
PPT
JavaScript Workshop
Pamela Fox
 
PPTX
Java Script basics and DOM
Sukrit Gupta
 
PPTX
04-JS.pptx
RazanMazen4
 
PPTX
04-JS.pptx
RazanMazen4
 
PPTX
04-JS.pptx
RazanMazen4
 
javaScript and jQuery
Mehrab Hossain
 
Javascript
Mozxai
 
JavaScript & Dom Manipulation
Mohammed Arif
 
JavaScript_III.pptx
rashmiisrani1
 
Advisor Jumpstart: JavaScript
dominion
 
JavaScript Getting Started
Hazem Hagrass
 
Java script
Jay Patel
 
JavaScript with Syntax & Implementation
Soumen Santra
 
8.-Javascript-report powerpoint presentation
JohnLagman3
 
Javascript
D V BHASKAR REDDY
 
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
sharvaridhokte
 
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
Java script
Sukrit Gupta
 
Lecture 5 javascript
Mujtaba Haider
 
Javascript tutorial
Avinash Malhotra
 
JavaScript Workshop
Pamela Fox
 
Java Script basics and DOM
Sukrit Gupta
 
04-JS.pptx
RazanMazen4
 
04-JS.pptx
RazanMazen4
 
04-JS.pptx
RazanMazen4
 
Ad

Recently uploaded (20)

PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PDF
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
PDF
Bitkom eIDAS Summit | European Business Wallet: Use Cases, Macroeconomics, an...
Carsten Stoecker
 
PDF
GDG Cloud Southlake #44: Eyal Bukchin: Tightening the Kubernetes Feedback Loo...
James Anderson
 
PPTX
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
PDF
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
PPTX
Practical Applications of AI in Local Government
OnBoard
 
PDF
Quantum Threats Are Closer Than You Think – Act Now to Stay Secure
WSO2
 
PDF
Pipeline Industry IoT - Real Time Data Monitoring
Safe Software
 
PDF
Proactive Server and System Monitoring with FME: Using HTTP and System Caller...
Safe Software
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
PDF
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
PDF
FME as an Orchestration Tool with Principles From Data Gravity
Safe Software
 
PDF
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
PPTX
CapCut Pro PC Crack Latest Version Free Free
josanj305
 
PDF
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
PPTX
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
Kubernetes - Architecture & Components.pdf
geethak285
 
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
Bitkom eIDAS Summit | European Business Wallet: Use Cases, Macroeconomics, an...
Carsten Stoecker
 
GDG Cloud Southlake #44: Eyal Bukchin: Tightening the Kubernetes Feedback Loo...
James Anderson
 
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
Practical Applications of AI in Local Government
OnBoard
 
Quantum Threats Are Closer Than You Think – Act Now to Stay Secure
WSO2
 
Pipeline Industry IoT - Real Time Data Monitoring
Safe Software
 
Proactive Server and System Monitoring with FME: Using HTTP and System Caller...
Safe Software
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
FME as an Orchestration Tool with Principles From Data Gravity
Safe Software
 
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
CapCut Pro PC Crack Latest Version Free Free
josanj305
 
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 

Js ppt

  • 1. JAVASCRIPT What is JavaScript? JavaScript is a programming language designed for Web pages
  • 2. History  First web scripting language  Developed by Netscape and Sun  Initiated by Netscape and called LiveScript  In parallel with this, Sun was developing Java
  • 3. Why Use JavaScript? • JavaScript enhances Web pages with dynamic and interactive features. • JavaScript runs in client software. • JavaScript 1.3 works with version 4.0 browsers.
  • 4. What can a JavaScript Do?  JavaScript gives HTML designers a programming tool.  JavaScript can react to events.  Validate data.  It can be used to detect the visitor's browser  Create cookies.  Read/write/modify HTML elements
  • 5. JavaScript Terminology. JavaScript programming uses specialized terminology. Understanding JavaScript terms is fundamental to understanding the script. Objects, Properties, Methods, Events, Functions, Values, Variables, Expressions, Operators.
  • 6. Objects  Objects refers to windows, documents, images, tables, forms, buttons or links, etc.  Objects should be named.  Objects have properties that act as modifiers.
  • 7. Client-Side Script  When client makes the request, the HTML and all scripts will be downloaded into your browser and then the resultant HTML will be displayed in the browser is called client-side script. Example: JavaScript, VB-Script etc.
  • 8. JavaScript Statements <html> <head><title>My Page</title></head> <body> <script language="JavaScript"> document.write('This is my first → JavaScript Page'); </script> </body> </html> Note the symbol for line continuation
  • 9. Naming Form Elements in HTML <form name="addressform"> Name: <input name="yourname"><br /> Phone: <input name="phone"><br /> Email: <input name="email"><br /> </form>
  • 11. Objects Objects refers to windows, documents, images, tables, forms, buttons or links, etc. Objects should be named. Objects have properties that act as modifiers.
  • 12. Properties Properties are object attributes. Object properties are defined by using the object's name, a period, and the property name. e.g., background color is expressed by: document.bgcolor . document is the object. bgcolor is the property.
  • 13. Methods Methods are actions applied to particular objects. Methods are what objects can do. e.g., document.write(”Hello World") document is the object. write is the method.
  • 14. Functions Functions are named statements that performs tasks. e.g., function doWhatever () {statement here} The curly braces contain the statements of the function. JavaScript has built-in functions, and you can write your own.
  • 15. Values Values are bits of information. Values types and some examples include: Number: 1, 2, 3, etc. String: characters enclosed in quotes. Boolean: true or false. Object: image, form Function: validate, doWhatever
  • 16. Variables Variables contain values and use the equal sign to specify their value. Variables are created by declaration using the var command with or without an initial value state. e.g. var month; e.g. var month = April;
  • 17. The HTML DOM (Document Object Model)
  • 18. Finding HTML Elements Finding HTML Elements by Id : Example: var x=document.getElementById("intro"); Finding HTML Elements by Tag Name: Example: var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
  • 19. Using Separate JavaScript Files. Linking can be advantageous if many pages use the same script. Use the source element to link to the script file. <script src="myjavascript.js” language="JavaScript1.2” type="text/javascript"> </script>
  • 20. JavaScript RegExp Object var dob_regex = /^([0-9]){2}(/){1}([0-9]){2}(/)([0-9]){4}$/; //DD/MM/YYYY var email_regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+.)+[a-zA-Z0-9.-]{2,4}$/; // email address var username_regex = /^[w.-]+$/; // allowed characters: any word . -, ( w ) represents any word character (letters, digits, and the underscore _ ), equivalent to [a-zA-Z0-9_] var num_regex = /^d+$/; // numeric digits only var password_regex = /^[A-Za-zd]{6,8}$/; // any upper/lowercase characters and digits, between 6 to 8 characters in total var phone_regex = /^(d{3]) d{3}-d{4}$/; // (xxx) xxx-xxxx

Editor's Notes

  • #9: JavaScript can be contained either in the header section of an HTML page or in the body. This JavaScript statement is shown as a pure JavaScript statement within SCRIPT tags. Notice that there is no HTML in the body of this page at all. (Demonstrate what this JavaScript looks like in a web browser). This statement writes a line of text on a web page. The command document.write is a standard function in JavaScript to write text to the page. The following is a more technical explanation for background information only: document.write is derived from the JavaScript object model (not covered in detail here). It works on the principle that all document and browser elements have an object name (document, window, image etc) and can each has various properties that can be manipulated. The object hierarchy means that individual elements can be uniquely identified i.e. document.myform.mytext would refer to the text entry named mytext within the form called myform within the current page (document). The arrow symbol &apos;  &apos; is used in these slides and in the workbook to indicate where a JavaScript statement should be typed on one line without a break. A line break in the wrong place will stop JavaScript from working.e.g. document.write(&apos;This is my first  JavaScript Page&apos;); should actually be typed: document.write(&apos;This is my first JavaScript Page&apos;);
  • #10: This example shows a simple form. Notice the name attribute is used at all points - to name the form, and to name each element within the form. How JavaScript uses the name attribute is described next.
  • #11: To refer to the value that a user has typed in a text box, you use the following naming system: document.formname.elementname.value This is a naming convention derived from the JavaScript object model: document refers to the page displayed in the browser. formname is supplied by the page author as the name attribute of the &lt;form&gt; tag - in the example it is addressform and refers to the whole form. elementname is supplied by the page author using the name attribute of the &lt;input&gt; tag. value is a predefined term which refers to the text typed in by the user.