content
The relationship between JavaScript and HTML and CSS
delete an element from an array
1. What is JavaScript
JavaScript (JS for short)
is one of the most popular programming languages in the world
is a scripting language that runs through an interpreter
Mainly runs on the client side (browser), now it can also run on the server side based on node.js.
The relationship between JavaScript and HTML and CSS
HTML: The Structure of the Web Page (Bone)
CSS: Web page performance (skin)
JavaScript: Web Page Behavior (Soul)
JavaScript running process
The code written is saved in the file, that is, stored on the hard disk (external memory).
Double-clicking the .html file browser (application) will read the file and load the file content into memory (data flow: hard disk => memory)
The browser parses the code written by the user, translates the code into binary, and allows the computer to recognize the instructions (the work of the interpreter) to get
The binary instructions will be loaded and executed by the CPU (data flow: memory => CPU)
Components of JavaScript
ECMAScript (ES for short) : JavaScript syntax
DOM : The page document object model, which operates on elements in the page
BOM: Browser Object Model, which operates on the browser window
2. Preliminary knowledge
first program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("你好！");
</script>
</body>
</html>
How JavaScript is written
In-line expression
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点我一下" onclick = "alert('haha')">
</body>
</html>
Inner fitting type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("hello word");
</script>
</body>
</html>
External formula
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html>alert("jjjjj");
input Output
input: prompt
pop up an input box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
prompt("请输入你的姓名");
</script>
</body>
</html>
output: alert
<body>
<script>
alert("sjs");
</script>
</body>
Output: console.log
<body>
<script>
console.log("日志");
</script>
</body>
3. Syntax overview
use of variables
var name = 'zhangsan';
var age = 20;use variables
console.log(age); // 读取变量内容
age = 30; // 修改变量内容
<body>
<script>
var name = prompt("输入姓名");
var age = prompt("输入年龄");
var socre = prompt("输入分数");
alert("姓名" + name);
alert("年龄"+age);
alert("分数"+ socre);
</script>
</body>
understand dynamic typing
var a = 10; // 数字
var b = "hehe"; // 字符串The type of the variable may change as the program runs
var a = 10; // 数字
a = "hehe"; // 字符串basic data type
number numeric type
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头One octal digit corresponds to three binary digits
A hexadecimal digit corresponds to four binary digits. (Two hexadecimal digits is a byte
special numeric value
nfinity: Infinity, greater than any number. Indicates that the number has exceeded the range that JS can represent. -Infinity: Negative infinity, less than any number. Indicates that the number has exceeded the range that JS can represent. NaN: Indicates that the current result is not a number.
<body>
<script>
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);
</script>
</body>
string string type
var a = "haha";
var b = 'hehe';
var c = hehe; // 运行出错var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引
号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号boolean boolean type
console.log(true + 1);
console.log(false + 1)
<body>
<script>
console.log(true + 1);
console.log(false + 1)
</script>
</body>
undefined undefined data type
<body>
<script>
var a;
console.log(a)
</script>
</body>
4. Array
create array
</head>
<body>
<script>
var arr = new Array();
</script>
</body>
get array element
<body>
<script>
var arr = ['1','2','3'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
</script>
</body>
add array element
<body>
<script>
var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);
</script>
</body>
<body>
<script>
var arr = [];
arr[2] = 10;
console.log(arr)
</script>
</body>
<body>
<script>
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 != 0) {
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</body>
delete an element from an array
<body>
<script>
var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
</script>
</body>
5. Function
syntax format
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值<body>
<script>
// 调用函数
hello();
// 定义函数
function hello() {
console.log("hello");
}
</script>
</body>
function expression
<body>
<script>
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);
</script>
</body>
scope chain
<body>
<script>
var num = 1;
function test1() {
var num = 10;
function test2() {
var num = 20;
console.log(num);
}
test2();
}
test1();
</script>
</body>
Functions can be defined inside functions and inner functions can access local variables of outer functions.
When console.log(num) is executed, it will now look for num in the local scope of test2. If it is not found, it will continue to search in test1. If it is not found, it will be searched in the global scope.