javaScript

最新推荐文章于 2024-05-03 23:30:14 发布
最新推荐文章于 2024-05-03 23:30:14 发布
阅读量203 收藏
点赞数 1
分类专栏： # Java 文章标签： javascript基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alearn_/article/details/85710311
版权

学习javaScript过程中，一些练习Demo。在之前跟着老师学的过程中，感觉js的语法知识和java基本一致，所以前面的基础知识过的很快。目前在学Dom编程，练习的一些例子作为自己学习过程的见证吧。

这个案例主要是熟悉按钮操作，以及切换图片

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>作业二</title>
	</head>
	<body>
		<Button id="preBtn"> 上一张</Button>
		<img src="E:\js基础学习\image\1.jpg" id="img">
		<Button id="nextBtn">下一张</Button>
	
		<script>
			var preBtn = document.getElementById("preBtn");
			var nextBtn = document.getElementById("nextBtn");
			var image = document.getElementById("img");
			//任务把imageSrc切分 得到最后一个串，然后拼接
			
			//console.log(image);
			var idx = 1;		//弄一个信号量
			image.style.width = '200px';
			image.style.high = '200px';
			preBtn.onclick = function() {
				//先判断
				if(idx <= 0) {
					idx--;
				} else {
					idx = 3;
				}
			
				//后验收  -- 比较好
				idx--;
				if (idx <= 0){
					idx = 3;
				}
				image.src = 'E:/js基础学习/image/' + idx + '.jpg';
				
			};
			
			nextBtn.onclick = function() {
				idx++;
				if (idx > 3){
					idx = 1;
				}
				image.src = 'E:/js基础学习/image/' + idx + '.jpg'; 
			};
		</script>
	
	</body>
</html>

案例2

js操作元素

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='UTF-8'>
		<style>
			p{
				font-size : 50px;
			}
			.disable{
				background : red;
			}
			.able {
				background : #ddd;
			}
		</style>
	</head>
	
	<body>
		<Button id='bigBtn'>放大</Button>
		<Button id='smallBtn'>缩小</Button><br>
		<p id='text'>aaaaaaaaaaaa</p>
		
		<script>
			var bigBtn = document.getElementById('bigBtn');
			var smallBtn = document.getElementById('smallBtn');
			var text = document.getElementById('text');
			
			var fontSize = 50;
			
			bigBtn.onclick = function() {
				smallBtn.className='able';
				fontSize += 10;
				if(fontSize > 100) {
					fontSize = 100;
				//方法一设置按钮背景
				//bigBtn.style.background = 'red';
					bigBtn.className = 'disable';
				}
			//	text.font-size = fontSize + 'px';
				text.style.fontSize = fontSize + 'px';
			}
			
			smallBtn.onclick = function() {
				//放大按钮能用
				bigBtn.className='able';
				fontSize -= 10;
				if(fontSize < 10) {
					fontSize = 10;
					smallBtn.className = 'disable';
				}
			//	text.font-size = fontSize + 'px';
				text.style.fontSize = fontSize + 'px';
			}
			
		</script>
	</body>
</html>

案例3

通过获取文本框值，调节页面背景RGB

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='UTF-8'>
		<style>
			lable{
				font-size : 20px;
			}
			body{
				background: rgb(10,111,111);
			}
		</style>
	</head>
	
	<body id='body'>
		<label>R
			<Button id='dBtn1'>-</Button>
			<input id='ipt1' value='10' type='text'/>
			<Button id='aBtn1'>+</Button>
		</label><br>
		
		<label>G
			<Button id='dBtn2'>-</Button>
			<input id='ipt2' value='111' />
			<Button id='aBtn2'>+</Button>
		</label><br>
		
		<label>B
			<Button id='dBtn3'>-</Button>
			<input id='ipt3' value='111' />
			<Button id='aBtn3'>+</Button>
		</label><br>
		
		<Button id='go'>GO</Button>
		
		<script>
			var dBtn1 = document.getElementById('dBtn1');
			var dBtn2 = document.getElementById('dBtn2');
			var dBtn3 = document.getElementById('dBtn3');
			var ipt1 = document.getElementById('ipt1');
			var ipt2 = document.getElementById('ipt2');
			var ipt3 = document.getElementById('ipt3');
			var aBtn1 = document.getElementById('aBtn1');
			var aBtn2 = document.getElementById('aBtn2');
			var aBtn3 = document.getElementById('aBtn3');
			
			var body = document.getElementById('body');
			
			var rvalue = ipt1.value;
			var gvalue = ipt2.value;
			var bvalue = ipt3.value;
			var go = document.getElementById('go');
			go.onclick = function() {
				rvalue = ipt1.value;
				gvalue = ipt2.value;
				bvalue = ipt3.value;
				changeColor();
			}
			
			dBtn1.onclick = function() {
				rvalue--;
				changeColor();
				
			}
			aBtn1.onclick = function() {
				rvalue++;
				changeColor();
			}
			
			dBtn2.onclick = function() {
				gvalue--;
				changeColor();
				
			}
			aBtn2.onclick = function() {
				gvalue++;
				changeColor();
			}
			
			dBtn3.onclick = function() {
				bvalue--;
				changeColor();
				
			}
			aBtn3.onclick = function() {
				bvalue++;
				changeColor();
			}
			
			function changeColor(){

				if(rvalue < 0) rvalue = 0;
				if(gvalue < 0) gvalue = 0;
				if(bvalue < 0) bvalue = 0;
				
				if(rvalue > 255) rvalue = 255;
				if(gvalue > 255) gvalue = 255;
				if(bvalue > 255) bvalue = 255;
				ipt1.value = rvalue;
				ipt2.value = gvalue;
				ipt3.value = bvalue;
				body.style.background='rgb(' + rvalue +','+gvalue+','+bvalue+')';
			}
		</script>
		
	</body>
</html>

案例4

这个案例主要是用用来体会js基于面向对象编程的效果.实现的效果是使用定时器每隔1s中new出一个对象

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				width : 108px;
				height : 116px;	
				position : absolute;
				background : url('E:/js基础学习/image/timg.jpg');
				background-position : 0px -232px;
			}
		</style>
	</head>
	
	<body>
	
		<script>
			function Human(left, top){
				this.left = left;
				this.top = top;
				//创建方法--初始化对象
				this.init = function() {
					this.dom = document.createElement('div');
					//拼接到body
					document.body.appendChild(this.dom);
					this.dom.style.top = this.top + 'px';
					this.dom.style.left = this.left + 'px';
				}
				
				//移动方法
				this.move = function() {
					var idx = 0;
					var self = this;
					//由于在setInterval()中this指的是当前窗口，故用
					//self接收一下
					this.timer = setInterval(function() {
						idx++;
						self.left += 20;
						console.log(self.left);
						if(idx > 4) idx = 0;
						if(self.left >= 1000) {
							self.die();
						}		
						self.dom.style.left = self.left + 'px';
						self.dom.style.backgroundPosition =  -108*idx + 'px -232px';
					}, 200);
					
				}
				//销毁对象
				this.die= function() {
					document.body.removeChild(this.dom);
					clearInterval(this.timer);
				}
			
				this.init();
				this.move();
			}
			
			setInterval(function() {
				new Human(200, parseInt(Math.random() * 500));
			}, 1000)
		</script>
	</body>
</html>

做个简单的回顾

代码主要包括5个部分：（1）js中闭包问题（2）复习一下js中的数组 （3）js中的字符串处理方法（4）字符串转数组 （5）IIFE及时调用的写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        //1. 闭包问题
   /*     function outer() {
            var a = 10
            function inner() {
                console.log(a)
            }
            return inner;
        }
        // 可以在外部访问函数内部局部变量，局部函数
        var inn = outer()
        inn()

*/
        // 2. 数组
        // 一组数据的有序集合，可以放任何类型，一般存放同一类型
        // length : 数组长度
        var arr = [1, 2, 3]  //object
        // 通过arr.length 修改长度
        arr.length = 10
        // arr里面什么都可以方法
        arr = ['123', true, undefined, function () {

        }]
        // 数组的遍历
        // 数组常用头尾操作
        // pop() push() shift() unshift()
        var arr = ['d', 'x', 'n', 'b']
        // push 在数组尾部插入元素 返回值是数组长度
        // var a = arr.push('xxx')
        // 从尾部删除 返回的是删除的元素
        // var a = arr.pop()
        // 从头部删除 返回的是头部元素 
        // var a = arr.shift();
        // 从头部插入 返回的是插入元素后数组的长度
        // var a = arr.unshift('mmm','qqqq')

        // 拼接数组 concat 要用一个新数组接收

        var arr = [1, 2, 3, 4]
        //slice(start, end)返回新数组 包括开始位置不包括终点
        // var newArr = arr.slice(1,3)
        // 2-arr.length-1 
        // slice(-3,-1) 从后截取
        // var newArr = arr.slice(3)


        // splice(start, num)
        // arr.splice(-3,2) 对原始数组操作
        // arr.splice(2,2,'hh','ee') 替换

        // arr.sort()排序
        // var arr = [12,123,1,21]
        // arr.sort(function(a,b){
        //     return a-b
        // })

        // var str = arr.join('')
        // console.log(str)

        // 3.字符串处理
        /*      length: 长度
                charAt()  : 返回下标为n的字符
                indexOf() : 查找字符首次出现位置
                lastIndexOf()
                slice(start, end)
                split() 转数组
                subString()
                subStr()
        
                var str = '字符串处理学习  你好字符串  hhh'
                console.log(str.length)
                console.log(str.charAt(5))
                var newStr = str.concat('好好学习')
                console.log(newStr)
        
                // slice()  截取字符串
                // str.split(' ') //拆分字符串变成数组
                // subStr() 从开始位置 长度
                // str.substring(0, 5);
        */

        //4 数组转字符串
        // 首字母替换成大写
        var str = 'this is a pen'
        // 切割字符串，转换成数组
        var arr = str.split(' ')
        for (var i = 0; i < arr.length; i++) {
            // 把小写转大写
            arr[i] = arr[i].charAt(0).toUpperCase() +
                arr[i].slice(1)
        }
        // 拼成字符串
        var newStr = arr.join(' ')
        console.log(newStr)

 // 5.IIFE及时调用函数表达式
            // 使用+ 、 - 把函数降级
            + function hehe() {
                console.log('hehhe')
            }()
                // 方法2 iife已经把降级成函数表达式 编程了匿名函数
                // 不能直接调用(function ...)()
                // (function hh() {

                // })()
        // 数组观察闭包
        var arr = []
        for (var i = 0; i < 10; i++) {
            arr[i] = function () {
                console.log(i)
            }
        }
        // 这里打印的都是10,因为在数组中只是函数的定义
        // 只是声明了i
        arr[0]()
        arr[1]()


        //解决办法
        var arr = []
        for (var i = 0; i < 10; i++) {

            (
                function hh(i) {
                    arr[i] = function () {
                        console.log(i)
                    }
                }
            )(i)
        }
        // 这里打印的都是10,因为在数组中只是函数的定义
        // 只是声明了i
        arr[0]()
        arr[1]()
    </script>
</body>

</html>
yzzheng_60125
关注
专栏目录
JavaScript动画
小王的博客
08-26 7349
在设计前端页面时，会用到很多效果，我们可以采用CSS样式或JavaScript来实现，在这里给大家介绍JS动画
javascript
02-10
JavaScript是一种广泛用于网页开发的脚本语言，它是实现Web前端交互功能的核心技术之一。在给定的文件内容中，我们可以提取到关于JavaScript的多个知识点： 1. JavaScript的变量类型：JavaScript中主要有几种基本的...
JavaScript
aigo_2021的博客
04-12 875
JavaScript 是和html组合使用的一种脚本语言。所有的浏览器都能运行javascript代码。JavaScript的功能提供人机交互的功能。JavaScript提供了事件的处理、DOM编程、动画等。 JavaScript简称为js ，是netspace公司的产品 ；JScript不是JavaScript ，是微软公司的一个脚本语言 ；两种脚本 语言都以ECMAScript为规范。 JavaScript是面向函数的语言，部分语法与Java类似。区分大小写。 JavaScript代码的位置
26 JavaScript学习：JSON和void
最新发布
百锦再的博客
05-03 9万+
在 JavaScript 中，JSON 格式是一种常见的数据交换格式，它与 JavaScript 对象有着相似的结构，但在一些细节上有所不同。在 JSON 中，每个键值对由一个名称和一个值组成，名称是一个字符串，值可以是字符串、数字、布尔值、Null、数组或嵌套对象等不同类型的数据。是一个特殊的表达式，通常用于在 href 属性中作为超链接的 URL，以防止页面跳转。在 JavaScript 中，可以使用内置的 JSON 对象提供的方法将 JSON 字符串转换为 JavaScript 对象。
21 JavaScript 学习：一些误区和易错点
百锦再的博客
04-29 9万+
在定义数组时，如果在最后一个元素后面添加逗号，可能会出现一些问题，尤其是在一些 JavaScript 引擎中。为了避免这种问题，应该及时删除最后一个元素后的逗号。会导致一些 JavaScript 引擎报错，因为这被认为是一个语法错误。这样就保证了数组定义的正确性，避免了潜在的问题。请注意检查你的代码中的数组定义，确保没有多余的逗号导致语法错误。在定义对象时，确保在最后一个属性后面没有添加逗号是非常重要的。
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
JavaScript基础语法
m0_67683346的博客
11-02 6005
javascript中的一些基础语法
Javascript基础 86个面试题汇总 (附答案)
数据知道的博客
02-24 6万+
1.JavaScript是一门什么样的语言，它有哪些特点？（没有标准答案） 参考答案： JavaScript是一门强大的编程语言，是一种专为与网页交互而设计的脚本语言，是一种动态类型、弱类型、基于原型的语言。 JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。 特点： 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行
手把手带你学习 JavaScript 的 ES6 ~ ESn
程序边界
11-15 6688
主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、异步函数、await、生成器函数、…(rest和spread操作符)、模板字面量、二进制和八进制字面量、**(求幂运算符)、计算属性/方法名、for-of、for-await-of、属性的简写语法等。
什么是 Javascript？ 网站设计常用哪些 JavaScript 功能？
昔明日
03-06 1230
JavaScript是一种广泛使用的脚本语言，常用于Web应用程序的前端开发。JavaScript可以用于网页的动态交互，例如响应用户的鼠标点击、键盘输入和触控等操作，使网页更加生动、富有互动性，提高用户体验。JavaScript也可以用于Web应用程序的后端开发，例如使用Node.js平台来编写服务器端应用程序。JavaScript的语法简洁明了，易于学习，已经成为Web开发领域的标准语言之一。
javascript删除数组中的几种方式
tutodelinglimgho的博客
07-25 1万+
JavaScript数组中删除元素
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具，允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍，并提供多个...
VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi
08-06
在这个场景中，我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件：JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先，关于“VS2015安装证书”，这通常是指安装过程中需要...
现代JavaScript教程
08-10
现代JavaScript教程是一个全面的学习资源，旨在帮助开发者深入理解JavaScript这一重要的编程语言。JavaScript，作为Web开发的核心技术之一，被广泛用于构建交互式的网页和应用程序。本教程覆盖了从基础概念到高级...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码
12-11
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
【WEB程序设计】web程序设计的一些基本知识
~yzzheng～的博客
05-31 1万+
动态网页与静态网页的区别： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动态网页呈现的用户数据随着用户、时间、运行环境改变而改变。客户看到的网页内容是动态变化的。 •javaScript程序（用于提高页面与用户的交互能力，其最大的特点就是可以读/写浏览器建立的DOM树，可以对浏览器端的鼠标键盘事件作响应，可以对采集的数据作验证，可以检测浏览器的类型等。浏览器内嵌有JavaScr...
【java】JAVA与C/C++运行速度对比分析
~yzzheng～的博客
10-21 1万+
都说Java是一门解释性 语言，而c/c++是编译性语言。刚开始说的我一愣一愣的，后来经过一番与同学的探讨明白了一些，如果有不足之处，还请诸位提出。 改正： 得到好几位同学的批评指导，我很是感谢。这篇博文是我早再17年刚接触java时候写的，当时是和实验室一位小伙伴无聊中瞎逼讨论，想着java和c的运行速度做个对比，所以写了一些东西；没想到获得好几位网友对我的留言指导，很是感谢； java确...
【web】数据库应用系统设计体系结构
~yzzheng～的博客
05-31 5672
数据库系统架构 1.集中式结构 概念：所有的程序，包括DBMS、应用程序、与用户终端进行通信的软件等全部集中在一台称为主机的计算机上运行，且所有的数据及其数据处理工作也都在主机中运行。 2.两层客户机/服务器架构 &nbsp;&nbsp;&nbsp;&nbsp;两层C/S架构将数据库应用系统的计算机分为客户机和服务器两类，系统的功能在客户机和服务器之间划分，形成一种客户机请求服务，...
面向对象中类之间的关系详细解析
~yzzheng～的博客
04-12 3566
在软件系统中，类不是孤立存在的，类与类之间的存在相互的关系。记得上软件工程时，老师讲到两个范型：传统方法学（结构化方法学）和面向对象方法学（将数据和行为封装在一起）。1.关联关系        1）双向关联    2）单向关联    3 )自关联    ：类的属性对象类型为自身        4）多重关联:表示一个类的对象和另一个类的对象连接的个数    5）聚合关系：表示一个整体与部分    6...
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值