JavaScript基础知识

JavaScript基础知识

javas可以通过函数来操作HTML和CSS，这其中会用到JavaScript对象，Browser 对象和DOM对象。
JavaScript中的数据会共享。

数据类型

JavaScript是弱类型语言，只需要var来定义即可，数据类型靠赋值后来定义。

			//1.定义数字类型
			var num =10;
			var num1 = 10.1;
			console.log(num + num1);
			
			//2.定义字符串
			var str = "hello sc";
			console.log(str);
			
			//3.布尔类型(非0即为真：true !0 !null)
			var bool = true;
			if(bool) {
				console.log("真");
			}else {
				console.log("假");
			}
			
			//4.特殊类型
			var n ;//变量定义了但没有赋值，而直接使用，就会输出undefine
			console.log(n);
			console.log(n+1);//输出NAN，not a number
			console.log(10/0);//输出Infinity，无穷大

对象、属性和方法的创建

JavaScript创建对象的方式有很多，一种为new来创建对象，还有的方法是通过JSON格式来定义对象，常用的是通过JSON格式定义对象，简洁明了。
属性只需要通过引用符号 . 创建即可；JavaScript没有方法，方法是通过匿名函数模拟的。
通过new创建对象

			//1.创建对象
			var user = new Object();
			//2.给属性赋值
			user.id = 1001;
			user.name = "tom";
			user.age = 12;
			user.email = "tom@qq.com";
			//3.使用匿名函数模拟对象的方法
			user.setName = function(name) {
				this.name = name;
			}
			user.getName = function() {
				return this.name;
			}
			user.out = function() {
				console.log(this.id,this.name,this.age,this.email);
			}
			//4.调用属性和方法
			console.log(user.id,user.name,user.age,user.email);
			user.setName("Mark");
			var name = user.getName();
			console.log(name);
			user.out();

使用JSON格式定义对象

			var user = {
				"id":1001,
				"name":"tom",
				"age":20,
				"email":"tom@qq.com",
				"getName":function() {
					return this.name;
				},
				"out":function() {
					console.log(user.id,user.name,user.age,user.email);
					}
				}
			user.out();	

JSON对象和JS对象的转化

java后台到js前台是通过JSON来进行数据交换的，需要JSON对象与JS对象之间进行转化。

		<!-- json字符串与js对象之间的转换(json格式) -->
		<script type="text/javascript">
			//1.定义json格式的字符串 对象的方式 json格式字符串  java后台系统 -----> js前台 数据交互 字符串(json)
			var user = '{"id":"1001","name":"tom","age":23,"email":"2018593033@qq.com"}';
			//2.将json格式的字符串转换为js对象
			var userObj = JSON.parse(user);
			//3.遍历对象
			for(var pro in userObj) {
				console.log(userObj[pro]);
			}
			//document.write(userObj.id,userObj.name,userObj.age,userObj.email);
			document.write("<br/>");
			//4.将JSON格式js对象转换成字符串
			var str = JSON.stringify(userObj);
			document.write(str);
		</script>
		<!-- json字符串与js数组之间的转换(json格式) -->
		<script type="text/javascript">
			//1.定义json格式的字符串 数组类型
			var users = '['+
				'{"id":"1001","name":"tom","age":23,"email":"2018593033@qq.com"},' +
				'{"id":"1001","name":"tom","age":23,"email":"2018593033@qq.com"},' +
				'{"id":"1001","name":"tom","age":23,"email":"2018593033@qq.com"}]';
			console.log(users);	
			//2.将其转换为js数组
			var ar = JSON.parse(users);
			//3.遍历数组
			for(var index in ar) {
				console.log(ar[index]);
			}
			//4.将js数组转换为JSON字符串
			var str = JSON.stringify(ar);
			console.log(str);
		</script>

JavaScript对字符串操作API

			<script type="text/javascript">
			//1.字符串的创建
			var str = "Hello World";
			console.log(str);
			var str1 = "NMML";
			//2.API
			//a.将字符串对象的内容输出
			console.log(str.toString());
			console.log(str.valueOf());
			//b.字符串的连接
			console.log(str + str1);
			console.log(str.concat(str1));
			//c.截取字符串  substr(1,2) 1为起始位置，2为截取字符串长度
			var subStr = str.substr(1,3);
			console.log(subStr);
			//截取字符串 substring(2,5) 2为起始位置，5-1为结束位置 
			var subStr1 = str.substring(2,5);
			console.log(subStr1);
			//d.获取字符串的位置
			var index = str.indexOf("lo");
			console.log(index);
			index = str.lastIndexOf("or");
			console.log(index);
			//e.获取字符
			var c = str.charAt(1);
			console.log(c);
			//f.字符串切割
			var st = "123-#ac-dsad-#13da-dsa";
			var rs = st.split("-");
			console.log(rs);
			//g.获取ASII码
			console.log(String.fromCharCode(65));
			//h.字符串遍历
			for(var i=0; i<st.length; ++i) {
				var c = st.charAt(i);
				console.log(c);
			}
		</script>

创建函数与回调函数

JavaScript做出某些动画和事件都是通过函数来完成，而回调函数就是函数内部能够动态的调用某个函数。
本方法为最常用的创建函数的方法

			function add(a,b) {
				return a+b;
			}
			//调用函数
			rs = add(10,5);
			console.log(rs);

回调函数

		<script type="text/javascript">
			function fun(a,b,callbake) {
				callbake(a);
				callbake(b);
			}
			//输出的方法
			function out(msg) {
				console.log("out方法的输出："+msg);
			}
			//调用
			fun(10,20,out);
		</script>