JavaScript学习

最新推荐文章于 2024-11-16 14:11:26 发布

奋斗在路上的码农

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量153

点赞数

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42199626/article/details/104461986

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个脚本语言。用来给HTML网页实现一些动态效果及标签对象的操作。
注意：js是基于对象操作，但是不面向对象。

官方介绍：

JavaScript组成
三部分组成：
ECMAScript | JS的基础语法规则
DOM（Document Object Model） | 文档对象模型
BOM（Browser Object Model ） | 浏览器对象模型

ECMA：声明当前JS的基本语法及简单的操作。
DOM：对当前标签（元素）进行操作（取值|赋值|属性操作|样式操作…）
BOM：针对浏览器及全局进行操作。

JavaScript使用方式|引入方式
两种引入方式
第一种：外链使用定义***.js 文件

第二种：内部使用直接写在当前网页中

ECMAScript基础语法
在JS中，声明变量
var 变量名 = 变量值；
在JS中所有的类型接收的时候都是var

在JS中声明方法
function xxx(){}

命名规则
1、不准使用关键字 JavaScript
2、不允许数字开头
3、名称可以使用字母、下划线、数字。中间不能有空格
4、严格区分大小写

ECMAScript 数据类型
undefined | 未定义当变量为初始化的时候返回未定义。是从null中派生出来的。如果使用 == 进行比较， undefined = null。
null | 空

Number类型：数字类型。 var i = 10;
Boolean 布尔类型： true | false 。 var f = true;
String 字符串类型。 var s = ”hello script”;
引用类型：var m = obj; obj是一个对象。

JS的运算符同java一样。

DOM案例：表单的数据验证
表单提交的过程中需要进行一次验证在进行提交，如果验证的过程中发现表单中的数据不符合规范，那么需要提醒一下。当表单完善之后在进行提交操作。

技术点
弹窗操作
alert(”弹窗显示的内容”);

手动绑定按钮事件

获取当前元素（标签）对象并且读取当前输入框中是否有值
var uname = document.getElementById(”ID”);

通过JS进行表单提交

重点注意： radio 和 checkbox这两个标签在获取值的时候，如果没有默认设置value值，返回on

代码示例

表单注册

	<script>
		
		//定义一个校验的方法
		function vlidate(){
			
			//标记
			var f = true;
			
			var name = document.getElementById("name").value;
			var username = document.getElementById("username").value;
			var pwd = document.getElementById("pwd").value;
			
			var sex = document.getElementsByName("sex");
			//循环sex
			for(var i = 0 ; i < sex.length ; i ++){
				alert(sex[i].value);
			}
			
			if(name == null || name == ""){
				alert("姓名不能为空");
				f = false;
			}
			if(username == null  || username == ""){
				alert("用户名不能为空");
				f = false;
			}
			if(pwd == null  || pwd == ""){
				alert("密码不能为空");
				f = false;
			}
			
			//提交表单
			if(f == true){
				document.getElementById("dbf4").submit();
			}
		}
		
	</script>
	
</head>
<body>
	<center>
		<form id="dbf4" action="index.html" method="get">
			
			<table border="0px" cellpadding="8px" width="700px" cellspacing="0px" bgcolor="lightyellow">
				<tr>
					<td width="30%" align="right">名称：</td>
					<td><input type="text" id="name" name="name" /></td>
				</tr>
				<tr>
					<td width="30%" align="right">账号：</td>
					<td><input type="text" id="username" name="username" /></td>
				</tr>
				<tr>
					<td width="30%" align="right">密码：</td>
					<td><input type="password" id="pwd" name="pwd" /></td>
				</tr>
				<tr>
					<td width="30%" align="right">性别：</td>
					<td>
						男<input disabled="disabled" type="radio" name="sex" value="男" />
			 			女<input type="radio" checked="checked" name="sex" value="女" />
					</td>
				</tr>
			</table>
		</form>
	</center>
</body>

运行效果

JS中错误调试
F12

BOM案例：图片轮播特效

思路：先设定一个固定的img、然后在通过脚本动态操作src属性。

知识点
通过JS动态操作SRC属性

自动加载执行图像切换操作

周期定时器

window.setInterval(show, 1000*3);

这个定期器是周期性执行，有两个基本的参数，第一个参数是执行的方法、第二个是执行间隔。
方法调用有两种书写方式
window.setInterval(show, 10003);
window.setInterval(”show()”, 10003);

时间单位为:毫秒

案例代码

案例效果

案例：广告弹窗效果

知识点
调整图片位置

如果设置里绝对定位，图片的位置使用 top | left | right | bottom 直接控制即可。

定时器（只执行一次）
window.setTimeout(参数1,参数2);
参数1：设置调用的方法。
参数2：设置时间

使用JS操作CSS样式

示例代码

案例效果

案例：完善表单校验

技术点
给非输入标签填充内容的时候使用
innerText 以纯文本的形式输出

innerHTML 以HTML格式进行输出

代码示例

表单注册

	<style>
		span{
			font-family: "微软雅黑";
			font-size: 12px;
			color: red;
		}
		
	</style>
	
	<script>
		
		//定义一个校验的方法
		function vlidate(){
			
			//清空提示
			document.getElementById("name_span").innerText="*";
			document.getElementById("username_span").innerText = "*";
			document.getElementById("pwd_span").innerText = "*";
			
			//标记
			var f = true;
			
			var name = document.getElementById("name").value;
			var username = document.getElementById("username").value;
			var pwd = document.getElementById("pwd").value;
			
			//*进行验证
			if(name == null || name == ""){
				document.getElementById("name_span").innerHTML = "<a href='案例：图片轮播.html'>名称不能为空！</a>";
				f = false;
			}else{
				var reg = /^[a-zA-Z]{6,12}$/;
				if(reg.test(name)== false){
					document.getElementById("name_span").innerText = "请输入6~12位字母！";
					f = false;
				}
			}
			if(username == null || username == ""){
				document.getElementById("username_span").innerText = "账号不能为空！";
				f = false;
			}else{
				var reg = /^[a-zA-Z0-9@]{6,12}$/;
				if(reg.test(username)== false){
					document.getElementById("username_span").innerText = "请输入6~12位字母、数字的账号！";
					f = false;
				}
			}
			if(pwd == null || pwd == ""){
				document.getElementById("pwd_span").innerText = "密码不能为空！";
				f = false;
			}else{
				var reg = /^[a-zA-Z0-9@]{6,12}$/;
				if(reg.test(pwd)== false){
					document.getElementById("pwd_span").innerText = "请输入6~12位字母、数字的密码！";
					f = false;
				}
			}
			
			//提交表单
			if(f == true){
				document.getElementById("dbf4").submit();
			}
		}
		
	</script>
	
</head>
<body>
	<center>
		<form id="dbf4" action="index.html" method="get">
			
			<table border="0px" cellpadding="8px" width="700px" cellspacing="0px" bgcolor="lightyellow">
				<tr>
					<td width="30%" align="right">名称：</td>
					<td><input type="text" id="name" name="name" /> <span id="name_span">*</span>  </td>
				</tr>
				<tr>
					<td width="30%" align="right">账号：</td>
					<td><input type="text" id="username" name="username" /> <span id="username_span">*</span></td>
				</tr>
				<tr>
					<td width="30%" align="right">密码：</td>
					<td><input type="password" id="pwd" name="pwd" /> <span id="pwd_span">*</span></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="注册" onclick="vlidate()"  />&nbsp;&nbsp;&nbsp;
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</center>
</body>

案例效果