SlideShare a Scribd company logo
B Y G O U R I S H A N K A R R P U J A R
JavaScript
Introduction
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behaviour of web pages
 JavaScript Can Change HTML Content
 document.getElementById("demo").innerHTML = "Hello
JavaScript";
 JavaScript Can Change HTML Styles (CSS)
 document.getElementById("demo").style.fontSize = "35px";
 JavaScript Can Hide HTML Elements
 document.getElementById("demo").style.display = "none";
 JavaScript Can Show HTML Elements
 document.getElementById("demo").style.display = "block";
 JavaScript Where To ?
<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>
<p id="demo"></p>
Functions
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
Tips
 You can Place JavaScript tag inside HTML in any Part like
<head>
<script> Test Function </script>
</head>
<body>
You can write all your mark-up Here.
<script> Test Function </script>
</body>
Tips
 You can Include all functions in External sheet & call
them in respective page.
 As like We have did in CSS – External Stylesheet
 Like that we can also have External Script.
 <script src=“script.js”></script>
JavaScript Output
 JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.
 Writing into the HTML output
using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console,
using console.log().
 document.getElementById("demo").innerHTML = 5 + 6;
 document.write(5 + 6);
 <button type="button" onclick="document.write(5 + 6)">Try
it</button>
 window.alert(5 + 6);
 console.log(5 + 6);
JavaScript Statements
 var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
 var a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b
to c
 var x, y; // How to declare
variables
x = 5; y = 6; // How to assign values
z = x + y; // How to compute
values
 Fixed values are called literals. Variable values are
called variables.
 Strings are text, written within double or single quotes:
JavaScript Variables
 In a programming language, variables are used to store data
values.
 JavaScript uses the var keyword to declare variables.
 An equal sign is used to assign values to variables.
var x;
x = 6;
Operations
 document.getElementById("demo").innerHTML = "John" + " "
+ "Doe";
 var x, y;
x = 5 + 6;
y = x * 10;
 Numbers are not allowed as the first character.
This way JavaScript can easily distinguish identifiers from
numbers.
Comments
 Code after double slashes // or between /* and */ is treated as
a comment.
 var x = 5; // I will be executed
// var x = 6; I will NOT be executed
Tips
 All JavaScript identifiers are case sensitive.
 The variables lastName and lastname, are two different
variables.
 JavaScript does not interpret VAR or Var as the keyword var.
 In JavaScript, the first character must be a letter, or an underscore
(_), or a dollar sign ($).
 Hyphens are not allowed in JavaScript. They are reserved
for subtractions.
Variables
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
 var person = "John Doe", carName = "Volvo", price = 200;
 If you put a number in quotes, the rest of the numbers will be
treated as strings, and concatenated.

More Related Content

PPT
JavaScript: Ajax & DOM Manipulation
PPT
KMUTNB - Internet Programming 4/7
PDF
Assignment4
 
PDF
Slashdot Tags
PDF
Javascript
PPTX
5. hello popescu
TXT
JavaScript: Ajax & DOM Manipulation
KMUTNB - Internet Programming 4/7
Assignment4
 
Slashdot Tags
Javascript
5. hello popescu

What's hot (20)

