SlideShare una empresa de Scribd logo
1 de 19
Descargar para leer sin conexión
Java Script
What is JavaScript?
JavaScript was designed to add interactivity to HTML
pages.
JavaScript is a scripting language.
A scripting language is a lightweight programming
language.
JavaScript is usually embedded directly into HTML
pages.
JavaScript is an interpreted language (means that
scripts execute without preliminary compilation).
Everyone can use JavaScript without purchasing a
license.
Java Script
What can a JavaScript do?
JavaScript gives HTML designers a programming tool
- HTML authors are normally not programmers, but
JavaScript is a scripting language with a very simple syntax!
Almost anyone can put small "snippets" of code into their
HTML pages.
JavaScript can put dynamic text into an HTML page - A
JavaScript statement like this:
document.write("<h1>" + name + "</h1>")
can write a variable text into an HTML page.
JavaScript can react to events - A JavaScript can be set to
execute when something happens, like when a page has
finished loading or when a user clicks on an HTML element.
JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an HTML
element.
Java Script
What can a JavaScript do?
JavaScript can be used to validate data - A JavaScript can
be used to validate form data before it is submitted to a
server. This saves the server from extra processing
JavaScript can be used to detect the visitor's browser - A
JavaScript can be used to detect the visitor's browser, and depending on the browser - load another page specifically
designed for that browser
JavaScript can be used to create cookies - A JavaScript
can be used to store and retrieve information on the visitor's
computer
Features Java Script

 Statement Ends with Semicolon
 Handling Old versions of Browers
 Case Sensitive
 Ignores white space (extra space)
• i.e. “computer” and “ computer”

 Insert special characters
• i.e. document.write(“My name is “James””);
•Output:- My name is “James”

 Comments: // Single line comments
/* multi line comments…. */
Java Script
<html>
<body>
<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>
</body>
</html>
Java Script
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
Java Script
<html>
<body>
<H1>
<script type="text/javascript">
document.write("Hello World!");
</script>
</H1>
</body>
</html>
Java Script
<html>
<head>
<script type="text/javascript">
document.write(“Head Section Script!");
</script>
</head>
<body>
<script type="text/javascript">
document.write(“Body Section Script!");
</script>
</body>
</html>
Java Script
External Java Script
Same script cam be use in several pages
Write the script in a separate JavaScript
file and store the file with xyz.js extension
Use the file in HTML page
Java Script
External Java Script
//External JavaScript file f1.js
document.write(“This is external Script!”);
Java Script
External Java Script
Use the file in another script
<html>
<head>
<script src=“f1.js">
</script>
</head>
<body>
<script type="text/javascript">
document.write(“Demo of External File!");
</script>
</body>
</html>
Java Script
Variables in Script
RULES:
 Case Sensitive
 Begin with Alphabet Letter or
Underscore
 Character, digit and Underscore only.
i.e.
var age = 25;
var stud_name = “james thomas”;
Java Script
Scope of Variables in Script
 Local
o variable within the function
o lifetime is till the function is in execution

 Global
o variable outside the function
o lifetime is until page closed
Java Script
Datatypes in Script

Empty
 Null
 Boolean
 Char
 Integer
 Long

 Float
 Double
 Date
 String
 Object
Java Script

ParseXXX()
Method
Self Study…
Java Script
Operators:
1) Arithmetic
2) Logical
3) Relational
4) Assignment (shorthand)
5) String
6) Bitwise
7) Conditional (Ternary)
8) Special
9) new
Java Script
Conditional Statements:
1) if
2) if else
3) Nested if
4) Switch case
Java Script
Looping/ Iteration Statements:
1) while
2) Nested while
3) Do… while
4) For
5) Nested for
6) Break
7) Continue
Java Script
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload
event");
}
</script>
</head>
<body onload="message()">
</body>
</html>

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
Js ppt
Js pptJs ppt
Js ppt
 
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 JavaScript - Chapter 9 - TypeConversion and Regular Expressions  JavaScript - Chapter 9 - TypeConversion and Regular Expressions
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 
Functions in javascript
Functions in javascriptFunctions in javascript
Functions in javascript
 
jQuery
jQueryjQuery
jQuery
 
Java script
Java scriptJava script
Java script
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Javascript
JavascriptJavascript
Javascript
 
Java annotations
Java annotationsJava annotations
Java annotations
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Regular expression in javascript
Regular expression in javascriptRegular expression in javascript
Regular expression in javascript
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
PHP - Introduction to Object Oriented Programming with PHP
PHP -  Introduction to  Object Oriented Programming with PHPPHP -  Introduction to  Object Oriented Programming with PHP
PHP - Introduction to Object Oriented Programming with PHP
 
JavaScript - Chapter 6 - Basic Functions
 JavaScript - Chapter 6 - Basic Functions JavaScript - Chapter 6 - Basic Functions
JavaScript - Chapter 6 - Basic Functions
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 

Similar a JavaScript - Part-1

Similar a JavaScript - Part-1 (20)

Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academy
 
Introduction to java script
Introduction to java scriptIntroduction to java script
Introduction to java script
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
 
Java script writing javascript
Java script writing javascriptJava script writing javascript
Java script writing javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJavaScript - Getting Started.pptx
JavaScript - Getting Started.pptx
 
Basics java scripts
Basics java scriptsBasics java scripts
Basics java scripts
 
Introduction to Java Scripting
Introduction to Java ScriptingIntroduction to Java Scripting
Introduction to Java Scripting
 
Javascript by geetanjali
Javascript by geetanjaliJavascript by geetanjali
Javascript by geetanjali
 
