前端三剑客之——javaScript

已于 2023-03-13 18:12:41 修改
阅读量417 收藏
点赞数 3
分类专栏： 前端 文章标签： 前端 javascript html
于 2022-12-07 17:55:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62565675/article/details/128221086
版权

目录

1.前言

2.javaScript变量声明

3.js代码身在何处 

                1.内部定义

                2.外部引入

4.全局函数

5.自定义函数

6.算数运算符

7.内置对象

7.1字符串

7.2数组对象 

7.3 日期对象

7.4算数对象 

8.事件

 9.DOM对象

9.1概念

9.2获取标签方法

9.3对标签属性进行操作

9.4对标签体的内容进行操作

9.5对标签的样式进行操作 

9.6案例(全选和反选)

 10.表单验证

10.1作用

10.2示例

1.前言

javaScript历史：
                javaScript是美国网景公司开发的，原名叫LiveScript(运行在网页中的语言)，最              后网景公司和sum公司合作，将LiveScript改名为javaScript。
javaScript与java的区别：

                 java是高级语言，需要编译，运行在java虚拟机当中  后端语言。
                 javaScript不需要编译，由浏览器解释运行，写在网页中，是一种脚本语言。

javaScript作用：
                1.响应客户端鼠标和键盘事件
                2.客户端页面表单数据验证
                3.使用javaScript动态的改变页面标签的样式

javaScript与html和css的联系:
                html是网页的骨架（内容）
                css是网页的外观（皮肤）
                javaScript是网页的行为（动作）

2.javaScript变量声明

声明变量：使用var关键字声明  此变量可以表示任何类型数据 
数据类型：
                 1.数值型 number 整数和浮点都是数值型
                 2.布尔型
                 3.字符串 双引号和单引号都表示字符串
                 4.undefined类型 变量没有赋值，值不明确
                 5.Object 对象类型 

3.js代码身在何处 

         1.内部定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"> /* 此标签内写javaScript代码 */
			 var a =20;
			 var b =10.5;
		</script>
	</head>
	<body>

	</body>
</html>

        2.外部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入外部的js文件-->
		<script src="" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

	</body>
</html>

4.全局函数

全局函数(内置函数)：就是js函数库中已经内置好的，只需要调用即可
alert()警告框
parseInt();可以把浮点型转化为整型，可以把数字字符串转换为整数，如果其中包含字母，只能转换到字母前，以字母开头直接返回NaN
parseFloat();可以把数据转化为浮点形
typeof(值);返回此值的数据类型
val(字符串);运算此字符串里面的内容

5.自定义函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 函数
			  function 函数名(参数){
				  函数体
				  返回值
			  } */
			  //有参数的函数，参数不需要定义类型
			  function test(a,b){
				  alert(a+":"+b);
			  }
			  test(10,20);
		</script>
	</head>
	<body>
	</body>
</html>

6.算数运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a =5;
			var b= 10;
			var c="5";
			var d="a";
			alert(b+c);  /* 105 字符串的拼接 */
			alert(b-c); /* 5 数字和字符串的数字  此处会进行一个隐式数据类型转换*/
			alert(b-d); /* NaN not a number 数字格式化异常 试图将字符串转为数字，没有转换成功*/
			/* ===   比较数值类型和内容 */
		</script>
	</head>
	<body>
	</body>
</html>

7.内置对象

        7.1字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
				字符串对象
			 */
			var s ="abc";
			var s1 = new String("abc:qwer");
			alert(s1);
			alert(s1.length);
			alert(s1.substring(1,2));// 开始的位置，结束位置(不包含结尾) b
			alert(s1.substr(1,2));//开始位置，截取的长度	               bc
			alert(s1.split(":"));//abc,qwer 
		</script>
	</head>
	<body>
	</body>
</html>

        7.2数组对象 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 数组对象 -->
		<script>
			var array = new Array(); 创建了一个空数组
			array[0]=1;
			array[1]="abc";
			array[2]=true;
			alert(array);
			
			var array1 = new Array(1,"abc",true,new Date());
			alert(array1);
			
			var array2 = [1,"abc",true,new Date()];
			alert(array2.length);
			alert(array2.join(":"));//把数组中的元素使用特定的符号连接为"字符串"
			alert(array2.reverse());//逆序 会将array数组逆序 */
			
			//排序 默认使用字母排序方法 如果要实现数字排序，则要定义排序函数
			var array1 = [1,3,12,5,7,9];
			array1.sort(sortNumber);//直接把排序的函数传进去
			alert(array1);
			function sortNumber(a,b){
				//后数和前数比，相减如果>0,则不发生交换（小-->大）
				return a-b;
			}
		</script>
	</head>
	<body>
	</body>
</html>

        7.3 日期对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
                日期对象
            */
			var date  = new Date();
			alert(date.getFullYear());
			alert(date.getMonth()+1);
			alert(date.getDate());//日期
			alert(date.getDay());//星期
			alert(date.getHours());//获取小时
            alert(date.getMinutes());//获取分钟
			alert(date.getSeconds());//获取秒数
			alert(date.getMilliseconds());//获取毫秒
		</script>
	</head>
	<body>
	</body>
