javascript —— js

最新推荐文章于 2024-08-26 10:07:06 发布
最新推荐文章于 2024-08-26 10:07:06 发布
阅读量165 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41700466/article/details/83384797
版权

javascript —— js

案例1-校验表单

需求:

  • 表单提交的时候需要校验数据是否完整,若不满足条件,则使用弹出框提示.

    技术分析: js

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言

组成部分:

​ ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等…)
BOM:浏览器对象模型
DOM:文档对象模型

作用:

​ 修改html页面的内容
修改html的样式
完成表单的验证

注意:

​ js可以在页面上直接写,也可以单独出去
js的文件的后缀名 .js

js和html整合

方式1:在页面上直接写
将js代码放在 标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入

html文件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			alert(12);
		</script>
		<script type="text/javascript" src="js/01.js"></script>
	</head>
	<body>
	</body>
</html>

js文件

alert(34);

js中变量声明:

​ var 变量名=初始化值;
var 变量名;
变量名=初始化值;

注意:

​ var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略

js的数据类型:

原始类型:(5种)

Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断 出属于那种原始类型
typeof 变量|值;

若变量为null,使用typeof弹出的值 object

使用typeof的返回值
undefined - 如果变量是 Undefined 类型的

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的

string - 如果变量是 String 类型的

object - 如果变量是一种引用类型或 Null 类型的

引用类型:

变量和数据类型代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//var age = 18;
			var age =true 
			alert(age);
			alert(typeof age);
			
			var abcde;
			alert(typeof abcdef);
			
			var username = null;
			alert(typeof username);
			
			var s = new String();
			alert(typeof s)
		</script>
	</head>
	<body>
	</body>
</html>

js:事件驱动函数

函数定义格式:
方式1:

​ function 函数名(参数){
函数体;
}
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候——函数名(参数)

方式2:

