Home  /  Arithmetic • JavaScript • Js  /  What Can JavaScript Do ?
Arithmetic

What Can JavaScript Do ?

JavaScript

1
2
3
4
5
6
 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
  Click me to display Date and Time.</button>
 
<p id="demo"></p>

JavaScript can change HTML content

JavaScript can change HTML content.

1
2
3
4
5
6
 
 
<p id="demo2">JavaScript can change HTML content.</p>
 
<button type="button" onclick="document.getElementById('demo2').innerHTML = 'Hello JavaScript!'">
  Click Me!</button>

JavaScript Can Change Images

Click the light bulb to turn on/off the light.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
<p>Click the light bulb to turn on/off the light.</p>
 
<img id="myImage" onclick="changeImage()" src="http://www.w3schools.com/js/pic_bulboff.gif" width="60" height="80">
 
<script>
  function changeImage() {
      var image = document.getElementById('myImage');
      if (image.src.match("bulbon")) {
          image.src = "http://www.w3schools.com/js/pic_bulboff.gif";
      } else {
          image.src = "http://www.w3schools.com/js/pic_bulbon.gif";
      }
  }
</script>

JavaScript can change the style of an HTML element

JavaScript can change the style of an HTML element.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<p id="demo3">JavaScript can change the style of an HTML element.</p>
 
<script>
  function myFunction() {
      var x = document.getElementById("demo3");
      x.style.fontSize = "25px";          
      x.style.color = "red";
  }
</script>
 
<button type="button" onclick="myFunction()">Click Me!</button>

JavaScript Can Validate Input

Please input a number between 1 and 10:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
<div>
  
<h1>JavaScript Can Validate Input</h1>
 
<p>Please input a number between 1 and 10:</p>
 
<input id="numb" type="number">
 
<button type="button" onclick="myFunction()">Submit</button>
 
<p id="demo4"></p>
 
<script>
  function myFunction() {
      var x, text;
  
      // Get the value of the input field with id="numb"
      x = document.getElementById("numb").value;
  
      // If x is Not a Number or less than one or greater than 10
      if (isNaN(x) || x < 1 || x > 10) {
          text = "Input not valid";
      } else {
          text = "Input OK";
      }
      document.getElementById("demo4").innerHTML = text;
  }
</script>
</div>

Web Page

“document.write(5 + 6)”

1
2
3
4
5
 
 
<h1>5 + 6</h1>
 
<button onclick="document.write(5 + 6)">Try it</button>

5 + 6

1
2
3
4
5
6
 
<p id="demo5"></p>
 
<script>
document.getElementById("demo5").innerHTML = 5 + 6;
</script>

JavaScript Statements

Statements are separated by semicolons.

The variables x, y, and z are assigned the values 5, 6, and 11:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  <p id="demo6"></p>
 
<p>Statements are separated by semicolons.</p>
 
<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>
 
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo6").innerHTML = z;
</script>

JavaScript Numbers

Number can be written with or without decimals.

1
2
3
4
5
6
7
8
 
<p>Number can be written with or without decimals.</p>
 
<p id="demo7"></p>
 
<script>
document.getElementById("demo7").innerHTML = 10.50;
</script>

JavaScript Strings

Strings can be written with double or single quotes.

1
2
3
4
5
6
7
8
 
<p>Strings can be written with double or single quotes.</p>
 
<p id="demo8"></p>
 
<script>
document.getElementById("demo8").innerHTML = 'John Doe';
</script>

JavaScript Variables

In this example, x is defined as a variable.
Then, x is assigned the value of 6:

1
2
3
4
5
6
7
8
9
10
11
 
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
 
<p id="demo9"></p>
 
<script>
var x;
x = 6;
document.getElementById("demo9").innerHTML = x;
</script>

Assigning Values

In JavaScript the = operator is used to assign values to variables.

1
2
3
4
5
6
7
8
9
10
 
<p>In JavaScript the = operator is used to assign values to variables.</p>
 
<p id="demo10"></p>
 
<script>
var x = 5;
var y = 6;
document.getElementById("demo10").innerHTML = x + y;
</script>

JavaScript Operators

JavaScript uses arithmetic operators to compute values (just like algebra).

