学习JavaScript

最新推荐文章于 2024-09-16 22:49:41 发布

Super@.烨

最新推荐文章于 2024-09-16 22:49:41 发布

阅读量111

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/sunliye145/article/details/118702859

版权

JavaScript

一、简介

JavaScript 是 Web 的编程语言，在现代浏览器中可以直接运行，并且他是一种轻量级编程语言，可以插在HTML中。

二、在Html用法

1.写在html页面中(且写在body下)

在这里插入图片描述

2.写在外部文件

通过 < script src=“js路径”> < / script> 调用

在这里插入图片描述

三、JS的注释

注释的作用：对代码含义进行解释说明

1.单行注释

//单行注释

2.多行注释

/*
多行注释
多行注释
*/
可以换行

3.文档注释

/**

文档注释：多作用与方法，类等
*/

四、输出语句

1.windows.alert();

作用：弹出提醒框
在这里插入图片描述
也可缩写为：alert();

<script>
		window.alert("Hi world");
		// alert("Hi world");
	</script>

2.document.write();

作用：输出到body中
在这里插入图片描述

<script>
		document.write("My God");
	</script>

3.innerHTML

作用：输出到指定标签
在这里插入图片描述

<body>
		<h1 id="title"></h1>
	</body>
	<script>
		document.getElementById("title").innerHTML ="Hi world";
	</script>

//更改h1标签里的文字信息

4.console.log();

作用：输出到浏览器控制台
在这里插入图片描述

<script>
		console.log("Hi world");
	</script>

控制台打开方法：普通电脑F12、个别电脑fn+F12

五、变量

变量时储存信息的容器

1.变量的声明

var（关键字） +标识符（变量的名称）；

<script>
		var a = 100;
		console.log(a)
	</script>

在这里插入图片描述

2.标识符命名规则

1.不能以数字或特殊符号开头

2.以字母开头或者可以使用$、_ 开头

3.可以用字母数字$_组合

4.不可以使用关键字进行命名

5.一般使用驼峰命名法（除一个单词外，其他字母首字母大写）

3.数据类型

1.普通类型
number数字型、string(“内容”)字符串型、boolean(true/false)布尔型、空的null、Undefined（未定义的）、Symbol
//typeof可以查看数据类型

<script>
		var a = 100;
		var b = "sun";
		var c = true
		console.log(typeof a,typeof b,typeof c)
	</script>

在这里插入图片描述

2.引用数据类型
Object对象、Array数组、Function函数

六、对象

对象是包含属性和方法的集合

1.对象的创建

1.通过字面量（直接赋值）

<script>
		var sun = {
			name:"s",
			age:18,
			height:180,
			drink:function(){
				document.write("he world")
			}
		}
		//方法的调用
		sun.drink()
		// 属性的调用
		console.log(sun.age)
	</script>

在这里插入图片描述
2.通过关键字 new Object()进行创建，在进行赋值

<script>
		var sun = new Object()
		sun.name = "孙"
		sun.age = 19
		sun.drink = function(){
			console.log("my god")
		}
		//属性的调用
		console.log(sun)
		console.log(sun.name,sun.age)
		//方法的调用
		sun.drink()
	</script>

在这里插入图片描述

七、函数

1.函数的创建

1.通过字面量

<script>
		var foo = function(){
			console.log('这是一个函数')
		}
		// 函数的调用
		foo()
	</script>

在这里插入图片描述
2.通过function直接定义

<script>
		function foo(){
			//  具体代码
			console.log('my god')
		}
		foo()
	</script>

在这里插入图片描述

2.函数的参数

形参：在定义函数时用来接收参数的变量
实参：在调用函数时传入的具体数据

<script>
		function sum(a,b){
			console.log(a+b)
		}
		sum(50,2)
	</script>

在这里插入图片描述

3.函数的返回值

通过return 关键字将结果进行返回，返回的结果可以进行保存，也可以直接打印

<script>
		function sum(a,b){
			// 计算a+b 将a+b的结果赋值给total
			var total = a+b
			// 返回结果
			return total
		}
		console.log(sum(10,20))
	</script>

在这里插入图片描述

八、函数的作用域

1.在函数内定义的变量叫局部变量
2.在函数外定义的变量叫全局变量
3.在函数内定义的变量在函数外是无法调用的
4.在函数外定义的变量在函数内是可以调用的

九、DOM元素

DOM元素就是网页中的标签、元素

1.DOM元素的获取方式

1.通过ID形式获取