</html>

        7.4算数对象 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
				算数对象
			 */
			alert(Math.PI);  //PI
			alert(Math.abs(-19)); //绝对值
		</script>
	</head>
	<body>
	</body>
</html>

8.事件

        事件:html中的标签拥有事件，通过事件可以驱动javaScript函数，从而产生一个动态的效果。

事件触发条件
onclick()鼠标点击时
onblur()标签失去焦点时触发(获取焦点后失去焦点时触发)
onfocus()标签获得焦点时触发
onmouseover()鼠标被移到某标签之上
onmouseout()鼠标从某标签移开
onload()是在网页加载完毕后触发相应的的事件处理程序
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序

        演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(){
				console.log(1)//向浏览器控制台输出内容
			}
			/* 对于onload()事件的说明
				test();  从上到下运行,假如这里调用的test()方法里面有关于body里面的东西，而此时body里面还没加载，所以就获取不到相关信息
			 */	
		</script>
	</head>
	<body onchange="test()"><!-- 在body里面加入onchange()事件，使网页加载完后才触发相应事件-->
		 <input  type="button" value="开始" onclick="test()"/>
		 <div onclick="test()">点击事件演示</div>
		 
		 <input type="text" onfocus="test()" />获得焦点<br/>
		 <input type="text" onblur="test()" />失去焦点
		 
		 <div onmouseover="test()" onmouseout="test()" style="width: 200px; background-color: aquamarine;">
			鼠标移动事件
		 </div>
		 <input type="text" onchange="test()" />失去焦点并且文本框内容改变
	</body>
</html>

 9.DOM对象

        9.1概念

HTML_DOM对象：
                1.文档对象模型--->指的是网页中的标签
                2.在js中，一旦网页被加载到浏览器中，会生成一个doucument对象，此对象表示整个html，可以使用document对象，获取网页中的标签
                3.var obj = document.getElementById(""); 通过标签中的id属性获取到标签  一对一

                4.var objs = document.getElementsByTagName("input"); 通过标签名获取集合对象
                5.var objs  =document.getElementsByClassName("d1");通过类名获取集合对象

        9.2获取标签方法

var obj = document.getElementById("");通过标签中的id属性获取到标签  一对一
var objs = document.getElementsByTagName("");通过标签名获取集合对象
var objs  =document.getElementsByClassName("");通过类名获取集合对象
                                                强调 ：通过name，class，tag所获取的都是集合对象

       9.3对标签属性进行操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){
				//在js中获取到文本框的值，如何获取！！！
				var tobj1 = document.getElementById("t1");
				console.log(tobj1);
				console.log(tobj1.value); //输出value值
				var tobj2 = document.getElementById("t2");
				tobj2.value = tobj1.value;
				tobj1.value="";
				tobj1.type="radio";
				tobj1.disabled = "disabled"; //表示此标签被禁用
			}
		</script>
	</head>
	<body>
		<input type="text" value="" id="t1"/>
		<input type="text" value="" id="t2"/>
		<input type="button" value="测试" onclick="test1()" />
	</body>
</html>

        9.4对标签体的内容进行操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test2(){
				var pobj = document.getElementById("p1");
				alert(pobj.innerHTML);//获取到标签体中的内容，包含子标签
				var dobj = document.getElementById("div1");
				dobj.innerHTML = pobj.innerHTML;
			}
		</script>
	</head>
	<body>
		<p id="p1">
		   <b>这是段落</b>
		</p>
		<div id="div1">
			
		</div>
		<input type="button" onclick="test2()" value="测试"/>
	</body>
</html>

        9.5对标签的样式进行操作 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
				操作时，需要明确几点:
				1.触发动作的标签是谁
				2.对哪个标签进行操作  给赋予id属性
				3.对标签的什么内容进行操作
			 */
			function test3(){
				var dobj = document.getElementById("div1");
				dobj.style.width="100px";  //这里切记使用字符串
				dobj.style.height="100px";
				dobj.style.backgroundColor ="black";
			}
		</script>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<input type="button" value="测试" onclick="test3()" />
	</body>
