SlideShare ist ein Scribd-Unternehmen logo
1 von 20
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

Weitere ähnliche Inhalte

Was ist angesagt? (20)

JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Java script
Java scriptJava script
Java script
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Java script
Java scriptJava script
Java script
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Javascript essentials
Javascript essentialsJavascript essentials
Javascript essentials
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
 
Functions in javascript
Functions in javascriptFunctions in javascript
Functions in javascript
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 

Andere mochten auch

Andere mochten auch (11)

Js coding standards
Js coding standardsJs coding standards
Js coding standards
 
Software development best practices & coding guidelines
Software development best practices & coding guidelinesSoftware development best practices & coding guidelines
Software development best practices & coding guidelines
 
Xhtml
XhtmlXhtml
Xhtml
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
Dhtml
DhtmlDhtml
Dhtml
 
Dhtml
DhtmlDhtml
Dhtml
 
Dynamic HTML
Dynamic HTMLDynamic HTML
Dynamic HTML
 
XHTML
XHTMLXHTML
XHTML
 
JSON: The Basics
JSON: The BasicsJSON: The Basics
JSON: The Basics
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
 
Json
JsonJson
Json
 

Ähnlich wie Js ppt

HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTHSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTAAFREEN SHAIKH
 
Javascript
JavascriptJavascript
JavascriptMozxai
 
JavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationJavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationSoumen Santra
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)Shrijan Tiwari
 
Basics java scripts
Basics java scriptsBasics java scripts
Basics java scriptsch samaram
 
JavaScript: Implementations And Applications
JavaScript: Implementations And ApplicationsJavaScript: Implementations And Applications
JavaScript: Implementations And ApplicationsPragya Pai
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Sopheak Sem
 
Web designing unit 4
Web designing unit 4Web designing unit 4
Web designing unit 4SURBHI SAROHA
 
Java Script - A New Look
Java Script - A New LookJava Script - A New Look
Java Script - A New Lookrumsan
 
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxUnderstanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxMariaTrinidadTumanga
 
MTA understanding java script and coding essentials
MTA understanding java script and coding essentialsMTA understanding java script and coding essentials
MTA understanding java script and coding essentialsDhairya Joshi
 
INTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMINGINTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMINGProf Ansari
 
Cordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptCordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptBinu Paul
 
Basic Java script handouts for students
Basic Java script handouts for students Basic Java script handouts for students
Basic Java script handouts for students shafiq sangi
 

Ähnlich wie Js ppt (20)

HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTHSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
 
Java script
Java scriptJava script
Java script
 
JS basics
JS basicsJS basics
JS basics
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationJavaScript with Syntax & Implementation
JavaScript with Syntax & Implementation
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)
 
Javascript analysis
Javascript analysisJavascript analysis
Javascript analysis
 
Basics java scripts
Basics java scriptsBasics java scripts
Basics java scripts
 
JavaScript: Implementations And Applications
JavaScript: Implementations And ApplicationsJavaScript: Implementations And Applications
JavaScript: Implementations And Applications
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
 
Web designing unit 4
Web designing unit 4Web designing unit 4
Web designing unit 4
 
Java Script - A New Look
Java Script - A New LookJava Script - A New Look
Java Script - A New Look
 
chap04.ppt
chap04.pptchap04.ppt
chap04.ppt
 
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxUnderstanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptx
 
CSC PPT 12.pptx
CSC PPT 12.pptxCSC PPT 12.pptx
CSC PPT 12.pptx
 
MTA understanding java script and coding essentials
MTA understanding java script and coding essentialsMTA understanding java script and coding essentials
MTA understanding java script and coding essentials
 
INTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMINGINTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMING
 
Lect35 javascript
Lect35 javascriptLect35 javascript
Lect35 javascript
 
Cordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptCordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced Javascript
 
Basic Java script handouts for students
Basic Java script handouts for students Basic Java script handouts for students
Basic Java script handouts for students
 

Kürzlich hochgeladen

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 

Kürzlich hochgeladen (20)

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 

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

Hinweis der Redaktion

  1. 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;);
  2. 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.
  3. 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.