网页——JavaScript(变量、语法、对象)

一、JavaScript:客户端脚本语言,简称JS
——JS网页脚本语言 由浏览器解释执行的 他最早出现的目的,是为了校验表单的数据,随着不断的发展,可以做出一些很绚丽的页面效果
(一)与html结合方式
内部JS:

			< script type="text/javascript">
										js代码
			 < script/> 注意:< script>标签定义的位置,会影响执行顺序

外部JS:定义< script>标签,通过src属性导入外部js文件

       <script src="js/myJS.js" type="text/javascript" charset="utf-8"></script>

(二)语法:
(1)与Java语法类似,常量:基本数据类型:

  • number:数字类型,包含整数和小数和 NaN(not a number)
  • string: 字符串和字符类型 “” ‘’
  • boolean: true 和 false
  • null: 空类型。对象的占位符
  • undefined:未定义,如果一个变量没有初始化值,默认为undefined
    (2)变量:使用 var定义变量 var i = “abc”;
  • js是一门弱类型语言:定义变量时,不需要规定其数据类型。
  • typeof运算符:获取变量的数据类型
  • var关键字如果不书写,该变量则为全局变量
<script type="text/javascript">
			//JS是一门弱类型的语言.
			//原始数据类型 Number(整数,小数,NaN) String(字符,字符串) null(引用类型 Object)  undefined(未定义) Boolean(布尔类型)
			//定义一个变量 使用 var
			var num = 100; //全局变量
			var num2 = 1.8;
			//typeof 可以获取这个变量的原始数据类型
			alert(typeof num);
			alert(typeof num2);
			//定义常量ES6
			//const num3=1000;
		</script>

(3)运算符:自动类型转换

<script type="text/javascript">
			var a = +"1";
			//数据类型的自动转换:当这个运算符想要的值跟他期望的不一样,他会尝试着进行转换
			//alert(a+10);
			var b = +"abc";
			//alert(b); //NaN 不是数字的数字 NaN的原始数据类型是Number
			//alert(b+10); 任何类型跟NaN运算结果都是NaN
			//字符串转成数字,如果字面上能转,就转成数字,转不了转成NaN
			var flag = false; //
			//布尔类型转数字:true转换成1 false转换成0
			alert(2 * flag);
			//NaN参与比较运算结果都是false
			var c = NaN;
			var cc = NaN != NaN; //NaN 不等于 NaN 结果才是真
			cc = NaN > 1;
			alert(cc);
		</script>
  • 一元运算符:++ – +(正) -(负)
    • 注意:在js中,如果传递给运算符的值,和 运算符想要接受的 值 的类型不匹配,则会自动类型转换
    • 其他类型转为number
      string:将字符串的字面值,转为number,如果字面值不是数字,则 转为NaN
      boolean: true为1 false 为0
  • 比较运算符: > < >= <=:
    * NaN参与的运算,结果都为fasle,除了(!=)
    * 字符串比较小大:如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大
    * !=:
    * == ===(全等于):
    * 全等于比较时,先比较类型,如果类型不一致,直接返回false
  • 逻辑运算符:&& || !
    * 其他类型转boolean
    * number:非0为true,0和NaN为false,
    * string: 除了空字符串(""),其他都是true
    * null 和 undefined:转为false
    * 对象:所有对象都为true
					<script type="text/javascript">
								//其他类型转布尔类型
								//字符串转布尔 空串转成fasle 非空串转成true
								//数字转布尔 0 转成false 非0转成true
								//NaN
								var a="abc";
								alert(!a);
								 if(0){
								 	alert(true);
								 }else{
								 	alert(false);
								 }
								//NaN转布尔 转成false
								 if(NaN){
								 	alert(true);
								 }else{
								 	alert(false);
								 }
								 var vv;
								 //undefined 转布尔 转false
								 if(undefined){
								  	alert(true);
								  }else{
								 	alert(false);
								  }
								 //对象转布尔 对象为null 转false 不为null转成true
								var obj=new Object();
									obj=null;
								 	if(obj){
								  	alert(true);
								  }else{
								 	alert(false);
								  }
							</script>
  • 算术运算符:+ - * / %
    注意:NaN 参与数学运算 结果都为NaN
  • 赋值运算符:= += …
  • 三元运算符:表达式 ? 值1 : 值2;
