javascript 循环显示页面_[WEB篇]-JavaScript基础

最新推荐文章于 2023-06-13 16:37:55 发布

eventually7

最新推荐文章于 2023-06-13 16:37:55 发布

阅读量745

点赞数

文章标签： javascript 循环显示页面

本文链接：https://blog.csdn.net/weixin_35859336/article/details/113083067

版权

本文是关于JavaScript的基础教程，涵盖了JavaScript简介、语法基础，包括变量、注释、运算符、流程控制和循环控制，还详细讲解了Date对象、Array对象以及DOM操作，如表单处理、二级和三级联动。通过案例分析，帮助读者理解JavaScript在网页交互中的应用。

摘要由CSDN通过智能技术生成

JavaScript

1.JavaScript简介

什么是 JavaScript？

JavaScript 被设计用来向 HTML 页面添加交互行为。

JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。

JavaScript 由数行可执行计算机代码组成。

JavaScript 通常被直接嵌入 HTML 页面。

JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

所有的人无需购买许可证均可使用 JavaScript。

Java和JavaScript是相同吗?

不同，Java和JavaScript是两种完全不同的语言.Java是很强大的复杂的编程语言JavaScript是弱类型的语言是脚本语言

JavaScript能做什么？

JavaScript 为 HTML 设计师提供了一种编程工具

JavaScript 可以将动态的文本放入 HTML 页面

JavaScript 可以对事件作出响应

JavaScript 可以读写 HTML 元素

JavaScript 可被用来验证数据

JavaScript 可被用来检测访问者的浏览器

JavaScript 可被用来创建 cookies

JavaScript放置的位置？

可以放置在页面的任意位置，注意数据出现的顺序和执行顺序

---> 位于head之间的脚本

----> 位于body之间的脚本

----> 可以引用外部的JavaScript脚本

案例分析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1.JavaScript基础应用</title>
	</head>
	<!--
		JavaScript的应用：
    		JavaScript 为 HTML 设计师提供了一种编程工具
		JavaScript 可以将动态的文本放入 HTML 页面
		JavaScript 可以对事件作出响应
		JavaScript 可以读写 HTML 元素
		JavaScript 可被用来验证数据
		JavaScript 可被用来检测访问者的浏览器
		JavaScript 可被用来创建 cookies
    -->
	<script type="text/javascript">
		/*a.JavaScript可以将动态的文本放入 HTML页面*/
		document.write("JavaScript可以直接将数据写入到html页面"+"<br/>");
 
		/*b.JavaScript可以对事件作出相应*/
		function changeContent(){
    
			// 先获取指定区域的内容
			var x = document.getElementById("content");
			// 改变指定区域的数据
			x.innerHTML="指定区域的内容被改变了";
			// 改变文本样式
			x.style.color = "darkgoldenrod";
		}
 
		/*c.JavaScript能够读写数据并对数据进行验证*/
		function validate(){
    
			// 获取指定区域的数据内容
			var x = document.getElementById("number").value;
			// 对数据进行验证，判断是否为数字类型
			if(x==""||isNaN(x)){
    
				// 弹出指定的对话框
				alert("输入的是非数字");
			}else{
    
				alert("输入的是数字")
			}
		}
	</script>
	<body>
		<h1>JavaScript的简单测试</h1>
 
		<!-- 此处的id用以唯一标识p标签 -->
		<p id="content">JavaScript能够修改文本数据</p>
		<input type="button" value="点击改变内容" onclick="changeContent()"/><br />
 
		<input type="text" id="number" name="numer" />
		<input type="button" value="验证数据" onclick="validate()" /><br />
	</body>
</html>

结果显示：

2.JavaScript语法基础

JavaScript变量

在js中可以使用var关键字声明一个变量，可以出现在任何位置。变量声明后才能使用。其实不声明也可以使用，只是这样不合逻辑。注意标识符、关键字问题。

对于javascript的变量来说是没有类型的。变量的类型由它包含的数据决定，字符串、数字、布尔、数组、对象、Null、Undefined

