欢迎浏览『JavaWeb前端』专栏的其他文章:
一、HTML-精炼-易懂
四、JavaScript
浏览器脚本语言
作用:可以根据特殊情况,动态改变一些标签的内容、样式、增加标签、修改标签、删除标签等操作,等同于用脚本修改html和css
包含:变量、函数、对象等
写在head标签或body标签中的script标签里
1 - JS介绍
1 - 1 基本元素
-
JS内置函数
alert(内容)
:页面弹窗console.log(内容)
:控制台输出,相当于System.out.println()
typeof 变量
:返回变量的类型在哪查看?
页面刷新以后,右键检查->在Console栏查看
-
JS中定义变量的方式
JS为弱类型的语言,故定义变量是不必明确定义的是什么类型的变量,赋值时赋的是什么类型的值,该变量就是什么类型的变量
let
定义临时变量const
定义常量慢,相当于static finalvar
已经废弃,不再使用
注意:JS中每一句话结尾的分号可写可不写,最新语法规范,不写
-
JS中变量的类型
-
number(整数、小数)
-
string(字符串,用单引号或双引号包裹,最新语法规范,用单引号)
-
boolean (true/false)
-
object(对象类型)
-
数组
用
[]
包裹(object a = [1,4,7,9]
) -
json
重点,未来经常用到,现如今已经成为NoSql的同一标准
用
{属性名:属性值,属性名:属性值}
,(object stu = {id:1,name:张三,age:13}
)取值方式:
变量名.属性名
或变量名['属性名']
注意:属性名只允许是字符串,即使不写单引号,也默认为字符串
-
null
object a = null
-
-
function(函数类型)
函数类型是一个特殊的类型,变量一旦定义成函数类型,就可以调用,调用方法与java中的函数调用方法一致,传参即可(没有参数时,小括号也必须写)
返回值:如果有return,表示有返回值,没有则表示没有返回值
-
定义类型:
const fun = function(形参类表){代码块}
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
除进入该元素外,包含从进入子元素、以及离开子元素(进入了父元素)
-
-
定时器
通常用于轮播图的自动切图
setInterval(function(){},毫秒值)
<!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>