JavaScript - Fundamental

3 ways to use JavaScript

Embedded in html (inline) - not recommend

<body>
  <a href="javascript:alert('hello')">click</a>
</body>

Internal

<body>
  <script>
  alert("hello")
  </script>  
</body>

External

 <body>
   <script scr = "js/hello.js"></script>
 </body>

alert("Hi there!")

JavaScript syntax

// print 
console.log()
//dialog
alert（"hello"）
// write content to html page
document.write("hello")
// get data type - typeof
var num  = 'xx'
console.log(typeof num) //out: string

JavaScropt data types

number

var num = 10;

string

var sex = 'male';
var sex = "female";

boolean

var flag1 = true;
var flag2 = false;

undefined and null (2 special types in Js)

object - complex type（a collection of various values）

Narrow object

var obj = {
  name = "mike";
  sex = "male";
  height = "180"
}
// fetch object values
console.log(obj.name)
console.log(obj.sex)

Array - an array can contain multiple data types

var arr = [1,3,5,7,9]
var arr = [1,"hello",false]

Function
```
function fn(){
  //code
} 
```

Operator "="

== // compare value
=== // compare value and data type

Operator "++"

var a = 10;
print(a++) //10
print(++a) //11

Operator "!"

//non-boolean will convert to boolean value while using rebellion
print(!undefined)//true
print(!null) // true
print(!0)//true
print(!NaN)//true
print(!'')//true

Switch

break is required in swich syntax to prevent case penetration

penetration example:

<script>
  var situation = "Monday";
switch(situation){
  case "Monday":
    console.log("Today is Monday");
    //break; <-- if there is no break, console will print out following value Today is Tuesday, Wrong situation... 
  case "Tuesday":
    console.log("Toady is Tuesday");
    break;
  default:
    console.log("Wrong situation");
    break;
}
</script>

Example to use switch and case penetration:

<script>
        // Example of using siwtch and case penetration to determine how many todays in a specific month 
        // 31 days: 1 3 5 7 8 10 12 
        // 30 days" 4 6 9 11
        // 28 or 29 --> 2

        var situation = 2;
        var year = 2021;

        switch(situation){
            case 1: case 3: case 5: case 7: case 8: case 10: case 12:
                console.log("31 days");
                break;
            case 4: case 6: case 9: case 11:
                console.log("30 days");
                break;
            case 2:
                if(year%4 === 0 && year%100!= 0 ){
                    console.log("29 days");

                }else{
                    console.log("28 days")
                }
                break;
        }
    </script>

Ternary operator

// determine if the input value is odd or even
var num = 10;
x = num%2 === 0 ? "even" : "odd";
// in python the ternary operator will be like:
var = true_val if condition else false_val

for loop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var example = "multiplicationTable";
        switch(example){

        // example 1: print out odd numbers between 0 and 100
        case "printOddNumbers":
            for(var i = 0; i< 100; i++){
                if(i%2!==0){
                document.write("odd:"+i);
                document.write("<br>"); // new line
                // console.log(i);
                }
            }
            break;

        // example 2: 99 multiplication table , it will be like: 
        /*
        1*1=1
        2*1=2 2*2=4
        3*1=3 3*2=6 3*3=9
        4*1=4 4*2=8 4*3=12 4*4=16
        5*1=5 5*2=10 5*3=15 5*4=20 5*5=25
        6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36
        7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49
        8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64
        9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81
        */
        case "multiplicationTable":
            for(var i = 1; i < 10; i++){
                document.write("<br>");
                for(var j = 1; j <= i; j++){
                    document.write(i + "*" + j + "=" + (i*j)+ " ");
                }
            }
            break;
        default: document.write("Wrong case"); break;
    }
    </script>
</body>
</html>

Array

// typeof and isArray
var list1 = [10,20,30]
//typeof
console.log(typeof list1)// out: object
//isArray
console.log(Array.isArray(list1)) //return true

// push() and pop()
list1.push()
list1.pop()

//concat
var arr1 = [10,20];
var arr2 = [20,30];
console.log(arr1.concat(arr2))//out: [10,20,20,30]

//join
var arr3 = ["hello","world"];
console.log(arr3.join(" "));//hello world

//using arrary to store objects
var arr4 = [
  {
    name:"mike",
    major:"IT"
  },
  {
    name:"Ape",
    major:"ITM"
  }
]

//indexOf() --> return index of element, if the element is not exist, return -1
console.log(arr2.indexOf(20))//return 0

Search This Blog

JavaScript

Fundamental

JavaScript - Fundamental

3 ways to use JavaScript

JavaScript syntax

JavaScropt data types

Comments

Post a Comment