JavaScript advanced learning

MQ train 2021-02-23 02:18:37
javascript advanced learning

JavaScript Advanced learning

JavaScript Learn the order of acceptance :

  1. Familiar with basic concepts : Variable , data type , function , Operator , expression , object ( Custom object , Built-in objects ). These basic concepts must be familiar with , To what extent , See a concept , You can write sample code immediately , That's enough .

  2. be familiar with DOM: Tree structure , Node classification , Add a node , Delete node , Modify properties , The binding event .

  3. be familiar with jQuery: Selectors 、 Operation properties and styles 、 The binding event 、 Node operation 、 Animation method .

  4. use jQuery Achieve the page effect seen on the web page , For example, the rotation chart , The various effects of the menu , Back to the top and so on .

  5. Try to use native js Realization jQuery The common method of . such as addClass,removeClass,index these .

above 5 If you can't do it , Don't think about closures , Prototype inheritance ,ES6 New features, these things .

summary : Study step by step , Too much haste will affect the efficiency of learning , The most important thing is to give up learning because of frustration . I hope you can learn as soon as possible .

[ Familiar with basic concepts ]

One . Variable

  1. Basic concepts of variables

A box for things

Variables are containers for storing data. We get data through variable names , Even the data can be modified .

A piece of space applied by a program in memory for storing data

  1. Use of variables

    Declare variables assignment

    Declare variables var( Statement ) / Equivalent to naming /

    assignment The name of the previous declaration = Save the value of the data

    Output results Output the given name ( prompt / alert / console.iog )

  2. Variable syntax extension

    After a variable is repeatedly assigned, the last assignment shall prevail

    Declare only, do not assign default output undefined

    If you do not declare or assign values, you will report an error

    Without declaring a direct assignment, you can use ( Not recommended )

    The next operation cannot be performed after the error is reported

    1. Exchange variables

      You need temporary variables

      hold a Give temporary variables

      hold 2 to 1

      Give a temporary variable to 2

 example :
var a="1";
var b="2";
var c; // Temporary variable
c = a;
a = b;
b = c;