案例分析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>2.JavaScript的数据类型</title>
	</head>
	<script type="text/javascript">
		/*
		 * 在js中可以使用var关键字声明一个变量，可以出现在任何位置
		 * 对于javascript的变量来说是没有类型的。
		 * 变量的类型由它包含的数据决定，主要包括以下
		 * 字符串、数字、布尔、数组、对象、Null、Undefined
		 * */
		//a.定义基本的数据类型
		var i=1;
		var d=1.0;
		var s="hello";
		document.write(i+"<br />");
		document.write(d+"<br />");
		document.write(s+"<br />");
 
		//b.定义抽象数据类型
		var person = new Object();
		person.firstname = "haha";
		person.lastname = "bibu";
		person.age = 20;
		person.gender = "女";
		document.write(person.firstname+"<br />");
		document.write(person.lastname+"<br />");
		document.write(person.age+"<br />");
		document.write(person.gender+"<br />");
 
		//c.定义数组
		var arr = new Array();
		arr[0] = "小汽车";
		arr[1] = "火车";
		arr[2] = "拖拉机";
		/*和java语言中遍历数组有所区别，此处注意区分，但均可根据下标获取指定的数组元素*/
		for(var i in arr){
    
			document.write(arr[i]+"<br />");
		}
	</script>
	<body>
	</body>
</html>

结果显示：

JS注释

单行注释：// 我也是js的注释不会影响执行

多行注释：/*我是js内的注释不会影响执行*/

JS运算符

案例分析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3.JavaScript中需要注意的运算符</title>
	</head>
	<body>
		<script type="text/javascript">
			/*a.==与===（恒等于）的区分*/
			alert(2=="2");
			alert(2==="2");
			/* 分析：
			 * 2=="2"--true：
			 * ==只比较两个对象的具体内容，内容相同则返回true
			 * ==能够自动进行数据类型的转换
			 * 2==="2")--false:===恒等于，不能够自动进行数据类型的转换
			 * 因此返回结果为false
			 * */
 
			var a,b,c,d;
			d=(a=1,b=a+2,c=b+3);
			alert("a="+a);// 1
			alert("b="+b);// 3
			alert("c="+c);// 6
			alert("d="+d);// 6
 
			/* 
			 * JavaScript中的“+”表示的含义与java语言类型，
			 * 当是数值之间的操作则为普通的加运算符
			 * 当是与字符串进行操作则用于字符串拼接
			 */
			alert(5+"5");// 55
			alert("5"+5);// 55
			alert(5+5);// 10
		</script>
	</body>
</html>

JS流程控制

案例分析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>4.Javacript中的流程控制</title>
	</head>
	<script type="text/javascript">
		/*
		 * a.if语句
		 * 根据输入的分数判断是哪个阶段的分数
		 * */
		function getGrade(){
    
			// 获取指定区域的数值
			var res = document.getElementById("grade").value;
			if(res==""||isNaN(res)){
    
				alert("请输入正确的数值0-100");
			}else{
    
				if(res<60){
    
					alert("不及格！");
				}else if(res>=60&&res<70){
    
					alert("及格");
				}else if(res>=70&&res<80){
    
					alert("中等");
				}else if(res>=80&&res<90){
    
					alert("良好");
				}else if(res>=90&&res<=100){
    
					alert("优秀");
				}
			}
		}
 
		/*
		 * b.switch语句
		 * 根据当前系统时间，判断今天是星期几
		 * 需要注意的是外国的时间一周均是以周日开始
		 */
		function getCurrDay(){
    
			var day = new Date().getDay();
			var res ;
			switch(day){
    
				case 0:
					res="星期日";
					break;
				case 1:
					res="星期一";
					break;
				case 2:
					res="星期二";
					break;
				case 3:
					res="星期三";
					break;
				case 4:
					res="星期四";
					break;
				case 5:
					res="星期五";
					break;
				case 6:
					res="星期六";
					break;
			}
			alert(res);
		}
	</script>
 
	<body>
		<input type="text" id="grade" name="grade" />	
		<input type="button" id="check" value="获取分数" onclick="getGrade()" />
		<br />
 
		<input type="button" id="getTime" value="获取时间" onclick="getCurrDay()" />
	</body>
</html>

结果分析：

JS循环控制

案例分析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>5.JavaScript循环控制</title>
	</head>
	<script type="text/javascript">
		/**
		 * a.普通的for循环
		 * 打印1-5的数字
		 */
		for(var i=1;i<=5;i++){
    
			document.write("数值："+i+"<br />");
		}
 
		/**
		 * b.javascript中的for循环
		 * for(var i in

最低0.47元/天解锁文章

eventually7

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript 循环显示页面_[WEB篇]-JavaScript基础

JavaScript1.JavaScript简介什么是 JavaScript？JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。JavaScript 由数行可执行计算机代码组成。JavaScript 通常被直接嵌入 HTML 页面。JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。所有的人无...
复制链接

扫一扫