1
2
3
4
5
6
7
8
 
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
 
<p id="demo11"></p>
 
<script>
document.getElementById("demo11").innerHTML = (5 + 6) * 10;
</script>

JavaScript Expressions

Expressions compute to values.

1
2
3
4
5
6
7
8
 
<p>Expressions compute to values.</p>
 
<p id="demo12"></p>
 
<script>
document.getElementById("demo12").innerHTML = 5 * 10;
</script>

JavaScript Expressions

Expressions compute to values.

1
2
3
4
5
6
7
8
9
 
<p>Expressions compute to values.</p>
 
<p id="demo13"></p>
 
<script>
var x = 5;
document.getElementById("demo13").innerHTML = x * 10;
</script>

JavaScript Expressions

Expressions compute to values.

1
2
3
4
5
6
7
8
9
10
 
<h1>JavaScript Expressions</h1>
 
<p>Expressions compute to values.</p>
 
<p id="demo14"></p>
 
<script>
document.getElementById("demo14").innerHTML = "John" + " "  + "Doe";
</script>

The var Keyword Creates a Variable

1
2
3
4
5
6
7
8
9
10
 
  <h1>The var Keyword Creates a Variable</h1>
 
<p id="demo15"></p>
 
<script>
var x = 5 + 6;
var y = x * 10;
document.getElementById("demo15").innerHTML = y;
</script>

Comments are NOT Executed

1
2
3
4
5
6
7
8
9
10
 
<h1>Comments are NOT Executed</h1>
 
<p id="demo16"></p>
 
<script>
var x = 5;
// var x = 6; I will not be executed
document.getElementById("demo16").innerHTML = x;
</script>

JavaScript is Case Sensitive

Try change lastName to lastname.

1
2
3
4
5
6
7
8
9
10
 
<p>Try change lastName to lastname.</p>
 
<p id="demo17"></p>
 
<script>
var lastName = "Doe";
var lastname = "Peterson";
document.getElementById("demo17").innerHTML = lastName;
</script>

In HTML, JavaScript statements are “commands” to the browser.

1
2
3
4
5
6
7
8
 
  <p>In HTML, JavaScript statements are "commands" to the browser.</p>
 
<p id="demo18"></p>
 
<script>
document.getElementById("demo18").innerHTML = "Hello Dolly.";
</script>

JavaScript code (or just JavaScript) is a list of JavaScript statements.

1
2
3
4
5
6
7
8
9
10
11
 
  <p>JavaScript code (or just JavaScript) is a list of JavaScript statements.</p>
 
<p id="demo19"></p>
 
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo19").innerHTML = z;
</script>

JavaScript statements are separated by semicolon.

1
2
3
4
5
6
7
8
9
10
11
 
  <p>JavaScript statements are separated by semicolon.</p>
 
<p id="demo20"></p>
 
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo20").innerHTML = c;
</script>

Multiple statements on one line is allowed.

1
2
3
4
5
6
7
8
9
 
<p>Multiple statements on one line is allowed.</p>
 
<p id="demo21"></p>
 
<script>
a = 1; b = 2; c = a + b;
document.getElementById("demo21").innerHTML = c;
</script>

My Web Page

The best place to break a code line is after an operator or a comma.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<h1>My Web Page</h1>
 
<p>
The best place to break a code line is after an operator or a comma.
</p>
 
<p id="demo22"></p>
 
<script>
document.getElementById("demo22").innerHTML =
"Hello Dolly.";
</script>

My Web Page

I am a paragraph.

I am a div.

When you click on “Try it”, the two elements will change.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
  <h1>My Web Page</h1>
 
<p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div>
 
<p>
<button type="button" onclick="myFunction3()">Try it</button>
</p>
 
<script>
function myFunction3() {
    document.getElementById("myPar").innerHTML = "Hello Dolly.";
    document.getElementById("myDiv").innerHTML = "How are you?";
}
</script>
 
<p>When you click on "Try it", the two elements will change.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
    <h1>JavaScript Keywords</h1>
                                      
 
JavaScript statements often start with a keyword to identify the JavaScript action to be performed.
 
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 ... catch Implements error handling to a block of statements
var Declares a variable

