Table of contents
- 1. The location of JS writing
- Two, the output statement
- 3. Basic Grammar
- 4. Notes
- 5. Literals and variables
- 6. Data type
- 7. Basic Grammar
- write at the end
1. The location of JS writing
1. Specify attributes
<button onclick="alert('hello');">我是按钮</button>
<a href="javascript:alert('aaa');">超链接</a>
2. script tag
<script type="text/javascript">
//编写js代码
</script>
3. Introduce
Once the script tag is used to introduce external files, you can’t write code anymore. Even if you write it, the browser will ignore it. If necessary, you can create a new script tag for writing internal code.
<script type="text/javascript" src="文件路径"></script>
Two, the output statement
alert("要输出的内容");
This statement will pop up an alert box in the browser window
document.write("要输出的内容");
The content will be written into the body tag and displayed on the page
console.log("要输出的内容");
This content will be written to the console of the developer tools
3. Basic Grammar
The js function declaration does not need; semicolon, but the assignment statement must add; semicolon
function functionName(arg0,arg1,arg2){
//函数声明
}
var functionName=function(arg0,arg1,arg2){
//函数表达式
};(注意分号)
4. Notes
1. Single-line comments
//注释内容
2. Multi-line comments
/*
注释内容
*/
JS is strictly case sensitive
- Each statement in JS ends with a semicolon (;) If you do not write a semicolon, the browser will automatically add it, but it will consume some system resources, and sometimes, the browser will add the wrong semicolon, so the semicolon must be added during development Write
- Multiple spaces and newlines are automatically ignored in JS, so we can use spaces and newlines to format the code.
5. Literals and variables
1. Literal
Literals are actually some fixed values, such as 1 2 3 4 true false null NaN "hello"
literals cannot be changed.
Since literals are not very convenient to use, literals are rarely used directly in JS
2. Variables
Variables can be used to hold literals, and can hold arbitrary literals
Literals are generally used through variables instead of directly, and literals can also be described through variables
3. Declare variables
Use the var keyword to declare a variable
var a;
为变量赋值
a = 1;
声明和赋值同时进行
var a = 456;
4. Identifier
All content that can be named independently in JS can be considered as an identifier, and
if it is an identifier, it should abide by the specification of the identifier.
For example: variable name, function name, property name
specification:
- Identifiers can contain letters, numbers, _, $
- Identifier cannot start with a number
- Identifiers cannot be keywords and reserved words in JS
- Identifiers generally use camel case
xxxYyyZzz
6. Data type
Six data types
JS is divided into six data types and 5 basic data types + object
- String string
- Number value
- Boolean Boolean value
- Null
- Undefined undefined
- Object object
Among them , there are 5 basic data types
typeof operator checks data type
1. Basic data types
1.1. String string
Strings in JS need to be enclosed in quotation marks. Double quotation marks or single quotation marks are OK.
Use \ as an escape character in the string
' ==> '
" ==> "
\n ==> Newline
\t ==> Tab
\ ==>
When checking a string with the typeof operator, it returns " string "
1.2.Number value
All integers and floating point numbers in JS are of type Number
The maximum representable value: Number.MAX_VALUE= 1.7976931348623157e+308
Special numbers: can be assigned to variables
- Infinity positive infinite a = Infinity, can be assigned
- -Infinity negative infinity
- NaN illegal number (Not A Number)
Representation of numbers in other bases:
- The beginning of 0b means binary, but not all browsers support it
- 0 at the beginning means octal
- 0x starts with hexadecimal
When using typeof to check a Number type of data, it will return "number"
(including NaN and Infinity)
1.3. Boolean Boolean value
Boolean values are mainly used for logical judgments. Boolean values only have two
true logical
false logical false
When using typeof to check a Boolean value, it will return "boolean"
1.4. Null empty value
The null value is specially used to represent an empty object, and the value of the Null type has only one
null
When using typeof to check a Null type value, it will return "object"
1.5.Undefined undefined
If you declare a variable but do not assign a value to the variable, the value of the variable is undefined.
There is only one value of this type.
When using typeof to check a value of Undefined type, it will return "undefined"
2. Reference data type
Object object
3. Type conversion
Type conversion refers to converting other data types to String Number or Boolean
3.1 Conversion to String
3.1.1 Method 1 (mandatory type conversion):
Call the toString() method of the converted data
Example:
var a = 123;
a = a.toString();
Note: This method does not apply to null and undefined.
Since there are no methods in these two types of data, an error will be reported when calling toString()
3.1.2 Method 2 (mandatory type conversion):
Call the String() function
Example:
var a = 123;
a = String(a);
Principle: For Number Boolean String, their toString() method will be called to convert it to a string. For a null value, it will be directly converted to the string "null". For undefined directly converted to the string "undefined"
3.1.3 Method 3 (implicit type conversion):
For any data type + ""
Example:
var a = true;
a = a + "";
Principle: same as String() function
3.2 Conversion to Number
3.2.1 Method 1 (mandatory type conversion):
Call the Number() function
Example:
var s = "123";
s = Number(s);
Case of conversion:
string > number
- If the string is a legal number, it is directly converted to the corresponding number
- If the string is an illegal number, convert to NaN
- If it is an empty string or a string of pure spaces, it is converted to 0
boolean > number
- true converts to 1
- false is converted to 0
- NULL > number
- null is converted to 0
undefined > number
- undefined is converted to NaN
3.2.2 Method 2 (mandatory type conversion):
Call parseInt() or parseFloat() These two functions are specially used to convert a string to a number
If you use parseInt() or parseFloat() on a non-String, it will first convert it to a String and then operate parseInt()
to extract the valid integer bits in a string and convert it to a Number
example:
var a = "123.456px";
a = parseInt(a); //123
If necessary, you can specify a second parameter in parseInt() to specify the base. parseFloat() can extract valid decimal places in a string and convert them to Number. Example
:
var a = "123.456px";
a = parseFloat(a); //123.456
3.2.3 Method 3 (implicit type conversion):
Use unary + for implicit type conversion
Example:
var a = "123";
a = +a;
Principle: same as Number() function
3.3 Conversion to Boolean
3.3.1 Method 1 (mandatory type conversion):
Example using the Boolean() function
:
var s = "false";
s = Boolean(s); //true
Case of conversion
String > Boolean
all true except the empty string
Value > Boolean
All true except 0 and NaN
null, undefined > Boolean
are all false
Object > Boolean
both true
3.3.2 Method 2 (implicit type conversion):
Do two NOT operations for any data type to convert it to a Boolean value
Example:
var a = "hello";
a = !!a; //true
7. Basic Grammar
1. Operator
Operators are also known as operators
through which one or more values can be manipulated or manipulated
1.1 typeof operator
Used to check the data type of a variable
Syntax: typeof variable
It will return a string describing the type as a result
1.2 Arithmetic operators
- + Adds two values and returns the result
- - Subtracts two values and returns the result
- * Multiplies two values and returns the result
- / Divide two values and return the result (division of js, not integer division in c language, because the value is represented by Number)
- % Perform a modulo operation on two values and return the result
Except for addition, when performing operations on values of non-Number types, they are first converted to Numbers and then performed operations.
When doing addition, if two strings are added, a string operation will be performed to connect the two characters into a string. Any value added to a string will be converted to a string first, and then the string will be spelled
1.3 Unary operators
Unary operators require only one operand
1.3.1+
It is a positive sign, which will not have any effect on the value, but can convert a non-number to a number
. Example:
var a = true;
a = +a;
1.3.2-
It is the minus sign, which can invert the sign bit of a number
. Example:
var a = 10;
a = a;
1.3.3 Auto increment
Auto-increment can make the variable increase by 1 based on the original value.
Using ++ auto
-increment can use the former ++ (++a) and the later ++ (a++).
Whether it is ++a or a++, the original variable will be self-increased immediately. The difference between increasing 1
is that the values of ++a and a++ are different.
The value of ++a is the new value of the variable (the value after the self-increment)
and the value of a++ is the original value of the variable (the value before the self-increment).
1.3.4 Self-reduction
Self-decrement can make the variable decrease by 1 on the basis of the original value. Self- decrement can
be used.
Before (a) and after (a),
whether it is a or a, the original variable will be reduced by 1 immediately.
The difference is a and a The value is different,
the value of a is the new value of the variable (the value after the self-decrement)
The value of a is the original value of the variable (the value before the self-decrement)
1.4 Logical operators
1.4.1 !
The NOT operation can invert a Boolean value, true becomes false while false is true.
When using ! on a non-Boolean value, it will be converted to a Boolean value first and then negated.
We can use ! to convert other data types into Boolean value
1.4.2 &&
&& can perform an AND operation on the values on both sides of the symbol.
Only when the values at both ends are true, will it return true. As long as there is a false will return false.
AND is a short-circuit AND, if the first value is false, the second value is no longer checked
For non-boolean values, it will convert it to a boolean value and then do the operation, and return the original value
Rules:
1. If the first value is false, return the first value
2. If the first value is true, return the second value
1.4.3 ||
|| can OR the values on both sides of the symbol
Only when both ends are false, false will be returned. As long as there is a true, it will return true.
or a short-circuiting or, if the first value is true, then no longer check the second value
For non-boolean values, it will convert it to a boolean value and do the operation, and return the original value
Rules:
1. If the first value is true, return the first value
2. If the first value is false, return the second value
1.5 Assignment Operators
1.5.1 =
You can assign the value on the right side of the symbol to the variable on the left
1.5.2 +=
a += 5 is equivalent to a = a+5
var str = "hello"; str += "world";
1.5.3 -=
a -= 5 is equivalent to a = a-5
1.5.4 *=
a = 5 is equivalent to a = a 5
1.5.5 /=
a /= 5 is equivalent to a = a/5
1.5.6 %=
a %= 5 is equivalent to a = a%5
1.6 Relational Operators
Relational operators are used to compare the size relationship between two values
>
>=
<
<=
The rules of relational operators are consistent with those in mathematics. They are used to compare the relationship between two values.
If the relationship is established, it returns true, and if the relationship does not hold, it returns false.
If the two values being compared are non-numeric, they are converted to Numbers and then compared.
If the two values to be compared are both strings, the Unicode encodings of the strings will be compared instead of converted to Numbers.
1.7 Equality Operators
Equal, judge whether the left and right values are equal, return true if equal, and return false if not equal
Equal will automatically perform type conversion on the two values, if different types are compared, they will be converted to the same type and then compared , equal after conversion it will also return true, null == undefined
1.7.1 !=
Inequality, judge whether the left and right values are unequal, return true if unequal, and return false if equal,
unequal will also do automatic type conversion.
1.7.2 ===
Congruence, to judge whether the left and right values are congruent, it is similar to equality, except that it will not perform automatic type conversion,
if the two values are of different types, it will directly return false
1.7.3 !==
Not equal, similar to inequality, but it will not perform automatic type conversion, if the two values are of different types, it will directly return true
1.8 Special values
null and undefined
Since undefined is derived from null, null == undefined will return true.
But null === undefined will return false.
NaN
NaN is not equal to any value, reports itself NaN == NaN //false
To determine whether a value is NaN
use the isNaN() function
1.8 Ternary operator
grammar
Conditional expression? Statement 1: Statement 2;
Execution process:
first evaluate and judge the conditional expression,
- If the judgment result is true, execute statement 1 and return the execution result
- If the judgment result is false, execute statement 2 and return the execution result
priority
Like in mathematics, operators in JS also have priority,
such as multiplication and division first, addition and subtraction first and then or
specific priority can refer to the priority table, the higher the priority in the table, the higher the
priority. The higher the priority, the higher the priority, the same priority is calculated from left to right.
The priority does not need to be memorized. If you are in doubt, use () to change the priority.
write at the end
In the second week of school, I have been learning the front-end for a month and a half, and I have been stuck on JS for at least a month (it is estimated that I will be stuck for another half a month). The first time I learned it was from teacher PINK, so I always feel that JS is the same as the c I learned before. It’s similar to JAVA. I thought I knew it, so I didn’t listen carefully. I finished the basics of JS in three days, and I didn’t learn BOM and DOM very well (at least I can’t do the case...) After learning advanced JS in Silicon Valley, I will I found that I couldn't keep up with it, and I was so confused after listening to the first class = = So I started to brush JS for the second time, and this time I replaced it with Mr. Li Lichao's JS (basic and advanced). Teacher PINK’s lectures are much more detailed...so I’m still learning JS
.