js入门学习（打卡04）

最新推荐文章于 2023-12-27 22:51:03 发布

高鸡丝

最新推荐文章于 2023-12-27 22:51:03 发布

阅读量174

点赞数

分类专栏：前端开发文章标签： js入门学习（打卡04）

本文链接：https://blog.csdn.net/weixin_42363675/article/details/89139377

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js入门学习04

作者简介
本日学习内容
- 作用域
- 事件
注：

作者简介

大三在校生，代号“jsGo”。

本日学习内容

作用域

作用域指可访问变量的集合，可以定义为全局作用域和局部作用域。
1.局部变量
只能在函数内部使用，变量在函数内部声明。
2.全局变量
变量在函数外定义，即为全局变量，则在整个网页中的所有脚本和函数都能使用，若在函数内部定义变量不使用var关键字则定义的也是全局变量。
3.生命周期
变量的生命周期由声明时初始化。局部变量在调用函数调用完毕后销毁，全局变量在页面关闭后销毁。

事件

1.事件就是行为，在HTML页面中使用Javascript时，javascript能够触发这些行为。
2.点击文字触发事件的两种方法。

<script>
<h1 onclick="this .innerHTML='嘻嘻嘻'">点击文字</h1>
</script>
//或者调用函数触发事件
<head>
<script>
function changetxt(id){
id.innerHTML="嘻嘻嘻";
}
</script>
</head>
<h1 onclick="changetxt(this)">点击文字</h1>

3.点击按钮触发事件

<body>
<p>点击按钮就能够得到当前时间<em/></p>
<script>
function displayDate(){
doucment.getElementById("demo").innerHTML=Date();
}
</script>
<button onclick="dispayDate()">点击这里</h1>
<p id="demo"></p>
</body>
//也可以通过HTML DOM分配事件
<body>
<p>点击按钮就能够得到当前时间<em/></p>
<script>
doucment.getElementById("God").onclick=function(){displayDate()};
function displayDate(){
doucment.getElementById("demo").innerHTML=Date();
}
</script>
<button onclick="God">点击这里</h1>
<p id="demo"></p>
</body>

4.onload和onunload事件（用于处理cookie上）

<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("已启用 cookie")
	}
else
	{
	alert("未启用 cookie")
	}
}
</script>

提示框会提示是否启用cookie
5.onchange事件（常结合对输入字段的验证）

<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>

5.onmouseover和onmouseout事件

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:red;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

6.onmousedown、onmouseup 以及 onclick 事件

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:red
;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj){
obj.style.backgroundColor="#lec532";
obj.innerHTML="请释放鼠标";
}
function mUp(obj){
obj.style.backgroundColor="red";
obj.innerHTML="请按下鼠标";
}
</script>

注：

1.在HTML中全局变量都是window对象，所有的数据变量都为window对象。
2.let与var关键字的作用相同将变量限制在当前代码块。
3.const关键字通常用来修饰常量，且值设定后无法更改。
4.onmousedown和onmouseup按下鼠标可以更换图像。
5.onload可以在页面加载完成时出现提示框。
6.鼠标事件，当鼠标放在上面改变颜色，移出后会再次改变。

高鸡丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js入门学习（打卡04）

js入门学习04作者简介本日学习内容作用域注：作者简介大三在校生，代号“枫”。本日学习内容作用域作用域指可访问变量的集合，可以定义为全局作用域和局部作用域。1.局部变量只能在函数内部使用，变量在函数内部声明。2.全局变量变量在函数外定义，即为全局变量，则在整个网页中的所有脚本和函数都能使用，若在函数内部定义变量不使用var关键字则定义的也是全局变量。3.生命周期变量的生命周期...
复制链接

扫一扫