Tuesday, May 30, 2023

JavaScript Operators

 

JavaScript Operators

Types of JavaScript Operators

There are different types of JavaScript operators:

  • Arithmetic Operators
  • Assignment Operators
  • Comparison Operators
  • String Operators
  • Logical Operators
  • Bitwise Operators
  • Ternary Operators
  • Type Operators   
    OperatorDescription
    +Addition
    -Subtraction
    *Multiplication
    **Exponentiation (ES2016)
    /Division
    %Modulus (Division Remainder)
    ++Increment
    --Decrement

  • Example
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The += Operator</h2>

<p id="demo"></p>

<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Saturday, May 20, 2023

JavaScript Functions

 

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Functions</h1>


<p>Call a function which performs a calculation and returns the result:</p>


<p id="demo"></p>


<script>

function myFunction(p1, p2) {

  return p1 * p2;

}


let result = myFunction(4, 3);

document.getElementById("demo").innerHTML = result;

</script>


</body>

</html>

JavaScript Variables

 

JavaScript Variables


4 Ways to Declare a JavaScript Variable:

  • Using var
  • Using let
  • Using const
  • Using nothing  

    What are Variables?

    Variables are containers for storing data (storing data values).

    In this example, xy, and z, are variables, declared with the var keyword:  

    Redeclaring a Variable Using let 

    Redeclaring a variable inside a block will not redeclare the variable outside the block:

  •  Redeclaring a variable using the let keyword can solve this problem.

    When to use JavaScript const?

    Always declare a variable with const when you know that the value should not be changed.

    Use const when you declare:

    • A new Array
    • A new Object
    • A new Function
    • A new RegExp  

      Constant Objects and Arrays

      The keyword const is a little misleading.

      It does not define a constant value. It defines a constant reference to a value.

      Because of this you can NOT:

      • Reassign a constant value
      • Reassign a constant array
      • Reassign a constant object

        But you CAN:

      • Change the elements of constant array
      • Change the properties of constant object

      Constant Arrays

      You can change the elements of a constant array:

Monday, May 15, 2023

JavaScript Output

 

JavaScript Display Possibilities

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().
  • Using innerHTML

    To access an HTML element, JavaScript can use the document.getElementById(id) method.

    The id attribute defines the HTML element. The innerHTML property defines the HTML content:

  • <!DOCTYPE html>

    <html>

    <body>


    <h2>My First Web Page</h2>

    <p>My First Paragraph.</p>


    <p id="demo"></p>


    <script>

    document.getElementById("demo").innerHTML = 5 + 6;

    </script>


    </body>

    </html> 

  • Using document.write()

    For testing purposes, it is convenient to use document.write():

  • <!DOCTYPE html>

    <html>

    <body>


    <h2>My First Web Page</h2>

    <p>My first paragraph.</p>


    <p>Never call document.write after the document has finished loading.

    It will overwrite the whole document.</p>


    <script>

    document.write(5 + 6);

    </script>


    </body>

    </html> 

  • Using window.alert()

    You can use an alert box to display data:

  • <!DOCTYPE html>

    <html>

    <body>


    <h2>My First Web Page</h2>

    <p>My first paragraph.</p>


    <script>

    window.alert(5 + 6);

    </script>


    </body>

    </html> 


Friday, May 12, 2023

External JavaScript

 

External JavaScript Advantages

Placing scripts in external files has some advantages:

  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads

To add several script files to one page  - use several script tags:

<!DOCTYPE html>

<html>

<body>


<h2>Demo External JavaScript</h2>


<p id="demo">A Paragraph.</p>


<button type="button" onclick="myFunction()">Try it</button>


<p>This example links to "myScript.js".</p>

<p>(myFunction is stored in "myScript.js")</p>


<script src="myScript.js"></script>


</body>

</html>


Monday, May 8, 2023

JavaScript Tutorial

 

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must 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 Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...