欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Javascript知识点总结(一)

程序员文章站 2022-06-22 09:14:10
一、走进javascript什么是JS?JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语⾔,内置⽀持类型JavaScript是当今最流⾏的脚本语言,我们生活中看到的网页和基于html5的app⾥⾯的交互逻辑都是由javascript驱动的一句话概括就是javascript是一种运行在浏览器中的解释型的编程语⾔JS由什么组成ECMAScript : 解释......

一、走进javascript

什么是JS?

  • JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语⾔,内置⽀持类型
  • JavaScript是当今最流⾏的脚本语言,我们生活中看到的网页和基于html5的app⾥⾯的交互逻辑都是由javascript驱动的
  • 一句话概括就是javascript是一种运行在浏览器中的解释型的编程语⾔

JS由什么组成

  • ECMAScript : 解释器、翻译者 (描述了该语⾔的语法和基本对象) 它是javascript的标准
  • DOM : Document Object Model 文档对象模型 W3C是DOM的标准
  • BOM : Browser Object Model 浏览器对象模型 缺乏标准

二、初始javascript

(一)JS编写的最佳位置

  • 一般情况下JS是写在页⾯的任何位置都可以的,需要script标签包着,但是别写在html标签外

  • 最常见的是写在head标签内部和body内部

  • 写在head标签内需要写上window.onload包着,要不然会报错,因为执行js时页⾯标签还没加载,window.onload的作用是当页⾯加载完成后自动触发事件(一个页面应该只有一个window.onload事件,因为如果写多个的话会覆盖只执行最后⼀个)

  • 总结:js理应写在body结束标签之前

(二)获取标签元素并进行操作

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#tim{
			width: 200px;
			height: 200px;
			border:1px solid black;
			margin:0 auto;
		}
	</style>
</head>
<body>
	<div id="tim" class="xiaod"></div>
	<script type="text/javascript">
		//返回这个id名的元素
		// document.getElementById('tim').style.background='red'
		//返回所有这个标签名的元素的集合  获取到的是一个集合,拥有数组的特性
		// document.getElementsByTagName('div')[0].style.background='black'
		//通过classname获取到的也是一个集合
		// document.getElementsByClassName('xiaod')[0].style.background='yellow'
		//document.querySelector("css任意选择器") 返回第一个
		// document.querySelector("div").style.background='black'
		//document.querySelectorAll("css任意选择器")  返回符合的所有
		document.querySelectorAll("div")[0].style.background='red'
	</script>
</body>
</html>

(三)JS输出及调试方式

  • 弹窗型输出:alert(‘输出内容’)
  • 浏览器调试窗口输出:console.log(‘输出内容’)
  • innerHTML和innerText给获取到的元素一些内容:document.getElementById(‘id名’).innerHTML=‘内容’
  • document.write(‘输出内容’),输出内容会清空原有的html再生成一个新的html
    注意,我们的document.write()重写文档是发生在文档加载完成后事件触发里面

(四)JS常见的事件

JS事件就是我们的行为能被侦测到,且触发相对应的函数(函数里面写我们要做的事情)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#tim{
			width:300px;
			height: 300px;
			background:red;
			margin: 0 auto;}
	</style>
</head>
<body>
		<div id="tim"></div>
		<input type="" name="" id="xd">
		<script type="text/javascript">
			//点击事件
			document.getElementById("tim").onclick=function(){
				//函数里面写我们要做的事情
				alert('我是被点击了')
			}
			//鼠标移入事件
			document.getElementById("tim").onmouseover=function(){
				console.log('鼠标移入我的范围内了')
			}
			//鼠标移出事件
			document.getElementById("tim").onmouseout=function(){
				console.log('鼠标移出我的范围内了')
			}
			//元素改变事件,一般用在表单元素
			document.getElementById('xd').onchange=function(){
				console.log(document.getElementById('xd').value)
			}
			//键盘事件,按下键盘事件
			document.getElementById('xd').onkeydown=function(){
				console.log('键盘按下了')
			}
			//获取焦点事件
			document.getElementById('xd').onfocus=function(){
				console.log('我获取到焦点了')
			}
			//失去焦点事件
			document.getElementById('xd').onblur=function(){
				console.log('我失去焦点了')
			}
		</script>
</body>
</html>

(五)变量和数据类型

如何定义变量(创建变量):用var来定义变量 var name
变量的首字⺟必须是由字母(a-zA-Z)或下划线(_)或美元符
($)开头,不能是数字,后面的可以是字母或下划线或美元符或者是数字,并且是区分大小写的

基础数据类型:字符串 string,数字(整型浮点型) number,布尔 boolean ,null 空对象 ,undefined 未定义
复杂数据类型:数组 Array,对象 Object
检测数据类型的两种基本⽅方法:typeof,Object.prototype.toString.call(‘数据’) //鉴别复杂数据类型、引用数据类型

