学习java—第四十九天学习笔记(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行

2019.9.3 NIIT第四十九天

/今天学习javascript了/

javascript

核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM)

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象，也能使用现有的对象。
(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。
而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

引入方式

使用script标签，浏览器读到script标签，并且类型为text/javascript，就会按照运行js的方式解析js的代码，js代码写在script标签内
使用script标签，引用外部文件，好处：代码可以共用，实现js代码和html进行分离，缺点：必须要到js文件中找代码

基础语法

变量的定义 var 变量名=值；使用console.log(变量名)可以实现在控制台打印如果没写值，则会显示undefined var s1; var不写也可以使用s2="tom"; js是弱类型语言，所以不用定义类型

数据类型

【基本类型】  undefined：Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。  Null 类型：另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。  Boolean 类型：Boolean 类型是 ECMAScript 中最常用的类型之一。它有两个值 true 和 false （即两个 Boolean 字面量）。即使 false 不等于 0，0 也可以在必要时被转换成 false，这样在 Boolean 语句中使用两者都是安全的。  Number 类型：ECMA-262 中定义的最特殊的类型是 Number 类型。这种类型既可以表示 32 位的整数，还可以表示 64 位的浮点数。直接输入的（而不是从另一个变量访问的）任何数字都被看做 Number 类型的字面量。  String 类型：String 类型的独特之处在于，它是唯一没有固定大小的原始类型。字符串中每个字符都有特定的位置，首字符从位置 0 开始，第二个字符在位置 1，依此类推。这意味着字符串中的最后一个字符的位置一定是字符串的长度减 1。字符串字面量是由双引号（"）或单引号（'）声明的。对变量或值调用 typeof 运算符将返回下列值之一： undefined - 如果变量是 Undefined 类型的 boolean - 如果变量是 Boolean 类型的 number - 如果变量是 Number 类型的 string - 如果变量是 String 类型的 object - 如果变量是一种引用类型或 Null 类型的【引用类型】  引用类型通常叫做类(class)，也就是说，遇到引用值，所处理的就是对象。  JS是基于对象而不是面向对象，对象类型的默认值是null。  JS提供众多预定义引用类型（内置对象） 判断数据的类型，就可以根据返回结果进行不同的操作

<script type="text/javascript">
	/*当声明变量未初始化时，则显示Undefined*/
	var s1;
	console.log(typeof(s1));
	/*Null 类型：另一种只有一个值的类型是 Null*/
	/*如果是引用类型或者null类型，显示为object*/
	var s2=null;
	console.log(typeof(s2))
	/*布尔类型boolean true 和 false*/
	var s3=false;
	console.log(typeof(s3))
	/*number类型，既可以表示整数，也可以表示小数*/
	var s4=3.1415926;
	console.log(typeof(s4));
	/*字符串类型，可以用单引号，双引号都行*/
	var s5="tom"
	console.log(typeof(s5));
	var s6={}//对象//[];//[]表示数组
	console.log(typeof(s6));
</script>

==判断值，===即判断值也判断类型

	var s7=100;
	var s8="100";
	console.log(s7==s8);
	console.log(s7===s8);

常用方法

 document.getElementById()：获取页面元素  alert()：向页面弹出提示框。  innerHTML：操作页面某个元素的内容，可以获取，也可以赋值。  document.write()：向页面中写内容。

提供一个函数专门来处理提交业务函数的内容不会再页面加载时执行需要调用函数才会执行：

function checkRegist(){
	var username=document.getElementById("username").value;
	console.log(username);
	/*用户名校验*/
	if(username.length==0){
		alert("用户名不能为空")
		return false;
	}
	/*密码校验*/
	var pwd=document.getElementById("pwd").value;
	var repwd=document.getElementById("repwd").value;
	if(pwd.length==0){
		alert("密码不能为空")
		return false;
	}else if(pwd!=repwd){
		alert("两次输入的密码不相同")
		return false;
	}

	/*邮箱验证*/
	var email=document.getElementById("email").value;
	/*正确的邮箱正则表达式*/
	var pattern=/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$/;
	if(!pattern.test("email")){
		alert("请输入正确的邮箱");
		return false
	}
	return true;
}

由于校验代码比较多，写在onsubmi在这里不合适，

模拟提交按钮

设置button按钮，添加点击时间onclick="方法名"；

点击换图模拟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function changeImg(){
				//获取img对象
				//根据标签名字获取对象，对象的集合(数组)
				//获取集合中单个元素
				var img=document.getElementsByTagName("img")[0];
				//修改src属性
				img.src="img/loginbg.jpg";
			}
		</script>
	</head>
	<body>
		<img id="img1" src="img/QQ图片20190829143912.jpg"/>
		
		<hr />
		<button onclick="changeImg()">点我</button>
	</body>
</html>

自动换图和点击停止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var num=0;
			function chaneImg(){
				var img=document.getElementsByTagName("img")[0];
				num++;
				img.src="img/"+num+".jpg";
				if(num==2){
					num=0;
				}
			}
			//方法返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
			var time= setInterval("chaneImg()",2000);

			function stopChange(){
				clearInterval(time);
			}
			
		</script>
	</head>
	<body>
		<img src="img/1.jpg"/>
		<button onclick="stopChange()">停止轮播</button>
	</body>
</html>

onload事件

加载完成后执行js代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function init(){
				var text =document.getElementById("d1").innerHTML;
				alert(text);
			}
			/*这个写法相当于java中的匿名方法，在代码编写出只能调用一次
			onload=function(){
				var text =document.getElementById("d1").innerHTML;
				alert(text);
			}*/
			//这里调用使用onload调用init函数，init函数不需要()
			onload=init;
		</script>
	</head>
	<!--在body中使用onload事件 onload="init()"，需要加()-->
	<body onload="init()">
		<div id="d1">
			一二三四五
			壹贰叁肆伍
		</div>
	</body>
</html>