【Javascript的简单操作】

最新推荐文章于 2021-06-15 21:58:53 发布

没在尽心，怎么可能

最新推荐文章于 2021-06-15 21:58:53 发布

阅读量215

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/TONGZONGE/article/details/98655966

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.脚本的写法：（内联法与外联法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>脚本的写法</title>
	</head>
	<body>
		<!--内联的写法1-->
		
		<!--<script>
			alert("welcome come to the world of javascript !");  显示消息框
		</script>-->
		<!--内联的写法2-->
		<!--<script language="JavaScript">
			console.log("welcome come to the world of javascript !");
		</script>-->
		<!--内联的写法3-->
		<!--<script type="text/javascript"></script>-->
		<!--内联的写法4-->
		<!--<script type="application/javascript"></script>-->
		
		<!--外联的写法
			1.外联的脚本不要写代码；
			2.尽量不用空标签简写代码	
		-->
		<!--<script language="JavaScript" src="js/js1.js"></script>-->
		<script type="text/javascript" src="../../js/js1.js"></script>
	</body>
</html>

结果展示：

2.变量的使用与声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/javascript">
			/**
			 * 常量 所有语言基本一样
			 * 整形 浮点型 字符型 布尔型 字符串 对象。。。。。
			 * 变量
			 * 1.强类型语言 ：
			 *   有什么类型的常量，就有什么类型的变量
			 * 2.java python 等就是弱类型语言
			 * 特点：
			 *   1.声明变量只有一种类型 var;
			 *   2.保存什么类型的常量 就变成什么类型的变量
			 */
			var a; 
			console.log(a);  //声明变量
			console.log(typeof(a));
			
			a = 20;
			console.log(a);  // 保存了一个整数
			console.log(typeof(a));
			
			a = 20.232;  // 保存了一个浮点数
			console.log(a);
			console.log(typeof(a));
			
			a = 'H'  // 保存了一个字符
			console.log(a);
			console.log(typeof(a));
			
			a = 'Hello'  // 保存了一个字符串
			console.log(a);
			console.log(typeof(a));
			
			a = true;  // 保存了一个布尔值
			console.log(a);
			console.log(typeof(a));
			
			a = new object  // 保存了一个对象
			a.name = "sfghjhgf";
			console.log(a + ":" + a.name);  // 连接在一起
			console.log(typeof(a));
		
		</style>
	</body>
</html>

变量的命名规则和规范：

规则 - 必须遵守的，不遵守会报错

（1）由字母、数字、下划线、$符号组成，不能以数字开头

（2）不能是关键字和保留字，例如：for、while。

（3）区分大小写

（4）变量名必须有意义

（5）遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword 。

3.字符串的简单使用

字符串拼接

console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);

字符串拼接使用 + 连接

（1）两边只要有一个是字符串，那么+就是字符串拼接功能

（2）两边如果都是数字，那么就是算术功能。

变量的运算与连接：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 200;
			console.log(a+20);  /*数学运算*/
			console.log(a.toString() + 20);  /*连接在一起*/
			console.log(String(a) + 20);
			
			var b = "234576";
			console.log(b + 2000);  /*没有做运算*/
			console.log(Number(b) + 2000); /*Number(b) 类型转换*/
		    console.log(parseInt(b) + 25467);/*自动转换*/
	        
		    var c = 20,d='20';
		    console.log(c == d);
		    console.log(c === d); // 全等  数值和类型都得一样
		
		    /*if(Number("qwgbf"))*/
		    /* if("")*/
		    /*if(null)*/
		    var aaaa;
		    if(aaaa)
		 
		      console.log("我是true");
		    else
		      console.log("我是false");
		
		
		</script>
			
		
	</body>
</html>

4.数组

（1）数组的声明与遍历：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript  " >
			var a =[];  // 空数组
			a[0]=232;
			a[100]=243;
			console.log(a.length);
			var a1=[21,34,565,687];  // 遍历数组
			for(var t in a1){
				console.log(a1[t]);
			}
			console.log(a1.length);
			
			var a2 = new Array(20);  // 指定数组元素个数
			console.log(a2.length);
		</script>
		
	</body>
</html>

5.函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用