PDF
Introduction to HTML, CSS, and Javascript
PPTX
FYBSC IT Web Programming Unit III Javascript
PPTX
Let's write secure drupal code!
PPTX
Efficient use of jQuery selector
PPTX
AngulrJS Overview
PPTX
CSC103 Web Technologies: HTML, CSS, JS
PPTX
Lecture 6: Client Side Programming 2
PPTX
FYBSC IT Web Programming Unit III Document Object
PDF
Rails GUI Development with Ext JS
PDF
CGI::Prototype (NPW 2006)
PPTX
FYBSC IT Web Programming Unit III Core Javascript
PPT
Javascript 2009
PPTX
Java script functions
PPTX
Lecture 5: Client Side Programming 1
PPT
Java script
PPTX
JavaScript Introduction and Implementation
PPTX
Java script
PDF
Introducing jQuery
PPTX
SQL: The Language of Databases
KEY
Making Templatetags Suck Less
Introduction to HTML, CSS, and Javascript
FYBSC IT Web Programming Unit III Javascript
Let's write secure drupal code!
Efficient use of jQuery selector
AngulrJS Overview
CSC103 Web Technologies: HTML, CSS, JS
Lecture 6: Client Side Programming 2
FYBSC IT Web Programming Unit III Document Object
Rails GUI Development with Ext JS
CGI::Prototype (NPW 2006)
FYBSC IT Web Programming Unit III Core Javascript
Javascript 2009
Java script functions
Lecture 5: Client Side Programming 1
Java script
JavaScript Introduction and Implementation
Java script
Introducing jQuery
SQL: The Language of Databases
Making Templatetags Suck Less
Ad

Similar to Java script (20)

PPTX
Java script
PPTX
Learning space presentation1 learn Java script
PPTX
Introduction to JavaScript Basics.
PPTX
Java script
PPTX
Javascript note for engineering notes.pptx
PPTX
MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx
PPTX
Java script
PPTX
Javascript
PDF
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
PDF
Unit 4(it workshop)
PPTX
Web programming
PPTX
An introduction to javascript
PDF
PPTX
Java script basics
PPTX
Intro to javascript for web development.pptx
PPTX
JavaScript with Syntax & Implementation
PPS
PPTX
Internet Based Programming -3-JAVASCRIPT
PPTX
First javascript workshop : first basics
PPTX
First javascript workshop : first basics
Java script
Learning space presentation1 learn Java script
Introduction to JavaScript Basics.
Java script
Javascript note for engineering notes.pptx
MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx
Java script
Javascript
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
Unit 4(it workshop)
Web programming
An introduction to javascript
Java script basics
Intro to javascript for web development.pptx
JavaScript with Syntax & Implementation
Internet Based Programming -3-JAVASCRIPT
First javascript workshop : first basics
First javascript workshop : first basics
Ad

Recently uploaded (20)

PDF
Introduction to the IoT system, how the IoT system works
PPTX
Introduction to Information and Communication Technology
PPTX
Job_Card_System_Styled_lorem_ipsum_.pptx
PDF
Cloud-Scale Log Monitoring _ Datadog.pdf
PPTX
Introuction about ICD -10 and ICD-11 PPT.pptx
PPTX
innovation process that make everything different.pptx
PPT
tcp ip networks nd ip layering assotred slides
PPT
FIRE PREVENTION AND CONTROL PLAN- LUS.FM.MQ.OM.UTM.PLN.00014.ppt
PPTX
introduction about ICD -10 & ICD-11 ppt.pptx
PDF
Slides PDF The World Game (s) Eco Economic Epochs.pdf
PDF
Paper PDF World Game (s) Great Redesign.pdf
PPTX
PptxGenJS_Demo_Chart_20250317130215833.pptx
PPTX
newyork.pptxirantrafgshenepalchinachinane
PPTX
E -tech empowerment technologies PowerPoint
PPTX
522797556-Unit-2-Temperature-measurement-1-1.pptx
PPTX
international classification of diseases ICD-10 review PPT.pptx
PPTX
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
PPTX
Mathew Digital SEO Checklist Guidlines 2025
PDF
Unit-1 introduction to cyber security discuss about how to secure a system
PDF
The New Creative Director: How AI Tools for Social Media Content Creation Are...
Introduction to the IoT system, how the IoT system works
Introduction to Information and Communication Technology
Job_Card_System_Styled_lorem_ipsum_.pptx
Cloud-Scale Log Monitoring _ Datadog.pdf
Introuction about ICD -10 and ICD-11 PPT.pptx
innovation process that make everything different.pptx
tcp ip networks nd ip layering assotred slides
FIRE PREVENTION AND CONTROL PLAN- LUS.FM.MQ.OM.UTM.PLN.00014.ppt
introduction about ICD -10 & ICD-11 ppt.pptx
Slides PDF The World Game (s) Eco Economic Epochs.pdf
Paper PDF World Game (s) Great Redesign.pdf
PptxGenJS_Demo_Chart_20250317130215833.pptx
newyork.pptxirantrafgshenepalchinachinane
E -tech empowerment technologies PowerPoint
522797556-Unit-2-Temperature-measurement-1-1.pptx
international classification of diseases ICD-10 review PPT.pptx
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
Mathew Digital SEO Checklist Guidlines 2025
Unit-1 introduction to cyber security discuss about how to secure a system
The New Creative Director: How AI Tools for Social Media Content Creation Are...

