javaScript 11-12

最新推荐文章于 2024-07-30 22:36:34 发布
最新推荐文章于 2024-07-30 22:36:34 发布
阅读量47 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44907496/article/details/109648368
版权

JavaScript_1

1.javaScript的简单介绍【javaScript是什么？】
javaScript----是一种面向对象的脚本语言。
面向对象是一种编程思想，看不见摸不着，只能体会，用实际行动来证明。
面向对象这种编程思想是对面向过程的思想的升华。
面向过程的思想
例如:今天早上我要从凤栖原到电视塔。
面向过程的思想就是需要将沿途经过的地方保存下来，这些地方连接在一起就形成了过程。
面向过程的思想----C语言【指针】
面向对象的思想就是只需要知道开始和结束位置就可以，至于中间是如何完成的不需要关注。开始和结束位置就是对象。
面向对象的思想—java、 C#
脚本—写好的程序不需要中间转换，就能立即在运行环境中运行。javaScript，SQL
2.javaScript的作用？
1.为html网页提供动态效果【特效】。
2.完成与后台处理程序的数据交互。【1.发请求{要} 2.处理数据】
简单的具体操作:

  1. 直接向html文件中写出标记和内容。
  2. 对事件的反应
  3. 改变 HTML 内容
  4. 改变 HTML 图像
  5. 改变 HTML 样式
  6. 验证输入
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于javascript的简单操作</title>
		<style>
			#img2{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>1.直接向html文件中写出标记和内容</h1>
		<script>
			document.write("<h2>测试直接向html文件中写出标记和内容</h2>");
		</script>
		<h1>2.对事件的反应</h1>
		<input type="button" value="测试按钮" onclick="alert('请揍我!');"/><br>
		<h1>3.改变 HTML 内容</h1>
	    <p id="p1">Hello</p>
		<script>
			function myclick(){
				document.getElementById("p1").innerHTML="你好！";
			}
		</script>
		<input type="button" value="改变 HTML 内容" onclick="myclick();"/><br>
		<h1>4.改变 HTML 图像</h1>
		<img id="img1" src="imgs/close.png" width="100px" height="200px"/>
		<script>
			function mytestimg(){
				var butObject=document.getElementById("but1");
				var imgObject=document.getElementById("img1");
				var testValue=butObject.value;
				if(testValue=="打开"){
					imgObject.src="imgs/open.png";
					butObject.value="关闭";
				}
				if(testValue=="关闭"){
					imgObject.src="imgs/close.png";
					butObject.value="打开";
				}
			}
		</script>
		<input id="but1" type="button" value="打开" onclick="mytestimg();"/><br>
		<h1>5.改变 HTML 样式</h1>
		<img id="img2" src="imgs/timg.jpg" width="200px" height="200px"/>
		<script>
			function mytestcss(){
				var butObject=document.getElementById("but2");
				var testValue=butObject.value;
				if(testValue=="显示"){
					document.getElementById("img2").style.display="block";
					butObject.value="隐藏";
				}
				if(testValue=="隐藏"){
					document.getElementById("img2").style.display="none";
					butObject.value="显示";
				}
			}
		</script>
		<input id="but2" type="button" value="显示" onclick="mytestcss();"/><br>
		<h1>6.验证输入</h1>
		<input id="text1" type="text" /><span id="span1"></span><br>
		<script>
			function  getMSGCode(){
				var text1Object=document.getElementById("text1");
				var span1Object=document.getElementById("span1");
				var telNumber=text1Object.value;
				//正则表达式
				var zhengze= /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;
				//null--javascript一种数据类型
				var jieguo=zhengze.test(telNumber);
				if(jieguo){
					text1Object.value="123456";
				}else{
					span1Object.innerHTML="手机号码不合法!";
					text1Object.value="";
				}
			}
		</script>
		<input id="but3" type="button" value="获取短信验证码" onclick="getMSGCode();"/><br>
	</body>
</html>

在这里插入图片描述
3.javascript的基本用法
HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
可以将javascript程序单独保存在一个文件中，保存javascript程序的文件后缀名一定是“.js”,r然后在html文件中和部分通过