JS BASICS JAVA SCRIPT SCRIPTING
JS BASICS JAVA SCRIPT SCRIPTINGJS BASICS JAVA SCRIPT SCRIPTING
JS BASICS JAVA SCRIPT SCRIPTING
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Java script
Java scriptJava script
Java script
 
Java script Basic
Java script BasicJava script Basic
Java script Basic
 
Java script Learn Easy
Java script Learn Easy Java script Learn Easy
Java script Learn Easy
 
Java script
Java scriptJava script
Java script
 
Javascript survival for CSBN Sophomores
Javascript survival for CSBN SophomoresJavascript survival for CSBN Sophomores
Javascript survival for CSBN Sophomores
 
Unit 2.4
Unit 2.4Unit 2.4
Unit 2.4
 
Test2
Test2Test2
Test2
 
Test2
Test2Test2
Test2
 

Más de Jainul Musani

Más de Jainul Musani (20)

React js t8 - inlinecss
React js   t8 - inlinecssReact js   t8 - inlinecss
React js t8 - inlinecss
 
React js t7 - forms-events
React js   t7 - forms-eventsReact js   t7 - forms-events
React js t7 - forms-events
 
React js t6 -lifecycle
React js   t6 -lifecycleReact js   t6 -lifecycle
React js t6 -lifecycle
 
React js t5 - state
React js   t5 - stateReact js   t5 - state
React js t5 - state
 
React js t4 - components
React js   t4 - componentsReact js   t4 - components
React js t4 - components
 
React js t3 - es6
React js   t3 - es6React js   t3 - es6
React js t3 - es6
 
React js t2 - jsx
React js   t2 - jsxReact js   t2 - jsx
React js t2 - jsx
 
React js t1 - introduction
React js   t1 - introductionReact js   t1 - introduction
React js t1 - introduction
 
ExpressJs Session01
ExpressJs Session01ExpressJs Session01
ExpressJs Session01
 
NodeJs Session03
NodeJs Session03NodeJs Session03
NodeJs Session03
 
NodeJs Session02
NodeJs Session02NodeJs Session02
NodeJs Session02
 
Nodejs Session01
Nodejs Session01Nodejs Session01
Nodejs Session01
 
Java exercise1
Java exercise1Java exercise1
Java exercise1
 
Fundamentals of JDBC
Fundamentals of JDBCFundamentals of JDBC
Fundamentals of JDBC
 
Core Java Special
Core Java SpecialCore Java Special
Core Java Special
 
Core Java Special
Core Java SpecialCore Java Special
Core Java Special
 
Cassandra-vs-MongoDB
Cassandra-vs-MongoDBCassandra-vs-MongoDB
Cassandra-vs-MongoDB
 
MongoDB-SESSION03
MongoDB-SESSION03MongoDB-SESSION03
MongoDB-SESSION03
 
MongoDB-SESSION02
MongoDB-SESSION02MongoDB-SESSION02
MongoDB-SESSION02
 
MongoDB-SESION01
MongoDB-SESION01MongoDB-SESION01
MongoDB-SESION01
 

Último

DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 

Último (20)

DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 

JavaScript - Part-1

  • 1. Java Script What is JavaScript? JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is a lightweight programming language. JavaScript is usually embedded directly into HTML pages. JavaScript is an interpreted language (means that scripts execute without preliminary compilation). Everyone can use JavaScript without purchasing a license.
  • 2. Java Script What can a JavaScript do? JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages. JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page. JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element. JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element.
  • 3. Java Script What can a JavaScript do? JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer
  • 4. Features Java Script  Statement Ends with Semicolon  Handling Old versions of Browers  Case Sensitive  Ignores white space (extra space) • i.e. “computer” and “ computer”  Insert special characters • i.e. document.write(“My name is “James””); •Output:- My name is “James”  Comments: // Single line comments /* multi line comments…. */
  • 5. Java Script <html> <body> <script type="text/javascript"> document.write("This is my first JavaScript!"); </script> </body> </html>
  • 8. Java Script <html> <head> <script type="text/javascript"> document.write(“Head Section Script!"); </script> </head> <body> <script type="text/javascript"> document.write(“Body Section Script!"); </script> </body> </html>
  • 9. Java Script External Java Script Same script cam be use in several pages Write the script in a separate JavaScript file and store the file with xyz.js extension Use the file in HTML page
  • 10. Java Script External Java Script //External JavaScript file f1.js document.write(“This is external Script!”);
  • 11. Java Script External Java Script Use the file in another script <html> <head> <script src=“f1.js"> </script> </head> <body> <script type="text/javascript"> document.write(“Demo of External File!"); </script> </body> </html>
  • 12. Java Script Variables in Script RULES:  Case Sensitive  Begin with Alphabet Letter or Underscore  Character, digit and Underscore only. i.e. var age = 25; var stud_name = “james thomas”;
  • 13. Java Script Scope of Variables in Script  Local o variable within the function o lifetime is till the function is in execution  Global o variable outside the function o lifetime is until page closed
  • 14. Java Script Datatypes in Script Empty  Null  Boolean  Char  Integer  Long  Float  Double  Date  String  Object
  • 16. Java Script Operators: 1) Arithmetic 2) Logical 3) Relational 4) Assignment (shorthand) 5) String 6) Bitwise 7) Conditional (Ternary) 8) Special 9) new
  • 17. Java Script Conditional Statements: 1) if 2) if else 3) Nested if 4) Switch case
  • 18. Java Script Looping/ Iteration Statements: 1) while 2) Nested while 3) Do… while 4) For 5) Nested for 6) Break 7) Continue
  • 19. Java Script <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>