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)

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Java script
Java scriptJava script
Java script
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Client side scripting and server side scripting
Client side scripting and server side scriptingClient side scripting and server side scripting
Client side scripting and server side scripting
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
ASP.NET Basics
ASP.NET Basics ASP.NET Basics
ASP.NET Basics
 
Java script
Java scriptJava script
Java script
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
javascript objects
javascript objectsjavascript objects
javascript objects
 

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 Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
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
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
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
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
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
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
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
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 

Kürzlich hochgeladen (20)

The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
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...
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
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...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 

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.