1, What is JavaScript
(1) Overview
JavaScript is the most popular scripting language in the world
Java,JavaScript
A qualified back-end person must be proficient in JavaScript language
(2) History
ECMAScript can be understood as a standard of JavaScript
The latest version has reached es6
However, most browsers only support es5 code!
Development environment - online environment, version inconsistency
2, Quick start
(1) Introducing JavaScript
1. Internal label
<script>
//......
</script>2. External introduction
abs.js
text.html
<script src="abc.js"></script>
Test code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script Inside the label, write JavaScript code-->
<script>
alert('hello,world');
</script>
<!--External introduction-->
<!--be careful: script Labels must appear in pairs-->
<script src="js"></script>
<!--No display definition type,By default JavaScript-->
<script type="text/javascript">
</script>
</head>
<body>
<!--It can also be stored here-->
</body>
</html>(2) Introduction to basic grammar
<script>
//1. Define variable type variable name = variable value;
var score=70;
//alert(num);
//2. Condition control
if(score>60&&score<70){
alert("60~70");
}else if(score>70&&score<80){
alert("70~80")
}else{
alert("other")
}
//console.log(score) print variables on the browser console!
</script>(3) Data type
Numeric, text, graphics, audio, video
1. Variables
2.number
js does not distinguish between decimal and integer, Number
123 //Integer 123 123.1 //Floating point number 123.1 1.123e3 //Scientific counting method -99 //complex NaN //not a number Infinity //Represents infinity
3. String
'abc' "abc"
4. Boolean value
true , false
5. Logical operation
&& Both are true and the result is true || One is true and the result is true ! True is false, false is true
6. Comparison operator
= == be equal to(If the type is different and the value is the same, it is judged as true) === Absolutely equal to (same type, same value, same result) true)
This is a defect of js. Insist not to use = = comparison
be careful:
1. NaN==NaN, which is not equal to all values, including itself
2. You can only judge whether this number is NaN by isNaN(NaN)
7. Floating point number problem:
console.log((1/3)===(1-2/3))
Try to avoid using floating-point numbers for operation, which has accuracy problems!
Math.abs(1/3-(1-2/3))<0.00000001
8.null and undefined
Null null
Undefined undefined
9. Array
Java arrays must be some objects of the same type, which is not required in JS
//To ensure the readability of the code, try to use []
var arr=[1,2,3,4,5,'hello',null,true]
new Array(1,12,3,4,4,5,'hello');Subscript the array: if it is out of bounds, it will
undefined
10. Object
Objects are braces and arrays are brackets
Each attribute is separated by commas, and the last one does not need to be added
//Person person=new Person(1,2,3,4,5);
var person={
name:"zhongguo",
age:3;
tags:['js','java','web','...']
}11. Get the value of the object
person.name > "zhongguo" person.age > 3
3, Data type
(1) String
1. Normal strings are wrapped in single quotation marks or double quotation marks
2. Note escape characters\
3. Multiline string writing
//tab above and esc below
var msg=
hello
world
Hello ya
Hello
4. Template string
//tab above and esc below
let name="zhongguo";
let age=3;
let msg=How do you do, ${name}5. String length
str.length
6. String variability, immutability
console.log(student[0]) s undefined student[0]=1 1 console.log(student) student undefined
7. Case conversion
//Note that this is a method, not a property student.toUpperCase() student.toLowerCase()
8,student.indexOf('t')
9,substring
[) student.substring(i) //Truncate from the first character to the last string student.substring(1,3) //[1,3)
(2) Array
Array can contain any data type
var arr=[1,2,3,4,5,6] //Value and assignment by subscript arr[0] arr[0]=1
1. Length
arr.length
Note: if arr.length is assigned, the array size will change. If the assignment is too small, the elements will be lost
2. indexOf, which obtains the subscript index through the element
arr.indexOf(2) 1
The string "1" is different from the number 1
3. slice() intercepts part of the Array and returns a new Array, similar to substring in String
4,push() , pop()
push: Press in to the rear pop: Pop up an element at the end
5. Unshift() head
unshift: Press into the head shift: Pop up an element in the header
6. sort()
(3)["B","C","A"] arr.sort() (3)["A","B","C"]
7. Element reverse()
(3)["B","C","A"] arr.reverse() (3)["c","B","A"]
8,concat()
(3)["B","C","A"] arr.concat(1,2,3) (6)["C","B","A",1,2,3] arr (3)["C","B","A"]
Note: concat() does not modify the array, but returns a new array
9. Connector join
Print a tiled array, concatenated with a specific string
(3)["C","B","A"]
arr.join('-')
"C-B-A"10. Multidimensional array
arr=[[1,2],[3,4],["5","6"]]; arr[1][1] 4
Array: store data (how to save, how to get, methods can be implemented by themselves)
(3) Object
Several key pair values
var Object name={
Attribute name: attribute value,
Attribute name: attribute value,
Attribute name: attribute value
}
//Defines a person object with four properties
var person={
name:"kele",
age:3,
email:"24736743@qq.com",
score:0
}
js object, {...} represents an object. The key value pair describes the attribute xxxx:xxxx. Multiple attributes are separated by commas, and the last attribute is not comma!
All keys in JavaScript are strings and values are arbitrary objects!
1. Object assignment
person.name="kele" "kele" person.name "kele"
2. If you use a non-existent object attribute, no error will be reported! undefined
person.haha undefined
3. Dynamically delete attributes, and delete the attributes of the object through delete
delete person.name true person
4. Dynamic addition, you can directly add values to new attributes
person.haha="haha" "haha" person
5. Determine whether the attribute value is in this object
'age' in person true //inherit 'toString' in person true
6. Determine whether a property is a hasOwnProperty() owned by the object itself
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true(4) Process control
1. if judgment
var age=3;
if(age>3){
alert("haha");
}else if(age<5){
alert("kuwa");
}else{
alert("kuwa");
}2. while loop to avoid dead loop
while(age<100){
age=age+1;
console.log(age)
}3. for loop
for(let i=0;i<100;i++){
console.log(i)
}4. forEach loop
var age=[12,3,12,3,12,3,12,34,123];
//function
age.forEach(function(value){
consolg.log(value)
})5,for...in
//for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("existence")
console.log(age[num])
}
}(5) Map and Set
Map
//es6 Map
//Student's grade, student's name
//var names=["tom","jack"]
//var scores=[100,90,80]
var map=new Map([['tom'，100],['jack;90],['haha',80]]);
var name=map.get('tom'); //Get value through key
map.set('admit',123456); //Add or modify
map.delete("tom"); //deleteSet: unordered and non duplicate sets
set.add(2); //add to set.delete(1); //delete console.log(set.has(3)); //Include an element
(6) iterator
iterator is used to iterate over map and set
Traversal array
//By subscript for of/ for in
var arr=[3,4,5]
for(var x of arr){
console.log(x)
}
Traversal map
var set=new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
console.log(x)
}
Traversal set
var set=new Set([5,6,7]);
for(let x of set){
console.log(x)
}