2021.4.24 js学习第一天

最新推荐文章于 2023-06-22 20:27:18 发布

景抓马

最新推荐文章于 2023-06-22 20:27:18 发布

阅读量93

点赞数

分类专栏： Java Script

本文链接：https://blog.csdn.net/JINGMaNong/article/details/116103896

版权

Java Script 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 什么是 JavaScript？

JavaScript–是一种面向对象的脚本语言。面向对象是一种编程思想。在没有出现面向对象的编程思想指导编程之前，我们用向过程的编程思想指导具体实践。
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。

面向对象的特点?
1.封装–将所有分散的数据集中在一起统一处理。
2.继承–孩子从父母那里得到一些数据。
3.多态–多种状态/形态，在不同的环境下，同一个元素会呈现出不同的状态/形态。
脚本语言–程序编写完成以后，不需要经过转换，在运行环境上直接执行的。
【例如:JavaSctipt，SQL】

2. JavaScript 的历史

JavaScript 在 1995 年由 Netscape 公司的布兰登▪ 艾奇（Brendan Eich），在网景导航者浏览器上首次设计实现而成。
最初将其脚本语言命名为 LiveScript。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。
JavaScript 的标准是 ECMAScript 。截至 2012 年，所有浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015 年 6 月 17 日，ECMA 国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES2015。

3. JavaScript 的作用

1.为 html 网页提供动态内容【特效】
2.完成与后台处理程序的数据交互【1.提交数据 2.将返回的数据显示在页面上】
在这里插入图片描述

4.简单的具体操作

1. 直接向 html 文件中写出标记和内容。

在这里插入图片描述

2. 对事件的反应

在这里插入图片描述

3. 改变 HTML 标记中的内容

4.改变 HTML 图像

在这里插入图片描述

5.改变 HTML 样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变 HTML 样式</title>
		<style>
			#div1{
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
		</style>
		<script>
			function testdiv(){
				document.getElementById("div1").style.width="300px";
				document.getElementById("div1").style.height="300px";
				document.getElementById("div1").style.backgroundaColor="red";
			}
		</script>
	</head>
	<body>
		<div id="div1"> </div>
		<input type="button" value="改变css" onclick="testdiv();" />
	</body>
</html>

6. 验证输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证输入</title>
		<script>
			function testSend(){
				var phoneNum=document.getElementById("inp1").value;
				//验证手机号码--正则表达式
				//正则表达式
				var zhengze=/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;
				var jieguo=zhengze.test(phoneNum);
				if(jieguo){
					alert("手机号码合法,正在发送验证码");
				}else{
					alert("手机号码不合法,请重新输入");
					document.getElementById("inp1").value=""
				}
			}
		</script>
	</head>
	<body>
		<input id="inp1" type="text" value="请输入手机号"/>
		<input type="button" value="获取短息验证码" onclick="testSend();"/>
	</body>
</html>

5.javascript 的基本用法

1.在 html 标记的对应事件中直接编写 Javascript 程序。
例如: <input type="button" value="普通的按钮" onclick="alert('按钮的点击事件被触发');"/><br>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript 的基本用法</title>
	</head>
	<body>
		<input type="button" value="普通按钮" onclick="alert('按钮的点击事件被触发');"/>
	</body>
</html>

2.将 Javascript 程序写入 script 标记，将 script 标记写在 head 或者 body 标记中，推荐 head 标记中或者 body 结束标记的前面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>将 Javascript 程序写入 script 标记</title>
		<script>
			function testSend(){
				var phoneNum=document.getElementById("test1").value;
				//验证手机号码--正则表达式
				//正则表达式
				var zhengze=/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;
				var jieguo=zhengze.test(phoneNum);
				if(jieguo){
					alert('手机号码合法，正在发送验证码');
					
				}else{
					alert('手机号码不合法，请重新输入');
					document.getElementById("test1").value="";
					}
			}
		</script>
	</head>
	<body>
		<input id="test1" type="text" value="请输入手机号"/>
		<input  type="button" value="获取短信验证码" onclick="testSend();"/>
	</body>
</html>

3.创建独立的 javascript 文件，后缀名”.js”结尾，通过 script 标记的 src 属性引入

function my(){
	alert('hello,你好');
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过 script 标记的 src 属性引入</title>
		<script src="my.js"></script>
			
		
	</head>
	<body>
		<h2>3.创建独立的 javascript 文件，后缀名”.js”结尾
		，通过 script 标记的 src 属性引入</h2>
		<input type="button" value="测试" onclick="my();"/>
	</body>
</html>