JavaScript

The concept: a client-side scripting language
- It runs on the client browser. Each browser has JavaScript parsing engine
- Scripting language: does not need to compile, directly executed browser can be resolved
Features:
- You can enhance user interaction and html page html element can be controlled, so that a page has some dynamic effects, enhance the user experience.
JavaScript development history:
- In 1992, Nombase company, developed the first door client-side scripting language, specifically for form validation, named: C- -, later renamed: ScriptEase
- In 1995, Netscape (Netscape) company, has developed a client-side scripting languages: LiveScript. Later, the company invited experts SUN, modify LiveScript, named for JavaScript.
- In 1996, Microsoft developed a plagiarism JavaScript JScript language
- In 1997, ECMA (European Computer Manufacturers Association), ECMAScript, is the standard for all client-side scripting language
- Note:
  JavaScript = ECMAScript + JavaScript own unique stuff (BOM + DOM)
ECMAScript: standard client-side scripting language
- The basic syntax:
  - Html and binding mode:
    - 1. Internal JS
      - Defined <script>, js code label content is the body
    - 2. External JS
      - Defined <script>, introduced by an external js file src attribute
    - note:
      - <Script> can be defined anywhere in html page, but define the location will affect the order of execution
      - <Script> may define a plurality of
  - Comment:
    - Single-line comments: // footnotes
    - Multi-line comments: / * comment * content /
  - type of data:
    - The original data type (basic data types):
      - number: Digital. Integer / fractional / NaN (not a number is not a number of a numeric type)
      - string: string. The string "abc", "a", 'abc'
      - boolean：true 和 false
      - null: a placeholder object is empty
      - undefined: undefined. If a variable is not initialized to a value, it will be assigned by default to undefined
    - Reference data types: Object
  - variable:
    - Variables: memory for storing data of a small
    - Java is a strongly typed language, and JavaScript is weakly typed language
      - Strong typing: When open variable storage space, a space defined data types for future data storage can only store a fixed type of data
      - Weak Type: variable storage space when open, does not define the type of data storage space in the future, you can store any type of data
    - grammar:
      - var variable name = initial value;
  - Operator:
    - Unary operators: there is only one operand operator
      ++ - - + (plus sign) - (minus)
      - + + - -: increment (decrement)
        
        ++ (- -) the front, the first increment (decrement), recalculation
        
        ++ (- -) after the first operation to the increment (decrement)
      - + (-): sign
      - Note: In js, if the operand is not required for the type of operator, the engine will automatically js operands will typecast
        
        Other types of turn number:
        
        string rotation number: conversion according literal, a literal if not numbers, into NaN (Not a digit number)
        
        boolean turn number: true converted to 1, false into 0
    - Arithmetic operators:
      - “+”，“-”，“*”，“/”，“%”…
    - Assignment operator:
      - = += -=…
    - Comparison operators:
      - Compare mode:
        
        The same type: Direct comparison
        string: Comparative lexicographically. Bit-by-side comparison, up until the draw size
        
        Different types: the first type conversion, then compare
        "===": full equal. Prior to the comparison, to determine the type of, if not the same type, the process directly returns false
    - Logical Operators:
      - &&: and (short circuit)
      - ||: or (short)
      - ! :non
        
        Other types of transfer boolean:
        
        number: 0 or NaN is false, the other true
        
        string: In addition to the empty string ( ""). Others are true
        
        null and undefined: are false
        
        Objects: All objects are true
    - Ternary operator:
      - ? : Expression
      - There are a = 3;
        var b = 4;
        There c = a> b? 1: 0;
      - grammar:
        
        expression? Value 1: 2 value;
        
        Determining the value of the expression, if it is true, then the value 1, if false, then the value 2
  - Flow control statements:
    - if…else…
    - switch：
      - In Java, switch statements can accept data types: byte, int, shot, char , enumeration (1.5), String (1.7)
        Switch (variables):
        Case value:
      - In JS, switch statements also have to accept any type of raw data
    - while
    - do…while
    - for
  - JS special syntax:
    - 1. In the statement; end, if a line is only one statement will be omitted semicolon
    - 2. Definition of variables using the var keyword, you can not use
      - With: defined variables are local
      - No: defined variables are global

