当前位置：移动技术网 > IT编程>开发语言>JavaScript > Javascript知识点总结（一）

Javascript知识点总结（一）

2020年07月24日 | 移动技术网IT编程 | 我要评论

Javascript知识总结（一）

一、走进javascript
二、初始javascript

（一）JS编写的最佳位置
（二）获取标签元素并进行操作
（三）JS输出及调试方式
（四）JS常见的事件
（五）变量和数据类型

三、函数

（一）函数的定义与调用
（二）函数传参取参
（三）变量作用域
（四）函数返回值

四、程序的流程控制

实例1（JS判断）
实例2（JS循环）
实例3(break&continue)
实例4（真和假）
实例5（逻辑运算符）

一、走进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 空对象，undeﬁned 未定义
复杂数据类型：数组 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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站：返回顶部我们可以用锚点链接来实现，但是锚点链接它突... [阅读全文]
JS函数传参时值传递与引用传递的区别

大家都知道在计算机内存中js的数据类型分为基础数据类型和引用数据类型基础数据类型number / string ... [阅读全文]
JavaScript开发中如何防抖(前端更好的用户体验)

在前端开发中会遇到一些频繁的事件触发，比如：resize、scroll、mousedown、mousemove、... [阅读全文]
做一个网页送给心动女孩子生日礼物(表白也合适)

如何做一个网页送给女朋友做生日礼物本文里面涉及到python，HTML ，css,JavaScript的知识，是... [阅读全文]
three.js 制作动态二维码的示例代码

今天郭先生说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，这是郭先生的微信二维码哦！1. 解析图片流canvas = docum... [阅读全文]
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！

最近线上监控 SFTP 连接频繁爆表，通过重启某个系统，连接数迅速下降，系统就能恢复正常，初步判断是应用程序连接... [阅读全文]
Redis实现自定义序列化方式

1. 如何实现redis的序列化？序列化：把对象转换为字节序列的过程称为对象的序列化。反序列化：把字节序列恢复为... [阅读全文]
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇

基本数据类型：String,Boolean,Number,Undefined,Null引用数据类型：Object... [阅读全文]
方法和构造方法的区别

一、为什么要有构造方法本来已经有方法了，为什么要有构造方法呢？我们知道，方法是指参数经过一定的 ... [阅读全文]
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑

今天在整合smm项目时：遇到两个错误，分享给各位Failed to load or instantiate Ta... [阅读全文]