3. JavaScript-CSDN博客

本文链接：https://blog.csdn.net/hanzong110/article/details/108875851

这篇博客深入介绍了JavaScript，包括其作为前端三层的行为层、语法规范、内置功能函数如警告框和提示框，以及DOM操作。还讨论了数据类型、变量、运算符、数组方法、DOM属性和方法、事件处理以及ECharts库的使用。通过实例和练习，帮助读者掌握JavaScript编程技巧。

摘要由CSDN通过智能技术生成

1 JavaScript简介

简称JS，是一门脚本语言(解释执行非编译执行)，可以嵌套在静态页面中可以给静态页面添加一些动态效果。JS同样被用到了很多非浏览器环境中，例如node平台
不同浏览器厂商会在浏览器中内置不同的解析器来解析JS语法，例如谷歌浏览器使用的就是V8解析器

2 前段三层

结构层：HTML
样式层：CSS
行为层：JavaScript

3 JavaScript组成

ECMAScript：定义了语法规范，例如用var定义变量、function定义函数、for定义循环等，欧洲计算机协会大概每年6月中旬重新制定语法规范，我们当前学习的是2014年定下的规范，简称ES5，现在已经出到了ES6
DOM(document object model)：一个代表HTML文本的对象，通过该对象就可以访问HTML中各个标签
BOM(browser object model)：一个代表浏览器的对象

4 JS书写格式

可以使用双闭合标签

5 内置功能函数

5.1 警告框

代码

//CSS和JavaScript中，都使用//和/**/进行注释，而html中，使用<!---->进行注释
//单行注释
/*
	多行注释
*/
alert("Hello word");

5.2 提示框

代码

prompt("小小兄弟你回家了吗");
//第一个参数为提示内容，第二个参数为提示框的文本中的默认内容
prompt("小小兄弟你回家了吗", 66666);

5.3 控制台打印

可以通过，右键浏览器–检查–Console，进入到控制台页面

代码

console.log("我在控制台中打印数据，你看不见我");

6 数据类型

6.1 基本数据类型

英文描述	中文描述	值
string	字符串	“我爱你祖国”
number	数字	100、3.14、-666
boolean	布尔	true、false
undefined	为定义	undefined
null	空对象	null

6.2 引用类型

英文描述	中文描述	值
object	引用类型	函数、数组、正则、DOM、BOM

6.3 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>
<script>
  //字符串
  console.log("我爱你JS");
  console.log("最近快过年了，回家要胖五进");
  //数字
  console.log(100);
  console.log(-4.14);
  console.log(123456789);
  //布尔
  console.log(true);
  console.log(false);
  //未定义
  console.log(undefined);
  //空对象
  console.log(null);
  //JS当中typeof关键字，可以返回数据类型
  console.log(typeof 123);
  console.log(typeof true);
  console.log(typeof undefined);
  //注意结果为false，和java中double的计算导致数据错误原因相同
  console.log(0.1+0.2==0.3);
</script>

7 变量

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>
<script>
  //1. 关键字var声明变量，变量未赋值之前，值为undefined
  var num;
  //2. 变量赋值
  num = 123;
  //3. 使用变量
  //通过访问变量名字、获取到对应存储数据
  console.log(num);
  var b=456;
  var c = 789;
  //打印"123 456 789"这个字符串
  console.log(num,b,c);
</script>

8 运算符

数学运算符、比较运算符：非数字类型的值，js会自动通过Number函数，隐式将它们转为数字，再进行运算
1. NaN：not a number，是JS语言中一个特殊的数字，一般进行数学运算符的时候，计算不出结果，返回数字NaN
2. NaN和任何值用数学运算符进行运算，结果还是NaN
非数字值转换后值

true 1

false 0

undefined NaN

null 0

非数字值	转换后值
true	1
false	0
undefined	NaN
null	0

逻辑运算符：非布尔类型的值，js会自动通过Boolean函数，隐式将它们转为布尔类型值，再进行运算

非布尔值	转换后值
0	false
NaN	false
非0非NaN的数字	true
空字符串	false
非空字符串	true
undefined	false
null	false

比较运算符的结果只能是false或true。例如NaN==123，结果是false，而不是NaN

代码

//1. ==表示值是否相等
console.log(3 == "3"); //true
console.log(3 != 3); //false
//2. ===表示值和数据类型是否都相等
console.log(3 === "3"); //false
console.log(3 !== 3); //false

