Recent Posts

  • Scrum Training Series
  • 10 coding challenges
  • Palette
  • Length
  • Closure

Recent Comments

    Archives

    • October 2017
    • May 2017
    • December 2016
    • November 2016
    • October 2016
    • March 2016
    • December 2015
    • November 2015
    • October 2015
    • September 2015
    • July 2015
    • May 2015

    Categories

    • Adventure
    • AngularJS
    • Arithmetic
    • Code
    • Code Playgrounds
    • Coding
    • CSS
    • Dashboard
    • Design
    • Drones
    • Editing
    • Framework
    • Gallery
    • HTML5
    • Html5 Slides
    • Icons
    • Java
    • JavaScript
    • jQuery
    • Js
    • Libraries
    • Library
    • Map
    • Music
    • Open Source
    • Palette
    • PostgreSQL
    • Prototyping
    • Responsive
    • Scripting Language
    • Scrum
    • SQL
    • Standard
    • svg
    • Syntax Highlighter
    • Tools
    • Travel

    Meta

    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org

    Michael Germini

    Menu
    • Design
    • Framework
    • Library
    • JavaScript
    • SQL
    • CSS
    • Palette
    • HTML5
    Michaël Germini
    on December 7, 2016
    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: getElementById, innerHTML, Operator, variables, w3schools
    Previous Article
    CREATE SCHEMA exe2
    Next Article
    for, while, for in, do while

    About Author

    Michaël Germini

    Related Posts

    19 December
    JavaScript

    Length

    40 Seconds Read
    18 December
    JavaScript

    Closure

    9 Seconds Read
    18 December
    JavaScript

    Break

    53 Seconds Read