“JavaScript Advanced Programming (3rd edition)” study notes

Key words:<script/>The use of labels; JavaScript variables, data types, operators, statements

1. Used in HTML`<Script>`The label

1.1 `<script>`attribute

The attribute name	define	note
async	Optional; The script should be downloaded immediately, but should not interfere with the rest of the page	This is valid only for external script files
charset	Optional; The character set of the code specified by the SRC attribute
defer	Optional; Scripts can be deferred until the document is fully parsed and displayed	This is valid only for external script files
language	Has been abandoned; Represents the scripting language used to write code
src	Optional; An external file containing the code to execute
type	Will choose; Represents the content type of the scripting language in which the code is written	General: text/javascript; Non-ie: Application /javascript

1.2 `<script>`Usage of labels

Directly embedded code

<script type="text/javascript">
	function foo() {
    alert('Directly embedded code')}</script>
Copy the code

References external JS files

<script type="text/javascript" src="./example.js"></script>
Copy the code

ES6 supports reference methods:

<script type="text/javascript" src="./example.js" />
Copy the code

<script/>Label position: General:<head>Modern browsers:<body>To speed up the parsing
Note:
1. When embedding code directly, the code used cannot contain</script>A string. Can be solved by escaping the character \ : ‘alert(“</script>”)
2. As long as the async and defer properties are not present, the browser follows

1.3 the defer attribute

Definition: Scripts are deferred until the entire page has been parsed (scripts are downloaded immediately, but executed later)

Sample:

<script type="text/javascript" src="./example.js" defer="defer"></script>
Copy the code

1.4 async attributes

Definition: not having a page wait for two scripts to download and execute, thus asynchronously loading the rest of the page. Therefore, it is recommended that asynchronous scripts do not modify the DOM during loading
Note: Async is not guaranteed to be executed in the specified order

Sample:

<script type="text/javascript" src="./example.js" async></script>
Copy the code

1.5. `<noscript>`The element

Use to display alternative content in browsers that do not support JavaScript

<noscript>
	<p>This page requires a browser with JavaScript enabled.</p>
</noscript>
Copy the code

Note: If the browser supports JavaScript, the content is hidden and not displayed

2. Learn basic grammar

2.1 Variables – Loose types

// var can be used to create any type of variable
var message = 'hi'
var message2 = 123
Copy the code

2.2 Data Types

The data type	English expression	TypeOf returns the result
undefined	undefined	“undefined”
Boolean value	Boolean	“boolean”
string	String	“string”
The numerical	Number	“number”
object	Object	“object”
Null	Null	“object”
function	function	“function”

2.2.1 Undefined – declared but unassigned variable

var message;
alert(message); // return: undefined
Copy the code

2.2.2 Null type – Null object pointer

var message = null
alert(typeof message) // Return: object
Copy the code

2.2.3 Boolean type – True/False

// Cast
var message = 123
var message2 = Boolean(message) // Returns: true

// Automatic conversion
if (message) { // In the control statement, the system automatically resides in Anhui
  alert('value is true')}Copy the code

Note: True does not necessarily equal 1 and false does not necessarily equal 0

2.2.4 Number type

/ / integer
var intNum = 10 

// octal - starts with a 0, followed by the octal sequence 0 to 7
var octalNum = 077 

// Hexadecimal - Starts with Ox and is followed by hexadecimal digits 0 to 9 A to F
var hexNum = 0x1f

/ / floating point value
var floatNum = 1.1
var floatNum2 = 3.125 e7

// NaN - not a number non-numeric - indicates the case where a value should have been returned, but was not, to avoid throwing an error
var nanNum = NaN / 10; // Returns: NaN
var nanNum2 = (NaN= =NaN) // Returns: false -nan is not equal to any value, including itself
var nanNum3 = isNaN(NaN) // Returns: true
var nanNum4 = isNaN("blue") // Returns: true-blue cannot be converted to a numeric value
var nanNum5 = isNaN(true) // returns: false - true can be converted to a value of 1, so it is not a NaN

// Number() - Number(
Number(true) / / 1
Number(false) / / 0
Number(10) / / 10
Number(null) / / 0
Number(undefined) //NaN
Number('blue') // NaN
Number('123') / / 123
Number('1.1') / / 1.1
Number('0xf') / / 15
Number(' ') / / 0

// Numeric conversion -parseint () - The first argument is converted data, and the second argument is parsed base
parseInt('1234blue') / / 1234
parseInt(' ') // NaN
parseInt('0xA') // 10-hexadecimal: converts to the corresponding decimal number
parseInt(22.5) / / 22
parseInt("070") // 56-octal: convert to the corresponding decimal number
parseInt("70") / / 70
parseInt("AF".16) // 175 - Parse in hexadecimal format without adding 0x

Copy the code

Supplement:isNaN()Execution process:

First callvalueOf()Determines whether its return value can be converted to a numeric value

Call againtoString()To test its return value

