After reading the Xiaomi Mi 12 conference, I wrote this JavaScript note overnight

Basic knowledge about JavaScript

First, the concept : A client-side scripting language
  1. Running in the client-side browser. Every browser has a JavaScript parsing engine
  2. Scripting language: It can be parsed and executed directly by the browser without compiling

2. Function : It can enhance the interaction between the user and the html page, and can control the html element, so that the page has some dynamic effects and enhance the user's experience.

3. History of JavaScript development:
  1. In 1992, Nombase Company developed the first client-side scripting language, which was specially used for form verification. Named: C--, later renamed: ScriptEase
  2. In 1995, Netscape (Netscape) company developed a client-side scripting language: LiveScript. Later, experts from SUN Company were invited to modify LiveScript and named it JavaScript
  3. In 1996, Microsoft copied JavaScript to develop the JScript language
  . 4. In 1997, ECMA (European Computer Manufacturers Association) developed a standard for client-side scripting language: ECMAScript is the coding method that unifies all client-side scripting languages.

 JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

Basic grammar

• ECMAScript: The Standard for Client-Side Scripting Languages
  1. basic grammar：

     1. Combine with html

        1. Internal JS:
           • Definition <script>, the content of the tag body is the js code
        2. External JS:
           • Definition <script>, import external js files through the src attribute
        • Note:
          1. <script>Can be defined anywhere in the html page. But the location of the definition affects the execution order.
          2. <script>Multiple can be defined.

     2. Notes

        1. single line comment: // comment content
        2. Multi-line comments: / comment content /

     3. type of data：

        1. Primitive data types (basic data types):

           1. number: number. Integer/Decimal/NaN (not a number a number type that is not a number)
           2. string: String. String "abc" "a" 'abc'
           3. boolean: true和false
           4. null: a placeholder for an empty object
           5. undefined: undefined. If a variable is not initialized, it will default to undefined

        2. Reference Data Type: Object

     4. variable

        • Variable: A small piece of memory that stores data

        • Java language is a strongly typed language whereas JavaScript is a weakly typed language.

          • Strong type: When opening up variable storage space, it defines the data type of the data stored in the space in the future. Can only store fixed types of data
          • Weak type: When opening up variable storage space, the future storage data type of the space is not defined, and any type of data can be stored.

        • grammar:

          • var variable name = initialization value;

        • typeof operator: Get the type of a variable.

          • Note: After the null operation, the object is obtained

     5. operator

        1. Unary operators: operators with only one operand
           ++, -- , + (positive sign)

           • ++ --: self-increment (self-decrement)
             • ++(–) first, increment (decrement) first, then operate
             • After ++(–), the operation is performed first, and then the self-increment (self-decrement)
           • +(-): plus or minus sign
           • Note: In JS, if the operand is not the type required by the operator, the js engine will automatically convert the operand to the type
             • Convert other types to number:
               • string to number: Convert according to the literal value. If the literal is not a number, convert to NaN (a number that is not a number)
               • boolean to number: true to 1, false to 0

        2. arithmetic operators

           • • • / % …

        3. assignment operator
           = += -+…

        4. comparison operator

           < >= <= == === (all equal)

           • way of comparison
             1. same type: direct comparison
                • Strings: Compare lexicographically. Compare bit by bit until the size is obtained.
             2. Different types: type conversion first, then comparison
                • ===: All equal. Before comparing, first judge the type, if the type is not the same, return false directly

        5. Logical operators
           && || !

           • Other types to boolean:
             1. number: 0 or NaN is false, others are true
             2. string: true except for the empty string ("")
             3. null&undefined: both are false
             4. Objects: true for all objects

        6. Ternary operator
           ? : expression
           var a = 3;
           var b = 4;

           var c = a > b ? 1:0;

           • grammar:
             • expression? value1:value2;
             • Judging the value of the expression, if it is true, it takes the value 1, if it is false, it takes the value 2;

     6. flow control statement：

        1. if…else…
        2. switch:
           • In java, the data types that the switch statement can accept: byte int shor char, enumeration (1.5), String (1.7)
             • switch(variable):
               case value:
           • In JS, switch statements can accept arbitrary primitive data types
        3. while
        4. do…while
        5. for

     7. JS special syntax：

        1. The statement ends with ;, if there is only one statement in a line, ; can be omitted (not recommended)
        2. Variables are defined using the var keyword or not
           • Use: The defined variable is a local variable
           • no: the defined variable is a global variable (not recommended)