//字符串比较大小
<script type="text/javascript">
			 var a="abc";
			 var b="abcd";
			 alert(b>a);
			
			//比较两个字符串的内容是否相同 可以使用 == 去比较 
			//== ===
			var a="123";
			var b=123;
			document.write(a==b);true
			document.write(a===b); //=== 先比较两个数据的类型是否一样,如果类型不一样,那直接就是false 如果类型一样就在比较值
		</script>

(三)对象:JS是一门基于对象的语言
(基于对象:不能由原生的对象派生出新的对象。换句话说,不存在继承关系)

<script type="text/javascript">
			//Function 函数对象 跟我们Java中 类和方法很像
			//定义函数的语法
			//这里传的两个参数,参数1 形参,参数2 是函数体(要实现的功能)
			 var fun=new Function("msg","msg2","msg3","alert(msg+msg2+msg3)");
			 //调用函数
			 fun(10,20,30);
			 alert(typeof fun);
			//定义函数的方式2 
			var fun=function(a,b){
				alert(a+b);
			}
			//调用函数
			fun(10,20);
			//定义函数的方式3
			function test(a,b,c){
				c();
			}
			test(10,20,function(){
				alert("匿名函数")
			});
			//匿名函数
			// function(d,e){
			// 	alert(d+e);
			// }
		</script>

(1)Function(*****): 代表函数

*          创建方式:
						* var fun = new Function("参数列表","方法体");
						* function 方法名称(形参列表){
								方法体
						  }
						* var fun = function(){
						  }
					* 属性:
						length:形参的个数
					* 使用:
						* 函数名称(实参列表);	
						* 特点:
							1.函数的调用,只与函数名称有关,与实参列表无关
							2.函数内部有内置对象 arguments 封装实参数组
					* void运算符:拦截返回值,一般结合a标签一起使用
						* 注销a标签跳转功能,保留可被点击的功能

(2)JS中的内置对象
对象中方法
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
substring() 提取字符串中两个指定的索引号之间的字符。
substr() 从起始索引号提取字符串中指定数目的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
trim() 去掉字符串两端空格
1.String 对象

			1.      定义方式1: String  str=new String("abckdddd");
	         	     定义方式2:var  str="我爱你爱你";
	    	2. 属性:length: 字符串的长度
			3 方法:
			         charAt() 返回在指定位置的字符。 
				    例子:var v="abcd";
				              var a=v.charAt(2);   
 
					concat() 连接字符串。 
						例子:var v="ab";  var a="cd";
							      var z=v.concat(a);
				
						indexOf() 根据字符检索此符在字符串中的索引。 
							例子:var v="abcde";
								var z=v.indexOf("c");			

					lastIndexOf() 从后向前搜索字符串。 
					substring() 提取字符串中两个指定的索引号之间的字符。 
						var v="abcde";
						var z=v.substring(0,3); 含头不含尾

					toLowerCase() 把字符串转换为小写。
		 				例子:
					 var str = "Hello World!";
					 document.write(str.toLocaleLowerCase());

					  toUpperCase() 把字符串转换为大写。 

					replace() 替换字符串。
						例子: 
						var v="abceaaaa";
						var z=v.replace("a","h");  参1:被替换的字符/或字符串   参数2:替换成哪个字符/或字符串

						split() 把字符串分割为字符串数组。
			 				例子: 
							var v="a#b#c#d";
							var z=v.split("#");

					* trim():去除字符串两端的空格
						例子: 
                            var v="abcd";
				            var z=v.trim();
<script type="text/javascript">
			var str = "abcdefghjkl";
			 for(var i=0;i<str.length;i++){
			 	document.write(str.charAt(i)+"<br>");
			 }
			 var v=str.charCodeAt(0);
			 alert(v);
			var v2 = str.slice(0, 2);
			document.write(v2);
			var v3 = str.substring(0, 2);
			document.write("<br>");
			document.write(v3);
			//重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。
			//注释:substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。
			var v4 = str.substr(1, 3); //从1索引处截取3个字符
			var v5 = str.substring(1, 3);//从1索引截取到3索引 含头不含尾
			document.write("<br>");
			document.write(v4);
			document.write("<br>");
			document.write(v5);
			document.write("<br>");
			var v6="   abc   ".trim();
			document.write("=="+v6+"===");
		   </script>
<script type="text/javascript">
			//JS中的内置对象
			//Number String Date Array Boolean Math  Global  RegExp
			//String 对象
			//创建String 对象的语法
			var str=new String("abcd");
			var len=str.length;
			alert(len);
			var str2=String("abcdef")
			alert(str2.length);	
			var str3="abcdefefe";
			alert(str3.length);	
		</script>

2.Number对象

