Javascript知识点总结（一）

程序员文章站 2022-03-07 21:37:13

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

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

相关标签：网页学习 javascript js

上一篇： VUE的七种动态路由传参

下一篇：用DOS批处理实现建立文件夹的代码

Javascript知识点总结（一）

Javascript知识总结（一）

一、走进javascript

二、初始javascript

（一）JS编写的最佳位置

（二）获取标签元素并进行操作

（三）JS输出及调试方式

（四）JS常见的事件

（五）变量和数据类型

三、函数

（一）函数的定义与调用

（二）函数传参取参

（三）变量作用域

（四）函数返回值

四、程序的流程控制

实例1（JS判断）

实例2（JS循环）

实例3(break&continue)

实例4（真和假）

实例5（逻辑运算符）

javascript实现一个网页加载进度loading

SQL Server 总结复习(一)

JavaScript的for循环中嵌套一个点击事件的问题解决

JavaScript获取某一天所在的星期

总结一周内学习的Sql经验(一)

jq获取当前日期前一个月（javascript获取当前系统时间）

js的新生代垃圾回收知识点总结

JAVA基础知识点总结

Java关于桶排序的知识点总结

使用JavaScript为一张图片设置备选路径的方法