base object

	1. Function：函数(方法)对象
        1. 创建：
            1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
            2. 
                function 方法名称(形式参数列表){
                    方法体
                }

            3. 
               var 方法名 = function(形式参数列表){
                    方法体
               }
        2. 方法：

        3. 属性：
            length:代表形参的个数
        4. 特点：
            1. 方法定义是，形参的类型不用写,返回值类型也不写。
            2. 方法是一个对象，如果定义名称相同的方法，会覆盖
            3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
            4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
        5. 调用：
            方法名称(实际参数列表);
	
	2. Array:数组对象
        1. 创建：
            1. var arr = new Array(元素列表);
            2. var arr = new Array(默认长度);
            3. var arr = [元素列表];
        2. 方法
            join(参数):将数组中的元素按照指定的分隔符拼接为字符串
            push()	向数组的末尾添加一个或更多元素，并返回新的长度。
        3. 属性
            length:数组的长度
        4. 特点：
            1. JS中，数组元素的类型可变的。
            2. JS中，数组长度可变的。
	3. Boolean
	4. Date：日期对象
        1. 创建：
            var date = new Date();

        2. 方法：
            toLocaleString()：返回当前date对象对应的时间本地字符串格式
            getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
	5. Math：数学对象
        1. 创建：
            * 特点：Math对象不用创建，直接使用。  Math.方法名();

        2. 方法：
            random():返回 0 ~ 1 之间的随机数。 含0不含1
            ceil(x)：对数进行上舍入。
            floor(x)：对数进行下舍入。
            round(x)：把数四舍五入为最接近的整数。
        3. 属性：
            PI
	6. Number
	7. String
	8. RegExp：正则表达式对象
		1. 正则表达式：定义字符串的组成规则。
			1. 单个字符:[]
				如： [a] [ab] [a-zA-Z0-9_]
				* 特殊符号代表特殊含义的单个字符:
					\d:单个数字字符 [0-9]
					\w:单个单词字符[a-zA-Z0-9_]
			2. 量词符号：
				?：表示出现0次或1次
				*：表示出现0次或多次
				+：出现1次或多次
				{m,n}:表示 m<= 数量 <= n
					* m如果缺省： {,n}:最多n次
					* n如果缺省：{m,} 最少m次
			3. 开始结束符号
				* ^:开始
				* $:结束
		2. 正则对象：
			1. 创建
				1. var reg = new RegExp("正则表达式");
				2. var reg = /正则表达式/;
			2. 方法	
				1. test(参数):验证指定的字符串是否符合正则定义的规范	
	9. Global
		1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。  方法名();
		2. 方法：
		    encodeURI():url编码
		    decodeURI():url解码

		    encodeURIComponent():url编码,编码的字符更多
		    decodeURIComponent():url解码

		    parseInt():将字符串转为数字
		        * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
		    isNaN():判断一个值是否是NaN
		        * NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

		    eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
        3. URL编码
           传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

WELL

1. concept: Browser Object Model

   • Encapsulate the various components of the browser into objects.

2. composition:

   • Window: window object
   • Navigator: browser object
   • Screen: Display screen object
   • History: History object
   • Location: address bar object

3. Window: window object

   1. create

   2. method

      1. Methods related to popup boxes:
         alert() Displays an alert box with a message and a confirmation button.
         confirm() displays a dialog with a message and confirm and cancel buttons.
         * The method returns true if the user clicks the OK button
         * The method returns false if the user clicks the Cancel button
         prompt() Displays a dialog that prompts the user for input.
         * Return value: Get the value entered by the user

      2. Methods related to opening and closing:
         close() closes the browser window.
         * Who calls me, who I close
         open() Opens a new browser window
         * Returns a new Window object

      3. The timer-related way
         setTimeout() calls a function or evaluates an expression after a specified number of milliseconds.
         * Parameters:
         1. js code or method object
         2. millisecond value
         * Return value: unique identifier, used to cancel the timer
         clearTimeout() Cancel the timeout set by the setTimeout() method.

         setInterval() calls a function or evaluates an expression at the specified interval (in milliseconds).
         clearInterval() cancels the timeout set by setInterval().

   3. Attributes:

      1. Get other BOM objects:
         history
         location
         Navigator
         Screen:
      2. Get the DOM object
         document

   4. Features

      • The Window object does not need to be created and can be used directly with the window. window.methodName();
      • The window reference can be omitted. method name();

