当前位置：首页 > news >正文

javaweb - JavaScript基础

news 来源：原创 2025/6/17 10:30:18

JavaScript（简称JS）是一种轻量级、跨平台的脚本编程语言，主要用于为网页添加动态交互功能，是现代Web开发的核心技术之一（与HTML、CSS并称为前端“三驾马车”）。

一、JS引入方式

JavaScript代码必须在<script></script>两个标签之间。

在HTML文档中，可以在任意地方放任意个数的<script>。

一般会把脚本置于<body>元素的底部，可以改善显示速度（HTML代码从上往下加载）。

在代码中，JavaScript具有两种引用方式，一种是内部引用（直接在当前页面的script中写内容），一种是外部引用（在外部的js文件写内容），在script标签内用src来引用对应内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title>
</head>
<body><!-- <script>//1、内部脚本//双斜线注释（js内可使用）alert('hello js'); //弹出框</script> --><script src="js/demo.js">//2、外部脚本</script>
</body>
</html>

下面是demo.js文件中的内容

 alert('hello java script');

二、声明变量&常量

JS中用let关键字来声明变量（弱类型语言，变量可以存放不同类型的值）

JS中用const关键字来声明常量。

一旦声明，常量的值不可改变。（不能重新赋值）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基础语法</title>
</head>
<body><script>//1、声明变量let a=10;a="Hello";a=true;alert(a);//弹出窗口输出//2、声明常量const PI=3.14;//PI=3.1415926;有这个会出错，PI无法输出console.log(PI);  //控制台输出document.write(PI);//网页输出，不常用 </script>
</body>
</html>

三、数据类型

JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）。

基本数据类型：number（数字），boolean（布尔），null（对象为空），undefined（声明的变量未初始化时的默认值），string（字符串）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
</head>
<body><script>//1. 数据类型（typeof可以获取数据类型）alert(typeof 10); //numberalert(typeof 1.5); //numberalert(typeof true); //booleanalert(typeof false); //booleanalert(typeof "Hello");//stringalert(typeof 'JS'); //stringalert(typeof `JavaScript`); //stringalert(typeof null); //objectalert(typeof undefined); //undefinedlet a ;alert(typeof a);  //undefined（变量未赋值时，默认为undefined）//2、模板字符串(反引号字符串)    -简化字符串拼接let name = 'TOM';let age = 18;console.log('我的名字是'+name+',年龄是'+age);console.log(`我的名字是${name},年龄是${age}`);</script>
</body>
</html>

当字符串中需要拼接变量时，可以使用'内容1'+变量名+'内容2' ，也能直接在反引号内用${变量名}来使用变量

即`内容1${变量名}内容2`

四、函数

函数（function）是被设计用来执行特定任务的代码块，JavaScript中用function关键字进行定义。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>//1、函数的定义及调用function add(a,b){return a+b;}let result=add(1,2);//函数的参数（调用时，实参与形参可以不一致，第一个实参给a，第二个实参给b，第三个实参被忽略）console.log(result);</script>
</body>
</html>

匿名函数

匿名函数是一种没有名称的函数，可以通过两种方法定义：1、函数表达式 2、箭头函数

函数表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>// //1、函数的定义及调用// function add(a,b){//   return a+b;// }// let result=add(1,2);// //函数的参数（调用时，实参与形参可以不一致，第一个实参给a，第二个实参给b，第三个实参被忽略）//2、函数的定义与调用 -匿名函数let add=function(a,b){return a+b; }result=add(2,2);console.log(result);</script>
</body>
</html>

箭头函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>// //1、函数的定义及调用// function add(a,b){//   return a+b;// }// let result=add(1,2);// //函数的参数（调用时，实参与形参可以不一致，第一个实参给a，第二个实参给b，第三个实参被忽略）// //2、函数的定义与调用 -匿名函数// let add=function(a,b){//   return a+b; // }// result=add(2,2);//2.2、函数的定义与调用 -箭头函数let add=(a,b)=>{return a+b; }result=add(3,2);console.log(result);</script>
</body>
</html>

五、自定义对象

定义格式

let 对象名={

属性名1:属性值1,

属性名2:属性值2

方法名:function(形参列表){}

}

（也可以直接方法名（形参列表）{}）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>//1、自定义对象//  let user = {//   name:'TOM',//   age:18,//   gender:'男',//   sing:function(){//     alert(this.name+'在唱歌');//   }//  }let user = {name:'TOM',age:18,gender:'男',sing(){alert(this.name+'在唱歌');}}</script>
</body>
</html>

调用对象的方法

与java类似，对象名.成员名或对象名.方法名即可。

json

JavaScript Object Notation，JavaScript对象标记法（JS对象标记法书写的文本）

由于其语法简单，层次结构分明，现多用于数据载体，在网络中进行数据传输。