mytest.js
//在独立的javascript文件中编写程序代码是不需要

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test2(){
				alert("测试head放置脚本");
			}
		</script>
		<script src="js/mytest.js"></script>
	</head>
	<body>
		<h2>HTML 中的脚本必须位于&lt;script&gt; 与 &lt;/script&gt; 标签之间。</h2>
		<h2>脚本可被放置在 HTML 页面的 &lt;body&gt; 和&lt;head&gt; 部分中。</h2>
		<!--
		<script>
			function test1(){
				alert("测试body放置脚本");
			}
		</script>
		-->
		<input type="button" value="测试body中放置脚本" onclick="test1();"/><br>	
		<!--
		<script>
			function test1(){
				alert("测试body放置脚本");
			}
		</script>
		-->
		<input type="button" value="测试head中放置脚本" onclick="test2();"/>
		<h2>通常情况下我们将javascript脚本放置在head部分</h2>
		<h2>
		可以将javascript程序单独保存在一个文件中，保存javascript程序
		的文件后缀名一定是“.js”,r然后在html文件中&lt;body>&gt;和&lt;head&gt;
		部分通过&lt;script&gt;标记的src属性将保存javascript程序的文件导入到html文件中。
		</h2>
		<h2>在独立的javascript文件中编写程序代码是不需要&lt;script&gt;</h2>
		<input type="button" value="测试使用独立的javascript文件" onclick="test3();"/>
	</body>
</html>

在这里插入图片描述
4.JavaScript 输出
为了以后调试程序，输出运行结果，判断程序运行是否正常，找出错误并修改。
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输出数据的方式</title>
		<script>
			function testalert(){
				var a=100;
				var b=12.5;
				var c=a+b;
				//window.alert("c="+c);
				alert("c="+c);
			}
			
			function testwrite(){
				var a=100;
				var b=12.5;
				var c=a+b;
				document.write("c="+c);
			}
			function testinnerHTML(){
				var a=100;
				var b=12.5;
				var c=a+b;
				document.getElementById("h2").innerHTML="c="+c;
			}
			function testconsole(){
				var a=100;
				var b=12.5;
				var c=a+b;
				console.log("c="+c);
			}
		</script>
	</head>
	<body>
		<h1>使用 window.alert() 弹出警告框。</h1>
		<input type="button" value="测试window.alert()" onclick="testalert();"/>
		<h1>使用document.write() 方法将内容写到 HTML 文档中。</h1>
		<input type="button" value="测试document.write()" onclick="testwrite();"/>
	    <h1>使用 innerHTML 写入到 HTML 元素。</h1>
		<h2 id="h2"></h2>
		<input type="button" value="测试innerHTML" onclick="testinnerHTML();"/>
		<h1>使用 console.log() 写入到浏览器的控制台</h1>
		<input type="button" value="测试console.log()" onclick="testconsole();"/>
	</body>
</html>

在这里插入图片描述
5.JavaScript中的变量

  1. 变量是程序运行中的最小单位。
  2. 变量是存储数据的”容器”。
    为了减少程序的运行空间。
    例如:我们现在需要在程序中出现100次“hello”这个数据，每需要一个“hello”这个数据我们就写一次“hello”这个数据，假设“hello”这个数据一次需要5个字符的存储空间，那么100次就是500个字符，如果我们现在将“hello”这个数据保存到一个变量上，那么一个变量只占5个字符数据的存储空间，当下一次需要使用“hello”这个数据时候，我们只需将占5个字符数据的存储空间的变量提供就可以了，这是我们的程序中出现100次“hello”这个数据时，只开辟了5个字符数据的存储空间，不会是500个。
  3.    变量的组成
 1.  数据类型 【赋值的时候根据所赋予的具体数据值判定数据类型】
 2.  名称  
 3.  数据值
 4.  作用域 【变量在不同位置的有效性】

4.定义变量
通过var关键字定义变量
格式: var 变量名称 = 数据值 ;
var 变量名称 ;
可以一次性定义多个变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义变量</title>
		<script>
			//格式: var 变量名称 = 数据值 ; 
			var  a = 100;
			//var 变量名称 ; 
			var b;
			//变量赋值
			b=12.5;
			//可以一次性定义多个变量
			var  test1,hello1;
			//变量赋值
			test1=125.8;
			hello1="你好";
			var  test2="hello",hello2="world";
			alert(hello2);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
