1 – Programming language

1.1 programming

  • Programming:
    • It is the process of getting a computer to use a programming language to write code to solve a problem and get the result.
  • Computer program:
    • It is a series of instructions set executed by the computer, and the program is all written in the language we have mastered, so people must control the computer through the computer language to the computer to issue commands.

1.2 Computer Language

  • Computer language refers to the language used for communication between people and computers, which is the medium of information transfer between people and computers.

  • There are many kinds of computer languages. Generally speaking, they can be divided into machine language, assembly language and high-level language.

  • In fact, what computers ultimately execute is machine language, the binary numbers of zeros and ones that form the basis of computer language.

1.3 Programming Languages

Programming languages: Computers that can be controlled and made to do things for us through "languages" that are similar to human languages are called Programming languages. A programming language is a set of instructions used to control a computer. It has a fixed format and vocabulary (different programming languages have different formats and vocabulary) that must be followed. Today's common programming languages come in two forms: assembly language and high-level language.Copy the code
Language type instructions
Assembly language Assembly language and machine language are essentially the same, are direct operations on the hardware, but the instructions using English abbreviations of the identifier, easy to recognize and memory.
A high-level language High-level language is mainly relative to low-level language, it does not refer to a specific language, but includes many programming languages, commonly used C language, C++, Java, C#, Python, PHP, JavaScript, Go language, Objective-C, Swift and so on.

1.4 the translator

Programs written by high-level languages cannot be recognized directly by computers and must be transformed to be executed. For this, we need a translator. A translator converts the source code we write into machine language, also known as binarization.Copy the code

1.5 Differences between programming languages and markup languages

language instructions
A programming language Programming languages have strong logical and behavioral capabilities. In a programming language, you’ll see a lot of if else, for, while instructions that are logical and behavioral. They’re active.
Markup language Markup language (HTML) is not used to issue instructions to computers, but is often used for formatting and linking. Markup languages exist to be read, they are passive.

conclusion

  1. Computers can help humans solve certain problems
  2. Programmers use programming languages to write programs that give instructions to control computers to accomplish these tasks
  3. Programming languages include machine language, assembly language and high-level language
  4. High-level languages require a translator to translate into machine language that the computer recognizes
  5. Programming languages are proactive and logical

2 – Computer fundamentals

2.1 Computer Composition

2.2 Data Storage

  1. Computers internally use binary zeros and ones to represent data.
  2. All data, including files, images, etc., is eventually stored on the hard disk as binary data (zeros and ones).
  3. All programs, including operating systems, are essentially data of various kinds, also stored on hard disk in the form of binary data. When we install software, we actually copy the program files to the hard disk.
  4. The hard disk and memory are binary data.

2.3 Data Storage Unit

Size relation: bit < byte < KB < GB < TB<.....Copy the code
  • Bit: 1bit can hold a 0 or 1 (the smallest unit of storage)
  • Byte: 1B = 8B
  • Kilobytes (KB) : 1KB = 1024B
  • Megabytes (MB) : 1MB = 1024KB
  • Gigabytes (GB): 1GB = 1024MB
  • Terabyte (TB): 1TB is 1024GB

2.4 Program Operation

The process of running software on a computer is as follows: 1. When opening a program, load the program code from the hard disk into the memory. 2. An important reason to use memory is because CPUS run so fast that reading data only from hard disk wastes CPU performance, so use faster access memory to hold runtime data. (Memory is electricity, hard disk is mechanical)Copy the code

3 – Initial JavaScript

3.1 What is JavaScript

  • JavaScript is one of the most popular languages in the world. It is a scripting language that runs on the client side.

  • Scripting language: no compilation is required, the JS interpreter (JS engine) interprets and executes line by line during execution

  • Server-side programming is now also possible based on Node.js technology

3.2 The role of JavaScript

  • Form dynamic validation (password strength detection) (the original purpose of JS creation)
  • Web page special effects
  • Server-side development (Node.js)
  • Desktop Program (Electron)
  • App(Cordova)
  • Control Hardware – Internet of Things (Ruff)
  • Game Development (Cocos2D-JS)

3.3 HTML/CSS/JS relationship

3.4 Introduction to JS Execution in the Browser

The browser is divided into two parts: rendering engine and JS engine

The browser itself does not execute JS code, but rather uses a built-in JavaScript engine (interpreter) to execute JS code. The JS engine interprets each line of source code line by line (translated into machine language) and then executes it by computer, so JavaScript is classified as a scripting language that interprets execution line by line.Copy the code

3.5 JS composition

  1. ECMAScript

    ECMAScript is a programming language standardized by ECMA International (formerly the European Computer Manufacturers Association). The language is widely used on the World Wide Web. It is often referred to as JavaScript or JScript, but the latter two are actually implementations and extensions of ECMAScript.Copy the code