4. Location: address bar object

   1. Create (get):

      1. window.location
      2. location

   2. method:

      • reload() Reloads the current document. refresh

   3. Attributes

      • href sets or returns the full URL.

5. History: History object

   1. Create (get):

      1. window.history
      2. history

   2. method:

      • back() loads the previous URL in the history list.
      • forward() loads the next URL in the history list.
      • go(parameter) Load a specific page in the history list.
        • parameter:
          • Positive number: go forward a few history records
          • Negative number: go back a few history records

   3. Attributes:

      • length Returns the number of URLs in the current window's history list.

JUDGMENT

• Concept: Document Object Model Document Object Model

  • Each component of a markup language document is encapsulated as an object. These objects can be used to perform dynamic CRUD operations on markup language documents

• The W3C DOM standard is divided into 3 distinct parts:

  • Core DOM - the standard model for any structured document

    • Document: Document object

    • Element: element object

    • Attribute: attribute object

    • Text: text object

    • Comment: Comment object

    • Node: Node object, parent object of the other 5

  • XML DOM - Standard Model for XML Documents
  • HTML DOM - standard model for HTML documents

• Core DOM Model:

  • Document: Document object
    1. Create (get): You can use the window object to get it in the html dom model
       1. window.document
       2. document
    2. method:
       1. Get the Element object:
          1. getElementById() : Get the element object according to the value of the id attribute. The id attribute value is generally unique
          2. getElementsByTagName(): Get element objects based on element names. The return value is an array
          3. getElementsByClassName(): Get element objects according to the value of the Class attribute. The return value is an array
          4. getElementsByName(): Get element objects based on the value of the name attribute. The return value is an array
       2. Create other DOM objects:
          createAttribute(name)
          createComment()
          createElement()
          createTextNode()
    3. Attributes
  • Element: element object
    1. Get/Create: Get and create through document
    2. method:
       1. removeAttribute(): remove attribute
       2. setAttribute(): set attributes
  • Node: Node object, parent object of the other 5
    • Features: All dom objects can be considered as a node
    • method:
      • CRUD dom tree:
        • appendChild(): Adds a new child node to the end of the node's child node list.
        • removeChild() : removes (and returns) the specified child of the current node.
        • replaceChild(): Replace a child node with a new node.
    • Properties:
      * parentNode Returns the parent node of the node.

• HTML DOM

  1. Setting and getting the tag body: innerHTML
  2. Using the properties of the html element object
  3. Control element styles
     1. Use the element's style attribute to set
        such as:
        //Modify style 1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size–> fontSize
        div1.style.fontSize = "20px";
     2. Define the style of the class selector in advance, and set its class attribute value through the element's className attribute.

event monitoring mechanism

• Concept: After some components are executed some operations, trigger the execution of some code.
  • Event: some action. Such as: single click, double click, keyboard pressed, mouse moved
  • Event Source: Component. Such as: button text input box...
  • Listener: Code.
  • Register listeners: Combine events, event sources, and listeners together. When an event occurs on the event source, a listener code is triggered to execute.

common events

1. 点击事件：
	1. onclick：单击事件
	2. ondblclick：双击事件
2. 焦点事件
	1. onblur：失去焦点
	2. onfocus:元素获得焦点。

3. 加载事件：
	1. onload：一张页面或一幅图像完成加载。

4. 鼠标事件：
	1. onmousedown	鼠标按钮被按下。
	2. onmouseup	鼠标按键被松开。
	3. onmousemove	鼠标被移动。
	4. onmouseover	鼠标移到某元素之上。
	5. onmouseout	鼠标从某元素移开。
5. 键盘事件：
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。
6. 选择和改变
	1. onchange	域的内容被改变。
	2. onselect	文本被选中。

7. 表单事件：
	1. onsubmit	确认按钮被点击。
	2. onreset	重置按钮被点击。