数据类型转换

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
			var a='123'
			var b='abc'
			//强制类型转换(显式转换)
			console.log(a,"类型:"+typeof(a))
			console.log(a,"用number进行类型转换之后的类型:"+typeof(Number(a)))
			//用number转换一个是字符串类型,但内容不是数字
			console.log(b,"类型:"+typeof(b))
			console.log(b,Number(b),"用number进行类型转换之后的类型:"+typeof(Number(b)))
			//NaN是not a number的缩写 意思是 不是一个数字
			var c='3.1415926abc'
			console.log(c,'整形转换:'+parseInt(c))
			console.log(c,'浮点型转换:'+parseFloat(c))
			var d=123456
			console.log(d,String(d),typeof(String(d)))
			console.log(d,d.toString(),typeof(d.toString()))
			console.log(d,Boolean(d))
			//隐式转换
			//数字跟数字相加,不用转换类型
			// var sum
			// sum=1+2
			// console.log('sum='+sum)
			//数字跟字符串相加 发生类型转换,会变成字符串之间的拼接,就是把我们的数字1变成了字符串‘1’
			var sum
			sum=1+'2'
			console.log('sum='+sum,typeof(sum))
			if(12=='12'){
				console.log('判断成立了,我被执行了')
			}
	</script>
</body>
</html>

复杂数据类型
数组创建:

  • 直接创建:var arr=[] //创建空数组
    var arr1=[1,2] //创建有内容的数组
  • 利用构造函数创建:var arr1 = new Array();//创建空数组
    var arr2 = new Array(10);//创建⼀个长度为10的数组
    var arr3 = new Array(5,4,3,2,1);//创建数组并初始化

对象创建

  • 直接创建:var obj={} //创建空对象
    var obj1={a:1,b:2} //创建有内容的对象
  • 利用构造函数创建:var obj=new Object()

三、函数

(一)函数的定义与调用

1.函数定义

  • function fun(){console.log(1)}
  • var fun=function(){console.log(2)}
  • (function fun(){}) //函数表达式声明方式,只在括号内起作用,外部无法访问
  • var fun= new Function(console.log(3)) //这种方式函数会自调用(函数自己完成调用动作)

2.函数调用
fun()
3.补充命名规范

  • 变量 小驼峰命名法
    第一个单词以小写字母开始,从第二个单词开始以后的每个单
    词的首字母都采用大写字母
  • 函数名 跟变量一样
  • 常量 全大写,单词间用下划线隔开(_)

4.实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">

		#tim{
			width: 100px;
			height: 100px;
			background: red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<button id="taller" onClick="taller()">增高</button>
	<button id="longer" onClick="longer()">增长</button>
	<button id="changebg" onClick="changebg()">改变背景颜色</button>
	<div id="tim" ></div>
	<script type="text/javascript">
		//获取到要改变的div  id为tim
			var oDiv=document.getElementById('tim')
			//写点击增高的按钮时需要调用的函数
			var taller=function(){
					oDiv.style.height='300px'
			}
			//写点击增长的按钮时需要调用的函数
			function longer(){
					oDiv.style.width='300px'
			}
			//写点击改变背景颜色的按钮时需要调用的函数
			function changebg(){
					oDiv.style.background='black'
			}
		// window.οnlοad=function(){
		// 	//给我们的增高按钮添加点击事件
		// 	document.getElementById('taller').οnclick=function(){
		// 		//获取id名为tim的div
		// 		document.getElementById('tim').style.height='300px'
		// 	}
		// 	//给我们的增高长按钮添加点击事件
		// 	document.getElementById('longer').οnclick=function(){
		// 		//获取id名为tim的div
		// 		document.getElementById('tim').style.width='300px'
		// 	}
		// 	//给我们的改变背景颜色按钮添加点击事件
		// 	document.getElementById('changebg').οnclick=function(){
		// 		//获取id名为tim的div
		// 		document.getElementById('tim').style.background='black'
		// 	}
		// }
	</script>
</body>
</html>

(二)函数传参取参

1.普通传参取参
实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#tim{
			width: 100px;
			height: 100px;
			background: red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<button id="taller" onClick="change('height','300px')">增高</button>
	<button id="longer" onClick="change('width','300px')">增长</button>
	<button id="changebg" onClick="change('background','black')">改变背景颜色</button>
	<div id="tim" ></div>
	<script type="text/javascript">
		//获取到要改变的div  id为tim
			var oDiv=document.getElementById('tim')
			function change(styleattr,value){
				//两种写法是一样的,但是如果需要传入变量就需要用第二种
					// oDiv.style.styleattr=value
					oDiv.style[styleattr]=value
			}
	</script>
</body>
</html>

2.不定参
场景:需要写一个方法来做求和,但是不知道传入的参数有多少个
例如函数名是sum 调用的时候可能是sum(1,2,3,4,5),也有可能是sum(1,2,3,4) 这个时候该怎么编写这个求和函数呢?
实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//利用arguments来编写一个求和函数
		function sum(){
			var sum=0
			for(var i=0;i<arguments.length;i++){
				sum=sum+arguments[i]
			}
			console.log(sum)
		}
		sum(1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10)	
	</script>
</body>
</html>

(三)变量作用域

