Basic concepts and basic use cases of javascript

1. Characteristics of javascript and differences with java
javascript is based on object and event driven language, application and client.
Characteristics of js
Interactivity: the dynamic interaction of information
Security: unable to access local disk file
Cross platform: in java, cross platform, virtual machine; javascript can run only if it can support js browser
The difference with java:
(1) java is sun company, now oracle; js is Netscape company
(2) JavaScript is object-based, java is object-oriented
(3) java is a strongly typed language, js is a weakly typed language
-For example, int i = "10" in java;
- js: var i = 10; var m = "10";
(4) JavaScript can be executed only by parsing, while java needs to be compiled into a bytecode file before execution.
(5) java and JavaScript are case sensitive
 
2. Case of using js
1. Use in label:
<script type="text/javascript"> js Code </script>

 

2. External reference js file, create js file, write js code
<script type="text/javascript" src="1.js"></script>

 

3. Variable and data type cases:
<script>
var str="abc";
alert(str);
 
var str1="123"
var mm = 123;
 
alert(mm)
alert(typeof(mm))//View the data type of the current variable
 
var str2 = null//Indicates that the object is empty
document.writeln(str)
document.writeln(typeof(str))
 
var str3 //Define no assignment
document.writeln(str2)//undefined
 
var flag = true;
alert(flag);
 
var obj = new Object();//Object class
document.writeln(obj)
 
</script>

 

4. Statement case
<script>
    var a = 1;
    if (a==1){
        alert(1);
    }else{
        alert(2)
    }

    var b = 2;
    switch(b){
        case 2:
            alert(2);
            break;
        case 3:
            alert(3);
            break;
        default:
            alert("other")
            break;
    }

    var i= 5;
    while(i>1){
        alert(i)
        i--;
    }

   for(var j = 1; j <=3; j++){
       alert(j);
   }
</script>

 

 
5. Operator case
 
<script type="text/javascript">
    var i = 123;
    document.write(i/1000*1000);
    //js It doesn't distinguish integers from decimals 123/1000 = 0.123;

    var str ="456";
    var str1 = "abc";
    // alert(str+1)//4561 concatenation of additive strings
    // alert(str-1)//455 real subtraction
    document.write(str1-1)//Tips NaN Indicates not a number

    var flag = true; //true=1
    // alert(flag+1);//2

    var flag1 = false; //false=0
    document.write(flag1+1)//1

    //==Only the judgment value is independent of the type;===Judgment value and type
    var aa = 5;
    var a1 = "5"
    if(a1===5){
        document.write(5);
    }else{
        document.write("other")
    }
    
    var result = -1 > 0? true : false;
    document.writeln("result:" +result)
    
</script>

 

 
6, 99 multiplication table cases
 
<head>
    <meta charset="UTF-8">
    <title>Multiplication table</title>
    <style type="text/css">
        table{
            matgin: auto;
            border-collapse: collapse;
        }

        td {
            padding: 5px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.write("<table border='1' cellspacing='0'>")
        document.write("<caption>9*9 Multiplication table</caption>");
        for(var i = 1; i <= 9; i++){
            document.write("<tr>");
            for(var j = 1; j <= i; j++){
                document.write("<td>");
                document.write(j + "*" + i + "="+ j*i);
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</body>

 

 
7. Define array cases
 
<script type="text/javascript">
    var arr = [1,2,"3"];
    // document.write(arr);
    document.write("length:" + arr.length);
    var arr1 = new Array(5);
    arr1[0] = "a";
    arr1[1] = "b";
    arr1[2] = "c";
    var arr2 = new Array(3,4,5);
    
    document.write(arr2);
</script>

 

Array method case
1. concat() connects two or more arrays and returns the result
2. reverse() reverses the array
3. join(separator) is the opposite of split(), which assembles an array into a string through a separator.
4. sort()
 
<script>
    var arr1 = [1,8,3];
    var arr2 = [4,5];

    var arr3 = arr1.concat(arr2);
    document.writeln(arr3);

    arr3 = arr1.reverse();
    document.writeln(arr3);
    document.writeln("<br>")

    arr3 = arr1.join("#");
    document.writeln(arr3);
    document.writeln("<br>")

    /*
        Call the sort method
            1. Numbers are sorted by first place
            2. If it's letters, in alphabetical order
        Function (a, b) a - B ascending
     */
    arr1.sort();
    document.writeln(arr1);
    document.writeln("<br>")

    arr4 = ['jack','Rose','Tom','Jerry','Kate'];
    arr4.sort();
    document.writeln(arr4);
    document.writeln("<br>")
    var method = function (a,b) {
        return b - a;
    };
    arr1.sort(function (a,b) {
        return b - a;
    });
    document.writeln(arr1);
    document.writeln("<br>")

</script>

 

8. Function case
<script type="text/javascript">
    /*
    *First method: use function keywords
    * In the parameter list of a function, you don't need to write var to write the parameter name directly
    * function Method name (parameter list){
    *       Method body
    *       Return value is optional}
    * */
    function test(){
        alert("a");
    }
    //Calling method
    // test();
    function add1(a,b){
        var sum = a + b;
        alert(a+b);
    }
    // add1(2,3);

    function add2(a,b,c){
        var sum1 = a + b + c;
        return sum1;
    }

    alert(add2(2,3,4));

    //The second way is anonymous function
    var add3 = function(m,n){
        document.write(m+n);
    }
    add3(5,6);

    //The third way: dynamic functions, using the js Built in objects inside Function
    // var add4 = new Function("x,y","var sum; sum=x+y;return sum;");

    var canshu = "x,y";
    var fagnfati = "var sum;sum=x+y;return sum;"
    var add4 = new Function(canshu,fagnfati);
    alert(add4(1,9));

</script>

 

9. The case of carousel chart
 
<body>
    <img src="../img/0.jpg" width="800px" id="myPic">
    <script >
        var i = 0;
        var method = function () {
            var img = document.getElementById("myPic");
            img.src = "../img/"+i+".jpg";
            i++;
            if(i == 5){
                i = 0;
            }
        }
        window.setInterval(method,1000)
    </script>
</body>

 

10. Built in object cases
<script type="text/javascript">
    document.write("Now the time is:" + new Date() + "<hr/>");
    document.write("Now the time is:" + new Date().toLocaleString() + "<hr/>");

    var a = "123abc123";
    var i = parseInt(a);
    document.write(i + "<br/>");

    var b = "3.14abc123";
    i = parseInt(b);

    document.write(i + "<br/>");

    var age = "1012";
    document.write(isNaN(age) + "<br/>");//Not a numeric character, return true

    var str = "hello world Hello world";
    document.write(str + "<hr/>");
    
    str = encodeURI(str);
    document.write(str + "<hr/>");

    //After coding URL Decode
    str = decodeURI(str);
    document.write(str + "<hr/>");

</script>

 

Tags: Javascript Java Oracle

Posted on Fri, 31 Jan 2020 14:44:52 -0800 by robh76