//定义number类型
        var num=1;
        var num2=1.2;
        var num3=NaN;

        //输出到页面上
        document.write(num+"---"+typeof(num)+"<br>");//1---number
        document.write(num2+"---"+typeof(num2)+"<br>");//1.2---number
        document.write(num3+"---"+typeof(num3)+"<br>");//NaN---number



        //定义string类型
        var str="abc";
        var str2='def';
        document.write(str+"---"+typeof(str)+"<br>");//abc---string
        document.write(str2+"---"+typeof(str2)+"<br>");//def---string

        //定义boolean
        var flag=true;
        document.write(flag+"---"+typeof(flag)+"<br>");//true---boolean

        //定义null,undefined
        var obj=null;
        var obj2=undefined;
        var obj3;
        document.write(obj+"---"+typeof(obj)+"<br>");//null---object
        document.write(obj2+"---"+typeof(obj2)+"<br>");//undefined---undefined
        document.write(obj3+"---"+typeof(obj3)+"<br>");//undefined---undefined
        document.write("<hr>");



        //类型转换
        var num=3;
        var a=num++;
        document.write(num);//4
        document.write(a);//3
        document.write("<hr>");


        var b=+"abc";
        alert(typeof (b));//number
        alert(b);//NaN


        var b=+"123abc";
        document.write(typeof (b));//number
        document.write(b+1);//NaN
        document.write("<hr>");

        var  flag=+true;
        var flag2=+false;
        document.write(typeof (flag)+"<br>");//number
        document.write(flag+"<br>");//1
        document.write(flag2+"<br>");//0



        var a=3;
        var b=4;

        document.write(a+b+"<br>");//7
        document.write(a-b+"<br>");//-1
        document.write(a*b+"<br>");//12
        document.write(a/b+"<br>");//0.75
        document.write(a%b+"<br>");//3


        //比较运算符
        document.write((3>4)+"<br>");//false
        document.write(("abc"<"acd")+"<br>");//true
        document.write(("123"==123)+"<br>");//true
        document.write(("123"===123)+"<br>");//全等于 false
        document.write("<hr>");

        //逻辑运算符
        var flag=true;
        document.write(flag+"<br>");//true
        document.write(!flag+"<br>");//false
        document.write("<hr>");

        var flag=3;//true
        document.write(flag+"<br>");//3
        document.write(!flag+"<br>");//false
        document.write(!!flag+"<br>");//true
        document.write("<hr>");

        var num=3;
        var num2=0;
        var num3=NaN;
        document.write(!!num+"<br>");//true
        document.write(!!num2+"<br>");//false
        document.write(!!num3+"<br>");//false
        document.write("<hr>");

        //string
        var str1="abc";
        var str2="";
        document.write(!!str1+"<br>");//true
        document.write(!!str2+"<br>");//false
        document.write("<hr>");

        //null & undefined
        var obj1=null;
        var obj2;
        document.write(!!obj1+"<br>");//false
        document.write(!!obj2+"<br>");//false

        //对象
        var date=new Date();
        document.write(!!date+"<br>");//true
        document.write("<hr>");

        var obj="123";
        if(obj!=null && obj.length>0)//防止空指针异常
        {
            alert(123);
        }
        //js中可以这样定义，简化书写
        if(obj)//防止空指针异常
        {
            alert(123);
        }


        //三元运算符
        var a=3;
        var b=4;
        var c=a>b?1:0;
        alert(c);//0




        var b;
        function fun() {
            b=4;
        }
        fun();
        alert(b);//4




        //switch语句
        var a="abc";
        switch (a) {
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("true");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
                break;
        }



        //1-100求和
        var sum=0;
        var num=1;
        while (num<=100)
        {
            sum+=num;
            num++;
        }
        alert(sum);//5050

        //for循环
        var sum=0;
        for(var i=1;i<=100;i++)
        {
            sum+=i;
        }
        document.write(sum+"<br>");//5050

Exercise: multiplication table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>

    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>

        document.write("<table align='center'>");
        for(var i=1;i<=9;i++)
        {
            document.write("<tr>");
            for(var j=1;j<=i;j++)
            {
                document.write("<td>");
                document.write(i+"*"+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            //document.write("<br>");
            document.write("</tr>");
        }

        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

Here Insert Picture Description

Lemon Love

Published 32 original articles · won praise 12 · views 1355

Private letter concerns

JavaWeb study notes (five) js

JavaScript

Guess you like