Web前端~~~~javaScrip（1）

最新推荐文章于 2022-12-22 17:11:25 发布

诗与远方_阿范

最新推荐文章于 2022-12-22 17:11:25 发布

阅读量105

点赞数

分类专栏： web前端文章标签： js

本文链接：https://blog.csdn.net/weixin_46098676/article/details/118990488

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、JavaScript概述

javascript: JavaScript一种直译式脚本语言，脚本语言通过源码直接解释执行。

JavaScript的组成：（1）ECMAScript : 核心部分 ,定义js的语法规范（2）DOM: document Object Model 文档对象模型 , 主要是用来管理页面的（3）BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JavaScript的数据类型：（1）基本类型（2）引用类型

基本类型：（1）string（2）number（3）Boolean（4）undefine（5）null

引用类型：对象、内置对象

JavaScript的运算符和语法：

语法、运算符和java基本上一样，但是运算符中有个特殊情况

“===”全等号：值和类型必须一致

“==”值相等即可

举例说明（将alert里面的==换成===就变成false）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var num=111;
			var str="111";
			alert(num==str);
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript的输出：

alert（）直接弹框（上面已经举例说明）

document.write（）向页面输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			document.write("啦啦德玛西亚之力");
		</script>
	</head>
	<body>
	</body>
</html>

console.log（）向控制台输出 (与==和===一样的例子)

innerHTML:向页面输出

document.getElementById("id的名称") 获取页面元素

没点按钮之前

点击按钮之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function dianwo(){
				//alert("我被点击了");
				//1.首先要获得这个div
				var div = document.getElementById("div1")
				div.innerHTML = "<font color='red'>内容被替换掉了</font>";
			}
		</script>
	</head>
	<body>
		<input type="button" value="点我,修改DIV中的内容" onclick="dianwo()" />
		
		<div id="div1">
			这里的内容一会要被替换掉	
		</div>
	</body>
</html>

JS声明变量:

var 变量的名称 = 变量的值

JS声明函数:

var 函数的名称 = function(){

}

function 函数的名称(){

}

案例1（js数据校验）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js数据校验</title>
		<script>
			function checkForm(){
				var input1 = document.getElementById("username");
				var input2 = document.getElementById("email");
				var uvalue =input1.value
				var evalue =input2.value
                //用户名的长度要大于6
				if(uvalue.length>=6){
				
				}else{
					alert("对不起,用户名太短啦!")
					return false;
				}
				if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(evalue)){
					
				   }else{
					alert("你输入的邮箱有问题")
					return false
				}
			}
		</script>
	</head>
	<body>
		<form action="../网站首页优化/网站首页优化.html" onsubmit="return checkForm()">
			 用户名：<input type="text" id="username" placeholder="请输入用户名" /></br>
			 密   码：<input type="password" id="password" placeholder="请输入密码"/></br>
			 邮   箱：<input type="text" id="email" placeholder="请输入邮箱" /></br>
			 <input type="submit" value="提交" />
		</form>
	</body>
</html>