javascript基础

目录
1.js重定向
2.运算
3.判断语句
4.函数
5.数组
7.随机数
8.未分类知识
9.定时器
10.事件

1.js重定向

点击a,form标签都会显示提示框alert

<body>
  
  //都能激活提示框
  <a href="javascript:alert('我是重定向的代码');">hellow</a>
  
  <form action="javascript:alert('提交表单');">
   
   <input type="submit" value="提交表单" />
   
  </form>
  
 </body>
2.运算

1.逻辑运算

//			与运算(要求左右两边的条件都是true,结果是true)
 		var hd = 11>2 && 3>2;
 		
//			或运算(左右两边条件至少有一边是true,结果才是true)
 		var hd = 11>20 || 3>21;

//			非运算(取反,真的变成假的,假的变成真的)
 		var hd = !(2>1);

2.判断

== 只判断内容,不管类型
=== 全等,既判断内容,又判断类型
!= 只判断内容,不管类型
!== 既判断内容,又判断类型

		var x = '6';
 		var y = 6;
 		var hd = x==y;//true			
 		var hd = x===y;//false
 		var hd = x!=y;//true
 		var hd = x!==y;//false
 		document.write(hd);
 		
3.逻辑运算

   <script type="text/javascript">
//			与运算(要求左右两边的条件都是true,结果是true)
//			var hd = 11>2 && 3>2;
			
//			或运算(左右两边条件至少有一边是true,结果才是true)
//			var hd = 11>20 || 3>21;

//			非运算(取反,真的变成假的,假的变成真的)
//			var hd = !(2>1);


			var hd = 0 && 'JavaScrtpt';
			// var hd = 1 || 0;
			document.write(hd)
			
			if (hd) {
				document.write("成立O(∩_∩)O");
			}else{
				document.write("不成立o(╥﹏╥)o");
			}
			
			
			
		</script>

4.三元运算

<script type="text/javascript">
			
//			三元运算符/三元表达式
//			(条件)?条件为真的时候返回的值:条件为假的时候返回的值;
			var age = prompt('请输入你的年龄');
			var hd = (age>=18)?'成年人':'未成年小朋友';
			document.write(hd);
			
		</script>

5.自定义运算

<script type="text/javascript">
//			接收到的是字符串所以要*1
			var x = prompt('请输入第一个数字')*1;
			var charset = prompt('请输入运算符+-*/');
			var y = prompt('请输入第二个数字')*1;
			
			switch(charset){
				case '+':
					var result = x+y;
					break;
				case '-':
					var result = x-y;
					break;
				case '*':
					var result = x*y;
					break;
				case '/':
					var result = x/y;
					break;
				default:
					var result = '你输入的有误';
			}
			
			
			document.write(result);
			
			
			
		</script>

6.九九乘法表