2.2.5 type String

var name = "cindy"

// convert toString -tostring () -passable argument: base number
var num = 10
num.toString() / / "10"
num.toString(2) / / "1010"
Copy the code

2.2.6 Object type

var obj = new Object(a)Copy the code

Properties and methods	concept
constructor	Save the function used to create the current object
hasOwnProperty(propertyName)	Checks whether the given property exists in the current object instance For example: obj. HasOwnProperty (” name “)
isPrototypeof(object)	Checks whether the object passed in is a prototype of the current object
propertyIsEnumerable(propertyName)	Checks whether a given property can be enumerated using a for-in statement
toLocaleString()	Returns a string representation of an object that corresponds to the locale of the execution environment
toString()	Returns a string representation of an object
valueOf()	Returns a string, numeric, Boolean representation of an object. Usually the same value as toString()

2.3 the operator

2.3.1 Unary Operators – Operators that operate on only one value

  // 1. Increment and decrement - similar to the C language idea
  // 1
  var age = 29
  ++age Age = age + 1
  --age // Same as age = age-1
  
  var anotherAge = --age + 2
  alert(age) / / 28
  alert(anotherAge) / / 30
  
  // 1.2 Post-type operation
  var num1 = 2
  var num2 = 20
  var num3 = num1-- + num2 / / 22
  var num4 = num1 + num2 / / 21
  alert(num1) / / 1
  
  // 1.3 applies to other data types
  // A string containing a significant number - first converted to a numeric variable, then added or subtracted
  // A string without a valid number - the variable value is set to NaN
  // false -------------- convert to 0, and then add or subtract 1
  // true -------------- converts to 1, and then adds or subtracts 1
  // float -------------- directly adds and subtracts 1
  / / object -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to call the valueOf () method, get to the value of the operation, and operation; If it is NaN, then toString() is called before the preceding rule is applied
  var s1 = "2"
  var s2 = "z"
  var b = false
  var f = 1.1
  var obj = {
    valueOf: function() {
      return -1
    }
  }
  
  s1++   / / 3
  s2++   // NaN
  s3++   / / 1
  f--    / / 0.1
  obj--  / / - 2
  
  
  // 2. Unary addition and subtraction operators
  // 2.1 Unary addition operator - does not affect the value itself, but casts it like Number()
  var num = 25
  num = +num / / 25
  
  // 2.2 unary subtraction operator - represents a negative number; For non-numeric types, the type is cast and then negative
  num = -num / / to 25
  
Copy the code

2.3.2 Bit operators – Binary bit calculation

By default, all ECMAScript integers are signed integers. There are also unsigned integers;

Unsigned integer – 32 no longer represents a sign and therefore represents a larger value

// 1
var num1 = 25    / / binary 00000000000000000000000000011001
var num2 = ~num1 / / binary 11111111111111111111111111100110

// 2
var result = 25 & 3 / / 1

/ / 3. The OR bitwise OR |
var result = 25 | 3 / / 27

// 4. XOR by bit or ^
var result = 25 ^ 3 / / 26

// 5. Left shift << (move all bits of the value to the left; And the left shift does not affect the sign bit)
var oldValue = 2              // Binary 0000010
var newValue = oldValue << 5  // Binary 1000000 decimal: 64

/ / 6. Moves to the right
// 6.1 Symbols moved right - reserved symbol bits >>
var oldValue = 64
var newValue = oldValue >> 5 / / 2
// 6.2 Unsigned right shift - Positive numbers have no effect, negative numbers have change >>>
var oldValue = -64             / / binary 1111111111111111111111111111000000
var newValue = oldValue >>> 5  / / binary 0000011111111111111111111111111110 decimal 134217726

Copy the code

2.3.4 Boolean operators

    // 1.
    !false     // true
    !"blue"    // false
    !0         // true
    !NaN       // true
    !""        // true
    !12345     // false
    
    // 2
    obj && true      // true - Returns the second operand if the first is an object
    true && obj      // obj - If the second is an object, return the object if the first is true
    obj1 && obj2     // obj2 - Return the second object if both are objects
    null && true     // null - If the first is null, null is returned
    NaN && true      // NaN - If the first is NaN, NaN is returned
    udefined && true // undefined - undefined if the first is undefined, return undefined
    
    / / 3. Logic or | |
    obj || true          // obj - returns the first operand if the first is an object; But if the first obj job is false, the second is returned
    obj1 || obj2         // obj1 - If both are objects, return the first object
    null || null         // null - If both are null, null is returned
    NaN || NaN           // NaN - If both are NaN, NaN is returned
    udefined || udefined // undefined - returns undefined if both are undefined
Copy the code