<body>
		<h1 id="text">Hi JavaScript</h1>
	</body>
	<script>
		var a = document.getElementById('text')
		var b = a.innerHTML
		console.log(b)
	</script>

在这里插入图片描述
2.通过class（类）形似获取

document.getElementsByClassName('类名')

2.通过标签、元素形似获取

document.getElementsByTagName('标签名')

十、数组Array

1.数组的构造

1.通过new Object

<script>
		var array = new Array()
		array.push('a', 'b')
		console.log(array)
	</script>

2.通过字面量

<script>
		var array = ['a','b']
		console.log(array)
	</script>

2.数组中的方法

1.join()
将数组转换为字符串，并以一定的符号分隔开，如果为空值，默认是“ ， ”

<script>
		var a = ['s','u','n']
		var b = a.join()
		var c = a.join('-')
		console.log(b,c)
	</script>

在这里插入图片描述

2.push()/pop()
push()增添数组
pop()删除数组最后一项

<script>
		var a = ['s','u','n']
		var b = a.push('l','y')
		console.log(b,a)
		//var c = a.pop()
		//console.log(c,a)
	</script>

在这里插入图片描述

3.sort()
对数组内容进行升序排列

<script>
		var a = ['b','g','f','j']
		var b = a.sort()
		console.log(b)
	</script>

在这里插入图片描述

4.reverse()
反转数组项的序号

<script>
		var a =['a','c','g','n']
		var b = a.reverse()
		console.log(b)
	</script>

在这里插入图片描述

5.concat()
数组合并成一个新的数组，原数组不发生变化

<script>
		var a = ['s','u','n']
		var b = a.concat(9,['l','t'])
		console.log(b)
		console.log(b.length)
	</script>

在这里插入图片描述

6.slice()
获取数组里的参数
一个正值–获取正值之后的数组
两个值–获取第一个值之后，最后一个值之前，且不包括最后一个值
负值–负值加上数组总数

<script>
		var a = ['s','h','b','f','t']
		var b = a.slice(2)
		var c = a.slice(1,4)
		var d = a.slice(-2)
		var e = a.slice(-4,-2)
		console.log(b,c,d,e)
	</script>

在这里插入图片描述

7.splice()
删除： splice(删除开的的位置，删除的数量)
插入：splice(插入的位置，0，插入的内容)
替换：splice(替换的位置，被替换多少项，替换的内容)

<script>
		var a = ['q','w','e','r','t','y','u']
		//删除
		console.log(a.splice(4,2),a)
		//插入
		// console.log(a.splice(7,0,"m","h"),a)
		//替换
		// console.log(a.splice(1,2,"i","l"),a)
	</script>

在这里插入图片描述

8.indexOf()/lastindexOf()
查找数组中的内容，若可以查到，显示位置数，查不到，显示-1

<script>
		var a = ['q','w','e','r','t','y','u']
		console.log(a.indexOf("b"))
		console.log(a.indexOf('e'))
	</script>

在这里插入图片描述

3.数组的遍历

1.通过for循环

<script>
		var a = ['q','w','e','r','t','y','u']
		for(var i = 0;i<a.length;i++){
			console.log(a[i])
		}
		console.log('-------------')
		for(var i in a){
			console.log(a[i])
		}
	</script>

在这里插入图片描述

4.数组的迭代

1.forEach()
需要引入函数方式，函数有3个值item(数组中的项)、index(数组的下标)，arr(原数组)

<script>
		var a = [1,2,3,4,5,6]
		a.forEach(function(item,index,arr){
			console.log(item)
		})
	</script>

在这里插入图片描述
2.some()\every()
some:返回值有一个为真，全为真
every：返回值有一个为假，全为假

<script>
		var a = [1,2,3,4,5,6]
		var b = a.some(function(item,index,arr){
			return item > 4
		})
		console.log(b)
		var c = a.every(function(item,index,arr){
			return item > 4
		})
		console.log(c)
	</script>

在这里插入图片描述
3.fliter()
会找到符合返回值条件的所有项

<script>
		var a = [1,2,3,4,5,6]
		var d = a.filter(function(item,index,arr){
		return item>1
		})
		console.log(d)
	</script>

这段代码，他会返回数组中大于1的所有项
在这里插入图片描述
4.map()
对数组进行集中操作

<script>
		var a = [1,2,3,4,5,6]
		var b =  a.map(function(item,index,arr){
			return item + 1
		})
		console.log(b)
	</script>