Java script

  • 1. B Y G O U R I S H A N K A R R P U J A R JavaScript
  • 2. Introduction 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behaviour of web pages
  • 3.  JavaScript Can Change HTML Content  document.getElementById("demo").innerHTML = "Hello JavaScript";  JavaScript Can Change HTML Styles (CSS)  document.getElementById("demo").style.fontSize = "35px";
  • 4.  JavaScript Can Hide HTML Elements  document.getElementById("demo").style.display = "none";  JavaScript Can Show HTML Elements  document.getElementById("demo").style.display = "block";
  • 5.  JavaScript Where To ? <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> <p id="demo"></p>
  • 6. Functions <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button>
  • 7. Tips  You can Place JavaScript tag inside HTML in any Part like <head> <script> Test Function </script> </head> <body> You can write all your mark-up Here. <script> Test Function </script> </body>
  • 8. Tips  You can Include all functions in External sheet & call them in respective page.  As like We have did in CSS – External Stylesheet  Like that we can also have External Script.  <script src=“script.js”></script>
  • 9. JavaScript Output  JavaScript can "display" data in different ways:  Writing into an HTML element, using innerHTML.  Writing into the HTML output using document.write().  Writing into an alert box, using window.alert().  Writing into the browser console, using console.log().
  • 10.  document.getElementById("demo").innerHTML = 5 + 6;  document.write(5 + 6);  <button type="button" onclick="document.write(5 + 6)">Try it</button>  window.alert(5 + 6);  console.log(5 + 6);
  • 11. JavaScript Statements  var x, y, z; // Statement 1 x = 5; // Statement 2 y = 6; // Statement 3 z = x + y; // Statement 4  var a, b, c; // Declare 3 variables a = 5; // Assign the value 5 to a b = 6; // Assign the value 6 to b c = a + b; // Assign the sum of a and b to c
  • 12.  var x, y; // How to declare variables x = 5; y = 6; // How to assign values z = x + y; // How to compute values  Fixed values are called literals. Variable values are called variables.  Strings are text, written within double or single quotes:
  • 13. JavaScript Variables  In a programming language, variables are used to store data values.  JavaScript uses the var keyword to declare variables.  An equal sign is used to assign values to variables. var x; x = 6;
  • 14. Operations  document.getElementById("demo").innerHTML = "John" + " " + "Doe";  var x, y; x = 5 + 6; y = x * 10;  Numbers are not allowed as the first character. This way JavaScript can easily distinguish identifiers from numbers.
  • 15. Comments  Code after double slashes // or between /* and */ is treated as a comment.  var x = 5; // I will be executed // var x = 6; I will NOT be executed
  • 16. Tips  All JavaScript identifiers are case sensitive.  The variables lastName and lastname, are two different variables.  JavaScript does not interpret VAR or Var as the keyword var.  In JavaScript, the first character must be a letter, or an underscore (_), or a dollar sign ($).  Hyphens are not allowed in JavaScript. They are reserved for subtractions.
  • 17. Variables var price1 = 5; var price2 = 6; var total = price1 + price2; <p id="demo"></p> <script> var carName = "Volvo"; document.getElementById("demo").innerHTML = carName; </script>
  • 18.  var person = "John Doe", carName = "Volvo", price = 200;  If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated.