JavaScript初级

最新推荐文章于 2024-10-30 18:24:25 发布
最新推荐文章于 2024-10-30 18:24:25 发布
阅读量92 收藏
点赞数
分类专栏： JavaScript html 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cclym/article/details/118758403
版权

JavaScript初级

  1. 数组
    迭代方法---- forEach
    可以对数组进行遍历，forEach 没有返回值。

第一个参数是元素(el)
第二个参数是下标(index)
第三个参数是数值本身(arr)

<script type="text/javascript">
		var a =[`b`,`c`,`v`,`k`]
		
		a.forEach(function(el,index,arr){
			console.log(`元素:`+el,`下标:`+index)
			console.log(arr)
		})
	</script>

在这里插入图片描述
some和every
some：数值里面有一个满足条件,结果就是true
every：数值里面有一个不满足条件,结果就是false
some

<script>
		var a = [
			{name :`张张`,age:20},
			{name :`郭郭`,age:23},
			{name :`孙孙`,age:21},
			{name :`莉莉`,age:26},
			
		]
		 var more23 = a.some(function(el,index,arr){
			 return el.age > 23
		 })
		 console.log(more23)
	</script>

在这里插入图片描述
every

<script>
		var a = [
			{name :`张张`,age:20},
			{name :`郭郭`,age:23},
			{name :`孙孙`,age:21},
			{name :`莉莉`,age:26},
			
		]
		 var more23 = a.some(function(el,index,arr){
			 return el.age > 23
		 })
		 console.log(more23)
		 
		 var more23 = a.every(function(el,index,arr)
		 {
			 return el.age > 23
		 })
		 console.log(more23)
	</script>

在这里插入图片描述
filter

<script>
		var a = [
			{name :`张张`,age:20},
			{name :`郭郭`,age:23},
			{name :`孙孙`,age:21},
			{name :`莉莉`,age:26},
			
		]
		var newA = a.filter(function(el,index,arr){
			 return el.age >23
		 })
		 console.log(newA)
		 
	</script>

在这里插入图片描述
map
可以对数组做批量处理

<script>
		var a = [
			{name :`张张`,age:20},
			{name :`郭郭`,age:23},
			{name :`孙孙`,age:21},
			{name :`莉莉`,age:26},
			
		]
		var names = a.map(function(el,index,a){
			return el.name
		})	 
		console.log(names)
	</script>

在这里插入图片描述

<script>
		var a = [
			{name :`张张`,age:20},
			{name :`郭郭`,age:23},
			{name :`孙孙`,age:21},
			{name :`莉莉`,age:26},
			
		]
		var names = a.map(function(el,index,a){
			return el.name
		})	 
		console.log(names)
		
		var newA = a.map(function(el,index){
			el.age = el.age+1
			return el
		})
		console.log(newA)
	</script>

在这里插入图片描述

<script>
		var a = [
			{name :`张张`,age:20},
			{name :`郭郭`,age:23},
			{name :`孙孙`,age:21},
			{name :`莉莉`,age:26},	
		]
		a.reduce(function(pre,el,index,a){
			console.log(pre,el,index)
			return pre+1
		},0)
	</script>

在这里插入图片描述
reduce求和

<script>
		var a = [
			{name :`张张`,age:20},
			{name :`郭郭`,age:23},
			{name :`孙孙`,age:21},
			{name :`莉莉`,age:26},	
		]
		var ageSum = a.reduce(function(pre,el,index,a){
			
			return pre+el.age
		},0)
		console.log(ageSum)
	</script>

在这里插入图片描述

2.DOM事件
什么事件？
JavaScript 可以触发这些事件，例如：点击，单击，键盘按下抬起等这些称为事件。
鼠标事件：
单击事件（onclick）
添加的事件方式一：

<body>
		<div id="bbc" onclick="a()">
			按钮
		</div>
	</body>
	<script>
		function a(){
			console.log(`点击了`)
		}
	</script>

在这里插入图片描述
添加事件方式二

<body>
		<div id="bbc" >
			按钮
		</div>
	</body>
	<script>
		var bbc = document.getElementById(`bbc`)
		bbc.onclick = function(){
			alert(`点击了`)
		}
	</script>

在这里插入图片描述
click是事件的类型，function是事件的处理函数
通过监听的方式添加事件

<body>
		<div id="bbc" >
			按钮
		</div>
	</body>
	<script>
		var bbc = document.getElementById(`bbc`)
		bbc.addEventListener(`click`, function(){
			alert(`点击了`)
		})
	</script>

在这里插入图片描述
鼠标双击

	<body>
		<div id="bbc" >
			按钮
		</div>
	</body>
	<script>
		var bbc = document.getElementById(`bbc`)
		bbc.ondblclick = function(){
			alert(`双击了`)
			console.log(`双击了`)
		}
	</script>

在这里插入图片描述
鼠标按下（onmousedown）和抬起（onmouseup）
鼠标在anniu（元素）中，按下和抬起操作，会触发事件

<body>
		<div id="bbc" >
			anniu 
		</div>
		
	</body>
	<script>
		var bbc = document.getElementById(`bbc`)
		bbc.onmousedown = function(){
			console.log(`鼠标按下`)
		}
		bbc.onmouseup= function(){
			console.log(`鼠标抬起`)
		}
	</script>

在这里插入图片描述
鼠标进入（onmouseenter）和鼠标移出（onmouseleave）
鼠标在进入和移出 （div）时，会触发事件

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#bbc{
				width: 200px;
				height: 200px;
				background: palegreen;
			}
		</style>
	</head>
	<body>
		<div id="bbc" > 
		</div>
		
	</body>
	<script>
		var bbc = document.getElementById(`bbc`)
		bbc.onmouseenter = function(){
			console.log(`鼠标进入`)
		}
		bbc.onmouseleave= function(){
			console.log(`鼠标移出`)
		}
	</script>

在这里插入图片描述
鼠标移动事件（onmousemove）
鼠标在div中移动时，会触发事件
在这里插入图片描述
鼠标移入（onmouseover）和移出（onmouseout）事件
鼠标在div中移出，移入时会触发事件

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#bbc{
				width: 200px;
				height: 200px;
				background: palegreen;
			}
		</style>
	</head>
	<body>
		<div id="bbc" > 
		</div>
		
	</body>
	<script>
		var bbc = document.getElementById(`bbc`)
		bbc.onmouseover = function(){
			console.log(`鼠标移入`)
		}
		var bbc = document.getElementById(`bbc`)
		bbc.onmouseout = function(){
			console.log(`鼠标移出`)
		}
	
	</script>

在这里插入图片描述

onclick(单击事件)
ondblclick（双击事件）
onmousedown（鼠标按下事件）
onmouseup（鼠标抬起事件）
onmouseenter (鼠标进入)
onmouseleave （鼠标离开）
onmousemove（鼠标移动）
onmouseover（鼠标移入）
onmouseout（鼠标移出）

键盘事件
键盘按键事件
当键盘在body中按下抬起时，触发事件。

<script>
	document.body.onkeydown=function(event){
		console.log(`键盘按键按下`)
		var cc = event.keyCode
		console.log(cc)
	}
	document.body.onkeyup = function(){
		console.log(`键盘按键抬起`)
		var cc = event.keyCode
		console.log(cc)
	}
	</script>

在这里插入图片描述
都是获取键值,只是不同浏览器的兼容性问题导致，部分按键的键值无法获取

			var code = event.keyCode || event.charCode || event.which
			console.log(code)

onload页面加载

<head>
		<meta charset="utf-8">
		<title></title>
	
		<script>
		window.onload = function() {
			foo()
			var bbc = document.getElementById('bbc')
			console.log(bbc)
		}
		function  foo(){
			console.log(`foo`)
		}
		
		</script>
	</head>
	<body>
		<div id="bbc" > 
		</div>
		
	</body>