注意变量的名称使用规则:

  1. 变量的名称可以由数字、字母、$ 、_ ,数字不能开头。
  2. 变量的名称不能有空格，不能使用中文。
  3. 区分大小写（y 和 Y 是不同的变量）
  4. 不能是关键字。
    关键字就是javascript语言为一些单词赋予了特殊的含义，这是被赋予了特殊的含义的单词就是关键。【被javascript语言占用】。
weixin_44907496
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript-algorithms
03-10
11. **函数式编程**：JavaScript也支持函数式编程风格，如高阶函数、闭包、柯里化等，这些在处理数据和构建复杂逻辑时非常有用。 12. **ES6及更新特性**：箭头函数、Promise、async/await等新特性也可能在算法实现...
JavaScript基础总结-1
m0_49935332的博客
11-12 402
JavaScript_1 1.javaScript的简单介绍【javaScript是什么？】        javaScript----是一种面向对象的脚本语言。        面向对象是一种编程思想，看不见摸不着，只能体会，用实际行动来证明。        面向对象这种编程思想是对面向过程的思想的升
.NET 5.0正式发布，功能特性介绍(翻译)
热门推荐
葡萄城技术团队博客
11-11 1万+
本文由葡萄城技术团队翻译并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 我们很高兴今天.NET5.0正式发布。这是一个重要的版本—其中也包括了C# 9和F# 5大量新特性和优秀的改进。微软和其他公司的团队已经在生产和性能测试环境中开始使用了。这些团队向我们反馈的结果比较令人满意，它证明了对性能提升及降低Web应用托管成本的机会有积极的表现。从预览版1开始，我们一直在5.0上运行我们自己的网站。从我们目前的所见所闻来看，.NET5.0无需在升级..
javascript--texiao-343.zip_javascript
09-19
11. **框架与库**：React、Vue、Angular等前端框架提供了组件化开发方式，使得创建复杂特效更为便捷。它们通常封装了动画库，如React的React Transition Group，Vue的vue-animate等。 12. **性能优化**：使用...
javascript-ufo
03-27
12. **调试技巧**：使用浏览器的开发者工具进行代码调试，理解断点、步进执行等功能。 JavaScript-UFO的MIT许可意味着所有代码都可以自由使用、复制、修改、分发，只要保留原有许可信息即可。这为学习者提供了便利...
javascript-fun
05-09
12. **前端框架和库**：React、Vue、Angular等现代前端框架的基本概念和使用方法。 13. **Node.js**：JavaScript在服务器端的应用，包括模块系统、文件操作、网络编程等。 14. **Web组件**：Shadow DOM、Custom ...
javaScript-timer:模块11-Promise API
05-26
在"javaScript-timer:模块11-Promise API"这个主题中，我们主要探讨的是如何利用Promise来实现计时器功能，特别是倒计时器。Promise 是ES6引入的一种处理异步操作的新方式，它提供了比传统的回调函数更优雅、更易读...
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 61
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 388
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【Vue3】自定义组件
最新发布
又言又语
07-30 231
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1076
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 212
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 262
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
互联网医院系统源码与医保购药APP开发的完整技术指南
meihusdk的博客
07-30 105
开发过程中需注重数据安全、系统性能、用户体验等多个方面，确保系统的高效稳定运行和良好用户体验。希望这篇技术指南能为开发者提供有益的参考，助力互联网医疗健康行业的发展。
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 319
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 354
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
angular入门基础教程(四）动态属性与事件
峰会路转的博客
07-29 107
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 651
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
让开发者生活更轻松的 JavaScript 字符串方法
粉丝们务必加入微信粉丝群
07-27 230
前端岗位内推来了JavaScript 最初被引入作为一种简单的客户端脚本语言，但现在，它已经成为一种真正的 WORA（一次编写到处运行）语言，使开发者能够构建桌面、移动、电视、CLI 和嵌入式应用程序。JavaScript 的初学者友好语法、生产性语言特性和良好管理的 ECMAScript 规范，激励了所有人使用 JavaScript 进行通用编程。ECMAScript 标准通过提供许多语言特性来...
javaScript蓝桥杯----外卖给好评
10-25
JavaScript蓝桥杯是一个计算机编程竞赛，而外卖给好评是一个具体的问题，需要更多的上下文信息才能回答。不过，如果你想在JavaScript中实现外卖给好评的功能，可以考虑以下步骤： 1. 创建一个包含外卖评价的HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值