Note: The comments are not executed.

1
2
3
4
5
6
7
8
9
10
11
12
 
  <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>

Note: The comments are not executed.

1
2
3
4
5
6
7
8
9
10
11
 
  <p id="demo23"></p>
 
<script>
var x = 5;      // Declare x, give it the value of 5
var y = x + 2;  // Declare y, give it the value of x + 2
 
document.getElementById("demo23").innerHTML = y; // Write y to demo
</script>
 
<p><strong>Note:</strong> The comments are not executed.</p>

Note: The comment block is not executed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
  <h1 id="myH2"></h1>
<p id="myP2"></p>
 
<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myp"
in my web page:
*/
document.getElementById("myH2").innerHTML = "My First Page";
document.getElementById("myP2").innerHTML = "My first paragraph.";
</script>
 
<p><strong>Note:</strong> The comment block is not executed.</p>

Note: The comment is not executed.

1
2
3
4
5
6
7
8
9
10
11
 
  <h1 id="myH3"></h1>
 
<p id="myP3"></p>
 
<script>
//document.getElementById("myH3").innerHTML = "My First Page";
document.getElementById("myP3").innerHTML = "My first paragraph.";
</script>
 
<p><strong>Note:</strong> The comment is not executed.</p>

Note: The comment-block is not executed.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  <h1 id="myH4"></h1>
 
<p id="myP4"></p>
 
<script>
/*
document.getElementById("myH4").innerHTML = "Welcome to my Homepage";
document.getElementById("myP4").innerHTML = "This is my first paragraph.";
*/
</script>
 
<p><strong>Note:</strong> The comment-block is not executed.</p>

JavaScript Variables

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<h1>JavaScript Variables</h1>
 
<p>In this example, x, y, and z are variables</p>
 
<p id="demo24"></p>
 
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo24").innerHTML = z;
</script>

JavaScript Variables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<h1>JavaScript Variables</h1>
 
<p>In this example, price1, price2, and total are variables</p>
 
<p id="demo25"></p>
 
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo25").innerHTML =
"The total is: " + total;
</script>

JavaScript Variables

Strings are written with quotes.

Numbers are written without quotes.

Try to experiment with the // comments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<h1>JavaScript Variables</h1>
 
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p>Try to experiment with the // comments.</p>
 
<p id="demo26a"></p>
<p id="demo26b"></p>
<p id="demo26c"></p>
 
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
 
document.getElementById("demo26a").innerHTML = pi;
document.getElementById("demo26b").innerHTML = person;
document.getElementById("demo26c").innerHTML = answer;
</script>

JavaScript Variables

Create a variable, assign a value to it, and display it:

1
2
3
4
5
6
7
8
9
10
11
 
  <h1>JavaScript Variables</h1>
 
<p>Create a variable, assign a value to it, and display it:</p>
 
<p id="demo27"></p>
 
<script>
var carName = "Volvo";
document.getElementById("demo27").innerHTML = carName;
</script>

JavaScript Variables

You can declare many variables in one statement.

1
2
3
4
5
6
7
8
9
10
11
 
  <h1>JavaScript Variables</h1>
 
<p>You can declare many variables in one statement.</p>
 
<p id="demo28"></p>
 
<script>
var person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo28").innerHTML = carName;
</script>

JavaScript Variables

You can declare many variables in one statement.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  <h1>JavaScript Variables</h1>
 
<p>You can declare many variables in one statement.</p>
 
<p id="demo29"></p>
 
<script>
var person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo29").innerHTML = carName;
</script>

JavaScript Variables

A variable declared without a value will have the value undefined.

1
2
3
4
5
6
7
8
9
10
11
 
  <h1>JavaScript Variables</h1>
 
<p>A variable declared without a value will have the value undefined.</p>
 
<p id="demo30"></p>
 
<script>
var carName2;
document.getElementById("demo30").innerHTML = carName2;
</script>

JavaScript Variables

If you re-declare a JavaScript variable, it will not lose its value.

1
2
3
4
5
6
7
8
9
10
11
12
 
  <h1>JavaScript Variables</h1>
 
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
 
<p id="demo31"></p>
 
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo31").innerHTML = carName;
</script>

