Learn JavaScript

Learn JavaScript

Variable and Data-type_1
Variable and Data-type_2
Variable and Data-type_3
Variable and Data-type_4
Variable and Data-type_5
Arithmetic Operators
Increment and Decrement
Assignment Operators
Diagrams
If Else_(Example-1)
If Else_(Example-2)
If Else (Example-3)
If Else (Example-4)
Switch_(Example-1)
Switch_(Example-2)
Arrey
Object
For Loop
While Loop
Do While Loop
Simple Function
Use if else in Function
Use Switch in Function
Use Loop in Function

<style type="text/css">
    .hd2{
    flex:1;
    margin-top:;
    padding:10px;
    color:black;
    height:60px;
    width:100%;
    border:;
    border-radius:;
    font-size: ;
    text-align:center;
    }
    #tb {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 300px;
    font-size: 20px;
    }
    
    .th {
    background-color: black;
    color: white;
    height: 50px;
    }
    .td {
    background-color: green;
    color: white;
    height: 50px;
    }
    
    </style>
    
    <div class="hd2">
    <h2>Primitive data types</h2>
    </div>
    <table id="tb">
    <tr>
    <th class="th">Number</th><td class="td"><b>Example</b><br/> var num = 50; <br> var float = 5.0;</td>
    </tr>
    <tr>
    <th class="th">String</th><td class="td"><b>Example</b><br/> var str = "Hello, world"</td>
    </tr>
    <tr>
    <th class="th">Boolian</th><td class="td"><b>Example</b><br/> var isTrue = true; <br> var isFalse = false;</td>
    </tr>
    </table>
    
    <div class="hd2">
    <h2>variable declaration types</h2>
    </div>
    
    <table id="tb">
    <tr>
    <th class="th">var</th><td class="td"><b>Example</b><br/> var num = 50;</td>
    </tr>
    <tr>
    <th class="th">let</th><td class="td"><b>Example</b><br/> let str = "Hello, world"</td>
    </tr>
    <tr>
    <th class="th">const</th><td class="td"><b>Example</b><br/> const float = 5.0 </td>
    </tr>
    </table>
    
    <style type="text/css">
    #tb1 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 750px;
    font-size: 20px;
    }
    #tb1 tr:nth-child(even){background-color: orange;}
    
    #tb2 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 750px;
    font-size: 20px;
    }
    #tb2 tr:nth-child(even){background-color: orange;}
    
    #tb3 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 400px;
    font-size: 20px;
    }
    #tb3 tr:nth-child(even){background-color: orange;}
    
    #tb4 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 800px;
    font-size: 20px;
    }
    #tb4 tr:nth-child(even){background-color: orange;}
    
    th {
    background-color: black;
    color: white;
    height: 50px;
    }
    
    .a {
    font-size: 30px;
    }
    </style>
    
    <div class="hd2">
    <h2>Arithmetic Operators</h2>
    </div>
    <table id="tb1">
    <tr>
    <th>Operator</th><th>Description</th><th>Example</th>
    </tr>
    <tr>
    <td class="a">+</td><td>Addition</td><td>3 + 3</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>6</td>
    </tr>
    <tr>
    <td class="a">-</td><td>Subtraction</td><td>6 - 3</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>3</td>
    </tr>
    <tr>
    <td class="a">*</td><td>Multiplication</td><td>3 * 3</td>
    </tr>
    <tr>
    <td></td> <td>Result</td><td>9</td>
    </tr>
    <tr>
    <td class="a">/</td><td>Division</td><td>20 / 5</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>4</td>
    </tr>
    <tr>
    <td class="a">%</td><td>Modulus</td><td>10 % 3</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>1</td>
    </tr>
    <tr>
    <td class="a">++</td><td>Increment</td><td>d = 5</td>
    </tr>
    <tr>
    <td>Result</td><td>d ++</td><td>6</td>
    </tr>
    <tr>
    <td class="a"><b>- -</b></td><td>Decrement</td><td>d = 5</td>
    </tr>
    <tr>
    <td>Result</td><td>d - -</td><td>4</td>
    </tr>
    </table>
    
    <div class="hd2">
    <h2>Assignment Operators</h2>
    </div>
    <table id="tb2">
    <tr>
    <th>Operator</th><th>Description</th><th>Example</th>
    </tr>
    <tr>
    <td class="a">=</td><td>Assignment</td><td>10</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>10</td>
    </tr>
    <tr>
    <td class="a">+=</td><td>Addition Assignment</td><td>10 += 5</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>15</td>
    </tr>
    <tr>
    <td class="a">-=</td><td>Subtraction Assignment</td><td>10 -= 5</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>5</td>
    </tr>
    <tr>
    <td class="a">*=</td><td>Multiplication Assignment</td><td>10 *= 5</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>50</td>
    </tr>
    <tr>
    <td class="a">/=</td><td>Division Assignment</td><td>10 /= 5</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>2</td>
    </tr>
    <tr>
    <td class="a">%=</td><td>Modulus Assignment</td><td>10 %= 5</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>0</td>
    </tr>
    </table>
    
    <div class="hd2">
    <h2>Assignment example</h2>
    </div>
    <table id="tb3">
    <tr>
    <th>Example-1</th><th>Example-2</th>
    </tr>
    <tr>
    <td>x = y</td><td>x = y</td>
    </tr>
    
    <tr>
    <td>x += y</td><td>x = x + y</td>
    </tr>
    
    <tr>
    <td>x -= y</td><td>x = x - y</td>
    </tr>
    
    <tr>
    <td>x *= y</td><td>x = x * y</td>
    </tr>
    
    <tr>
    <td>x /= y</td><td>x = x / y</td>
    </tr>
    
    <tr>
    <td>x %= y</td><td>x = x % y</td>
    </tr>
    </table>
    
    <div class="hd2">
    <h2>Comparison Operators</h2>
    </div>
    
    <table id="tb4">
    <tr>
    <th>Operator</th><th>Description</th><th>Example</th>
    </tr>
    <tr>
    <td class="a">==</td><td>equal value</td><td>5 == "5"</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>true</td>
    </tr>
    <tr>
    <td class="a">!=</td><td>not equal value</td><td>5 != "5"</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>false</td>
    </tr>
    <tr>
    <td class="a">===</td><td>equal value and equal type</td><td>5 === "5"</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>false</td>
    </tr>
    <tr>
    <td class="a">!==</td><td>not equal value and not equal type</td><td>5 !== "5"</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>true</td>
    </tr>
    <tr>
    <td class="a">></td><td>greater than</td> <td>10 > 5</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>true</td>
    </tr>
    <tr>
    <td class="a"><</td><td>less than</td><td>5 < 10 </td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>true</td>
    </tr>
    <tr>
    <td class="a">>=</td><td>greater than or equal </td><td>10 >= 10</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>true</td>
    </tr>
    <tr>
    <td class="a"><=</td><td>less than or equal </td><td>5 <= 10</td>
    </tr>
    <tr>
    <td></td><td>Result</td><td>true</td>
    </tr>
    </table>

Comments