<script type="text/javascript">
			
			for (var i=1;i<=9;i++) {
				for (var j=1;j<=i;j++) {
					document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
			
		</script>

7.金字塔

<script type="text/javascript">
			
			var rows = prompt('请输入行数');
//			他可以用的值有rows,i,
			for (var i=1;i<=rows;i++) {
				//输出  总行数-i  个☆
				for (var x = 0;x<rows-i;x++) {
					document.write("☆");
				}
				//输出  当前行数*2-1  个★
				for (var y=0;y<i*2-1;y++) {
					document.write("★");
				}
				//换行
				document.write("<br />");
			}
			
		</script>

另外一种金字塔代码

<script type="text/javascript">
//		☆
//				var f = prompt("请输入")
				for(a=5;a>0;a--){
//					
					for(b=1;b<a;b++){
						document.write("★")
					}
					for(c=0;c<6-a;c++){
						document.write("☆")
					}
					for(e=1;e<6-a;e++){
						document.write("☆")
					}
					document.write("<br />")
				}
		</script>

8.自定义行列表格

<script type="text/javascript">

//			document.write("后");
//			document.write("盾");
//			document.write("人");
			
			var rows = prompt('请输入行数');
			var cols = prompt('请输入列数');
			
			
//			js的字符串中不能换行
			document.write("<table border='1'>");
			for (var i=1;i<=rows;i++) {
				if (i%2==1) {//奇数行
					document.write("<tr class='hd'>");
				}else{
					document.write("<tr>");
				}
				
				for (var j=1;j<=cols;j++) {
					document.write("<td>"+i+"行"+j+"列</td>");
				}
				document.write("</tr>");
			}
			document.write("</table>");
			
		</script>

在这里插入图片描述
5.转换数值类型
Number

<script type="text/javascript">
   // 转换成数值类型
//   var result = Number('123.456');
//   真为1,假为0
   // var result = Number(1<3);
   var result = Number(3.1415926000000000000);
//   var houdun;
//   只识别字符串
   // var result = Number(houdun); 
//   var result = Number('0000000001.230000000000000');
//   var result = Number('');
//   var result = Number('后盾人');
   
   console.log(result);
   console.log(typeof result);
   
  </script>

parseFloat

<script type="text/javascript">
   // 转换为小数
   // var result = parseFloat('0001.230000');
   // var result = parseFloat('5');
   // var result = parseFloat(5);
   var result = parseFloat('后盾人');
   console.log(result);
   console.log(typeof result);
   
  </script>

parselnt

<script type="text/javascript">
//   parseInt将数据的整数部分提取出来
   // var result = parseInt('0000123.93300000');
   // var result = parseInt('66px');
//   第二个参数表示第一个参数的进制
//   将8进制的123转成十进制数字
   var result = parseInt(123,8);
   console.log(result);
   console.log(typeof result);
  </script>

isNaNAN

<script type="text/javascript">
//   isNaN用来判断数据是否不能转成数字
//   不能转成数字,返回true
//   能转成数字,返回false
//   var result = isNaN('后盾人');false
   var result = isNaN('123');
//   var result = isNaN(666);
   console.log(result);
  </script>

eval

<script type="text/javascript">
//   eval用js语法解析字符串的内容
   var str = '1+1';
   var result = eval(str);
   console.log(result); 
  </script>

使用转换数组类型进行自定义运算

<script type="text/javascript">
   var x = prompt('请输入第一个数字');
   var charset = prompt('请输入运算符+-*/');
   var y = prompt('请输入第二个数字');
   
   console.log(x+charset+y);   
   var result = eval(x+charset+y);
   
   console.log(result);
  </script>
3.语句

1.if

<script type="text/javascript">
			
			var grade = prompt('请输入你的分数');
			
//			嵌套分支
//			if (grade>=60) {
//				if () {
//					
//				}
//			}
			
//			多路分支
			if (grade>=90) {
				document.write("火云学神");
			}else if(grade>=80){
				document.write("学霸");
			}else if(grade>=70){
				document.write("学的还行");
			}else if(grade>=60){
				document.write("学痞");
			}else if(grade>=30){
				document.write("学渣");
			}else if(grade>=10){
				document.write("学渣渣");
			}else{
				document.write("开心就好~");
			}
			if(3<grade<5){
				document.write('大师')
			}
						
//			单路分支
//			if (grade>=60) {
//				document.write('及格了');
//			}


//			双路分支
//			if (grade>=60) {
//				document.write('及格了');
//			}else{
//				document.write("不及格");
			
		</script>

2.switch

<script type="text/javascript">
			
//			switch如果判断成功,会执行对应的代码,以及他后面的判断,不再判断,直接执行相关代码
//			case判断的时候,要求所对比的数据和待对比的值,内容和类型一样
//			prompt接收到的结果是字符串类型
			
			var gift = prompt('请输入你的奖品序号')*1;
			
			switch(gift){
				case 1:
					document.write('iphone手机');
					break;
				case 2:
					document.write("宝马汽车");
					break;
				case 3:
					document.write("六个苹果");
					break;
				case 4:
					document.write("一台平板电脑");
					break;
				default:
					document.write("请认真输入");
			}
			
		</script>

3.while

<script type="text/javascript"> 
//   while(饿){
//    吃一口
//   } 
//   for循环一般指定具体的次数
//   while循环一般不指定具体次数
//   但是,不论什么循环,一定是要有结尾的,否则就是死循环
   var age = 18;
   
   while(age<=50){
    document.write(age+"岁领一万块钱<br />");
    age++;
   }
  </script>
 </head>

4.do while

<script type="text/javascript">
   var age = 6;  
//   while(age<=50){
//    document.write(age+"岁领一万块钱<br />");
//    age++;
//   }
//   while循环是先判断后执行
//   do while循环是先执行一次,然后再判断
   do{
    document.write(age+"岁领一万块钱<br />");    
   }while(age<=50)
   age++;
  </script>
4.函数

1.函数

var a = function(){
}
a();

2.带参数

//   创建函数时传入的没有实际值的变量叫形参
//   调用函数的时候,传入的具体值,叫实参
   function pf(x){
    var result = x*x;
    alert(result);
   }
   
   pf(5);
   pf(123);
function add(x,y){
    var result = x+y;
    alert(result);
   }
   
   
   add(123,321);
   add(1,2);

3.return

1.构造函数

<script type="text/javascript">
   
//   构造函数(类)
   function ren(){
    this.name = '名字';
    this.sex = '性别';
    this.height = '身高';
    this.weight = '体重';
    this.look = function(){
     alert('能看见东西');
    };
    this.run = function(){
     alert('能跑');
    };
   }
   ren(ren);
//   通过构造函数实例化具体对象
   var xiawa = new ren();
   xiawa.name = '夏娃';
   document.write(xiawa.name);
   xiawa.sex = '女孩';
   document.write(xiawa.sex);
   
   
   var yadang = new ren();
   yadang.name = '亚当';
   document.write(yadang.name);
//   执行对象里的方法
   yadang.run();
   
//   追加新属性和新方法
   yadang.wenshen = '两只皮皮虾';
   document.write(yadang.wenshen);
   yadang.tree = function(){
    alert('会爬树');
   }
   yadang.tree();
   
  </script>

2.遍历

<script type="text/javascript">
   
   var auas = {
    price:'8000元',
    size:'15.6寸',
    weight:'3kg',
    color:'黑色',
    game:function (){
     alert('玩游戏')
    },
    chat:function(){
     alert('聊天')
    }
   };
   
//   x表示当前遍历到的属性的属性名字字符串形式,auas表示提用auas数组
   for (x in auas) {
    document.write(x+'=>'+auas[x]+'<br />');
   }
   
   
   
  </script>

3.删除对象属性

比如删除price

   delete auas.price

5.数组

1.数组

<script type="text/javascript">			
//			数组里的每一个数据都是独立的
//			数组里每个数据可以是任意合法类型
//			数组中的元素序号(下标)从0开始
//			数组是数据存储方式,其数据类型是对象object					
//			隐式声明数组
//			var fruits = ['苹果','鸭梨','香蕉','西瓜','桔子','葡萄'];
//			document.write(typeof fruits);
//			通过构造函数创建数组
			var fruits = new Array('苹果','鸭梨','香蕉','西瓜','桔子','葡萄');			
			document.write(fruits);
			document.write("<br />");
//			document.write(fruits[2]);
//			重新赋值数组元素
			fruits[2] = '火龙果';
			document.write(fruits);						
		</script>

2.数组特点

<script type="text/javascript">
//			数组可以先创建再赋值
//			var fruits = [];
//			var fruits = new Array();
//			fruits[0] = '苹果';
//			fruits[1] = '桔子';
			var fruits = ['苹果','鸭梨','香蕉','西瓜','桔子','葡萄'];
//			数组长度
//			document.write(fruits.length);
//			往数组最后追加元素
			fruits[fruits.length] = '火龙果';
			fruits[fruits.length] = '榴莲';			
			document.write(fruits);	
		</script>

3.数组遍历

<script type="text/javascript">			
			var fruits = ['苹果','鸭梨','香蕉','西瓜','桔子','葡萄'];
//			数组遍历
			for (var i=0;i<fruits.length;i++) {
				document.write(fruits[i]+'很好吃<br />');
			}
//			document.write(fruits[0]+'很好吃<br />');
//			document.write(fruits[1]+'很好吃<br />');
//			document.write(fruits[2]+'很好吃<br />');
//			document.write(fruits[3]+'很好吃<br />');	
//			写一个函数,传入一个数组,返回数组的最大值
//			var arr = [1,56,23,6,43,87,3,5,55];
//			var result = max(arr);	
		</script>

4.二维数组

<script type="text/javascript">
//			山东 北京 上海 重庆  四川
			var jingdian = [
				['泰山','水泊梁山','三孔','青岛海滩','大明湖'],
				['天安门','天坛','长城','故宫','地坛','鸟巢'],
				['城隍庙','迪士尼','外滩'],
				['洪崖洞','磁器口古镇','解放碑','长江索道'],
				['九寨沟','峨眉山','乐山大佛']
			];
//			document.write(jingdian.length);
//			取得数组
			document.write(jingdian[1][2]+"<br />");
			document.write(jingdian[2][0]+"<br />");
			document.write(jingdian[2].length)
		</script>
<script type="text/javascript">
//			山东 北京 上海 重庆  四川
			var jingdian = [
				['泰山','水泊梁山','三孔','青岛海滩','大明湖'],
				['天安门','天坛','长城','故宫','地坛','鸟巢'],
				['城隍庙','迪士尼','外滩'],
				['洪崖洞','磁器口古镇','解放碑','长江索道'],
				['九寨沟','峨眉山','乐山大佛']
			];			
//			遍历二维数组,jingdian表示数组个数
			for (var i=0;i<jingdian.length;i++) {
//				循环jingdian[i]数组,jingdian[i]数组中的元素个数。
				for (var j=0;j<jingdian[i].length;j++) {
					document.write(jingdian[i][j]+'很好玩、');
				}
				document.write("<br />");
			}
//			document.write(jingdian[0][0]+'很好玩、');
//			document.write(jingdian[0][1]+'很好玩、');
//			document.write(jingdian[0][2]+'很好玩、');
//			document.write(jingdian[0][3]+'很好玩、');
//			document.write(jingdian[0][4]+'很好玩、');
//			document.write(jingdian[1][0]+'很好玩、');
//			document.write(jingdian[1][1]+'很好玩、');
//			document.write(jingdian[1][2]+'很好玩、');
//			document.write(jingdian[1][3]+'很好玩、');
//			document.write(jingdian[1][4]+'很好玩、');
		</script>

5,取数组最大值

<script type="text/javascript">
			function max(ar){
//				arr[0]表示从数组第一个数开始
				var x = ar[0];
//				循环数组
				for (var i=1;i<ar.length;i++) {
//					如果arr[i]大于x,就让x存储arr[i]
//					if (i>x) {
					if (ar[i]>x){
						x = ar[i];
					}
				}
				return x;
}
//			这是外部的arr,不能调用函数里面的对象
//			var arr = 
//			var resut = max(arr)
			var sz = [1,56,213,6,43,87,3,5,55];
			var result = max(sz);
			document.write(result);
		</script>

6.去最长二维数组

<script type="text/javascript">
			function max(arr){
				var x = 0;//x用来存储长度最长的子数组序号
				for (var i=0;i<arr.length;i++) {
					if (arr[i].length>arr[x].length) {
						x = i;
					}
				}
				return x;
			}	
			var jingdian = [
//				['泰山','水泊梁山','三孔','青岛海滩','大明湖'],
//				['天安门','天坛','长城','故宫','地坛','鸟巢'],
//				['城隍庙','迪士尼','外滩',1,1,1,1,1],
//				['洪崖洞','磁器口古镇','解放碑','长江索道'],
//				['九寨沟','峨眉山','乐山大佛'],
				[1,1,1,11,1,1],
				[1,1,1,1,11,1,1,1,1],
				[1,1,1,1]				
			];			
			var result = max(jingdian);
			document.write(result);
		</script>

6.字符串

1.字符串类型

<script type="text/javascript">
			
//			
			var arr = [1,2,3];
//			对象构造函数,会输出function Array() {[native code]},Array
			document.write(arr.constructor);
			
			
//			var url = '后盾人www.houdunren.com';
			字符串长度
//			document.write(url.length);
			获取对象位置字符
//			document.write(url[7]);

//			document.write(url.constructor);
//			获得4号位置上的字符

//			var result = url.charAt(4);
//			获得4号位置上字符的Unicode编码,计算机识别字符的编码
//			var result = url.charCodeAt(4);
			
//			将Unicode编码转成原始字符
//			var result = String.fromCharCode(119);
			
			
			var str = 'www.houdunren.com';
//			获得ou在字符串中首次出现的位置
//			var result = str.indexOf('ou');
//			var result = str.indexOf('u');
//			获得u在字符串中最后一次出现的位置
			var result = str.lastIndexOf('u');
			document.write(result);			
		</script>

2.字符串对象
match

<script type="text/javascript">
			
			var str = 'www.houdunren.com';
//			如果能搜索到,返回搜搜索的内容
//			如果没有搜索到,返回null
			var result = str.match('un');
			if(result){
				document.write("搜索到了");
			}else{
				document.write("没有搜索到");
			}
			
		</script>

repalace,替换
只能替换一个

<script type="text/javascript">
			
			var str = '1113234111,123213111';
//			replace 只替换搜多到的第一个字符串
			var result = str.replace('111','***');
			var result = str.replace('111','***');
			document.write(result);
			
		</script>

替换所有

<script type="text/javascript">
			
			var str = '1113234111,123213111';
			
//			while(字符串中有后盾人){
//				将第一个后盾人替换成***
//			}

			while(str.match('111')){
				str = str.replace('111','***');
			}
			
			document.write(str);
		</script>

还可以用if语句

<script type="text/javascript">
			var str = '后盾人培训-后盾人在线学习-后盾人QQ群-后盾人客服';
			for(a=0;a<100;a++){
				if(str.match('后盾人')){
					str = str.replace('后盾人','***');
				}
			}
			document.write(str);
		</script>

slice

<script type="text/javascript">
			
			var str = 'houdunren.com';
//			截取字符
//			var result = str.slice(3,6);

//			从3号开始,截取3个字符
			var result = str.substr(3,3);
			document.write(result);
		</script>

split

<script type="text/javascript">
			
			var str = '后盾人培训-后盾人在线学习-后盾人QQ群-后盾人客服';
//			将字符串转换成数组
			var result = str.split('盾');
			document.write(result);
			
		</script>

大小写转换

<script type="text/javascript">
			
			var str = 'HouDunRen';
//			大小写的转换
			document.write(str.toLowerCase());
			document.write(str.toUpperCase());
			
		</script>

查询位置

<script type="text/javascript">
			
			var str = '后盾人视频下载地址:www.houdunren.com,线下实战:www.houdunwang.com,在线学习平台:www.houdunren.com';
			
//			while(字符串中有houdun){
//				获得houdun第一次出现的位置,并存储
//				将第一次出现的houdun替换成等长的其他字符
//			}
			
			var result = [];
			
			while(str.match('houdun')){
//				查找houdun第一次出现的位置
				var index = str.indexOf('houdun');
//				将houdun第一次出现的位置存储
				result.push(index);
//				将第一个houdun替换成其他字符
				str = str.replace('houdun','*******');
			}
//			不更改字符的方法
			var str = '后盾人视频下载地址:www.houdunren.com,线下实战:www.houdunwang.com,在线学习平台:www.houdunren.com';
			
			document.write(result);
			document.write(str);
			
		</script>

7.随机数

1.数字对象

<script type="text/javascript">
//			取绝对值
//			var result = Math.abs(6);

//			四舍五入(结果是整数)
//			var result = Math.round(2.49);
//			var result = Math.round(2.5);
			
//			向上取整
//			整数向上向下取整结果都是他本身
//			向上
//			var result = Math.ceil(5.1);6
//			向下
//			var result = Math.floor(5.1);5
//			var result = Math.floor(6.9);6
			
			
			document.write(result);			
						

2.随机数

<script type="text/javascript">
			
			
//			取0-1之间的随机数
//			取值范围是无限接近于0和1
//			var result = Math.random();
			
//			取0-5之间的随机数
//			var result = Math.random()*5;
			
//			取10-15之间的随机数
//			var result = Math.random()*(15-10)+10;
			
//			取x-y之间的随机数
//			Math.random()*(y-x)+x;
			
//			var result = Math.random()*(26-11)+11;

//			var result = Math.round(Math.random()*(15-10)+10);

//			取10-15之间的随机整数(可以取到10和15)
//			var result = Math.floor(Math.random()*(16-10)+10);
			
//			取x-y之间的随机整数(可以取到x和y)
//			Math.floor(Math.random()*(y+1-x)+x);
			
			var result = Math.floor(Math.random()*(49+1-22)+22);
			
			document.write(result);
			
		</script>

3.随机点菜

<script type="text/javascript">
			
//			3/将随机下标对应的数组元素输出
//			1/将菜名写到数组中
//			2/随机数组下标

			var cai = ['土豆丝','油焖大虾','麻婆豆腐','宫保鸡丁','佛跳墙','重庆火锅','北京烤鸭'];
			var x = Math.floor(Math.random()*(cai.length-1+1-0)+0);
			document.write("今天中午吃:"+cai[x]);
			
			
			
		</script>
<script type="text/javascript">


			var cai = ['土豆丝','油焖大虾','麻婆豆腐','宫保鸡丁','佛跳墙','重庆火锅','北京烤鸭'];
			
			var y = Math.random()*10;
			if (y<8) {
				document.write("今天中午吃:"+cai[0]);
			}else{
				var x = 				Math.floor(Math.random()*(cai.length-1+1-0)+0);
				document.write("今天中午吃:"+cai[x]);
			}
						
		</script>
8.未分类知识

1.BMO

<script type="text/javascript">
//			window对象下直接的方法和属性,在调用的时候不用加window
//			alert('后盾人');

//			全局变量和自定义函数,都属于window对象的属性和方法
//			var hd = '后盾人';
//			document.write(window.hd);
			
			function foo(x){
				return x*x;
			}
			
			document.write(window.foo(4));
			
			
		</script>

2.confirm

<script type="text/javascript">
//			window对象下直接的方法和属性,在调用的时候不用加window
//			alert('后盾人');

//			全局变量和自定义函数,都属于window对象的属性和方法
//			var hd = '后盾人';
//			document.write(window.hd);
			
			function foo(x){
				return x*x;
			}
			
			document.write(window.foo(4));
			
			
		</script>

9.定时器

<script type="text/javascript">
			
			function foo(){
				alert('后盾人');
			}
			
//			foo();
			
			
//			每隔2000毫秒,执行一次foo函数

//			类似于闹铃,每隔24小时执行一次
//			setInterval(foo,2000);

			
//			定时炸弹
//			3000毫秒后,执行一次foo函数
//			setTimeout(foo,3000);

			
//			定时器两种传参写法
//			setInterval(function(){
//				alert('hahahha');
//			},2000)
						
		</script>
<script type="text/javascript">
			
			var timer = setInterval(function(){
				alert('后盾人');
			},2000)
			
			
//			document.write("后盾人-----");
			
			setTimeout(function(){
//				清理定时器
				clearInterval(timer);
			},5000);
			
			
			
		</script>

10.事件

<script type="text/javascript">
//			document.getElementById('dog').onclick = function(){
//				alert('汪汪汪~~~');
//			}
		</script>
<script type="text/javascript">
			
			function foo(){
				alert('汪汪汪~~~~');
			}
			
		</script>
	</head>
	<body>
		
		<!--通过html标签绑定事件-->
		<img src="jinmao.jpg" id="dog" onclick="foo()" />
		
		
	</body>

3.获得和设置行内样式

<style>
			*{
				padding:0;
				margin: 0;
			}
			#btn{
				margin: 20px;
			}
			#hd{
				height: 200px;
				background: mediumpurple;
			}
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var btn = document.getElementById("btn");
				var hd = document.getElementById("hd");
				
//				给按钮加单击事件
				btn.onclick = function(){
//					获得元素的行内样式
//					var w = hd.style.width;
//					alert(w);
					
//					设置行内样式
//					hd.style.width = '400px';
					
					var ml = hd.style.marginLeft;
					alert(ml);
				}
			}
			
		</script>
	</head>
	<body>
		
		<input type="button" id="btn" value="点我啊" />
		<br /><br />
		
		<div id="hd" style="width: 300px;margin-left: 20px;"></div>
		

	</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值