这串代码，将数组里的每一项（item）+1
在这里插入图片描述
5.reduce()
对数组进行求和

<script>
		var a = [1,2,3,4,5,6]
		var b = a.reduce(function(pre,item,index,arr){
			return pre + item
		},0)
		console.log(b)
	</script>

对数组进行求和，pre,上一个的结果，要在函数后面赋值0
在这里插入图片描述

十一、事件

是通过用户进行触发的一些行为，比如点击，双击，键盘按下抬起等等都称为事件，
事件在触发的时候，会产生一个事件对象

1.事件的3种添加方式

1.在标签内添加事件名称，并调用对应的事件处理函数

<body>
		<button onclick="time()">点击</button>
	</body>
	<script>
	function time(){
		alert('点击了')
	}
	</script>

2.通过获取DOM对象，然后添加事件，并赋值事件的处理函数

<body>
		<button id="btn">点击</button>
	</body>
	<script>
		var btn = document.getElementById('btn')
		btn.onclick = function(){
			alert('点击了')
		}

3.通过监听的方式添加事件

<body>
		<button id="btn">点击</button>
	</body>
	<script>
		var btn = document.getElementById('btn')
		btn.addEventListener('click',function(){
			alert("点击了")
		})

2.鼠标事件

1.单击事件：onclick

	<script>
		var btn = document.getElementById('btn')
		btn.onclick = function(){
			alert('点击了')
		}
	</script>

2.双击事件：dblclick

	<script>
		var box = document.getElementById('box')
		box.ondblclick = function(){
			alert('双击了')
		}
	</script>

在这里插入图片描述
3.鼠标按下/抬起事件
按下：onmousedown
松开：onmouseup

<script>
		var box = document.getElementById('box')
		box.onmousedown = function(){
			console.log('鼠标按下')
		}
		box.onmouseup = function(){
			console.log('鼠标抬起')
		}
	</script>

在这里插入图片描述
4.鼠标进入/离开事件
进入：onmouseenter
离开：onmouseleave

<script>
		var box = document.getElementById('box')
		box.onmouseenter = function(){
			console.log('鼠标进入')
		}
		box.onmouseleave = function(){
			console.log('鼠标离开')
		}
	</script>

在这里插入图片描述
5.鼠标移动事件：onmousemove

<script>
		var box = document.getElementById('box')
		box.onmousemove = function(){
			console.log('鼠标移动了')
		}
	</script>

在这里插入图片描述
6.鼠标移入/移出
移入：onmouseover
移出：onmouseout

<script>
		var box = document.getElementById('box')
		box.onmouseover = function(){
			console.log('鼠标移入')
		}
		box.onmouseout = function(){
			console.log('鼠标移出')
		}
	</script>

在这里插入图片描述

3.键盘事件

1.按下/松开
按下：onkeydown
松开：onkeyup

<script>
		var a = document.body
		a.onkeydown = function(){
			console.log('按下')
		}
		a.onkeyup = function(){
			console.log('松开')
		}
	</script>

2.按下松开：onkeypress

var a = document.body
		a.onkeypress = function(){
			console.log('按了键盘')
		}

3.所按键位的检测

var code = event.keyCode || event.charCode || event.which

4.框架对象事件

1.页面加载事件：onload

<script>
		window.onload = function(){
			console.log('foo')
		}
	</script>

2.滚动事件：onscroll

<script>
		document.onscroll = function(){
			console.log('滚动了')
		}
	</script>

检测滚动条的位置

var scrollHeight = document.documentElement.scrollTop
			console.log(scrollHeight)

3.监听窗口大小：onresize

<script>
		window.onresize = function(){
			console.log('窗口发生了变化')
		}
	</script>

5.表单事件

1.获取/失去焦点
获取：onfocus
失去：onblur

<script>
		var a = document.getElementById('username')
		a.onfocus = function(){
			console.log('获取焦点')
		}
		a.onblur = function(){
			console.log('失去焦点')
		} 
	</script>

2.两种内容改变事件
第一种：失焦后显示onchange
第二种：改变就会显示oninput

<script>
		var a = document.getElementById('username')
		a.onchange = function(){
			console.log('文本内容被改变')
		}
		a.oninput = function(){
			console.log('内容发生改变')
		}
	</script>

3.表单提交事件：onsubmit

<script>
		var a = document.getElementById('btn')
		a.onsubmit = function(){
			alert('登录成功')
		}
	</script>

4.两种阻止事件的默认行为

            return false
			event.preventDefault()