JavaScript Variables

Add 5 + 2 + 3, and display the result:

1
2
3
4
5
6
7
8
9
10
11
 
  <h1>JavaScript Variables</h1>
 
<p>Add 5 + 2 + 3, and display the result:</p>
 
<p id="demo32"></p>
 
<script>
var x = 5 + 2 + 3;
document.getElementById("demo32").innerHTML = x;
</script>

JavaScript Variables

Add “John” + ” ” + “Doe”:

1
2
3
4
5
6
7
8
9
10
11
 
  <h1>JavaScript Variables</h1>
 
<p>Add "John" + " " + "Doe":</p>
 
<p id="demo33"></p>
 
<script>
var x = "John" + " " + "Doe";
document.getElementById("demo33").innerHTML = x;
</script>

JavaScript Variables

Add “5” + 2 + 3. and display the result:

1
2
3
4
5
6
7
8
9
10
11
 
  <h1>JavaScript Variables</h1>
 
<p>Add "5" + 2 + 3. and display the result:</p>
 
<p id="demo34"></p>
 
<script>
var x = "5" + 2 + 3;
document.getElementById("demo34").innerHTML = x;
</script>

JavaScript Operators

x = 5, y = 2, calculate z = x + y, and display z:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<h1>JavaScript Operators</h1>
 
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
 
<p id="demo35"></p>
 
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo35").innerHTML = z;
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
  JavaScript Arithmetic Operators
 
Arithmetic operators are used to perform arithmetic on numbers (literals or variables).
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
 
++ Increment
-- Decrement
 
JavaScript Assignment Operators
 
Assignment operators assign values to JavaScript variables.
Operator Example Same As
=         x = y     x = y
+=         x += y     x = x + y
-=         x -= y     x = x - y
*=         x *= y     x = x * y
/=         x /= y     x = x / y
%=         x %= y     x = x % y
 
 
The assignment operator (=) assigns a value to a variable.

The += Operator

1
2
3
4
5
6
7
8
9
10
 
  <h1>The += Operator</h1>
 
<p id="demo36"></p>
 
<script>
var x = 10;
x += 5;
document.getElementById("demo36").innerHTML = x;
</script>

JavaScript Operators

The + operator concatenates (adds) strings.

1
2
3
4
5
6
7
8
9
10
11
12
 
<h1>JavaScript Operators</h1>
 
<p>The + operator concatenates (adds) strings.</p>
 
<p id="demo37"></p>
 
<script>
var txt1 = "John";
var txt2 = "Doe";
document.getElementById("demo37").innerHTML = txt1 + " " + txt2;
</script>

JavaScript Operators

The assignment operator += can concatenate strings.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<h1>JavaScript Operators</h1>
 
<p>The assignment operator += can concatenate strings.</p>
 
<p id="demo38"></p>
 
<script>
txt1 = "What a very ";
txt1 += "nice day";
document.getElementById("demo38").innerHTML = txt1;
</script>

JavaScript Operators

Adding a number and a string, returns a string.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
  <h1>JavaScript Operators</h1>
 
<p>Adding a number and a string, returns a string.</p>
 
<p id="demo39"></p>
 
<script>
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
document.getElementById("demo39").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>

1
2
3
4
5
6
7
8
9
10
11
12
 
JavaScript Comparison and Logical Operators
  
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to

1
2
3
4
5
6
7
8
9
10
11
12
13
 
JavaScript Arithmetic Operators
 
Arithmetic operators perform arithmetic on numbers (literals or variables).
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
 
++ Increment
-- Decrement

A typical arithmetic operation takes two numbers and produces a new number.

1
2
3
4
5
6
7
8
9
10
 
 
<p>A typical arithmetic operation takes two numbers and produces a new number.</p>
 
<p id="demo40"></p>
 
<script>
var x = 100 + 50;
document.getElementById("demo40").innerHTML = x;
</script>

A typical arithmetic operation takes two numbers (or variables) and produces a new number.

1
2
3
4
5
6
7
8
9
10
11
 
<p>A typical arithmetic operation takes two numbers (or variables) and produces a new number.</p>
 
<p id="demo41"></p>
 