在这里插入图片描述
滚动事件

	<body>
		<div id="bbc">
		</div>

	</body>
	<script >
	
		document.onscroll= function(){
			console.log(`滚动事件`)
			console.log(document.documentElement.scrollTop)
		}
	</script>

在这里插入图片描述
表单事件

<body>
		<form id="form" action="" method="get">
			<p>用户名：<input type="text" id="username" /></p>
			<input type="submit" value="提交"/>
		</form>

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

在这里插入图片描述

窗口大小变化

<script >
	window.onresize =function(){
		console.log(`窗口大小变化`)
	}
	</script>

在这里插入图片描述
获取焦点，失焦

<body>
		<form id="form" action="" method="get">
			<p>用户名：<input type="text" id="username" /></p>
			<input type="submit" value="提交"/>
		</form>

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

在这里插入图片描述
获取焦点，失焦，输入，触发事件

<body>
		<form id="form" action="" method="get">
			<p>用户名：<input type="text" id="username" /></p>
			<input type="submit" value="提交"/>
		</form>

	</body>
	<script >
		var username = document.getElementById('username')
		username.onfocus = function(){
			console.log('获取焦点')
		}
		username.onblur = function(){
			console.log('失焦了')
		}
		
		username.onchange = function(){
			console.log('输入了')
		}
		username.oninput = function(){
			console.log('oninput事件触发了')
		}
		
	</script>

在这里插入图片描述
登录

<body>
		<form id="form" action="" method="get">
			<p>用户名：<input type="text" id="username" /></p>
			<input type="submit" value="提交"/>
		</form>

	</body>
	<script >
		var username = document.getElementById('username')
		username.onfocus = function(){
			console.log('获取焦点')
		}
		username.onblur = function(){
			console.log('失焦了')
		}
		
		username.onchange = function(){
			console.log('输入了')
		}
		username.oninput = function(){
			console.log('oninput事件触发了')
		}
		
		// 表单处理函数
		function login(){
			alert('登录成功')
		}
		var form = document.getElementById('form')
		form.onsubmit = function(event){
			alert('登录')}
	</script>

在这里插入图片描述