变量分为局部变量和全局变量

  • 局部变量 只在定义的函数内部使用
  • 全局变量 可以在整个script作用域内都可以使用
  • 作⽤用域链,只有在自己当前的小作用域内找不到才会向父级作用域寻找,直到找不到为止(存在同名变量时,在当前作用域内局部变量 会覆盖全局变量,局部变量优先级比较高)
  • 闭包简单理解:可以调用函数内部变量的函数

(四)函数返回值

实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<script type="text/javascript">
			//函数不写返回值会默认返回undefined
			function fun(){
				var tim=10
				var xd=20
				var obj={'tim':tim,'xd':xd}
				return obj
			}
			console.log(fun())
		</script>
</body>
</html>

四、程序的流程控制

实例1(JS判断)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		var a=9
		//判断  一个=表示赋值   两个==是判断左右两边是否相等 还会进行类型的转换
		//三个===是全等的类型,意思是不会转换类型 ,要判断===左右两边的类型和值都相等才会返回true
		// if(a==10){
		// 	console.log('a等于10是成立的')
		// }else{
		// 	console.log('a等于10是不成立的')
		// }

		// if(a=='11'){
		// 	console.log('两个==会转换类型')
		// }else if(a==10){
		// 	console.log('a等于10是成立的')
		// }else{
		// 	console.log('a不等于10 也不等于11')
		// }

		//全等是三个=== ,需要左右两边的类型和值都一样才返回true
		// if(a==='9'){
		// 	console.log('现在的是指和类型都相等')
		// }else{
		// 	console.log('现在的是指和类型不全相等,有可能是值不相等,有可能是类型不相等,也有可能两者都不相等')
		// }

		//三目运算    条件?'成立执行冒号前面的': '不成立执行冒号后面的'
		// var b=10
		// b==='10'?console.log('成立'):console.log('不成立')

		//switch  case 的高级用法
		function fun(type){
			switch(type){
				case 0:
				console.log('传入的条件是0');
				break;
				case 1:
				console.log('传入的条件是1');
				break;
				case 2:
				console.log('传入的条件是2');
				break;
				case 3:
				console.log('传入的条件是3');
				break;
				case 4:
				console.log('传入的条件是4');
				break;
				default:
				console.log('我是默认的,就是上述条件都不成立就输出我');
				break;
			}
		}
		fun(0)
	</script>
</body>
</html>

实例2(JS循环)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//第一种 while循环
		//1、创建循环变量
		// var tim =10
		// //2、判断循环条件
		// while(tim>=5){
		// 	//3、判断成立就执行循环体里面的操作
		// 	console.log(tim)
		// 	//4、更新循环变量
		// 	tim=tim-1
		// 	// tim--
		// }

		//  do  while 循环
		//创建循环变量
		// var tim = -1;
  //           //即使初始条件不成立,循环体内容还是会执行一次
		// do{
		// 	//执行循环体内容
		//     console.log(tim);//10 9 8 7 6 5 4 3 2 1 0
		//     //更新循环变量
		//     tim--;
		//     }while(tim>=0);//判断循环条件
	            
		// console.log(tim);//-1

		//for循环  一般拿来循环数组
		// var arr=['篮球','足球','乒乓球','羽毛球','排球']
		// console.log(arr.length,arr[4])
		// for(var i=0;i<arr.length;i++){
		// 	console.log(arr[i])
		// }


		//for in  一般拿来循环对象
		var  obj={a:'篮球',b:'足球',c:'乒乓球'}
		// console.log(obj.b)
		for(o in obj){
			// console.log(o)
			console.log(obj[o])
		}
	</script>
</body>
</html>

实例3(break&continue)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//break用于循环体内部跳出循环
		// for(var i=0;i<=5;i++){
		// 	if(i==3){
		// 		break;
		// 	}
		// 	console.log(i)
		// }
		// console.log(i,'我是循环体外的i,不是循环体内部的内容')
		//continue用于中断符合判断条件的当前迭代
		for(var i=0;i<=5;i++){
			if(i==3){
				continue;
			}
			console.log(i)
		}
		console.log(i,'我是循环体外的i,不是循环体内部的内容')
	</script>
</body>
</html>

实例4(真和假)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
			//判断里面的真假
			// 假:  false  数字0   空字符串   null  undefined  NAN
			//除了假的都是真的
			var  a={a:'1'}
			var key=true
			if(key){
				console.log('我是真的')
			}else{
				console.log('我是假的')
			}
	</script>
</body>
</html>

实例5(逻辑运算符)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
			//判断里面的真假
			// 假:  false  数字0   空字符串   null  undefined  NAN
			//与 &&   意思是判断条件都需要为真才返回真
			var  a=false  
			var  b=undefined
			var  c=null
			// if( a && b && c){
			// 	console.log('a和b都是真的')
			// }else{
			// 	console.log('a和b不全是真')
			// }

			//或  ||  只需要有一个条件成立为真  就返回真

			// if( a || b || c){
			// 	console.log('a或b或c有一个为真')
			// }else{
			// 	console.log('三者都为假')
			// }

			// !  非   真变成假  假变成真

			if(!a){
				console.log('a是假')
			}
	</script>
</body>
</html>

本文地址:https://blog.csdn.net/qq_45493915/article/details/105904237