JS初识

最新推荐文章于 2024-03-23 19:23:53 发布

&Zeng[0]

最新推荐文章于 2024-03-23 19:23:53 发布

阅读量114

点赞数

文章标签： JS JAVASCRIPT

本文链接：https://blog.csdn.net/qq_43669381/article/details/100070082

版权

JS初识

什么是JavaScript

运行在浏览器端的脚本语言。

JS的组成

ECMAScript：语法，语句。
BOM:浏览器对象。
DOM:Document Object Model.操作文档中的元素和内容。

在哪些地方使用JS

JS增加用户和网站交互。

如何使用JS

语法：

区分大小写。
语法要求不是特别严格。
变量是弱变量类型。

例：

var i = 3;
var s = “aa”;

JS代码需要写在<script></script>

JS的数据类型

原始类型：

string
number
boolean
undefined
null

引用类型：

基于对象而不是面向对象。
内置对象。
对象类型的默认值是null。

JS的运算符和语句

运算符与Java中一致

全等于 === ：类型和值都一致返回true

语句与Java一致：

JS的输出

alert()：向页面中弹出一个提示框。
innerHTML:向页面的某个元素中写一段内容，将原有的东西覆盖。
document.write()：向页面中写内容。

步骤分析
4. JS都是由事件触发的，第一步确定事件：on…
5. JS的事件都会触发一个函数，编写一个函数。
6. JS获得操作的对象的元素：document.getElementById(“”)
7. JS修改这个元素的属性或值。

代码实现

		<script>
			// 第一步确定事件：onsubmit
			// 第二步编写触发函数：
			function checkForm(){
				// 第三步：通过ID获得元素
				varuValue= document.getElementById("username").value;
				// alert(uValue);
				if(uValue== ""){
					alert("用户名不能为空！");
					return false;
				}
				
				// 校验密码
				varpValue= document.getElementById("password").value;
				if(pValue== ""){
					alert("密码不能为空！");
					return false;
				}else{
					varreg =/^[0-9]{6}$/;
					if(reg.test(pValue) == false){
	alert(密码只能是6位数字);
	return false;
}
				}
				
				// 校验确认密码
				varrpValue= document.getElementById("repassword").value;
				if(rpValue!= pValue){
					alert("两次密码输入不一致！");
					return false;
				}
				
				// 校验邮箱：使用正则表达式：
				vareValue= document.getElementById("email").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确！");
					return false;
				}
				window.locatiom.href=”test.html”;
			}
		</script>
		<body>
			<form action=”” onsubmit=”return false;”>
				<input type=”text” id=”username”>
				<input type=”password” id=”pwd”>
				<input type=”onsubmit” value=”登录”οnclick=”checkForm()”>
			</form>
		</body>

使用JS完成首页上轮播图片效果

需求分析

在网站的首页上图片的轮播，现在页面中图片是静止的。让图片隔5秒自动切换。

技术分析

修改图片的路径。
获得图片，修改图片的src的属性。
document.getElementById(“img1”).src=“2.jpg”;

JS中定时操作

查看BOM中的window对象：

setInterval() :隔多少毫秒之后，执行一段代码。重复执行。
setTimeout() :隔多少毫秒之后，执行一段代码。

清除定时：

clearInterval() :清除setInterval的定时操作。
clearTimeout() : 清除setTimeout的定时操作。

示例代码：

			function init(){
				// window.setTimeout("alert('aaa')",5000);
				window.setInterval("alert('bbb')",5000);
			}

步骤分析

步骤一：使用页面加载的事件触发一个函数。
步骤二：在函数中设置定时：setInterval设置定时，5秒之后（切换图片-定义一个函数）。
步骤三：编写切换图片的函数。
步骤四：在函数中获得图片的元素。
步骤五：修改图片的src的属性。

代码实现

<script>
			function init(){
				// 设置定时
				setInterval("changeImg()",5000);
			}
			
			// 定义一个全局变量
			var i= 1;
			
			function changeImg(){
				// 获得图片的元素：
				var img1 = document.getElementById("img1");
				
				if(i== 3){
					i=1;
				}else{
					i++;
				}
				
				// 修改图片的src的属性
				img1.src = "../img/"+i+".jpg";
			}
		</script>