//3. 注意null需要特殊记忆，虽然null被转为0，但null==0、null>0、null<0，返回都是false，有点像数据库中对null的处理
console.log(null==0);
console.log(null>0);
console.log(undefined);

8.1布尔

代码

//我们也可以通过手动调用Number函数，查看布尔类型，最后转为什么数字
console.log(Number(true));//1
console.log(Number(false));//0
console.log(true + 99);//100
console.log(false * 100);//0

8.2 undefined

代码

//NaN和任何值发生计算，结果都是NaN
console.log(0 / 0);
console.log(typeof NaN);
console.log(NaN + 33);
console.log(NaN * 33);
console.log(NaN + NaN);
console.log(undefined + 33);
console.log(undefined / 33);

8.3 空对象

代码

console.log(Number(null));
console.log(null * 99);
console.log(0 + NaN);
console.log(null + NaN);

8.4 字符串

8.4.1 字符串与数学运算符

如果非"+"连接，那么会将字符串先转为对应的数字，如果该字符串无法转为数字，会转为NaN，之后再进行计算
如果为"+“连接，”+"会被当作字符串连接符，将数据从左到右拼接为字符串，不再表示加法

代码

console.log("12" + 44);
console.log("张三喜欢李四" + 666);
console.log("12" - 44);
console.log("12" * 44);
console.log("12" / 44);
console.log("12" % 44);
console.log("张三" + 66);
console.log("张三" + "李四");
console.log("小明" / 66);
console.log("小红红" * "小兰兰");

8.4.2 字符串与比较运算符

如果是字符串与数字比较，会将字符串隐式转换为数字后再进行比较
如果是字符串与字符串比较，从左到右，一个一个比较字符的ASCII值，直到某一个字符不相等，比较结束

代码

//字符串和数字比较
console.log("66" > 99); //false
console.log("33" > 12); //true
console.log("33" == 33); //true 
console.log("33" === 33); //false

//字符串和字符串比较
console.log("a2" > "A2"); //true
console.log("b2a" > "ABC"); //true
console.log("李四" == "李四");//true

9 前端自学网站

https://www.w3school.com.cn/
php：https://www.runoob.com/php/php-ref-array.html
vue：https://cn.vuejs.org/
react：https://reactjs.org/docs/hello-world.html
jquery：http://jquery.cuishifeng.cn/
node平台：http://nodejs.cn/
canvas：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
echarts：https://www.echartsjs.com/examples/zh/index.html

10 条件语句

代码

//用户输入分数
var score = prompt("请你输入一个分数");
if (score < 60) {
     
  //条件：分数小于60
  alert("兄弟不好意思,来年补考");
} else if (score < 70) {
     
  //出现else:暗含条件分数一定是大于等于60
  //完整条件大于等于60 且小于70
  alert("兄弟恭喜你及格");
} else if (score < 80) {
     
  //暗含条件：分数大于等于70
  //完整条件：大于等于70 且小于80
  alert("良好");
} else {
     
  //暗含条件：分数大于等于80
  alert("优秀");
}

11 循环语句

for

//for循环
for (var i = 0; i < 10; i++) {
     
  console.log(i);
  //打印在网页上
  document.write("<h1>我爱你祖国</h1>");
}

while

var i = 10;
var sum = 0;
do {
     
  sum += i;
  console.log(i);
} while (i--);
console.log(sum);

break、continue：与java用法一样

//可以给循环起名字，叫waiceng，可以指定跳出某层循环，java实际上也可以这样用
waiceng: for (var i = 1; i < 10; i++) {
     
  if (i % 3 == 0) break waiceng;
  console.log(i)
}

12 函数

12.1 关键字函数使用

根据声明方式不同，分为关键字function声明函数，和表达式声明函数

关键字function声明函数

//1. 声明
//形参无需类型修饰，默认var修饰
function sum(a, b) {
     
  console.log(a + b);
}
//2. 调用
sum(100, 200);
sum("张三", "李四");

12.2 全局变量和局部变量

javascript中，形参和函数体内声明的变量为局部变量，其他所有变量全部是全局变量

代码

//1. i不在方法体内，也不是形参，所以是全局变量
for (var i = 0; i < 10; i++) {
     
  console.log(i);
}