在表单中，可以阻止表单的刷新

十二、字符串

字符串是用来存储和处理文本数据，比如：‘一句话’，‘a’,’123’,’true’

1.字符串的创建

1.通过字面量

var str = 'sun'

2.通过new Spring

var str = new String('sun')

2.方法

1.字符串的长度：length
2.返回指定位置的内容：charAt(index)

<script>
		/**
		 * 返回指定位置上的内容 一个值
		 */
		var str = 'q w e r t y u i o p'
		var a = str.charAt(8)
		console.log(a)
	</script>

3.返回指定位置的Unicode值:charCodeAt().

<script>
		/**
		 * 返回指定位置的Unicode值
		 */
		var str = 'q w e r t y u i o p'
		var a = str.charCodeAt(0)
		console.log(a)
	</script>

4.将Unicode转换为字符串:String.fromCharCode(Unicode值)

<script>
		/*
		将Unicode转换为字符串
		*/
	   console.log(String.fromCharCode(666))
	</script>

5.合并两个或多个字符串：concat

<script>
		/*
		合并字符串
		*/
	   var str = 'q w e r t y u i o p'
	   var str1 = '131213130'
	   var str2 = '000000'
	   var a = str.concat(str1,str2)
	   console.log(a)
	</script>

6.返回指定字符在字符串中第一次出现的位置：indexOf
返回指定字符在字符串中最后一次出现的位置：lastindexOf

<script>
		/*
		返回指定字符在字符串中第一次出现的位置
		*/
	   var str = '123423423421231231231'
	   var a = str.indexOf('4')
	   var b = str.lastIndexOf('4')
	   console.log(a,b)

7.比较两个字符串的内容：localeCompare

<script>
		/*
		比较两个字符串内容，相等返回值为0，不相等返回值为-1
		*/
	   var str = '123'
	   var str1 = '123'
	   console.log(str.localeCompare(str1))
	</script>

8.找到指定内容并替换：replace

<script>
		/*
		找到指定字符并替换第一个值：指定字符，第二个值：替换内容
		*/
	   var str = '123456'
	   console.log(str.replace('2','s'))
	</script>

9.检索与内容相符合的：search

<script>
		/*
		检索与内容相符合的，可以找到显示下标，找不到显示-1
		*/
	   var str = '49844984'
	   console.log(str.search('8'))
	</script>

10.以指定的内容切割字符串：split

<script>
		/*
		以指定的内容切割字符串
		*/
	   var str = '11111-22222'
	   console.log(str.split('-'))
	</script>

11.通过索引值和数量获取指定内容：substr(index,num)

<script>
		/**
		 * 通过索引值，数量获取指定内容
		 * */
		 var str = '4684948465132'
		 var a = str.substr(0,3)
		 console.log(a)
	</script>

12.通过两个索引值来获取指定内容，不包括第二个的索引值：substring(index始，index末)

<script>
		/*
		通过两个索引值来获取所需内容，不包括第二个索引值
		*/
	   var str = '3215614'
	   var a = str.substring(0,2) 
	   console.log(a)
	</script>

13.将字符串全部转换为小写
toLocaleLowerCase
toLowerCase

<script>
		var str = 'DDDDDDDD' 
		var a = str.toLocaleLowerCase()
		var b = str.toLowerCase()
		console.log(a,b)
	</script>

14.将字符串全部转换为大写
toLocaleUpperCase
toUpperCase

<script>
		var str = 'ddddddd' 
		var a = str.toLocaleUpperCase()
		var b = str.toUpperCase()
		console.log(a,b)
	</script>

15.将通过new String创建的字符串对象转换为字符串
toString
valueOf

<script>
		/**
		 * 可以将new String创建的字符串对象转变为字符串
		 * */
		 var a = new String("adadaa")
		 console.log(a.toString())
	</script>

16.去除字符串前后的空格：trim

<script>
		/*
		去除字符串前后空格
		*/
	   var str = '    65165   '
	   var a = str.trim()
	   console.log(a)
	</script>

十三、运算符

1.算数运算符

‘+ - * / % ++ --’

‘++和—在前先加（减）后用，
++和—在后先用后加（减）’

2.三目运算

// 判断条件? 真就执行语句1,假就执行语句2

var a = 1>2? '真':'假'

3.赋值运算符

= += -= *= /= %=

4.字符串拼接

console.log('a'+'b')

5.比较运算符

== === != !== > < >= <=

6.逻辑运算符

和 && 或|| 非！

Super@.烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