网页前端开发（基础进阶2--JS）

news2025/6/4 11:14:35

前面学习了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可以在事件1-触发时，就立即调用一个函数，做出响应，被称为“事件绑定”或“注册事件”。

事件源：.addEventListener('事件类型'，事件触发时执行的函数)

1.事件源：哪个元素触发事件，就获取哪个元素

2.事件类型：触发事件的类型。如：鼠标点击 click

3.事件触发时，执行的函数

示例1

<body>

        ..........

.........

<input id="bin" type="button" value="点击一下">

        <script>

document.querySelector('#bin').addEventListener('click',()=>{

alert('测试')；

})

        </script>

</body>

示例二

鼠标移动，表格背景颜色改变

<body>

        ..........

.........

        <script>

let trs=document.querySelectorAll('br'); //获取所有tr标签元素

for(let i=0;i<trs.length;i++){

trs[i].addEventListener('moluseenter'.function(){ //鼠标进入

this.style.backgroundColor='#f2e2e2';        //将颜色改为粉色

                        });



                        trs[i].addEventListener('moluseleave'.function(){ //鼠标离开

this.style.backgroundColor='#fff';        //将颜色恢复为白色

                        });

                }

        </script>

</body>