<script>
var a = 100;
var b = 50;
var x = a + b;
document.getElementById("demo41").innerHTML = x;
</script>

A typical arithmetic operation takes two numbers (or expressions) and produces a new number.

1
2
3
4
5
6
7
8
9
10
11
 
 
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p>
 
<p id="demo42"></p>
 
<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo42").innerHTML = x;
</script>

The % Operator

1
2
3
4
5
6
7
8
9
10
11
12
 
 
<h1>The % Operator</h1>
 
<p id="demo43"></p>
 
<script>
var x = 5;
var y = 2;
var z = x % y;
document.getElementById("demo43").innerHTML = z;
</script>

The ++ Operator

The increment operator (++) increments numbers.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<h1>The ++ Operator</h1>
 
 
<p id="demo44"></p>
 
<script>
var x = 5;
x++;
var z = x;
document.getElementById("demo44").innerHTML = z;
</script>

The — Operator

The decrement operator (–) decrements numbers.

1
2
3
4
5
6
7
8
9
10
11
 
<h1>The -- Operator</h1>
 
<p id="demo45"></p>
 
<script>
var x = 5;
x--;
var z = x;
document.getElementById("demo45").innerHTML = z;
</script>

Multiplication has precedence over addition.

1
2
3
4
5
6
7
8
9
 
 
<p>Multiplication has precedence over addition.</p>
 
<p id="demo46"></p>
 
<script>
document.getElementById("demo46").innerHTML = 100 + 50 * 3;
</script>

When many operations has the same precedence, they are computed from left to right.

1
2
3
4
5
6
7
8
9
 
 
<p>When many operations has the same precedence, they are computed from left to right.</p>
 
<p id="demo47"></p>
 
<script>
document.getElementById("demo47").innerHTML = 100 + 50 - 3;
</script>

JavaScript Operator Precedence Values

Expressions in parentheses are fully computed before the value is
used in the rest of the expression.
Value Operator Description Example
19 ( ) Expression grouping (3 + 4)
       
18 . Member person.name
18 [] Member person[“name”]
       
17 () Function call myFunction()
17 new Create new Date()
       
16 ++ Postfix Increment i++
16 — Postfix Decrement i–
       
15 ++ Prefix Increment ++i
15 — Prefix Decrement –i
15 ! Logical not !(x==y)
15 typeof Type typeof x
       
14 * Multiplication 10 * 5
14 / Division 10 / 5
14 % Modulo division 10 % 5
14 ** Exponentiation 10 ** 2
       
13 + Addition 10 + 5
13 – Subtraction 10 – 5
       
12 << Shift left x << 2
12 >> Shift right x >> 2
       
11 < Less than x < y 
11 <= Less than or equal x <= y
11 > Greater than x > y
11 >= Greater than or equal x >= y
       
10 == Equal x == y
10 === Strict equal x === y
10 != Unequal x != y
10 !== Strict unequal x !== y
       
6 && And x && y
5 || Or x || y
       
3 = Assignment x = y
3 += Assignment x += y
3 -= Assignment x -= y
3 *= Assignment x *= y
3 /= Assignment x /= y
1
2
3
4
5
6
7
8
9
10
11
12
 
 
JavaScript Assignment Operators
 
Assignment operators assign values to JavaScript variables.
Operator Example Same As
=         x =       x = y
+=         x += y   x = x + y
-=         x -= y   x = x - y
*=         x *= y     x = x * y
/=         x /= y     x = x / y
%=         x %= y     x = x % y

The += Operator

1
2
3
4
5
6
7
8
9
10
 
<h1>The += Operator</h1>
 
<p id="demo48"></p>
 
<script>
var x = 10;
x += 5;
document.getElementById("demo48").innerHTML = x;
</script>

The -= Operator

1
2
3
4
5
6
7
8
9
10
 
<h1>The -= Operator</h1>
 
<p id="demo49"></p>
 
<script>
var x = 10;
x -= 5;
document.getElementById("demo49").innerHTML = x;
</script>

The *= Operator

1
2
3
4
5
6
7
8
9
10
 
<h1>The -= Operator</h1>
 
<p id="demo50"></p>
 
<script>
var x = 10;
x -= 5;
document.getElementById("demo50").innerHTML = x;
</script>