​ var 函数名=function(参数){
函数体;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function add(a,b){
				alert(a+b)
			}
			add(30,20)
		</script>
	</head>
	<body>
	</body>
</html>
js中的事件:
常见的事件:
*单击: onclick

​ *表单提交: onsubmit 加在form表单上的 οnsubmit=“return 函数名()” 注意函数返回值

​ 为boolean类型

*页面加载: onload
js事件和函数的绑定:
方式1:

​ 通过标签的事件属性

方式2:

​ 给元素派发事件

document.getElementById(“id值”).οnclick=function(参数){…}
document.getElementById(“id值”).οnclick=函数名
注意:
内存中应该存在该元素才可以派发事件

​ a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码 onload事件.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btnCli(){
				alert(44944);
				//document.getElementById("btn2").onclick=btn2cli;
			}
			function init(){
				alert("页面加载成功");
			}
			
			var btn2cli=function(){
				alert("233333");
			}
			
		</script>
	</head>
	<body onload="init()">
		<input type="button" value="点击我试试1"  onclick="btnCli()"/>
		<input type="button" value="点击试试2"  id="btn2"/>
		
	</body>
	<script>
		document.getElementById("btn2").onclick=btn2cli;
	</script>
</html>
js获取元素:
方式1:

​ ``var obj=documnet.getElementById(“id值”);`

获取元素的value值

​ ``obj.value;`

获取元素的标签体中的内容

​ ``obj.innerHTML;`

​

案例2-步骤分析:

1.先有一个表单
2.在form上添加一个事件 οnsubmit=“return checkForm()”
3.编写checkForm这个方法
4.获取每个表单子标签的内容
5.判断是否满足要求,
若满足,不用管他
若不满足,表单不能提交,返回false,且提示信息.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function checkForm(){
				//获取用户名及其内容
				var usernameObj = document.getElementById> > ("username");
				var username = usernameObj.value
				
				//判断value是否为空，若不为空不能提交表单
				if(username==null || username == ""){
					alert("用户名不能为空");
					return false;
				}
				
				//获取密码及其内容
				//1.获取密码元素
				var pwdObj=document.getElementById("password");
				//2.获取密码的值
				var pwdValue=pwdObj.value;
				//3判断
				if (pwdValue==null || pwdValue=="") {
					alert("密码不能为空");
					return false
				}
				return true;
			}
			
		</script>
	</head>
	<body>
		<form action="#" method="get" onsubmit="checkForm()">
			姓名：<input name="username" id="username"/><br>
			密码：<input type="password" name="password" id="password" /><br>
			
			<input type="submit" value="保存"/>
			<input type="reset" />		
		</form>
	</body>
</html>

案例3-轮播图片

需求:

​ 每隔3秒图片更新一下

技术分析:

​ bom中window对象的定时器方法

定时器:

​ var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var s="我们的明天更加美好!";
			var i=0;
			var divObj;
			
			function init(){
				divObj= document.getElementById("divId");
				setInterval(show,200);
			}
			
			//往div中写内容
			function show(){
				i++;
				var s_=s.substring(0,i);
				
				//往div中设置内容
				divObj.innerHTML=s_;
				
				//当字符串写完的时候 重新开始
				if(i==s.length){
					i=0;
				}
			}
			
		</script>
	</head>
	<body onload="init()">
		<div id="divId"> </div>
	</body>
</html>

清除定时器:

​ clearInterval(id);
claerTimeout(id);

String对象

​ 原始类型的String是一个为对象可以直接调用String类对象的方法
substring(0,endIndex);

步骤分析:

​ 1.在首页上面绑定一个onload事件
2.事件绑定的函数中编写一个定时器
3.定时器每隔3秒更换图片
imgObj.src=""；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
			}
			.cle{
				clear: both;
			}
			/*logo部分地div*/
			.header{
				width: 100%;
			}
			.header div{
				float: left;
				width: 33.33%;
				height: 60px;
				line-height: 50px;
			}
			.header a{
				padding: 15px;
			}
			/*菜单部分*/
			.menu{
				width: 100%;
				background-color: black;
				height: 50px;
				padding-top: 0.25px;
			}
			.menu ul li{
				list-style-type: none;
				display: inline;
				padding-right: 20px;
			}
			.menu a{
				font-size: 18px;
				color: white;
				
			}
			/*轮播图*/
			.lunbo{
				width: 100%;
			}
			.lunbo img{
				width: 100%;
			}
			/*热门商品*/
			/*.left,.right{
				float: left;
			}*/
			
			.left{
				float: left;
				width: 16%;
				height: 500px;
			}
			.right{
				float: left;
				width: 84%;
				text-align: center;
				height: 500px;
			}
			.middle{
				float: left;
				width: 50%;
				height: 250px;
			}
			.item{
				float: left;
				width: 16.66%;
				height: 250px;
			}
			/*广告*/
			.ad1 img{
				width: 100%;
			}
			.ad2 img{
				width: 100%;
			}
			/*版权foot*/
			.foot{
				
				width: 100%;
			}
			.foot p{
				text-align: center;
			}
		</style>
	</head>
	<!--页面加载成功后轮播图片-->
	<body onload="init()">
		<!--
			一个大div中放置8个div
		-->
		<div>
			
			<!--logo
				嵌套三个div
			-->
			<div class="header">
				<div>
					<img src="../img/img/商城.jpg"/>
					
				</div>
				<div>
					<img src="../img/img/header.jpg" />
				</div>
				<div >
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<div class="cle"></div>
			
				
			<!--菜单-->
			<div class="menu">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">电脑办公</a></li>
					<li><a href="#">其他商品</a></li>
					
				</ul>
			</div>
			
			
			<!--轮播图-->
			<div class="lunbo">
				<img id="lunbo" src="../img/img/1.jpg" width="100%">
			</div>
			
			<!--热门商品-->
			<div class="hot">
				<!--存放热门商品和一张图片-->
				<div>
					<h2 style="display: inline;">热门商品</h2>
					<img src="../img/img/title2.jpg" />
				</div>
				<div>
					<!--存放左边的图片-->
					<div class="left">
						<img src="../img/img/big01.jpg"/>
					</div>
					<!--存放右边的图商品-->
					<div class="right">
						<div class="middle">
							<img src="../img/img/middle01.jpg"/>
							
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div><div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div><div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
					</div>
				</div>
				<div class="cle"></div>
			</div>
			
			<!--广告-->
			<div class="ad1">
				<img src="../img/img/ad.jpg" />
			</div>
			
			<!--最新商品-->
			<div>
				<div>
					<h2 style="display: inline;">热门商品</h2>
					<img src="../img/img/title2.jpg" />
				</div>
				<div>
					<!--存放左边的图片-->
					<div class="left">
						<img src="../img/img/big01.jpg"/>
					</div>
					<!--存放右边的图商品-->
					<div class="right">
						<div class="middle">
							<img src="../img/img/middle01.jpg"/>
							
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
						<div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div><div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div><div class="item">
							<img src="../img/img/small08.jpg"/>
							<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
							<p align="center"><font color="red">200￥</font> </p>
						</div>
					</div>
				</div>
				<div class="cle"></div>
			</div>
			<!--广告-->
			<div class="ad2">
				<img src="../img/img/footer.jpg" />
			</div>
			
			<!--版权foot-->
			<div class="foot">
				<p>
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
				</p>
				<p align="center">
					Copyright &copy 2017-2018 幸运商城 版权所有
				</p>
			</div>
			
	
			
		</div>
	
	</body>
	
	<script type="text/javascript">
		var i=1;
		function init(){
			//创建一个定时器
			setInterval(changeImage,2000);
			
		}
		//更改图片
		//<img id="lunbo" src="../img/img/1.jpg" width="100%">
		function changeImage(){
			//获取图片
			var imgObj=document.getElementById("lunbo")
			i++;
			//修改图片元素的src属性
			imgObj.src="../img/img/"+i+".jpg"
			//当i大于3时候重置一下
			if(i>=3){
				i=0;
			}
		}
	</script>
	
</html>

补充:

运算符:
比较运算符: > >= < <=

​ 若两边都是数字 和java一样
若一边为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>“2”
若一边为数字,另一边为字符串,返回一个false 3>“hello”
两边都是字符串的时候,比较ascii

等性运算符: ==和 ===

​ == :只判断值是否相同
===:不仅判断是否相同,还要判断类型是否相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var a=66;
		var b="66"
		var c="88"
		var d="拜拜"
		
		alert(a==b);
		alert(a===b);
		alert(c>a)
		alert(d>a)
		
	</script>
	<body>
	</body>
</html>

语句:

​ if语句 和java一样
for while 语句和java一样
switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)

总结:掌握

​ 1.css和html整合
方式3种
2.css中选择器:
id class 元素
属性 后代
3.js
js和html整合
方式两种
4.变量定义
5.函数定义
2种格式
6.事件
onclick onload onsubmit
7.事件和函数的绑定
2中方式
8.定时器 2种
9.for while if

qq_41700466
关注
专栏目录
JavaScript——js 伪数组和真数组的区别及转化
qq_43201350的博客
02-26 286
JavaScript——js 伪数组和真数组的区别及转化
走进javascript——不起眼的基础，值和分号
10-20
JavaScript是一种广泛应用于网页开发的编程语言，其基础语法中的变量值和分号使用是编写有效JavaScript代码的基础。了解这些基础知识对于编写可读性强、运行稳定的JavaScript代码至关重要。 首先，理解JavaScript中...
03-JavaScript
Jaybo
04-30 540
1、介绍 JavaScript JavaScript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言， 内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言。 组成部分： ECMAScript： JS 基础语法(规定 关键字 运算符 语句 函数等等…) BOM： 浏览器对象模型 DOM： 文档对象模型 作用：修改html...
初识JavaScript——JS
孙宇航的博客
04-10 1903
目录 1.认识JS 1.1JavaScript是什么 1.2JS的作用 1.3 HTML/CSS/JS的关系 1.4 浏览器执行JS 1.5JS的组成 1.6JS书写位置 1.7JS注释 1.8JS输入输出语句 2.变量 2.1变量的理解和储存 2.2变量的使用 2.3变量语法拓展 2.4声明变量的特殊情况 2.5变量的命名规范 1.认识JS 1.1JavaScript是什么 1.JS是一种 运行在客户端的脚本语言。 2.脚本语言不需要编译，在运行过程中有J.
JavaScript——js获取系统星期几
最新发布
qq_43201350的博客
08-26 360
JavaScript——js获取系统星期几
JavaScript——JS的引入方式
万里顾一程的博客
12-03 1844
JavaScript——我的第一个JavaScript程序以及JS的引入方式 初识JavaScript JavaScript（简称JS）是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的 我的第一个JS程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
JavaScript——js 模板中字符串中添加空格
qq_43201350的博客
02-29 531
JavaScript——js 模板中字符串中添加空格
JavaScript——js 多维数组转化成一维数组
qq_43201350的博客
01-04 395
JavaScript——js 多维数组转化成一维数组
JavaScript——js 中 switch case指定多个条件时写法
qq_43201350的博客
02-28 922
JavaScript——js 中 switch case指定多个条件时写法
JavaScript——js 通过逗号将字符串拆分为数组
qq_43201350的博客
01-04 806
JavaScript——js 通过逗号将字符串拆分为数组
JavaScript——js 字符串截取 前几位 或 后几位
qq_43201350的博客
01-04 940
JavaScript——js 字符串截取 前几位 或 后几位
JavaScript——学习笔记
08-01
JavaScript基础
用JavaScript绘图 ——JS2D函数集
01-21
### 使用JavaScript进行二维图形绘制——JS2D函数集详解 #### 一、引言 随着Web技术的发展，网页已经不仅仅是静态的信息展示平台，而是越来越多地融入了动态效果和交互功能。其中，使用JavaScript进行绘图就是一个...
服务器端JavaScript——NodeJS
08-05
【服务器端JavaScript——NodeJS】 Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它让JavaScript能够在服务器端执行，打破了JavaScript长期以来只能在浏览器中运行的限制。Node.js使用了一个事件驱动、非...
网页列表页面展示
qq_41700466的博客
09-16 5110
列表页面展示 需求： 将友情链接页面通过列表展示出来 技术分析： 列表标签 列表标签： &lt;ol&gt;&lt;/ol&gt; 有序 &lt;ul&gt;&lt;/ul&gt; 无序 常用标签&lt;li&gt;&lt;/li&gt;列表项 超链接标记： &lt;a&gt;&lt;/a
网站首页信息展示（table布局）
qq_41700466的博客
10-22 1186
网站首页信息展示 需求： 通过表格布局将首页信息展示 技术分析： 表格 表格标签：* &amp;lt;table&amp;gt;&amp;lt;/table&amp;gt; ​ 常用的子标签 :行 &amp;lt;tr&amp;gt;&amp;lt;/tr&amp;gt; ​ 常用的子标签 :列 ​ :表头单元格 默认居中加粗 ​ 注意：一行必须只有一个单元格或者一列
网页图片展示
qq_41700466的博客
09-16 975
网页图片展示 需求： ​ 在一个页面中展示多张图片 技术分析： ​ 图片标签：* `&amp;amp;amp;lt;img/&amp;amp;amp;gt; 常用属性： ​ `src：图片的路径 ​ `alt：替代文字 ​ `title：移上去显示的文字
网页信息展示
qq_41700466的博客
09-16 804
网站信息展示 [ ] #### 需求—在页面展示一些文字信息，需要排版 [ ] #### 技术分析—html:超文本标签语言 htlm 作 用：展示 超文本：超越了一般文本，描述文本的字体、颜色、图片 标 签：标记 html书写规则： ​ 文件的后缀名 .html(建议...
用div + css重新布局首页
qq_41700466的博客
10-22 264
用div + css重新布局首页 技术分析： div 和 css div: 块标签 ​ `` ` 行内的块标签：span ​ `` ` css: 渲染 层叠样式表 作用： ​ 渲染页面 ​ 提高工作效率 格式： ​ 选择器{属性1：值1；属性2：值2；} 后缀名： ​ .css 独立的css（样式）文件 和html元素的整合* ​ 方式1：内联样式表 通过标签的style属性设置...
深入解析：JavaScript——被误解的编程语言
随着Node.js的出现，JavaScript也扩展到了服务器端，实现了全栈开发的可能性。此外，JavaScript还被用于移动应用开发（如React Native）、桌面应用（如Electron）以及物联网设备等。 JavaScript的误解主要来源于它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值