</html>

        9.6案例(全选和反选)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选和反选</title>
		<script type="text/javascript">
			function test(flag){
				var objs = document.getElementsByName("check");
				for(var i=0;i<objs.length;i++){
					objs[i].checked = flag;
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" name="check" value="java" />java
		<input type="checkbox" name="check" value="c++" />c++
		<input type="checkbox" name="check" value="html" />html
		<input type="checkbox" name="check" value="css" />css
		<input type="button" value="全选" onclick="test(true)"/>
		<input type="button" value="全不选" onclick="test(false)"/>
	</body>
</html>

 10.表单验证

        10.1作用

表单：在客户端为后端服务器收集数据，里面有许多可以输入，选择的组件，凡是从前端向             后端发送的数据，都需要进行验证.不要将垃圾数据随便传递到后端处理，就可以减               少后端服务器的压力。

         10.2示例

        下面是一个表单，我们点击登录时就会验证。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function checkForm(){
				var usobj = document.getElementById("us");//获取文本框对象
				if(usobj.value.length==0){
					alert("用户名不能为空");
					return  false;
				}
				if(usobj.value.length<6||usobj.value.length>10){
					alert("用户名为6-10位字符");
					return false;
				}
				var paobj = document.getElementById("pa");
				if(paobj.value.length==0){
					alert("密码不能为空");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
        <!--onsubmit：在点击submit按钮时触发，作用是将js里面函数返回的boolean值再返回给表单，以此来看是否能够提交-->
		 <form action="" method="get" onsubmit="return checkForm()">
		 	账号:<input id="us" type="text" name="usernaem "/><br />
			密码:<input id="pa" type="password" name="password"/><br />
			<input type="submit" value="登录"/>
		 </form>
	</body>
</html>

        大家感兴趣的话可以看看前面章节的CSS和HTML，了解更多基础细节知识。 

HTML点我直接走~~~~~

CSS点我直接走~~~

迷茫的羔羊羊
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript字符串“三剑客”
weixin_34296641的博客
02-05 109
JavaScript字符串方法有很多，其中有三个方法与字符串裁剪有关，他们分别是slice()、substring()和substr()，我把他们统称为“三剑客”。 由于他们都是用于裁剪字符串，很容易混淆，所以接下来我将结合具体实例来讲讲他们的共同点和区别。 一、共同点 ① 接受一个或两个参数，其中第一个参...
JavaScript BOM-三剑客
rizon886的博客
07-25 128
元素偏移量—offset 系列 属性： <!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=ed...
前端三剑客之javascript
awm3865的博客
01-02 165
javascript介绍 javascript主要是为了实现在前端页面显示的一些动态效果.它也是一门非常强大的语言,不仅可以写前端页面,也可以编写后端.可以说非常的 强大,语言的兼容性非常的好,不会轻易的报错. 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的： 核心（ECMAScript） 文档对象模型（DOM） Document object mo...
前端三剑客之JavaScript
程序员Sharry的博客
07-18 531
前端三剑客之JAVAScript
前端三剑客之——HTML
m0_62565675的博客
12-06 318
HTML基础知识
html、CSS、JavaScript
09-13
前端三剑客——HTML、CSS和JavaScript，共同构建了网页的骨架、皮肤和灵魂。HTML定义了页面的结构，CSS美化了这个结构，而JavaScript赋予了页面动态性。学习这三者，你需要理解它们之间的关系，如何协同工作，以及...
PHP实例开发源码——即时网络聊天 iWeb开源三剑客之iWebIM.zip
12-01
【PHP实例开发源码——即时网络聊天 iWeb开源三剑客之iWebIM.zip】是一个包含PHP编程语言实现的即时通讯系统源代码。这个项目被称为“iWeb开源三剑客”之一，意在提供一个完整的、实时的网络聊天解决方案。在深入...
PHP实例开发源码——php 即时网络聊天 iWeb开源三剑客之iWebIM.zip
11-25
【描述】"PHP实例开发源码——php 即时网络聊天 iWeb开源三剑客之iWebIM" 暗示了这是一套完整的解决方案，可能包括服务器端脚本、前端界面以及必要的数据库结构。iWeb开源三剑客通常指的是一个由多个组件组成的开源...
前端html学习记录，可
02-24
在前端开发领域，HTML（HyperText Markup Language）是构建网页内容的基础语言，它与CSS（Cascading Style Sheets）和JavaScript一起构成了Web开发的三剑客。本学习记录主要聚焦于HTML的学习，通过三个关键文件——...
javascript-2
02-19
13. **前端框架**：React、Vue、Angular等现代前端框架极大地提高了开发效率，它们利用JavaScript构建复杂的用户界面。 14. **Web API**：浏览器提供的各种API，如WebSocket、Geolocation、localStorage等，让...
前端三剑客之JavaScript初体验
探索者李小白的博客
10-16 512
为什么学习JavaScript？ 从这两年的发展趋势来看，大前端应该是打了实锤了，而JavaScript作为web前端的主要编程语言，自然是不容小觑。HTML 定义了网页的内容，CSS 描述了网页的布局，而JavaScript 决定网页的行为。 JavaScript是什么？ JavaScript是一种轻量级的编程语言 JavaScript 是可插入 HTML 页面的编程代码。 JavaScrip...
python爬虫基础——Webbot库介绍
qq_56262770的博客
07-22 979
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 284
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 244
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 293
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 988
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 947
CTFWP，ctfshow-web42
docker三剑客之swarm
04-18
Docker Swarm是Docker官方提供的容器编排工具，它是Docker三剑客之一。它的主要功能是将多个Docker主机组成一个集群，以实现容器的高可用性和负载均衡。 Swarm的核心概念是服务（Service），一个服务由多个容器组成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值