关于JavaScript一些要点和bug_怎么写js bug-优快云博客

本文链接：https://blog.youkuaiyun.com/aaaaluo/article/details/96339720

本文介绍了JavaScript的基本概念，包括其运行机制、变量提升、函数作用域、DOM元素获取与操作方法、事件绑定方式及其注意事项等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript

javascipt是运行在浏览器端的脚本语言,是由浏览器解释执行的

JavaScript的解析过程

JavaScript解析过程分为两步:先编译在执行.
编译的时候会把JavaScript的代码先读一遍,然后把由var定义的变量的声明提前并且赋值为undefined,还会把function定义的函数提前.

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

获取元素的方法

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

获取元素有个注意的地方

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

得加这个onload事件,表示页面读取完才触发,这句话能保证里面id(‘div1’),这里不要错,如果没有这句话,就找不到这个div1这个id

通过获取的元素访问元素的属性

通过对象.属性名来访问

例如:

oDiv.style.color = “red”;

通过中括号的形式来访问
例如:

oA.style[sVal1] = sVal2; 用这种方法访问是因为标签的属性没有sVar1这个属性,这是一个变量

这里需要注意一点,访问class属性的时候
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

事件属性

什么是事件属性?
事件属性是指用户在操作html元素的时候触发的事件
常用的事件有几类：

窗口事件，如onload（当页面被载入时执行），onunload;
表单元素事件，如onchange, onsubmit,onreset,onselect,onblur,onfocus;
键盘事件，如onkeydown,onkeypress,onkeyup;
鼠标事件，如onclick, ondbclick,onmousedown, onmouseup,onmouseover,onmouseout,onmousemove;

为事件属性赋值函数

在这里插入图片描述
这里不能加括号.
原因在于,fnChange()是调用函数,这里是把函数名赋值给这个事件属性,但是如果在html标签里面事件属性得是这样

<button id="btn" onclick="fnChange()">按钮</button>

这里需要加括号是因为,属性值用双引号包裹着,意思是事件触发的时候,执行引号里面的代码,所以要➕括号,表示调用函数

提取行间事件

本质是访问元素,通过元素访问属性,从而修改属性值

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

条件语句

if else语句实现按钮翻页


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oBtn = document.getElementById('btn01');
			var oDiv = document.getElementById('box01');


			// oDiv.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空

			oBtn.onclick = function(){

				if(oDiv.style.display=='block'||oDiv.style.display=='')
				{
					oDiv.style.display = 'none';
				}
				else
				{
					oDiv.style.display = 'block';
				}				
			}
		}
	</script>
	<style type="text/css">		
		.box{
			width:200px;
			height:400px;
			background-color:gold;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="切换" id="btn01">
	<div class="box" id="box01"></div>
</body>
</html>

这里有个主意的点

oDiv.style.display==‘block’||oDiv.style.display==’’";

加上这句话主要是因为,访问display属性的时候,由于元素标签内没有设置display这个属性,即为空,如果不加,而第一判断的时候第一个条件不满足,执行else语句,所以我们看的时候第一次点的时候,依然还是块,第二点就正常显示了

多重判断语句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

等价于

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

而且switch的执行效率要比if elif else语句的效率高