JavaScript introduction

1. Introduction of JavaScript

The front end is divided into 3 layers

  • Structure layer function: fromHTMLAngle building webpage
  • Style layer: Write from the perspective of beautificationCSSstyle
  • Behavior stratification: Write from an interactive perspectiveJavaScriptThe script

JavaScript is a client-side scripting language that runs primarily in the browser

ECMA: European Computer Manufacturers Association (HOUR)

ES6: On June 17, 2015, THE official version of ECMAScript 6 was released, namely ECMAScript 2015

JavaScript is composed of ECMAScript, DOM (Document Object Model) and BOM (Browser Object Model)

JavaScript to write

1. JavaScript writing location

  1. In the HTML head tag

    <scipt type="text/javascript"></scipt>
Copy the code

    Note: inHTML5 中 type="text/javascript"Do not need to write

  2. At the bottom of the BODY tag, above the body closing tag in HTML

  3. JavaScript scripts are written in a separate.js file, introduced in HTML with the following code

    <scipt src="xxx.js"></scipt>
Copy the code

2. JavaScript comments

  • HTML

    <! -- HTML comment content -->
Copy the code

  • CSS

    /* CSS comment content */
Copy the code

  • JavaScript

    Comment out a single line of text
/* Multi-line text comments */
Copy the code

3. The alert syntax

Alert itself indicates an alert, and alert in JavaScript indicates an alert box

  1. Alert to write

    Alert is followed by parentheses that write a pair of quotes inside the parentheses to print a string (quotes are not required for output variables)

  2. Importance of the alert statement semicolon

    An alert statement must be followed by a semicolon

  3. The alert statement resolves the order

    Usually: work from top to bottom

  4. Alert statements are insensitive to whitespace, indentation, and line feeds

4. Console

  • Opening mode:

    1. Shortcut:F12
    2. Right click on the page and select Check or Review elements

  • role

    1. Specifies the type and location of errors and the number of errors

    2. Statements can be printed on the console

      Note: the console) log (” XXX “); The console executes output XXX

Console is a built-in object for JavaScript

constant

The value can be a number, string, undefined, or Boolean

1. Number type number

The number type is divided into integer, floating point (decimal), and special value

1.1 the integer

Decimal notation, octal notation, hex notation

When performing arithmetic operations: all are converted to decimal

Octal notation: prefix 0, 0O, 0O followed by the numbers 0-7

Hexadecimal notation: prefix 0x, 0x, followed by the digits 0-7, and the letters A-f or A-F

Octal: Enter one for every eight

console.log(010); / / output 8
console.log(0100); / / output 64
console.log(0100);  / / output 512
console.log(01000); / / output 4096
Copy the code

Note: Octal cannot be preceded by a number greater than 7. If the prefix is 0 and followed by a number greater than 7, it is cast to decimal. If the prefix is 0O, an error is reported

Hexadecimal: every hexadecimal

console.log(0x10); 16 / / output
console.log(0x100); / / output 256
console.log(0X100);  / / output 4096
Copy the code

Note: In hexadecimal notation, an error is reported if the prefix is 0x or 0x and the following digit is not in 0-9 or A-f (A-f)

Negative numbers can be preceded by negative numbers

1.2 Floating point (decimal)

Floating point numbers are made up of integers. The floating point number is only in decimal. If there is no integer part, it can be written as **. Decimal ** (the 0 before the decimal point can be omitted)

console.log(893.); / / output 0.893
console.log(1.6789 e3); / / output 1678.9
console.log(567.89 e-3); / / output 0.56789
Copy the code

Note: JavaScript supports power writing

1.3 special values

① Infinity means Infinity

The browser has limited computing power for numerical values. When a value exceeds a point, positive values print Infinity and negative values print -infinity

console.log(89e1233456); / / output Infinity
console.log(-89e1233456); / / output - Infinity
console.log(1/0); / / output Infinity
console.log(-1/0); / / output - Infinity
Copy the code

② : NaN indicates not a number

console.log(NaN); / / output NaN
console.log(0/0); / / output NaN
Copy the code

2. The string type is string

Representation: Must be wrapped in a pair of quotation marks

Special characters: Indicate methods using backslash + symbol

\ n: a newline

\ T: TAB character

\” : double quotation marks

\’ : single quotation marks

Variables are the variables

A variable can be thought of as a container that holds any data (constants, functions, arrays)

1. Define variables (declare, assign, use)

