Java Script

Java Script
JavaScript is the programming language of HTML and the Web.
JavaScript is easy to learn.
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
JavaScript and Java are completely different languages, both in concept and
design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA

standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name
of the language.
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML

page, or in both.
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.
The purpose of code blocks is to define statements to be executed together.
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript code blocks are written between { and }</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
</script>
</body>
</html>
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
Here is a list of some of the keywords you will learn
Keyword Description
break Terminates a switch or a loop

continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the
debugging function
do ... while Executes a block of statements, and repeats the block, while a
condition is true
for Marks a block of statements to be executed, as long as a

condition is true
function Declares a function
if ... else Marks a block of statements to be executed, depending on a

condition
return Exits a function
switch Marks a block of statements to be executed, depending on

different cases
try ... Implements error handling to a block of statements

catch
var Declares a variable

JavaScript Comments
JavaScript comments can be used to explain JavaScript code, and to make it
more readable.
JavaScript comments can also be used to prevent execution, when testing

alternative code.
Single Line Comments
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
<p><strong>Note:</strong> The comments are not executed.</p>
</body>
</html>
Multi Line Comments
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myp"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
<p><strong>Note:</strong> The comment block is not executed.</p>
</body>
</html>
JavaScript Variables
JavaScript variables are containers for storing data values.
In this example, x, y, and z, are variables:
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<html>
<body>
<p id="demo"></p>
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
JavaScript Identifiers
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age,
sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and dollar signs.

 Names must begin with a letter
 Names can also begin with $ and _ (but we will not use it in this tutorial)
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names
<html>
<body>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p>Try to experiment by removing the // comments.</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
document.getElementById("demo").innerHTML = pi;
//document.getElementById("demo").innerHTML = person;
//document.getElementById("demo").innerHTML = answer;
</script>
</body>
</html>
Many Variables in Single Line
<html>
<body>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
var person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
JavaScript Arithmetic Operators

Arithmetic operators perform arithmetic on numbers (literals or variables).
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
<html>
<body>
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p>
<p id="demo"></p>
<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<html>
<body>
<h2>The -= Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
x -= 5;
</script>
</body>
</html>
<html>
<body>
<h2>The %= Operator</h2>
<p id="demo"></p>
<script>
var x = 11;
x %= 5;
</script>
</body>
</html>

Java Script - 2

Uploaded by

Java Script - 2

Uploaded by

JavaScript is the programming language of HTML and the Web.

JavaScript is easy to learn.

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

JavaScript was invented by Brendan Eich in 1995, and became an ECMA

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML

JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

JavaScript Code Blocks

The purpose of code blocks is to define statements to be executed together.

<p>JavaScript code blocks are written between { and }</p>

<button type="button" onclick="myFunction()">Click Me!</button>

document.getElementById("demo1").innerHTML = "Hello Dolly!";

document.getElementById("demo2").innerHTML = "How are you?";

Here is a list of some of the keywords you will learn

break Terminates a switch or a loop

for Marks a block of statements to be executed, as long as a

function Declares a function

if ... else Marks a block of statements to be executed, depending on a

return Exits a function

switch Marks a block of statements to be executed, depending on

try ... Implements error handling to a block of statements

var Declares a variable

JavaScript comments can also be used to prevent execution, when testing

Single Line Comments

document.getElementById("myH").innerHTML = "My First Page";

document.getElementById("myP").innerHTML = "My first paragraph.";

<p><strong>Note:</strong> The comments are not executed.</p>

Multi Line Comments

The code below will change

the heading with id = "myH"

and the paragraph with id = "myp"

document.getElementById("myH").innerHTML = "My First Page";

document.getElementById("myP").innerHTML = "My first paragraph.";

<p><strong>Note:</strong> The comment block is not executed.</p>

In this example, x, y, and z, are variables:

<p>In this example, x, y, and z are variables</p>

var total = price1 + price2;

"The total is: " + total;

These unique names are called identifiers.

 Names can contain letters, digits, underscores, and dollar signs.

<p>Strings are written with quotes.</p>

<p>Numbers are written without quotes.</p>

<p>Try to experiment by removing the // comments.</p>

var person = "John Doe";

var answer = 'Yes I am!';

Many Variables in Single Line

<p>You can declare many variables in one statement.</p>

var person = "John Doe", carName = "Volvo", price = 200;

JavaScript Arithmetic Operators

var x = (100 + 50) * a;

You might also like