前面学习了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>