HTTP3版本和实现验证-CFANZ编程社区

javascript函数

在JavaScript基础之上提供了部分函数,同时也可以自定义函数,JavaScript基础详见之前的文章javascript基础知识

自定义函数

//关键字 函数名 参数列表  函数体
function test(a,b,c){
  alert(a+":"+b+":"+c)
}

function test1(a,b){
  return a;//不需要定义返回值类型，因为无论返回什么都能存储在var定义的变量中
}

调用函数

function test(a,b,c);
test(10,"abc",new Date());

系统中的全局函数

alert();

弹窗显示括号内的内容

parseInt();

把括号内的内容转换为整数的值.如果括号内是字符串,则字符串开头的数字部分转换为整数,如果以字母开头,则返回NaN

var a = 10.5;
alert(parseInt(a));//输出为10,将10.5转换为整数类型
var b = "10abc";
alert(parseInt(b));//输出为10
var c = "a10";
alert(parseInt(c));//输出NaN,字母不能作为开头进行转换

parseFloat();

把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回NaN,与parseInt用法类似

typeof();

返回括号内值的数据类型,

var a = 10;
var b = "abc";
typeof(a);//number
typeof(b);//string

eval();

var a = 10;
var s  = "2+3*2";
alert(eval(s));//把传入进来的字符串可以当做js脚本执行 输出值为8
var t = "alert(a)";
eval(t);把传入的t作为js脚本执行,所以执行alert(a),弹窗输出10;

事件

常用事件

onclick();鼠标单次点击事件(左键)

<script>
  function test(){
    console.log("事件被触发了");
  }
</script>
<!--左键点击按钮一次触发事件-->
<input type = "button" value="单击事件" onclick = "test()">
<div onclick="test()"></div>

onblur()标签失去焦点

<input type="text" onblur="alert('请输入')"/>

onfocus()标签获得焦点

<input type="text" onfocus="alert('聚焦后弹出内容')"/>

onmouseover()鼠标移动到某标签上

onmouseout()鼠标从某标签上移开

onload()网页加载完毕后触发相应的事件处理程序

onchange()指当前标签失去焦点并标签内容发生改变时触发事件处理程序

Html DOM

查找元素

要想通过JavaScript操作Html标签就必须先找到该标签

有四种方法可以找到Html标签

通过id查找Html标签

document.getElementById(“id");

通过标签名查找Html标签

document.getElementsByTagName("p");

通过类名查找Html标签

document.getElementsByClassName("p");

通过name查找Html标签

document.getElementsByName(“name");

标签体属性操作


可以通过html事件触发JavaScript函数
需要在JavaScript函数对网页的标签进行操作

如何在JavaScript中操作网页标签
JavaScript认为网页中的每个标签都是一个对象
在js中把这一类标签对象称为html_dom对象(指的就是网页中的标签)

如何在JavaScript中获得网页中标签对象?
在网页加载完毕后,在js中生成一个document对象(表示整个html文档)
里面提供了一个方法getElementById();来获得网页中的标签对象


function test(){
				var obj1 = document.getElementById("txt1")
				var obj2 = document.getElementById("txt2")
				
				//操作标签对象的属性
				obj2.value = obj1.value;
				obj1.value = "";
				obj1.type = "radio";
			}


function test(){
				var obj1 = document.getElementById("txt1")
				var obj2 = document.getElementById("txt2")
				
				//操作标签对象的属性
				obj2.value = obj1.value;
				obj1.value = "";
				obj1.type = "radio";
			}

在这里插入图片描述

左边是txt1,右边是txt2,左边输入内容后点测试,左边的值赋值给右边的框,然后将坐标的框的格式设置为radio

在这里插入图片描述

标签体内容操作

<div id = "box1">html dom对象</div>
		<div id = "box2"></div>
		<div id = "box3">
			<b> dom对象</b>
		</div>
		<input type="button" onclick="test()" value="测试"/>
		
		
		function test(){
				var divobj1 = document.getElementById("box1")
				var divobj2 = document.getElementById("box2")
				var divobj3 = document.getElementById("box3")
				//操作标签体中的内容
				divobj2.innerText = divobj1.innerText;//innerText获得标签体内的文本内容
				divobj1.innerHTML = divobj3.innerHTML;//innerHtml可以获得标签内的所有内容(包括标签和文本)
			}

标签体CSS操作

<body>
		<div id = "box1" style="background-color: aqua;"></div>
		<input type="button" onclick="test()" value="测试"/>
	</body>
		
		<script>
			function tesst(){
				var divobj1 = document.getElementById("box1");
				//通过dom对象操作标签的css属性
				divobj1.style.backgroundColor = 'green';
				divobj1.style.width = '200px';
				divobj1.style.height = '200px';
			}
		</script>

计时

通过JavaScript可以做到在一个设定的时间间隔之后执行代码,而不是在函数被调用后立即执行.称之为计时事件

setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()