ECMAScript: defines the javascript syntax and basic core knowledge. It is an industry standard for JAVASCRIPT syntax that all browser vendors comply with.

See MDN: MDN Manual for more information

  1. DOM – Document object model

    DocumentObject Model (DOM) is the standard programming interface recommended by the W3C to deal with extensible markup language (XML). The DOM provides interfaces to manipulate various elements on the page (size, position, color, and so on)Copy the code

  2. BOM – Browser object model

    ** Browser Object Model **(BOM) refers to the Browser Object Model, which provides a content-independent Object structure that can interact with the Browser window. The BOM allows you to operate browser Windows, such as pop-up boxes, control browser hops, and obtain resolution.Copy the code

3.6 JS Initial experience

JS has three writing positions: inline, inline, and external.Copy the code

  1. The inline type

    <input type="button" value="Click on me and try." onclick="alert('Hello World')" />
Copy the code
    • You can put a single line or a small amount of JS code in an EVENT attribute (an attribute starting with ON) of an HTML tag, such as onclick
    • Note the use of single and double quotation marks: we recommend double quotation marks in HTML and single quotation marks in JS
    • Poor readability, in HTML to write a large number of JS code, not easy to read;
    • Quotation marks are error-prone. When quotation marks are nested in multiple layers, they are easily confused.
    • For special use

  2. embedded

    <script>
    alert('Hello  World~!');
</script>
Copy the code
    • Multiple lines of JS code can be written to a script tag
    • Embedded JS is a common way to learn

  3. External JS file

    <script src="my.js"></script>
Copy the code
    • It is conducive to HTML page code structure, and separates large sections of JS code from THE HTML page, which is both beautiful and convenient for file level reuse
    • No code can be written between script tags that reference external JS files
    • Suitable for large AMOUNT of JS code

4 – JavaScript comments

  • Number of flex subprojects
  • Align-self controls how the children align themselves on the side axis
  • The order attribute defines the order in which the children are sorted (sequential)

4.1 Single-line comments

To improve code readability, JS, like CSS, also provides comments. There are two main types of comments in JS, which are single-line comments and multi-line comments.Copy the code

Single-line comments are commented as follows:

// I am a line of text, do not want to be executed by the JS engine, so comment it upCopy the code
// To comment out a single line of text (CTRL + /)Copy the code

4.2 Multi-line comments

Multi-line comments can be commented as follows:

/* Get the user's age and name and display it in the prompt box */Copy the code
/* */ to comment multiple lines of text (default Alt + Shift + A shortcut)Copy the code

Change the shortcut key to CTRL + Shift + /

Vscode → Preferences button → Keyboard shortcut → Find the old shortcut key → change to a new shortcut key → Enter to confirm

5 – JavaScript input and output statements

In order to facilitate the input and output of information, JS provides some input and output statements. The commonly used statements are as follows:

methods instructions attribution
alert(msg) A warning dialog box is displayed The browser
console.log(msg) The browser console prints the output The browser
prompt(info) The browser displays a dialog box for users to enter information The browser
  • Note: alert() is mainly used to display messages to the user, console.log() is used to show the programmer himself runtime messages.

6 – The concept of variables

6.1 What is a variable

In plain English: A variable is a box of things.

Popular: variables are containers used to hold data. We get the data by variable names, and the data can even be modified.

6.2 Storage of Variables in Memory

Essence: A variable is a block of memory that a program requests to store data. Like our hotel room, a room can be considered a variable.Copy the code

7 – Use of variables

  • Declaration of variables
  • Assignment of a variable

7.1 Declaring Variables

// Declare variables
var age; // Declare a variable named age
Copy the code

  • Var is a JS keyword used to declare variables. After a variable is declared using this keyword, the computer automatically allocates memory space for the variable without the programmer’s care

  • Age is the variable name defined by the programmer to access the allocated space in memory

7.2 the assignment

age = 10; // Assign the age variable to 10
Copy the code
  • = is used to assign the value on the right to the variable space on the left
  • A variable value is a value that the programmer saves into the variable space

7.3 Variable Initialization

var age  = 18;  // declare the variable and assign it to 18
// Declare a variable and assign a value. This is called initialization of a variable.
Copy the code

7.4 Variable Syntax extension

  • To update the variable

    When a variable is reassigned, its original value is overwritten, and the value of the variable is the last value assigned.

    var age = 18;

age = 81;   // The final result is 81 because 18 is covered
Copy the code

  • Declare multiple variables at the same time

    To declare multiple variables at the same time, write only one var and separate the variable names with commas (,).

    var age = 10,  name = 'zs', sex = 2;       
