网页前端开发（基础进阶2）
前面学习了html与css，接下来学习JS（JavaScript与Java无关）。
web标准（网页标准）分为3个部分：
1.html主要负责网页的结构（页面的元素和内容）
2.css主要负责网页的表现（元素的外观，位置等页面样式）
3.js主要负责网页的行为（交互效果 ）
JavaScript是跨平台，脚本语言（不用编译，直接运行的语言）
JS主要负责控制网页的行为，实现网页的交互效果。
JS的组成（3个部分）
1.ECMAScript：规定了JS基础语法的核心知识，包含：变量，数据类型，流程控制，函数，对象。
2.BOM：浏览器对象模型，用于操作浏览器，如：页面弹窗，地址栏操作。
3.DOM：文档对象模型，用于操作html文档，改变标签内容，改变标签样式。
JS的核心语法
1.JS的引入方法
（1）使用内部脚本：将JS代码定义在html页面中。
JS代码位于<script> </script>标签之间
在html文件中，可在任意地方，放置任意的<script> </script>标签
建议在html文件中，将<script> </script>标签放置在<body>的最下方
示例：
<body>
..........
.........
<script>
alert（‘hello world’）//弹出一个提示栏，显示hello world
</script>
</body>
（2）使用外部脚本：新建text.js文件
在text.js文件中写入 alert（‘hello world’）//弹出一个提示栏
在html文件中，引用js文件。<script src=“js/text.js”> </script>
示例：
在text.js文件
alert（‘hello world’）
在html文件中
<body>
..........
.........
<script src=“js/text.js”> </script>
</body>
2.JS的基础语法
（1）声明变量
JS中使用let声明变量，JS是若类型语言，同一变量可存放不同类型的值。
<body>
..........
.........
<script>
let a=20;
a="hello";
alert（a）//弹出一个提示栏，显示hello
const PI=3.14;//使用const定义变量，定义后变量不可改变
PI=3.2；//报错
</script>
</body>
（2）数据类型
JS的数据类型分为两种：基本数据类型和引用数据类型(对象)。
基本数据类型有5种，number（数字类型，包含整数，浮点数。NaN），boolear（布尔类型，只有true和false），null（为空），undefined（未初始化），string（字符串类型,推荐使用‘ ’单引号）。
使用typeof可获取变量的数据类型。
<body>
..........
.........
<script>
let name='Tom';
let age=20;
console.log('你好，我是'+name+',我今年'+age+'岁了。')
console.log(`你好，我是${name},我今年${age}岁了。`)//可使用` `反引号，对字符串进行拼接，使用${ }。
alert(typeof name); //获取变量name的数据类型，为string（字符串）。
</script>
</body>
（3）函数 function
函数：执行特定任务的代码块，方便程序的封装复用。
JS中函数的定义
function My(参数1，参数2){
..............
}示例：
<body>
..........
.........
<script>
function add(a，b){
return a+b;
}let result=add(10,20);
console.log(result)
</script>
</body>
特殊的函数：匿名函数
方法1：
let add=function（a，b）{
return a+b；
}方法2：
let add=（a，b）=>{
return a+b；
}
（4）自定义对象
定义格式
let user={
name='Tom'，
age=20，
gender=‘男’，
sing：function（）{
alert(‘我的名字是’+this.name);
}
}
调用格式：
console.log(user.name);
user.sing();
（5）json
json用于数据载体，用来存储数据。
特点：层次分明，结构简单
JS对象
{
name=“Tom”,
age=20,
gender="男"
}
json文本
{
"name"=“Tom”,
"age"=20,
"gender"="男"
}
JS对象->json文本 使用JSON.stringify()进行转换
json文本->JS对象 使用JSON.parse()进行转换
示例1
let person={
name=“Tom”,
age=20,
gender="男"
}
alert(person) //弹出框，只能弹出[Object,Object,Object]
alert(JSON.stringify(person)) //弹出框，弹出{"name"=“Tom”,"age"=20,"gender"="男"}
示例2
let personJ='{"name"=“Tom”,"age"=20,"gender"="男"}'
alert(JSON.parse(personJ).name) //弹出Tom
JS的事件监听
事件：HTML事件是发生在HTML元素上的事情。如：按钮被点击，鼠标移动到元素上，按下键盘的按钮。
事件监听：JavaScript可以在事件触发时，就立即调用一个函数，做出响应，被称为“事件绑定”或“注册事件”。
事件源：.addEventListener('事件类型'，事件触发时执行的函数)
1.事件源：哪个元素触发事件，就获取哪个元素
2.事件类型：触发事件的类型。如：鼠标点击 click
3.事件触发时，执行的函数
示例
<body>
..........
.........
<input id="bin" type="button" value="点击一下">
<script>
document.querySelector('#bin').addEventListener('click',()=>{
alert('测试')；
})
</script>
</body>