The /= Operator

1
2
3
4
5
6
7
8
9
10
 
<h1>The /= Operator</h1>
 
<p id="demo51"></p>
 
<script>
var x = 10;
x /= 5;
document.getElementById("demo51").innerHTML = x;
</script>

The %= Operator

1
2
3
4
5
6
7
8
9
10
 
<h1>The %= Operator</h1>
 
<p id="demo52"></p>
 
<script>
var x = 10;
x %= 5;
document.getElementById("demo52").innerHTML = x;
</script>

JavaScript Data Types

When adding a number and a string, JavaScript will treat the number as a string.

1
2
3
4
5
6
7
8
9
 
<p>When adding a number and a string, JavaScript will treat the number as a string.</p>
 
<p id="demo53"></p>
 
<script>
var x = 16 + "Volvo";
document.getElementById("demo53").innerHTML = x;
</script>

When adding a number and a string, JavaScript will treat the number as a string.

1
2
3
4
5
6
7
8
9
 
<p>When adding a number and a string, JavaScript will treat the number as a string.</p>
 
<p id="demo54"></p>
 
<script>
var x = "Volvo" + 16;
document.getElementById("demo54").innerHTML = x;
</script>

1
2
3
4
5
6
7
 
<p id="demo55"></p>
 
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo55").innerHTML = x;
</script>

1
2
3
4
5
6
7
 
<p id="demo56"></p>
 
<script>
var x = "Volvo" + 16 + 4;
document.getElementById("demo56").innerHTML = x;
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<p id="demo57"></p>
 
<script>
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC80';
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Mika"';
 
document.getElementById("demo57").innerHTML =
carName1 + "<br>" +
carName2 + "<br>" +
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>

1
2
3
4
5
6
7
8
9
10
11
 
<p id="demo58"></p>
 
<script>
var x1 = 34.00;
var x2 = 34;
var y = 123e5;
var z = 123e-5;
 
document.getElementById("demo58").innerHTML = x1 + "<br>" + x2 + "<br>" + y + "<br>" + z
</script>

1
2
3
4
5
6
7
8
 
<p id="demo59"></p>
 
<script>
var cars = ["Saab","Volvo","BMW"];
 
document.getElementById("demo59").innerHTML = cars[2];
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<p id="demo60"></p>
 
<script>
var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};
 
document.getElementById("demo60").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

The typeof operator returns the type of a variable or an expression.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<p>The typeof operator returns the type of a variable or an expression.</p>
 
<p id="demo61"></p>
 
<script>
document.getElementById("demo61").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34};
</script>

Both the value, and the data type, of a variable with no value is undefined.

1
2
3
4
5
6
7
8
9
10
 
<p>Both the value, and the data type, of a variable with no value is <b>undefined</b>.</p>
 
<p id="demo62"></p>
 
<script>
var person3;
document.getElementById("demo62").innerHTML =
person3 + "<br>" + typeof person3;
</script>

1
2
3
4
5
6
7
8
9
10
 
<p id="demo63"></p>
 
<script>
var car = "Auto";
document.getElementById("demo63").innerHTML =
"The value is: " +
car + "<br>" +
"The type is:" + typeof car;
</script>

Objects can be emptied by setting the value to null.

1
2
3
4
5
6
7
8
9
10
 
<p>Objects can be emptied by setting the value to <b>null</b>.</p>
 
<p id="demo64"></p>
 
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = null;
document.getElementById("demo64").innerHTML = typeof person;
</script>

Objects can be emptied by setting the value to undefined.

1
2
3
4
5
6
7
8
9
10
 
<p>Objects can be emptied by setting the value to <b>undefined</b>.</p>
 
<p id="demo65"></p>
 
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = undefined;
document.getElementById("demo65").innerHTML = typeof person;
</script>

1
2
3
4
5
6
7
8
9
10
 
<p id="demo66"></p>
 
<script>
document.getElementById("demo66").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>

Thanks to: w3schools.com

Tags: , , , ,

About Author

Michaël Germini

Related Posts

JavaScript

Length

42 Seconds Read
JavaScript

Closure

13 Seconds Read
JavaScript

Break

56 Seconds Read