Copy the code

  • Declare variable special case

    situation instructions The results of
    var age ; console.log (age); Declaration only, no assignment undefined
    console.log(age) No declaration, no assignment An error
    age = 10; console.log (age); No declaration, only assignment 10

7.5 Variable naming conventions

Rules:

  • The value consists of letters (A-zA-z), digits (0-9), underscores (_), and dollar signs ($), for example, usrAge, num01, and _name
  • Strictly case sensitive. var app; And var App; Is two variables
  • You can’t start with a number. 18age is wrong
  • The value cannot be a keyword or reserved word. For example: var, for, while
  • Variable names must make sense. MMD BBD NL → age
  • Follow the hump nomenclature. The first letter should be lowercase. The first letter of the following words should be capitalized. myFirstName!

Recommended translation website: Youdao Iciba

8 – Data type

8.1 Introduction to Data Types

  • Why do you need data types

    In the computer, different data need to occupy different storage space, in order to facilitate the data into the required memory size of different data, make full use of storage space, so define different data types. Simply put, a data type is the type of data. For example, the name "Zhang SAN", age 18, these data types are different.Copy the code

  • The data type of a variable

    Variables are places where values are stored. They have names and data types. The data type of a variable determines how the bits representing these values are stored in the computer's memory. JavaScript is a weakly typed or dynamic language. This means that the type of the variable is not declared in advance, but is determined automatically during program execution:Copy the code
    var age = 10;        // This is a numeric type
var areYouOk = 'yes';   // This is a string
Copy the code

    When the code runs, the data type of the variable is determined by the JS engine according to the data type of the value of the variable on the right of =. After running, the data type of the variable is determined. JavaScript has dynamic typing, which also means that the same variable can be used for different types:

    var x = 6;           // x is a number
var x = "Bill";      // x is a string
Copy the code

  • Classification of data types

    JS classifies data types into two categories:

    • Simple data types (Number, String, Boolean, Undefined, Null)

    • Complex Data Types (Objects)

8.2 Simple Data types

Simple data types (basic data types)

Simple data types in JavaScript and their description are as follows:

  • Digital type Number

    JavaScript number types can hold both integers and decimals (floating point numbers).

    var age = 21;       / / integer
var Age = 21.3747;  / / decimal
Copy the code

    1. Numeric base system

      The most common bases are binary, octal, decimal, and hexadecimal.

        // 1. Octal digit sequence range: 0~7
 var num1 = 07;   // Corresponds to 7 in decimal
 var num2 = 019;  // Corresponds to 19 in decimal
 var num3 = 08;   // Corresponds to 8 in decimal
  // 2. The hexadecimal number sequence ranges from 0 to 9 and A to F
 var num = 0xA;   
Copy the code

      At this stage we just need to remember to append 0 to octal and 0x to hexadecimal in JS

    2. Numeric range

      Maximum and minimum values for numeric values in JavaScript

      • MAX_VALUE: 1.7976931348623157e+308

      • Minimum value: number.min_value. The value is 5e-32

  1. Numeric type with three special values

    • Infinity, which stands for Infinity, greater than any number

    • -Infinity, which stands for infinitesimal, less than any number

    • NaN, Not a number, represents a non-numeric value

  2. isNaN

    Used to determine whether a variable is of a non-numeric type and returns true or false

  var usrAge = 21;
var isOk = isNaN(userAge);
  console.log(isNum);          // false, 21 is not a non-number
var usrName = "andy";
  console.log(isNaN(userName));// true, "Andy" is a non-number
Copy the code

  • String

    The string type can be any text within quotation marks. The syntax is double quote “” and single quote “”.

    var strMsg = "I love Tiananmen Square in Beijing ~";  // Use double quotes to represent strings
var strMsg2 = 'I love pig trotters.';    // Use single quotes to represent strings
// Common error
varStrMsg3 = I love big elbows;// Error, no quotes, is considered js code, but JS does not have this syntax
Copy the code

    Because attributes in HTML tags use double quotation marks, we prefer to use single quotation marks.

    1. String quotes are nested

      JS can use single quotes to nest double quotes, or double quotes to nest single quotes (outer double inside single, outer single inside double)

      var strMsg = 'I'm a programmer.';   // you can use '' to include ""
var strMsg2 = "I'm a gossamer, rich programmer.";  // You can also use "" containing ""
// Common error
var badQuotes = 'What on earth?" ; // Error, single and double quotation marks cannot be usedCopy the code

    2. String escape character

      Like special characters in HTML, there are special characters in strings, which we call escapes.

      All escape characters begin with \. Common escape characters and their descriptions are as follows:

      Escape character explain
      \n Newline character, n for newline
      \ \ Slash \
      ‘ ‘single quotes
      “ “Double quotation marks
      \t TAB indent
      \b A b b

    3. String length

      A string is made up of several characters, and the number of characters is the length of the string. The length property of the string is used to obtain the length of the entire string.Copy the code
      var strMsg = "I'm a handsome, rich programmer!";