（1）函数的声明与调用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数</title>
		
	</head>
	<body>
		<script type="text/javascript">
			var abv=1232;
		    function example() {
		    	return 20;
		    	 /*console.log(abv);*/
		    	
		    }
			function example1() {
		        console.log("我不返回");
		    	
		    }
			// 调用
			console.log(example());
			example1();
			
			var aa = function(){
				 console.log("我叫aa");
			}
			aa();
			
			function sum(a,b){
				 console.log(a+b);
			}
			sum(20,30);
			
			function sum1(){
				var count=0;
				console.log(arguments.length)
				for(var i in arguments){
					count +=arguments[i];
				}
				return count;	
			}
			
			 console.log(sum1(12,435,57,7));
			 /*Bug*/
			 /*for(var i =0;i<10;i++){
			 	var aaa=245;
			 	console.log(i);
			 }
			  console.log(aaa);
			   console.log(i);*/
			  for(var i =0;i<10;i++){
			 	var aaa=245;
			 	console.log(i);
			 }
			  console.log(aaa);
			   console.log(i);
			   
			   /*预解析*/
			   var ttt;
			   console.log(ttt);
			   var ttt = 134;
			   /*函数的预解析  块内块外同时声明同一元素 赋不同值 输出采用就近原则*/
			   aaaa();
			   var s =2313232;
			   function aaaa(){
			   	var s = 2345;
			   	console.log(s);
			   	console.log("sdfghnbvsdfng");
			   }
		
		</script>
		<!--<script >
			alert(abv);
		</script>-->
	</body>
</html>

函数体只有在调用的时候才会执行，调用需要()进行调用。可以调用多次(重复使用)

6.内置对象

JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象

JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...

对象只是带有属性和方法的特殊数据类型。

学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习）

可以通过MDN/W3C来查询

内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var o = {
				name:'kaka',
				age:26,
				sex:'男',
				/*adr: function(){
					homeAdr:'xian',
					busiAdr:'shanghai',
				}*/
				
				sayHi: function(){
					console.log(this.name);
				}
			};
				console.log(o.name + ":" + o.age + ":" + o.sex);
				/*o.adr();*/
				o.sayHi();
				
				/*
				 * javascript类的定义
				 * */
				function Person(){
					this.name = 'kaka',
					this.age = 26,
					this.sex = '男',
					
					this.sayHi =  function(){
						console.log(this.name);
					}
				}
				var p = new Person();
				p.name = 'gayt';
				console.log(p.name + ":" + p.age + ":" + p.sex);
				p.sayHi();
				
				Person.prototype.code = 2332343;  // 通过类原型添加属性
				var p1 = new Person();
				console.log(p1.code);
				
				
				// 遍历属性
				for(var tt in p1){
					console.log(tt);
					console.log(p[tt]);
				}
				
				
				
			
		</script>
	</body>
</html>

7.Array对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*var d = new Date();
			console.log(d.getFullYear() + ":" + d.getMouth() + ":" 
			     + d.getDate() + ":" + d.getHour() + ":" +
				 d.getMinutes() + ":" + d.getSeconds() + ":" + 
				 d.getMilliseconds());*/
				 
				 
			// 数组
			var a = new Array(23,354,12,56);
			a.sort();    // 默认为升序
			console.log(a);
			a.reverse();
			console.log(a);  // 反转 
			
			// 栈操作   先进后出
			var b = new Array();
			b.push(324);
			b.push(5654);
			b.push(25);
			for(var i = 0; i<3;i++){
				console.log(b.pop());
			}
			console.log(b.length);
			
			//  队列操作   先进先出
			b.push(324);
			b.push(5654);
			b.push(25);
			
			for(var i =0;i<3;i++){
				console.log(b.shift());
			}
			
			// 字符串
			
			var str = "hello world !";
			console.log(str.substring(6));
			console.log(str.substring(6 ,13));
			
			
			
			
		</script>
	</body>
</html>

代码运行结果仅为一小部分，仅供参考。

检测一个对象是否是数组

instanceof

Array.isArray() HTML5中提供的方法，有兼容性问题

（1）函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断

toString()/valueOf()

toString() 把数组转换成字符串，逗号分隔每一项

valueOf() 返回数组对象本身

（2）数组常用方法

演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

// 1 栈操作(先进后出)
push()
pop() 		//取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
push()
shift()		//取出数组中的第一个元素，修改length属性
unshift() 	//在数组最前面插入项，返回数组的长度
// 3 排序方法
reverse()	//翻转数组
sort(); 	//即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
// 4 操作方法
concat()  	//把参数拼接到当前数组
slice() 	//从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice()	//删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join()