Web知识整理05

最新推荐文章于 2024-09-17 11:42:54 发布

lao_kai_ybqy

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量126

点赞数 1

分类专栏：网页设计文章标签： js javascript css html

本文链接：https://blog.csdn.net/weixin_47701814/article/details/108683128

版权

网页设计专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JS基本使用

JavaScript是一种直译式脚本语言脚本语言可以直接通过源码解释执行
而Java需要由Java源代码编译成.class文件然后再java虚拟机中才能执行
JS由浏览器来解释执行

JS语法

变量弱类型var 可以定义为容易类型
区分大小写,语句结束之后的分号,可以有,也可以没有
JS数据类型:
     基本类型:string number boolean undefine null
     引用类型:对象,内置对象
JS函数声明:
      var 函数名 =function(){

}
function(){

}

JS输出

alert()弹框输出内容
document.write()向页面输出
innerHTML:向页面输出
代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function dian(){
				alert("点我干什么");
			}
		</script>
	</head>
	<body>
		<input  type="button" value="点我点我" align="center" onclick="dian()" />
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function dian(){
				var div=document.getElementById("div1")//获得需要被替换的变量
				div.innerHTML="<font size='4' color='aqua'>我被换了哈哈哈</font>"
			}
		</script>
	</head>
	<body>
		<input  type="button" value="点我点我" align="center" onclick="dian()" />
		<div id="div1">
			这里会有神奇的变化
		</div>
	</body>
</html>

在这里插入图片描述

JS校验案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function check(){
				var input1=document.getElementById("username");
				var name =input1.value;
				if(name.length >=6){
					
				}
				else{
					alert("对不起,用户名过短");
					return false;
				}
				var email=document.getElementById("email")
				var em =email.value;
				if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(em))//这是验证邮箱的正则表达式
				{
					alert("校验成功");
					return ture;
				}
				else{
					alert("校验失败");
				}
				return false;
			}
		</script>
	</head>
	<body>
		<form action="new_file.html" onsubmit="return check()">
		用户名:<input type="text" id="username" /><br />
		邮箱:<input type="text" id="email" /><br />
		<input type="submit" value="提交"  />
		
		</form>
	</body>
</html>