alert(strMsg.length); / / show 11
Copy the code

    4. String splicing

      • Multiple strings can be concatenated using +, which concatenates string + any type = new string after concatenation

      • Before concatenation, any type added to the string is converted to a string and then concatenated into a new string

        //1.1 string "add"
alert('hello' + ' ' + 'world'); // hello world
//1.2 Numeric string "add"
alert('100' + '100'); / / 100100
//1.3 Value String + value
alert('11' + 12);     / / 1112
Copy the code
        • + sign summary formula: add values, join characters

    5. String concatenation enhancement

      console.log('我' + 18);        // As long as there are characters will be connected
var age = 18;
console.log('I'm old.');      // This will not work
console.log('我' + age);         / / I am 18
console.log('我' + age + 'years old!); // I'm eighteen years old
Copy the code
      • Strings are often concatenated with variables that can easily change their values
      • Variables cannot be quoted because quoted variables become strings
      • If there is string concatenation on both sides of the variable, the formula “quote + add”, delete the number, write the variable plus the middle

  • The Boolean Boolean

    Boolean types have two values: true and false, where true means true (true) and false means false (false).

    When Boolean and numerals are added, true has the value 1 and false has the value 0.

    console.log(true + 1);  / / 2
console.log(false + 1); / / 1
Copy the code

  • Undefined and Null

    A declared variable that has not been assigned a value will have a default value of undefined (note the result if concatenating or adding).

    var variable;
console.log(variable);           // undefined
console.log('hello' + variable);  / / hello undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   // NaN
Copy the code

    A declaration variable to a null value that holds a null value (we’ll continue with null when we learn about objects)

    var vari = null;
console.log('hello' + vari);  Hello / / null
console.log(11 + vari);     / / 11
console.log(true + vari);   //  1
Copy the code

8.3 Obtaining variable Data Types

  • Gets the data type of the test variable

    Typeof can be used to get the data typeof the detection variable

    var num = 18;
console.log(typeof num) / / the number
Copy the code

    Different types of return values

  • literal

    A literal is a representation of a fixed value in source code. In layman’s terms, a literal indicates how to express the value.

    • Number literals: 8, 9, 10
    • String literals: ‘programmer ‘, “big front end”
    • Boolean literals: true, false

8.4 Data Type Conversion

What is data type conversion?

The default value of the data obtained from the form or prompt is string. In this case, the variable data type needs to be converted instead of being added directly. In layman’s terms, a variable of one data type is converted to another data type. There are usually three ways to convert:

To a string to a number to a BooleanCopy the code
  • Convert to string

  • ToString () and String() are used differently.

  • Three conversions, more than a third concatenated string conversion, this method is also known as implicit conversion.

  • Conversion to Alphanumeric (emphasis)

  • Pay attention to the case of parseInt and parseFloat words, these two are important

  • Implicit conversion is when we perform an arithmetic operation, JS automatically converts the data type

  • Convert to Boolean

  • Values representing null and negative are converted to false, such as ”, 0, NaN, null, undefined

  • All other values are converted to true

    console.log(Boolean(' ')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('white')); // true
console.log(Boolean(12)); // true
Copy the code

9 – Interpreted and compiled languages

9.1 an overview of the

Computers cannot directly understand any language other than machine language, so they must translate what programmers write into machine language in order to execute their programs. A tool that translates program language into machine language is called a translator.Copy the code

  • There are two ways translator can translate: one is compilation, the other is interpretation. The difference between the two methods lies in the time point of translation
  • The compiler compiles the code before it is executed, generating intermediate code files
  • Interpreters interpret at run time and execute immediately (also called interpreters when the compiler is running in interpreted mode)

9.2 Execution Process

It is similar to eating hot pot. You can rinse food at the same time as you eatCopy the code

10 – Keywords and reserved words

10.1 the identifier

Zhi: The name of a variable, attribute, function, or parameter assigned by the developer. Identifiers cannot be keywords or reserved words.Copy the code

10.2 the keyword

Keyword: refers to the JS itself has used the word, can not be used as a variable name, method name. Include: Break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, Typeof, var, void, while, with, etc.Copy the code

10.3 reserved words

Reserved words: Reserved "keywords" that are not yet keywords but may become keywords in the future and cannot be used as variable or method names. Include: Boolean, byte, char, class, const, debugger, double, enum, export, extends, fimal, float, goto, implements, import, int, interface, long, Mative, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile, etc. Note: If you use a reserved word as a variable name or function name, you will probably not receive any error messages unless future browsers implement the reserved word. When the browser implements it, the word is treated as a keyword, which causes a keyword error.Copy the code