var a; // Declare variable a (declare)
a = 10; // Assign a constant 10 to a
console.log(a); // Output the value of variable A (use)
Copy the code

Declaration: var must be used followed by a space and the variable name

Note: only one data can be stored, only the last data can be saved

Naming rules:

  1. The first character consists of letters, underscores (_), and dollar signs ($)
  2. Other characters consist of digits, underscores, and dollar signs
  3. Cannot use keywords, reserved words
  1. You can’t start with a number
  2. Javascript is strictly case sensitive

Note: If a variable is not specified, a Reference Error will be generated: Uncaught Reference Error: The variable name is not defined

2. Variable assignment

In JavaScript, = means assignment. You assign the data to the right of the equals sign to the variable on the left, and the variable on the left changes in value, while the variable on the right does not

Note: if a variable is used without a value after declaration, it will output: undefined: undefined

3. Variable declaration enhancement

  1. Declarations and assignments are usually written together

    var a = 10;  // (declaration + assignment)
Copy the code

  2. Define multiple variables at the same time

    Var name = 'vience', sex = 'male', age = 23, height = 180Copy the code

    A var can define multiple variables, separated by commas and terminated by semicolons

console.log(a); / / output is undefined
var a = 10;
/ / is equivalent to
var a;
console.log(a);
a = 10;
Copy the code

JavaScript features: When referencing an undeclared variable, no error is thrown, only undefined is output

Preparsing: JavaScript code parses with all declarations executed first (only declarations without assigning values). This is called preparsing

Note: JavaScript outputs undefined

/ / the first
console.log(a);
var a;
/ / the second
var a;
console.log(a);
/ / the second
var a = undefined;
console.log(a);
Copy the code

The data type

Data types are classified into simple data types and complex data types

  • Simple data types
    • Numeric typesnumber: integer, floating point, special value (Infinity, NaN)
    • String typestringString:
    • Boolean typeboolean: True, false
    • undefined : undefined
    • null : null
  • Complex data types
    • objectObject
    • functionFunction
    • An array ofArray

1. Data type detection

  • Typeof ()/typeof + space + detected data

    var a = 10, b= '10', c = 2.787, d = Infinity, e = NaN, f = true, g = undefined;
console.log(typeof(a));  // number
console.log(typeof(b));  // string
console.log(typeof(c));  // number
console.log(typeof(d));  // number
console.log(typeof(e));  // number
console.log(typeof(f));  // boolean
console.log(typeof(g));  // undefined
Copy the code

  • The data type of a variable is determined by the type of its value

    var a = 1, b = '1';
console.log(typeof a+b);  // number1
console.log(typeof +b);  // number
console.log(typeof(a+b));  //string
Copy the code

    Resolution:

    + concatenates typeof a ==> number in a type containing a string

    + is used to implicitly convert a numeric string to a numeric type

2. Data type conversion

  1. number ===> string

    + In JavaScript, the plus sign (+) denotes a concatenator, especially between number and string, which concatenates to produce string

    When both sides of the plus sign (+) are numeric types, it represents addition

    var c = 12;
c = c + ' ';
console.log(typeof(c)) // string
Copy the code

  2. string ===> number

Prompt: Pop-up box for text (type string) input.

Two arguments: the first is for the prompt text, and the second default text (which can be omitted) is separated by commas

prompt("Please enter your age".18);
Copy the code

① Prompt input data can be received with variables

② The data type of prompt input is string

var age = prompt("Please enter your age");console.log(typeof(age)) // string
Copy the code

Three methods of string ===> number

  • Number() : Converts any data type to a numeric type

  • ParseInt () : Converts string to an integer /NaN

  • ParseFloat () : Converts string to float /NaN

3. parseInt() 和 parseFloat()

  • ParseInt () rounds a number

    The first argument: the string data to process, the second argument to convert to base (which can be omitted)

    console.log(paseInt("12.999"))	/ / 12
console.log(paseInt("Today"))	/ / 12
console.log(paseInt("Today 12"))	// NaN
console.log(paseInt("0.999 today"))		/ / 0
Copy the code

  • PaseFloat converts a string to a floating point number.

    console.log(paseFloat("12.111"))	/ / 12.111
console.log(paseFloat("0.78 e1"))	/ / 7.8
console.log(paseFloat(12 12 "today".))	/ / 0.12
console.log(paseFloat("Today is 1.2"))		// NaN
Copy the code

    PaseFloat () ignores all data after the first floating point number