JSON.stringify(对象名) 将JS对象转换为JSON字符串

JSON.parse(字符串名) 将JSON字符串转换为JS对象

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>//1、自定义对象//  let user = {//   name:'TOM',//   age:18,//   gender:'男',//   sing:function(){//     alert(this.name+'在唱歌');//   }//  }let user = {name:'TOM',age:18,gender:'男',sing(){alert(this.name+'在唱歌');}}//2、调用对象的方法user.sing();alert(user.name);alert(user.age);//3、JSON -JS对象标记法let person = {name:'itcast',age:18,gender:'男'}alert(person)//[object Object]alert(JSON.stringify(person));//{"name":"itcast","age":18,"gender":"男"}//JSON.stringify(person) -将JS对象转换为JSON字符串let personJson = '{"name":"CodeBlossom","age":18,"gender":"女"}'; //JSON字符串let personObj = JSON.parse(personJson);//JSON字符串转换为JS对象alert(personObj.name);</script>
</body>
</html>

六、DOM

文档对象模型

将标记语言的各个组成部分封装成对应的对象。

DOM操作的核心思想：将网页中的所有元素都当做对象来处理（标签中的所有属性在该对象上都可以找到）

1、获取DOM对象

（1）获取匹配到的第一个元素 document.querySelector('选择器')

（2）获取匹配到的所有元素 document.querySelectorAll('选择器')

注：2得到的是一个NodeList节点集合，是一个伪数组（有长度，有索引的数组）。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-DOM</title>
</head>
<body><h1 id="title1">11111</h1><h1>22222</h1><h1>33333</h1><script>//修改第一个h1标签的文本内容//1、获取DOM对象let h1 = document.querySelector('#title1');//获取id为title1的DOM对象// let h1 = document.querySelector('h1');//获取第一个h1标签的DOM对象let hs = document.querySelectorAll('h1');//获取所有h1标签的DOM对象//2、修改DOM对象的属性hs[0].innerHTML = '修改后的文本内容';//修改第一个h1标签的文本内容h1.innerHTML = '修改后的文本内容';</script>
</body>
</html>

七、事件监听

事件监听就是发生在HTML上对应的事情会有反应。例如按钮被点击跳转下一个界面，或者是鼠标移动到元素上进行提醒等。

JavaScript可以在事件触发时，立即调用一个函数做出响应，称为事件绑定

语法：

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

示例（含有早期写法，但一个按钮只能绑定一个事件，不推荐）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS事件</title>
</head>
<body><input type="button" id="btn1" value="点我一下试试1"><input type="button" id="btn2" value="点我一下试试2"><script>//事件源.addEventListener(事件名,事件处理函数)//事件监听 -addEventListener（可以多次绑定同一事件）document.querySelector('#btn1').addEventListener('click',()=>{console.log('点击了1')});document.querySelector('#btn1').addEventListener('click',()=>{console.log('点击了1 22')});//事件监听 -早期写法（如果绑定同一事件，则后面的会覆盖前面的）document.querySelector('#btn2').onclick=()=>{console.log('点击了2');}</script>
</body>
</html>

常见事件

click：鼠标点击

mouseenter: 鼠标移入

mouseleave: 鼠标移出

keydown: 某个键盘的键被按下

keyup: 某个键盘的键被抬起

blur: 失去焦点事件

focus: 元素获得焦点

input: 用户输入时触发

submit: 提交表单事件

示例

<!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>JS-事件-常见事件</title>
</head><body><form action="" style="text-align: center;"><input type="text" name="username" id="username"><input type="text" name="age" id="age"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="单击事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" id="last"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table><script>//click: 鼠标点击事件document.querySelector('#b2').addEventListener('click', () => {console.log("我被点击了...");})//mouseenter: 鼠标移入document.querySelector('#last').addEventListener('mouseenter', () => {console.log("鼠标移入了...");})//mouseleave: 鼠标移出document.querySelector('#last').addEventListener('mouseleave', () => {console.log("鼠标移出了...");})//keydown: 某个键盘的键被按下document.querySelector('#username').addEventListener('keydown', () => {console.log("键盘被按下了...");})//keyup: 某个键盘的键被抬起document.querySelector('#username').addEventListener('keyup', () => {console.log("键盘被抬起了...");})//blur: 失去焦点事件document.querySelector('#age').addEventListener('blur', () => {console.log("失去焦点...");})//focus: 元素获得焦点document.querySelector('#age').addEventListener('focus', () => {console.log("获得焦点...");})//input: 用户输入时触发document.querySelector('#age').addEventListener('input', () => {console.log("用户输入时触发...");})//submit: 提交表单事件document.querySelector('form').addEventListener('submit', () => {alert("表单被提交了...");})</script>
</body></html>