定义方式:var num=new Number(555.6666);
			var num1=Number(5694);
		方法:
			toString()  把数字类型转成字符串类型
			例子:
			var v=Number(695444);
			var z=v.toString();

			toPrecision()  把数字格式化为指定的长度。也就是小数后面保留几位
			toFixed 把数字转换为字符串,结果的小数点后有指定位数的数字。
			例子:
			var v=Number(3.5999999999999);
			var z=v.toPrecision(4);

3.Date对象

		       定义方式: var  myDate=new Date();
	                 方法:
							getTime()   获取从1970-01-01 00:00:00   到当前的毫秒值
			
							toLocaleString()  将时间转化成本地格式 利于阅读	
					例子
							var myDate=new Data();
							var time=myDate.getTime();
							var localTime=time.toLocaleString();

4.Math 对象 特点: 该对象不需要创建 直接对象名点上方法

				       Math.random();随机产生0----1 之间的随机数      
				       var  num=Math.random()*100;
				       Math.round(2.36); 对小数进行四舍五入  得到一个整数  
				       var n=Math.round(Math.random()*100);
				       Math.min(15,25); 取最小值
				       Math.max(15,25);取最大值
				       Math. abs(-2) 返回数的绝对值。 
				       Math.floor(2.6);向下取整
				       Math.ceil(3.82);向下取整
				       //随机弹出4位验证码 4位随机数字组合
				       var str = "0123456789abcdfefdfadgjkl";
						//生成4个随机整数索引
						var one = Math.floor(Math.random() * str.length);
						var two = Math.floor(Math.random() * str.length);
						var three = Math.floor(Math.random() * str.length);
						var four = Math.floor(Math.random() * str.length);
						var yi=str.charAt(one);
						var er=str.charAt(two);
						var san=str.charAt(three);
						var si=str.charAt(four);
						alert(yi+""+er+san+si);

5.数组对象:JS中的数组是我们常用的容器 ES5里面没有集合的概念

		定义方式:  var arr=new Array(2,6,8);  //创建一个数组对象,并添加数组中
		  				   var  arr1=[6,"a",6];
				属性:  length  数组的长度
					* 特点:
							* 在js中数组可以存储任意类型元素
							* 在js中数组的长度可变
					* 方法:
						concat() 连接两个或更多的数组,并返回结果。  
							例子:var v=[1,2];  var v2=[3,4];
									  var z=v.concat(v2);
						join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 
							var v=[1,2,3];
							var z=v.join("-");  给数组元素之间添加分隔符
						pop() 删除并返回数组的最后一个元素 
							例子:
							var arr = [1, 6, 20];
						                alert(arr.pop());
						push() 向数组的末尾添加一个或更多元素,并返回新的数组长度。 
							例子:var arr = [1, 6, 20];
							         alert(arr.push(28));
						reverse() 颠倒数组中元素的顺序。
 
						sort() 对数组的元素进行排序  从小到大
							* 默认排序方式:字典顺序
							* 要想实现自己的比较方式,需要传入比较器方法对象
						 //ES6箭头  =>  (1). 箭头函数this为父作用域的this,不是调用时的this
								 arr3.sort((a,b)=>{return a-b;});
								 alert(arr3);
							例子:var arr = [1, 6, 20, 100];
						                  alert(arr.sort(bijiao));
										function bijiao(a, b) {
											if(a > b) {
												return 1;
											} else if(a == b) {
											return 0;
										} else {
											return -1;
											}
											//return a-b;
										}

						var arr=new Array(10,30,40,50,100,209);
						arr.splice(1,4); //参1从哪个索引开始,删除几个元素 参数2 就是删除几个
						arr.splice(1,2,1000,2000,3000); //从1索引处删除两个元素,并再往数组中添加了3个元素 1000 2000 3000
						alert(arr);

6.Global:全局方法对象

  • 特点:该对象中的方法调用,不需要对象的引用,可直接使用

      	* isNaN() 检查某个值是否是NaN。 
      		例子:var v=NaN;  var v1="abc"; var v2=123;
      			var b=isNaN(v); 
      			var b1=isNaN(v1);
      			var  b2=isNaN(v2);		
      	* parseInt() 解析一个字符串并返回一个整数。  
      			* 从左向右依次查找,每一位是否是数字,直到遇到不是数字为止。将前边的值转为数字
      				比正号强大些  var v=+“123”;
      			例子:  var v=“152abc”
      			var  v="123";
      			var z=parseInt(v)+1;
      	RegExp(**):正则表达式对象		
    
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值