This page looks best with JavaScript enabled

Javascript Basics

 ·   ·  โ˜• 6 min read

    Write within <script> tag

    <script type="text/javascipt">
        document.write('Hello World');
    </script>
    

    Semicolons are optional

    var num1=10
    var num2=11
    var num3=9;var num4=20;
    
    

    Case sensitivity

    Javascript is case insensitive

    var Num1=10
    var NUM2=11
    

    Comments

    Single line comments

    // this is a single line comment
    

    Multiline comments

    /* This is a multi-line comments
    that spans multiline
    */
    

    <noscript> tag

    The code placed inside noscript will be executed if js is not there

    <noscript>
        Javascript is not available
    </noscript>
    

    Datatypes

    3 Primitive data types

    • Numbers: 123, 232.34 etc
    • Strings: “hello world”
    • Boolean: true/false

    Other types:

    • null
    • undefined
    • object

    Variables

    Naming:

    • No reserved keywords
    • Must begin with a letter or an underscore
    • case sensitive: hello and Hello are two different variable
    var name;
    var num1;
    var num2,num3;
    name="Ohidur";
    
    

    Javascript scopes

    <html>
       <body onload = checkscope();>   
          <script type = "text/javascript">
             <!--
                var myVar = "global";      // Declare a global variable
                function checkscope( ) {
                   var myVar = "local";    // Declare a local variable
                   document.write(myVar);
                }
             //-->
          </script>     
       </body>
    </html>
    

    Result:

    local
    

    Operators

    • Arithmetic Operators
    • Comparison Operators
    • Logical (or Relational) Operators
    • Assignment Operators
    • Conditional (or ternary) Operators

    Arithmetic

    var a = 33;
    var b = 10;
    var c = "Test";
    var linebreak = "<br />";
    
    document.write("a + b = ");
    result = a + b;
    document.write(result);
    document.write(linebreak);
    
    document.write("a - b = ");
    result = a - b;
    document.write(result);
    document.write(linebreak);
    
    document.write("a / b = ");
    result = a / b;
    document.write(result);
    document.write(linebreak);
    
    document.write("a % b = ");
    result = a % b;
    document.write(result);
    document.write(linebreak);
    
    document.write("a + b + c = ");
    result = a + b + c;
    document.write(result);
    document.write(linebreak);
    
    a = ++a;
    document.write("++a = ");
    result = ++a;
    document.write(result);
    document.write(linebreak);
    
    b = --b;
    document.write("--b = ");
    result = --b;
    document.write(result);
    document.write(linebreak);
    
    

    Output:

    a + b = 43
    a - b = 23
    a / b = 3.3
    a % b = 3
    a + b + c = 43Test
    ++a = 35
    --b = 8
    

    Comparison

    var a = 10;
    var b = 20;
    var linebreak = "<br />";
    
    document.write("(a == b) => ");
    result = (a == b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a < b) => ");
    result = (a < b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a > b) => ");
    result = (a > b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a != b) => ");
    result = (a != b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a >= b) => ");
    result = (a >= b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a <= b) => ");
    result = (a <= b);
    document.write(result);
    document.write(linebreak);
    
    
    (a == b) => false 
    (a < b) => true 
    (a > b) => false 
    (a != b) => true 
    (a >= b) => false 
    a <= b) => true
    

    Logical Operators

    var a = true;
    var b = false;
    var linebreak = "<br />";
    
    document.write("(a && b) => ");
    result = (a && b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a || b) => ");
    result = (a || b);
    document.write(result);
    document.write(linebreak);
    
    document.write("!(a && b) => ");
    result = (!(a && b));
    document.write(result);
    document.write(linebreak);
    
    
    (a && b) => false 
    (a || b) => true 
    !(a && b) => true
    

    Bitwise operator

    & (Bitwise AND)

    It performs a Boolean AND operation on each bit of its integer arguments.
    
    Ex: (A & B) is 2.
    

    | (BitWise OR)

    It performs a Boolean OR operation on each bit of its integer arguments.
    
    Ex: (A | B) is 3.
    

    ^ (Bitwise XOR)

    It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both.
    
    Ex: (A ^ B) is 1.
    

    ~ (Bitwise Not)

    It is a unary operator and operates by reversing all the bits in the operand.
    
    Ex: (~B) is -4.
    

    « (Left Shift)

    It moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on.
    
    Ex: (A << 1) is 4.
    

    >> (Right Shift)

    Binary Right Shift Operator. The left operandโ€™s value is moved right by the number of bits specified by the right operand.
    
    Ex: (A >> 1) is 1.
    

    >» (Right shift with Zero)

    This operator is just like the >> operator, except that the bits shifted in on the left are always zero.
    
    Ex: (A >>> 1) is 1.
    
    var a = 2; // Bit presentation 10
    var b = 3; // Bit presentation 11
    var linebreak = "<br />";
    
    document.write("(a & b) => ");
    result = (a & b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a | b) => ");
    result = (a | b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a ^ b) => ");
    result = (a ^ b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(~b) => ");
    result = (~b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a << b) => ");
    result = (a << b);
    document.write(result);
    document.write(linebreak);
    
    document.write("(a >> b) => ");
    result = (a >> b);
    document.write(result);
    document.write(linebreak);
    
    

    Output:

    (a & b) => 2 
    (a | b) => 3 
    (a ^ b) => 1 
    (~b) => -4 
    (a << b) => 16 
    (a >> b) => 0
    

    Assignment Operator

    = (Simple Assignment )

    Assigns values from the right side operand to the left side operand
    
    Ex: C = A + B will assign the value of A + B into C
    

    += (Add and Assignment)

    It adds the right operand to the left operand and assigns the result to the left operand.
    
    Ex: C += A is equivalent to C = C + A
    

    โˆ’= (Subtract and Assignment)

    It subtracts the right operand from the left operand and assigns the result to the left operand.
    
    Ex: C -= A is equivalent to C = C - A
    

    *= (Multiply and Assignment)

    It multiplies the right operand with the left operand and assigns the result to the left operand.
    
    Ex: C *= A is equivalent to C = C * A
    

    /= (Divide and Assignment)

    It divides the left operand with the right operand and assigns the result to the left operand.
    
    Ex: C /= A is equivalent to C = C / A
    

    %= (Modules and Assignment)

    It takes modulus using two operands and assigns the result to the left operand.
    
    Ex: C %= A is equivalent to C = C % A
    
    var a = 33;
    var b = 10;
    var linebreak = "<br />";
    
    document.write("Value of a => (a = b) => ");
    result = (a = b);
    document.write(result);
    document.write(linebreak);
    
    document.write("Value of a => (a += b) => ");
    result = (a += b);
    document.write(result);
    document.write(linebreak);
    
    document.write("Value of a => (a -= b) => ");
    result = (a -= b);
    document.write(result);
    document.write(linebreak);
    
    document.write("Value of a => (a *= b) => ");
    result = (a *= b);
    document.write(result);
    document.write(linebreak);
    
    document.write("Value of a => (a /= b) => ");
    result = (a /= b);
    document.write(result);
    document.write(linebreak);
    
    document.write("Value of a => (a %= b) => ");
    result = (a %= b);
    document.write(result);
    document.write(linebreak);
    

    Output:

    Value of a => (a = b) => 10
    Value of a => (a += b) => 20 
    Value of a => (a -= b) => 10 
    Value of a => (a *= b) => 100 
    Value of a => (a /= b) => 10
    Value of a => (a %= b) => 0
    

    Ohidur Rahman Bappy
    WRITTEN BY
    Ohidur Rahman Bappy
    ๐Ÿ“šLearner ๐Ÿ Developer