早川c
关注
专栏目录
JavaScript-初级
a1871934508的博客
10-26 178
朋友们好，今天我们来介绍一下关于JavaScript初级的相关知识。 首先简单科普一下JavaScript这门解释语言的诞生。它的创造者是一个叫做Brendan Eich的人，最初在设计这门语言的时候极不用心，仅仅使用十天将其设计完成，这是JS最初的第一个版本，设计语言很是粗糙，是借鉴了五种编程语言的大杂烩，很多地方极不规范，基于这个原因，它最开始的出现也并没有因为潮流。 但是到了后来，随着JS语...
javascript初级
u014263469的博客
09-13 286
### 希望把某个元素移出你的视线 ###2016/8/10 12:31:301.display:none //显示为无 2.visibility:hiddem //让元素隐藏 3.width\height //改变宽或高 4.透明度 5.left/top //通过定位改变left或top值 6.拿一个白色div盖住它 7.margin负值 事件鼠标事件、键盘事件、
JavaScript初级——基础知识
Fan_web的博客
08-17 870
本文主要跟大家分享了关于JavaScript初级学习的基础知识，包括简单编写一个helloworld程序、JavaScript的编写位置、基础语法、字面量和变量、标识符、数据类型以及之间的转换方式，补充了一些其他进制的数字。下一节继续分享关于JavaScript初级学习的运算符知识。
JavaScript基础初学（一）
m0_48839439的博客
08-09 409
在前端的学习之中必定要学习前端三剑客——HTML、CSS、JAVASCRIPT。简单来说，JavaScript为前端页面添加了与客户的交互性，使静态页面变为动态。Js不仅作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器中。那么，在学习Javascript时，我们会学到什么，最终得到什么，请一探究竟吧！............
javascript初级教程.pdf
10-02
总之，JavaScript初级教程是一份适合初学者的参考资料，涵盖了JavaScript的基础知识，但可能需要读者具备一定的自学能力和实践经验，才能充分利用其内容并掌握这门语言。随着学习的深入，读者可以逐步探索JavaScript...
P2Javascript初级--讲义.zip
04-05
这个“P2Javascript初级--讲义.zip”压缩包文件包含了针对初学者的JavaScript基础知识，让我们来深入探讨一下JavaScript的核心概念和技术。 1. **变量与数据类型**：在JavaScript中，变量是存储数据的容器。你可以...
javascript初级代码学习.zip
11-07
001-HTML中嵌入JavaScript代码的第一种方式 002-HTML中嵌入JavaScript代码的第二种方式 003-HTML中嵌入JavaScript代码的第三种方式 001-BOM编程-open和close 002-open 003-弹出消息框和确认框 004-当前窗口设置为...
JavaScript初级教程(第三课)第1/2页
10-30
JavaScript初级教程(第三课)主要讲解了如何使用JavaScript来控制窗口的打开，这是网页动态交互的一个基础部分。在HTML中，我们通常通过`<a>`标签的`href`属性来打开新的页面，但这种方式无法精确控制新窗口的样式和...
JavaScript(es5)初级
赵佳敏的博客
11-29 285
一、JavaScript的作用 前端html页面的交互，可以实现效果（动画，操作效果）、数据展示、数据验证、访问数据 （小游戏开发 、api接口访问实现（天气预报 地图api ））等等。 二、JavaScript编程语言如何嵌入到网页 1. 内嵌写法 head或者body里面以script标签的方式去写入 在script标签内部写入可执行代码 <head lang="en"> <meta charset="UTF-8"> <title>&.
JavaScript初级篇—javascript入门
xiomarazark的博客
08-23 279
浏览器组成 shell部分 内核部分 渲染引擎(语法规则和渲染) js引擎 其他模块 浏览器内核 主流浏览器 内核 IE trident Chrome webkit/blink firefox Gecko opera presto Safari webkit javascript的特点 解释性语言 单线程 ECMA标注——为了取得技术上的又是，微软推出了JScript，CEnvi推出了ScriptEase，与JavaScript同样可以在浏览器上运行。为了统一
【javascript】初级学习
爱科比的博客
09-21 292
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 目录 1.创建JavaScript 2.进行变量创建 3，使用if语句进行判断 4，使用while语句进行判断 ...
JavaScript初级内容总结（全面）-----续更
aurora
09-26 193
JavaScript初级内容一、初识JavaScript（了解）1. JavaScript的发展历史2. JavaScript的地位及使用①地位②三种方式书写js代码二、变量、条件语句、循环语句1. 定义变量 一、初识JavaScript（了解） 1. JavaScript的发展历史            ????创始人：布莱登·艾奇      &n
【JavaScript】JavaScript基础篇
X_H学Java的博客
08-08 1850
JavaScript为前端三剑客之一，主要实现和用户交互的动作，本篇文章对JavaScript的基础语法进行了总结，帮助大家进一步入门JavaScript
JavaScript基础入门
dangfulin的博客
08-21 5836
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
JS初级基础
smileboyjian的博客
05-20 4174
JavaScript基础 一、 js代码的应用 1.     使用标签将js代码应用到HTML文档中 1)    作用：将JS代码应用到HTML文档中，该标签的位置是任意，通常放在被修饰内容下面或者head标签中 2)    属性及属性值：type=”text/javascript”，该属性的作用是告诉浏览器下面是一段js代码，浏览器需要按照js语法的规则进行解析 2.     将JS代
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
最新发布
weixin_52173250的博客
10-30 1016
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript初级入门与参考教程
这是一本适合初级到中级JavaScript学习者的教材，注重理论与实践的结合，要求读者具备一定的自学能力和独立解决问题的能力。通过跟随教程逐步学习，读者可以在JavaScript的世界里打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值