『JavaWeb前端』四、JavaScript

2021/7/2 22:22:57

编程Tag： javascript 前端事件 function Dom console 鼠标 javaweb document

本文主要是介绍『JavaWeb前端』四、JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

四、JavaScript
- 1 - JS介绍
- - 1 - 1 基本元素
  - 1 - 2 DOM
- 2 - DOM事件(鼠标)
- 3 - 引入外部js文件

四、JavaScript

浏览器脚本语言

作用：可以根据特殊情况，动态改变一些标签的内容、样式、增加标签、修改标签、删除标签等操作，等同于用脚本修改html和css

包含：变量、函数、对象等

写在head标签或body标签中的script标签里

1 - JS介绍

1 - 1 基本元素

JS内置函数

alert(内容)：页面弹窗

console.log(内容)：控制台输出，相当于System.out.println()

typeof 变量：返回变量的类型

在哪查看？

页面刷新以后，右键检查->在Console栏查看
JS中定义变量的方式

JS为弱类型的语言，故定义变量是不必明确定义的是什么类型的变量，赋值时赋的是什么类型的值，该变量就是什么类型的变量
1. let定义临时变量
2. const定义常量慢，相当于static final
3. var已经废弃，不再使用
注意：JS中每一句话结尾的分号可写可不写，最新语法规范，不写
JS中变量的类型
1. number（整数、小数）
2. string（字符串，用单引号或双引号包裹，最新语法规范，用单引号）
3. boolean （true/false）
4. object（对象类型）
  - 数组
    
    用[]包裹（object a = [1,4,7,9] ）
  - json
    
    重点，未来经常用到，现如今已经成为NoSql的同一标准
    
    用{属性名:属性值,属性名:属性值},(object stu = {id:1,name:张三,age:13})
    
    取值方式：变量名.属性名或变量名['属性名']
    
    注意：属性名只允许是字符串，即使不写单引号，也默认为字符串
  - null
    
    object a = null
5. function（函数类型）
  
  函数类型是一个特殊的类型，变量一旦定义成函数类型，就可以调用，调用方法与java中的函数调用方法一致，传参即可（没有参数时，小括号也必须写）
  
  返回值：如果有return，表示有返回值，没有则表示没有返回值
  - 定义类型：
    1. const fun = function(形参类表){代码块}
    2. function fun(){代码块}
    建议使用第二种，其可以写在任意位置，而第一种必须写在调用前（先定义，后使用）
```
// 方法一
const fun = function(a,b){
	return a+b
}
let a1 = fun(10,20)
console.log(a1)
// 方法二
function fun1(a,b){
	return a+b
}
let a2 = fun(20,20)
console.log(a2)
```
运算符

数学运算符

关系运算符

判断是否相等，用===，而不是==

判断不等，用!==，而不是!=

逻辑运算符

位运算符

除了关系运算符外，其他与java中一样
条件判断

if else与java中一样
循环

for、while、do…while 与java中一样

1 - 2 DOM

document object model 页面对象模型

JS中的非常重要的一个部分

在JS中页面对象为html中书写的标签，每写一个标签，就对应着有一个dom对象，dom元素是从页面中映射html标签产生的，（标签元素是html中的称呼，在JS中称为dom元素）

dom中有一个最大的对象，即所有dom的根对象：document对象

如何获取一个具体的dom对象？

依靠document对象来获取`document.querySelector(‘选择器’)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="warp"><span>id的选择器</span></div>
		<script>
			/*dom相关*/
            
			console.log(document)
			// 获取具体d对象
			const d = document.querySelector('#warp')
			console.log(d)
			// 获取到的是此标签下的对象信息，可以使用.(点)来获取
			console.dir(d)
			console.log(d.innerHTML)
			console.log(d.innerText)
			// 同时也可以对标签进行修改,修改dom以后，html页面也会跟着修改
			d.innerHTML = '<i>id是warp</i>'
			// 也可以对样式进行修改
			d.style.background = '#ff0000'
			d.style.width = '300px'
			d.style.height = '200px'
		
		</script>
	</body>
</html>

2 - DOM事件(鼠标)

事件是触发函数的一种机制，定义了很多函数，用户可以通过对页面的某些操作来触发函数

onclick

点击事件，鼠标点击并释放后触发
onmousedown

鼠标按下事件,鼠标按下之后触发

点击事件与按下事件的区别？

点击事件：只能是鼠标左键，且是按下并释放，才触发

按下事件：可以是左键也可以是右键，且只要按下就触发
onmouseup

鼠标抬起事件，任意键

点击事件与抬起事件的区别？

点击事件：只能是左键在相应元素上按下并释放

抬起事件：可以是任意键在任意位置按下但必须在相应位置抬起
onmousemove

鼠标移动事件
鼠标离开事件
- onmouseleave
  
  从本元素离开触发，不包含从子元素离开（即不包含从子元素离开不触发）
- onmouseout
  
  除进入该元素外，包含从子元素离开、以及进入子元素(离开了父元素)
鼠标移入事件
- onmouseenter
  
  进入本元素触发，与子元素无关
- onmouseover
  
  除进入该元素外，包含从进入子元素、以及离开子元素(进入了父元素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#warp>div{
				width: 400px;
				height: 100px;
			}
			#warp>div>p{
				width: 200px;
				height: 50px;
				color: #FF0000;
				background: #000000;
			}
			#warp>.onclick {
				background: #55ff7f;
			}
			#warp>.ondown {
				background: #5500ff;
			}
			#warp>.onup {
				background: #aa0000;
			}
			#warp>.onmove {
				background: #55ffff;
			}
			#warp>.onleave {
				background: #005500;
			}
			#warp>.onover {
				background: #54554c;
			}
			
		</style>
	</head>
	<body>
		<div id="warp">
			<div class="onclick">点击事件</div>
			<div class="ondown">按下事件</div>
			<div class="onup">抬起事件</div>
			<div class="onmove">鼠标移动事件</div>
			<div class="onleave"><p>鼠标离开事件</p></div>
			<div class="onover"><p>鼠标移入事件</p></div>
		</div>
		<script>
			// script修改css样式
			// const dom = document.querySelector('#warp')
			// dom.style.width = '400px'
			// dom.style.height = '100px'
			// dom.style.background = '#000000'

			
			// 获取dom对象
			const domclick = document.querySelector('.onclick')
			const domdowm = document.querySelector('.ondown')
			const domup = document.querySelector('.onup')
			const dommove = document.querySelector('.onmove')
			const domleave = document.querySelector('.onleave')
			const domover = document.querySelector('.onover')
			
			// 点击事件
			domclick.onclick = function(){
				alert('点击事件')
			}
			// 按下事件
			domdowm.onmousedown = function(){
				alert('按下事件')
			}
			// 抬起事件
			domup.onmouseup = function(){
				alert('抬起事件')
			}
			// 鼠标移动事件
			dommove.onmousemove = function(){
				console.log('鼠标移动')
			}
			// 鼠标移出事件
			domleave.onmouseleave = function(){
				console.log('鼠标离开事件onmouseleave')
			}
			// domleave.onmouseout = function(){
			// 	console.log('鼠标离开事件onmouseout')
			// }
			
			// 鼠标移入事件
			domover.onmouseover = function(){
				console.log('鼠标移入事件onmouseover')
			}
			// domover.onmouseenter = function(){
			// 	console.log('鼠标移入事件onmouseenter')
			// }

		</script>
	</body>
</html>

3 - 引入外部js文件

外部引入的建议写在<head>标签中，自己写的js代码写在<body>中

可以引入多个JS文件

<script src="js路径"></script>

这篇关于『JavaWeb前端』四、JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！