2.3.5 Multiplication operators – multiplication, division, and modulo

    // 1. If the multiplication-product exceeds the value range, Infinity or -infinity is returned
    var result = 34 * 56
    NaN * 10            // NaN
    Infinity * 0        // NaN
    Infinity * 12       // Infinity
    Infinity * -12      // -Infinity
    Infinity * Infinity // Infinity
    
    // 2. If the quotient exceeds the value range, return Infinity or -infinity; The special case is similar to the above multiplication
    var result = 66 / 11
    
    // 3. The special case is similar to the above multiplication
    var result = 26 % 5 / / 1
Copy the code

2.3.6 Additive operators

    / / 1. Addition
    var result = 1 + 2
    NaN + 1                    // NaN
    Infinity + Infinity        // Infinity
    (-Infinity(-) +Infinity)  // -Infinity
    Infinity + (-Infinity)     //NaN
    (+0(+) +0)                / / + 0
    (-0(-) +0)                / / - 0
    (+0(-) +0)                / / + 0
    
    / / 2. The subtraction
    var result = 2 - 1
    NaN - 1                    // NaN
    Infinity - Infinity        // NaN
    (-Infinity) - (-Infinity)  // NaN
    Infinity- - -Infinity)     // Infinity
    (-Infinity) - Infinity     // -Infinity
    (+0(+) -0)                / / + 0
    (-0(+) -0)                / / - 0
    (-0) - (-0)                / / + 0
Copy the code

2.3.7 Relational operators – greater than, less than, less than or equal to, greater than or equal to

    5 > 4                  // true
    5 < 3                  // false
    "Brick" < "alphabet"   // true - Both are strings, comparing character encoding values
    "23" < 3               // false - If one is a string, convert it to a value and compare
    NaN < 3                // false
    NaN> =3               // false
    
    // Complement: if an operand is an object, its valueOf() method is called; if there is no valueOf() method, the comparison is processed by toString()
Copy the code

2.3.8 Supplementary knowledge: The equality operator

Equal or not equal – Convert first and then compare

Congruence incongruence – only compare without conversion

// 1. Equality is not equal - casts are generated
null= =undefined     // true - null equals undefined
"NaN"= =NaN          // false - As long as one is NaN, false is returned
5= =NaN              // false
NaN= =NaN            // false
NaN! =NaN            // true
false= =0            // true - Enforces a conversion to 0 for false
true= =1             // true - Casts true to 1
true= =2             // false
undefined= =0        // false
null = 0              // false
"5"= =5              // true - Cast "5" to the value 5

// 2. Congruent incongruence - Returns true if the two operands are not converted as equals
null= = =undefined   // false
"55"= = =55          // false
Copy the code

2.3.9 Supplementary knowledge: Conditional operators

// ES5 general version:
variable = boolean_expression ? true_value : false_value

// New in ES6: non-air operator: if the first argument is not null/undefined, the first argument is returned, otherwise the second argument is returned
null ?? 5  / / 5
3 ?? 5     / / 3
Copy the code

2.4 the statement

Against 2.4.1 if

if (condition1) {
  // statement1
}
else if (condition2) {
  // statement2
}
else {
  // statement3
}
Copy the code

Do – while 2.4.2

Execute first, judge later
do {
  // statement
} while(condition)
Copy the code

2.4.3 while

// Judge first, then execute
while(condition) {
  // statement
}
Copy the code

2.4.4 the for

var count = 10
for (var i = 0; i < count; i++) {
  // statement
}

/ / similar to the while
for (; i < count; i++) {
  // statement
}

// Infinite loop
for (;;) { 
  // statement
}
Copy the code

2.4.5 for -in

// Used to enumerate object properties
for (property in expression) { 
  // statement
}
Copy the code

2.4.6 label

// The user adds a tag to the code
label: statement

// The example-start tag can be used with break and continue
start: for (var i = 0; i < count; i++) {
  alert(i)
}
Copy the code

2.4.7 break and continue

Break – Immediately exits the loop

Continue – Exits the current loop immediately, but the next loop will be executed

From 2.4.8 switch

switch(expression) {
  case value1: statement1; break
  case value2: statement2; break
  case value3: statement3; break
  default: break
}
Copy the code

2.4.9 Supplementary: the with statement

// Sets the scope of the code to a specific object
with (expression) statement

// example - Put together the variable declaration assignment containing the location object
with(location) {
  var qs = search.substring(1)
  var hostname = hostname
  var url = href
}
//
var qs = location.search.substring(1)
var hostname = location.hostname
var url = location.href
Copy the code

Table of Notes:

JavaScript Learning (1) – A history of JavaScript

JavaScript Learning (2) – Basic syntax

Learning JavaScript (3)- Talk about prototype chains – 1. Variables

Learning JavaScript (3)- Talk about prototype chains – 2. Objects and prototypes

Learning JavaScript (3)- Talk about prototype chains – 3. Prototype chains and inheritance

JavaScript Learning (4)- Talk about closures

Github:

Github Notes link (continue to update, welcome star, please mark source for reprint)

JavaScript Learning (2) – Basic syntax

1. Used in HTML<Script>The label

1.1 <script>attribute

1.2 <script>Usage of labels