Two . data type

  1. Introduction to data types
    Different data occupy different data space , According to the different storage space, the data is divided into different data types

    The data type of the variable is uncertain ; To determine the data type according to the assignment of the variable

    js The variable data type of is only when the program is running , Determined by the value to the right of the equal sign

    js Data types that are dynamic language variables can become

  2. Simple data types

  • Number The number type contains integer , Floating point value ; Such as ;21/0.21( Integers and decimals )

    • Digital output 0 It starts with octal 0x The beginning is 16 Base number

    • ​ Number.MAX_VALUE JavaScript The maximum value of the median value

    • Number.MIN_VALUE JavaScript The minimum value of the median value

    • NaN Represents a non numerical value

    • isNaN It's used to judge whether it's a number or not isNaN( Content );[ It's a digital display false, Non digital display true;]

  • Boolean Boolean type Such as :true、false、 Equivalent to 1 and 0;

  • String String type The syntax is single quotation mark / Double quotes ; The same quotation marks cannot be nested within each other
    String escape character Strings are all in \ start , Escape characters must be written in quotation marks
    | Escape character | effect |
    |\n| A newline |
    |\\ | Slash |
    |\' | Single quotation marks |
    |\" | Double quotes |
    |\t | Tab Indent |
    |\b | Space |

String length length Property to get the length of the entire string

String splicing use “+” String splicing ; Add the values , The characters are connected

Don't write variables to strings , Through and “+” String implementation

  1. Undefined and Null

    ** A variable that has not been assigned a value after declaration will have a default value undefined( If you are connecting or adding, pay attention to the result )

    A declaration variable is given to null value , The value stored in it is empty ( Pay attention to the result of connection and addition )**

  2. Test data type

    Output typeof+ data Display data types ( adopt typeof To determine the type of data )

    data type meaning
    number Digital
    string Character
    boolean Boolean type
    undefined Undefined type
    object Empty type literal quantity
  3. Number literal quantity :1、2、3

    Literal of a string :‘ Content ’

    Boolean literal :true、false

  4. Conversion of data types ( Converting a variable of one data type to another data type )

    Convert to string type

    • toString
      Variable .toString
    • tring( Variable )[ Force transformation ]
    • The plus sign stitches strings ( Also known as implicit transformation )
      Output ( Variable +“ character string ”)
    • Convert to digital (string= Variable )
      • parselnt(string) function take string Type into 【 Integer values 】 parselnt("223")
        Will remove units
      • ​ parseFloat(string) function take string Type into 【 Floating point numerical type 】
    • Convert to Boolean
      • Boolean() function Its He converted the type to Boolean Boolean('b')|

Summary of variable data types

programing language ----> compiler ---------> machine language ( Binary system )

identifier : It means that developers are variables 、 attribute 、 function 、 Parameter gets the name ;
keyword : Refer to js Words that have already been used , Can no longer be a variable 、 Method name ;
Reserved words : It's actually reserved keywords ;

Exchange variables :

Temporary variable = There are valued variables ( Give the right value to the left )

3、 ... and . Operator

  1. Arithmetic operator ‘+’、‘-’、‘*’、‘/’、‘%’( Remainder )【 Returns the division remainder 9%2=1】

    • Floating point numbers ( decimal ) There are problems with arithmetic operators ;
    • Program arithmetic operations also have priorities ;
    • Expressions and return values
  2. Increment decrement operator ( Increment and decrement operators must be used in conjunction with variables )

    • Increment operator (++)
      Pre increment operator ++ Write in front of the variable
      Post increment operator ++ Write it after the variable
      ** The post variable returns the original value first and then adds itself 1 **
      Variable ++=【 Variable = Variable ++ + 1】; Now the variable ++= The value of the variable ;
      If you are confused here, check the video {/* The post increment operator returns the original value of the variable before operation
    • Decrement operator (--)【 Ibid. 】
  3. Comparison operator

Comparison operator meaning
< Less than no.
> More than no.
>= Greater than or equal to
<= Less than or equal to
== Judge ( It will transform )
!= It's not equal to
=== Congruence All values and data types are required to be the same
!== Incongruence The required values and data types are all different
  1. Logical operators Pay attention to logic interrupts !!!
    Concept : Logical operators are operators used for Boolean operations , Its return value is also Boolean . It is often used to judge multiple conditions in later development
    | Logical operators | meaning |
    | && | ' Logic and ', abbreviation ' And ' and|
    |||| ' Logic or ', abbreviation ' or ' or|
    | ! | ' Logic is not ', abbreviation ' Not ' not|

  2. Assignment operator

    Assignment operator meaning Example
    = Assignment operator var Variable = assignment ;
    +=、-= Add and subtract a number and then assign a value var Variable =10; Variable +=5; Output 15
    *=、/=、%= Assignment after modular multiplication and division var Variable =2; Variable *=5; Output 10

Four Process control

 To control the order in which the code is executed
There are three kinds of
  1. Sequential structure
    In order of writing
  2. Branching structure
    Execute different paths of code according to different conditions , So we can get different results .
  • if sentence
var number1 = prompt(' Please enter an integer ');
if(number1 > 50){
alert(' This number is greater than 50');

Execution ideas If if The conditional expression is true (true) Then execute the statement in the braces
If if The expression turns out to be false Do not execute the statements in the braces execute if Code after statement

  • if sentence else sentence 【if( If )lese( otherwise )】
    if( Conditional expression ){
    / Execute statement ;
    // Execute statement ;
    Example :
 var year = prompt(' Please enter the year ');
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
alert(' This year is a leap year ');
alert(' This year is not a leap year ');
  • Multi branch statement

if( Conditional expression 1){
// Execute statement 1;
}else if( Conditional expression 2){
// Execute statement 2;
}else if( Conditional expression 3){
// Execute statement 3;
// Execute statement 4;

  • Ternary expression
    A formula consisting of ternary operators
    Grammatical structure :
    // Conditional expression ? expression 1: expression 2
    Execution ideas :
    If the conditional expression turns out to be true be return expression 1 Value If the conditional expression turns out to be false Then return the expression 2 Value
    Example :( Equivalent to a simplified version of if~else sentence )
 var num = 10;
var result = num > 5 ? ' Yes ' : ' No, it isn't '; // An expression has a return value
  • switch Grammatical structure
    switch Statement is also a multi branch statement. You can also select one from many
    // Grammatical structure swith transformation 、 switch case ( Small examples or options mean )
    swith( expression ){
    case value1:
    Execute statement 1;
    case value2:
    Execute statement 2;
    Execute the last statement ;
    // Execution ideas : Using the value of the expression and The value of the option after the parameter matches If match up ,
    It's time to do it case The sentence in If there is no match , Then perform default The words in it

    Code :

    case 1:
    console.log(' This is a 1');
    break;// End of cycle
    case 2:
    console.log(' This is a 2');
    console.log(' No match ');

    matters needing attention
    In development Expressions are often written as variables
    ​ The value is the same as the data type
    ​ break If at present case There's no break Will not quit swith Is to move on to the next case

switch Statement and if else if The difference between sentences

  1. In general , They can replace each other
  2. Statements usually deal with case Compare the situation of certain value , and if..else... More flexible sentences , It is often used to judge on a large scale ( Greater than 、 Equal to a certain range )
  3. switch Statement is directly executed to the condition of the program , Efficient . and if...else There are several conditions for a statement , You have to judge how many times .
  4. When there are fewer branches ,if...else Statement execution efficiency ratio switch Sentence height
  5. When there are more branches ,switch The execution efficiency of the statement is higher and the structure is clearer .

5、 ... and Loop structure

The purpose of the cycle : Some code can be executed repeatedly

  1. for loop
  • for loop Repeat some code , It's usually related to counting

    for Grammatical structure
    for( Initialize variable ; Conditional expression ; Operation expression ){
    // The loop body

    • Initialize variable Just use var A common variable declared , Usually used as a counter

    • Conditional expression It is used to determine whether each cycle continues to be executed Is the condition of termination

    • Operation expression The code executed at the end of each loop is often updated with our counter variable ( Increasing or decreasing )

    • Code experience We print over and over again 100 sentence Hello

    for(var i=1;i<=100;i++){
    console.log(' Hello ');

    Loop summary :

    1. for Loops can repeat some of the same code

    2. for Loops can repeat a little bit of different code , Because we have counters

    3. for Loops can repeat certain operations , For example, arithmetic operators, addition operations

    4. As demand increases , double for Loops can do more 、 Better to see

    5. double for loop , Outer circle once , The inner circulation is all

    6. for A cycle is a cycle in which cyclic conditions are directly related to numbers

    7. Analysis is more important than writing code

    8. Some core algorithms can't think of , But learn to , Analyze his execution process

    9. Draw inferences from one instance, I often sum up , Do some cases
      while loop
      while Statement can be used if the conditional expression is true , Loop execution specifies a piece of code , Until the expression is not true .
      There has to be a counter in it Initialize variable
      There's also an operational expression in it Complete counter update to prevent dead loop
      do while
      Execution ideas First execute the loop body Then judge the conditions If the conditional expression turns out to be true , Then continue to execute the loop body , Otherwise exit the loop
      // The loop body
      }while( Conditional expression )
      Execute the loop first , To determine ,do~while Statement executes loop body code at least once !

    continue break keyword
    continue Keyword is used to jump out of the loop immediately , So let's go to the next loop ( The weight of this cycle is continue After that, the code will be executed once less )
    break Keyword is used to jump out of the loop immediately ( The loop ends )

6、 ... and Array

 An array is a collection of numbers , The elegant way to store in a single variable
  • js There are two ways to create arrays in :
  1. utilize new Create array
    var arr = new Array();// Created an empty array

  2. Create an array using array literals
    Create an array using array literals []
    var arr = [];// Create an empty array
    for example :var arr = [1,2,' Cannot but ',true];

  • Get the elements in the array
    Array index
    Indexes ( Subscript ): Use to access the ordinal number of an array element ( Array index from 0 Start ).
    var arr = [' whether ',' whether ',' binding ];
    Reference no. : 0 1 2
    // Traversal array : That is to visit the elements of the array from the beginning to the end
    var arr = ['red','green','blue'];
    for(var i = 0; i < 3;i++){
    //1. Because our array index number starts from 0 Start , therefore i Must be from 0 Start
    //2. When outputting arr[i] i The counter is used as an index number
    The length of the array Array name .length
    var arr = ['red','green','blue'];
    for(var i = 0; i < arr.length;i++){
    Array name .length Dynamically monitor the number of array elements
    // Sum and average
    var arr = [2,6,1,7,4];
    var sum = 0;
    var average = 0;
    for(var i=0;i<arr.length;i++){
    sum += arr[i];
    average = sum / arr.length;
    Find the maximum value in the array
    // Find the maximum value in the array
    // Declare a variable that holds the maximum value max
    // The default maximum value can take the first element in the array
    // Go through and create an array of elements and max Comparison
    // If this array element is larger than max Just save this array element to max Inside , Otherwise, continue with the next round of comparison
    // Finally, output this max
    var arr = [2,6,1,77,52,25,7];
    var max = arr[0];
    for (var i= 1; i<arr.length;i++){
    max =arr[i];
    alert(' The maximum value in the data is '+max);
本文为[MQ train]所创,转载请带上原文链接,感谢

  1. vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开
  2. 算法题:两数之和——JavaScript及Java实现
  3. 高性能 Nginx HTTPS 调优
  4. Why Vue uses asynchronous rendering
  5. day 31 jQuery进阶
  6. day 30 jQuery
  7. CSS whimsy -- using background to create all kinds of wonderful backgrounds
  8. Why are more and more people learning front end?
  9. What do you do with 4K front-end development?
  10. 8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)
  11. What is the annual salary of a good web front end?
  12. Front end novice tutorial! How to get started with web front end
  13. Will the front end have a future?
  14. Is the front end hard to learn?
  15. Seven new Vue combat skills to improve efficiency in 2021!
  16. Is front end learning difficult?
  17. How about the process of Web front-end development and self-study?
  18. Front end learning route from zero basis to proficient
  19. What is the basis of learning front end?
  20. What knowledge points need to be learned for self-study front end? How long can I become a front-end Engineer?
  21. An inexperienced front-end engineer, what are the common problems when writing CSS?
  22. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  23. Springboot starts http2
  24. Enabling http2.0 in spring boot
  25. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  26. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  27. vue.js Error in win10 NPM install
  28. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  29. Springboot starts http2
  30. Vue event bus
  31. JQuery easy UI tutorial: custom data grid Pagination
  32. Using okhttp and okhttpgo to obtain onenet cloud platform data
  33. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  34. HTTP 1. X learning notes: an authoritative guide to Web Performance
  35. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  38. Event bubble and capture in JavaScript
  39. The root element is missing solution
  40. Event bubble and capture in JavaScript
  41. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  42. Javascript数据类型
  43. HTTP interface debugging tool! 48000 star HTTP command line client!
  44. Parameter encryption of front end URL link band
  45. HTTP interface debugging tool! 48000 star HTTP command line client!
  46. Three front end frameworks: data binding and data flow
  47. Reading Axios source code (1) -- exploring the realization of basic ability
  48. Event bubble and capture in JavaScript
  49. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  50. R & D solution e-Car front end monitoring system
  51. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  52. R & D solution e-Car front end monitoring system
  53. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  54. 解决ajax跨域问题【5种解决方案】
  55. Top ten classic sorting of JavaScript
  56. HTTP 1. X learning notes: an authoritative guide to Web Performance
  57. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  58. My http / 1.1 is so slow!
  59. Why Vue uses asynchronous rendering
  60. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for