JavaScript基础语法整理

最新推荐文章于 2023-02-24 21:27:33 发布
最新推荐文章于 2023-02-24 21:27:33 发布
阅读量209 收藏
点赞数
分类专栏： 前端 html 文章标签： javascript 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geejkse_seff/article/details/123422625
版权
前端 同时被 2 个专栏收录
43 篇文章 4 订阅
订阅专栏
html
43 篇文章 0 订阅
订阅专栏

JavaScript基础语法整理

特征

在这里插入图片描述

注意:

在这里插入图片描述

JavaScript的组成

在这里插入图片描述

JavaScript的引入方式

内部脚本

在这里插入图片描述代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
		<script>
			alert("关闭此窗口，将会引发蝴蝶效应");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

外部引入

在这里插入图片描述
代码演示:

//JS1.js里面的代码
var a=10;
var b=510;
alert(a+b);


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
		<script src="图片/JS1.js"></script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
特别注意:
在这里插入图片描述

JavaScript规范化的标签放置位置

在这里插入图片描述
在这里插入图片描述

JavaScript语法及其规则

注释

在这里插入图片描述

变量

在这里插入图片描述

基本数据类型

在这里插入图片描述

JavaScript和JAVA的区别

在这里插入图片描述
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
			var a=100;
			a=true;
			a="大忽悠";
			alert(a);
		</script>
			</body>
</html>

在这里插入图片描述

typedef—获取当前变量的类型

在这里插入图片描述
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
			var a=100;
			a=true;
			a="大忽悠";
			alert(typeof(a));
		</script>
			</body>
</html>

在这里插入图片描述

引用数据类型

在这里插入图片描述

运算符

比较运算符

在这里插入图片描述

逻辑等和全等运算符

在这里插入图片描述
举例:
在这里插入图片描述

逻辑运算符

在这里插入图片描述

正则对象

RegExp对象的创建方式

在这里插入图片描述

test方法

在这里插入图片描述

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
		//必须全部字符符合正则表达式，才会返回true，否则返回false
           var reg=/^s*$/;//0~多个空格
		   var flag=reg.test("    ");
		   alert(flag);
		</script>
			</body>
</html>

在这里插入图片描述

正则对象使用注意事项

在这里插入图片描述
普通方式与直接量方式区别的代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
		   //普通方式
		   //除非全部字符不符合正则
		   //只要有一个符合正则就返回true
		   var reg=/s+/;//1~多个空格
		   var flag=reg.test("a  aa aaa ");
		   alert(flag);
		</script>
			</body>
</html>

在这里插入图片描述

JS数组对象

JS数组的特性

在这里插入图片描述

JS数组的四种创建方式

在这里插入图片描述

JS数组的常用属性和方法

在这里插入图片描述

length方法演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
          var arr=['hello','哈哈哈',1,2];
		  alert(arr.length);//长度为4
		  arr[1]=true;
		  alert(arr.length);//长度为4
		  arr[10]='嘿嘿';
		  alert(arr.length);//长度为11
		</script>
			</body>
</html>

join方法演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
          var arr=['hello','哈哈哈',1,2];
          var ret=arr.join("+");
		  alert(ret);
		</script>
			</body>
</html>

在这里插入图片描述
reverse方法演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
          var arr=[1,2,3,4];
		  //反转后，返回一个反转后的数组
           var arr2=arr.reverse();
		  //下面打印这个数组
		  alert(arr2);
		</script>
			</body>
</html>

reverse----把元素下标进行互换，将原数组的元素进行反转，会改变原数组，并且反转后，还会返回一个数组
在这里插入图片描述

pop方法演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
          //pop:删除并返回数组中的最后一个元素
		  var arr=[1,2,3,4];
		  var ret=arr.pop();
		  alert(ret);
		  alert(arr.length);
		</script>
			</body>
</html>

在这里插入图片描述
在这里插入图片描述

push方法演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
       //push:向数组末尾追加一个或者多个元素，返回数组的新长度
		  var arr=[1,2,3,4];
	var len=arr.push(5,6,7,8);
	alert(arr);
	alert("数组的新长度为:"+len);
		</script>
			</body>
</html>

在这里插入图片描述在这里插入图片描述

全局函数

执行函数

在这里插入图片描述
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
        //eval(string) 可以把传入的字符串，作为js的代码执行
		//主要作用:扩展程序的功能
		//注意事项:只能传递基本数据类型的字符串，不能传入字符串对象
		eval("var x=10;");
		alert(x);
		</script>
			</body>
</html>

在这里插入图片描述
不能传入字符串对象

		eval(new string("var x=10;");

编码和解码

在这里插入图片描述
URL:针对中文和特殊符号，将其从十进制转换为16进制，并在每一位前面加上%进行拼接-----%16进制

作用:保证数据传递的完整性

代码演示：

编码过程:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
      //js: encodeURI(string)
	  //对字符串进行URI编码，返回值就是编码后的结果
	  var msg="http：//www.百度.com?username=大忽悠&password=123";
	  alert(encodeURI(msg));
		</script>
			</body>
</html>

在这里插入图片描述
只会对中文和特殊符号进行编码

解码过程:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
      //js: encodeURI(string)
	  //对字符串进行URI编码，返回值就是编码后的结果
	  var msg="http：//www.百度.com?username=大忽悠&password=123";
	  encodeURI(msg);
	  
	  //decodeURI(string) 
	  //对字符串进行URI解码，返回值就是解码后的结果
	 var temp=decodeURI(msg);
	 alert(temp);
		</script>
			</body>
</html>

在这里插入图片描述

URL 和 URI 的区别

在这里插入图片描述
在这里插入图片描述
URI 和 URL 在编码方面是相同的，区别只在于地址

字符串转数字

在这里插入图片描述
parseint的展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
        var str="10.55";
		var num1=parseInt(str);
		alert("num1的类型"+typeof(num1)+" "+"num1的值: "+num1);
		</script>
			</body>
</html>

在这里插入图片描述
parsefloat展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
        var str="10.55aaaa";
		var num1=parseFloat(str);
		alert("num1的类型"+typeof(num1)+" "+"num1的值: "+num1);
		</script>
			</body>
</html>

在这里插入图片描述注意:
在这里插入图片描述

自定义函数

函数的简述及其作用

在这里插入图片描述

函数格式

在这里插入图片描述

代码演示:

       function getSum(a,b)
		{
			return a+b;
		}

函数调用

代码演示:

		<script>
        function getSum(a,b)
		{
			return a+b;
		}
		var ret=getSum(1,2);
		alert(ret);
		</script>

在这里插入图片描述

函数使用注意事项

在这里插入图片描述

自定义对象

function构造对象

在这里插入图片描述
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
		//定义/声明了一个Person对象
           function Person()
		   {
			   
		   }
		   //创建了一个Person对象
		   var p=new Person();
		   alert(p);
		</script>
			</body>
</html>

在这里插入图片描述

属性相关设置

属性设置:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
		//定义/声明了一个Person对象
		//定义对象的属性
		//this----->当前的Person对象
           function Person()
		   {
			   this.name="大忽悠";
			   this.age=19;
		   }
		   //创建了一个Person对象
		   var p=new Person();
		   alert(p.name+"  "+p.age);
		</script>
			</body>
</html>

在这里插入图片描述

构造参数赋值:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
		//定义/声明了一个Person对象
		//定义对象的属性
		//this----->当前的Person对象
		
		//为属性赋值
		//1.构造参数赋值
           function Person(n,a)
		   {
			   this.name=n;
			   this.age=a;
		   }
		   //创建了一个Person对象
		   var p=new Person("大忽悠",19);
		   alert(p.name+"  "+p.age);
		</script>
			</body>
</html>

在这里插入图片描述

外部对属性赋值:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
		<script>
		//定义/声明了一个Person对象
		//定义对象的属性
		//this----->当前的Person对象
		
		//为属性赋值
		//1.构造参数赋值
           function Person(n,a)
		   {
			   this.name=n;
			   this.age=a;
		   }
		   //创建了一个Person对象
		   var p=new Person("大忽悠",19);
		   //属性在赋值
		   p.name="小朋友";
		   alert(p.name+"  "+p.age);
		</script>
			</body>
</html>

在这里插入图片描述

创建对象后，使用对象.属性的方式，动态定义属性

		<script>
           function Person(n,a)
		   {
			   this.name=n;
			   this.age=a;
		   }
		   var p=new Person("小朋友",19);
		   p.sex="woman";
		   alert(p.name+" "+p.age+" "+p.sex);
		</script>

在这里插入图片描述

对象直接量

在这里插入图片描述
代码演示:

		<script>
		//Person实例对象，创建完毕
   var Person={name:"大忽悠",age:18};
   alert(Person.name+" "+Person.age);
		</script>

在这里插入图片描述

在外部使用对象.的方式，为属性赋值

		<script>
		//Person实例对象，创建完毕
   var Person={name:"大忽悠",age:18};
   Person.name="小朋友";
   alert(Person.name+" "+Person.age);
		</script>

在这里插入图片描述

属性在外部创建

		<script>
		//Person实例对象，创建完毕
   var Person={name:"大忽悠",age:18};
   Person.name="小朋友";
   Person.sex="Woman";
   alert(Person.name+" "+Person.age+" "+Person.sex);
		</script>

在这里插入图片描述

javaScript严格检查模式

在这里插入图片描述

DOM新增知识点

window代表浏览器窗口----window的一些方法

在这里插入图片描述

screen获取屏幕尺寸

在这里插入图片描述

location对象

在这里插入图片描述
设置新地址后，如果放在一个方法里面，方法一旦执行，会直接跳转到对应的页面，下面的href属性同理
在这里插入图片描述

location.href = 'http://www.baidu.com'

详解location对象

document对象

在这里插入图片描述

获取和劫持cookie,以及history属性在页面端完成网页的前进后退

在这里插入图片描述

更新DOM节点

在这里插入图片描述

删除DOM节点

在这里插入图片描述

插入节点----追加

在这里插入图片描述

把已经存在的标签移动到其他标签体内部

在这里插入图片描述
在这里插入图片描述

创建一个新的标签，移动到某处

在这里插入图片描述

jquery中append()和appendTo()的区别

jquery中append()和appendTo()的区别

通过js创建一个新节点，标签节点和style标签

在这里插入图片描述

把新节点插入到某个节点之前

在这里插入图片描述

获得和设置表单的值

在这里插入图片描述

表单提交验证，前端密码MD5验证

使用MD5加密函数需要引入相关资源，可以选择下载，也可以引用网络资源

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

工具类—MD5简单介绍以及MD5工具类

工具类—MD5简单介绍以及MD5工具类

MD5工具类的封装

geejkse_seff
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础语法
weixin_52397329的博客
11-19 361
JavaScript基础语法 主要内容 JavaScript 简介 ​ JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。 JavaScript 的组成 ​ ECMAScript定义的只是这门语言的基础，与Web浏览器没有依赖关系，而在基础语法上可以构建更完善的脚本语言。JavaScript的运行需要一定的环境，脱离了环境JavaScript.
数据类型——JS高级
mantou_riji的博客
04-24 529
文章目录数据类型分类数据类型的判断基本数据类型的类型判断typedef\=\=\= / ==（全等于/等于）对象类型的类型判断instanceoftypedef补充：函数的嵌套小问题1.undefined与null的区别2. 什么时候赋值为null3. 严格区别变量类型与数据类型? 数据类型分类 基本(值)类型 String:任意字符串 Number:任意的数字 booLean: true/false undefined: undefined null: nuLL 对象(引用)类型 object:
typedef用法详解
huangtonggao的专栏
03-15 716
<br />用途一： <br />定义一种类型的别名，而不只是简单的宏替换。可以用作同时声明指针型的多个对象。比如： <br />char* pa, pb;  // 这多数不符合我们的意图，它只声明了一个指向字符变量的指针，  <br />// 和一个字符变量； <br />以下则可行： <br />typedef char* PCHAR;  // 一般用大写 <br />PCHAR pa, pb;        // 可行，同时声明了两个指向字符变量的指针 <br />虽然： <br />char *pa
JS (一) 数据类型
m0_57093454的博客
03-13 563
目录 1.Number 2.String 3.Undefined 4.Null 5.Boolean 1.Number 整数声明与初始化: var num=12; 赋值: var num=30; num=20; 八进制的数字用0开头表示，十六进制的数字用0x开头表示，例如 var a=07; //代表八进制数 var b=0xA1; //代表十六进制数 需要注意的是，如果使用八进制时超出了当前数所可以表示的范围，那么就会忽略掉最前面的0，转而以十进制去解释这个数字 科学计数
js三行注释解析
@不喝海之言@
12-07 1318
文章目录示例注释解析abstractaccessaliasasyncaugmentsauthorborrowsclassclassdescconstantconstructscopyrightdefaultdeprecateddescriptionenumeventexampleexportsexternalfilefiresfunctiongeneratorglobalhideconstructorignoreimplementsinheritdocininstanceinterfacekindlends
整理Javascript基础语法学习笔记
10-23
整理Javascript基础语法学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript基础语法，希望大家继续关注
javascript入门-基础语法笔记整理.md
12-14
一个周前自己较系统地学完 javascript，但老感觉自己对基础语法部分的掌握不够扎实，javascript 的基础语法内容实在是丰富灵活，但这部分是进大厂必不可缺的知识，于是花了不少时间耐心整理了这篇笔记，以此夯实基础...
JavaScript基础知识整理
最新发布
02-26
JavaScript是一种广泛应用于前端...总之，JavaScript作为一种强大的前端编程语言，它的基础包括变量、数据类型、对象等概念，这些构成了构建动态Web应用的基础。了解并掌握这些基础知识，对于进行前端开发至关重要。
关键字 typedef 使用参考
07-11
typedef到处都是，但是能够真正懂得typedef使用的不算太多。对于初学者而言，看别人的源码时对到处充斥的typedef往往不知所错，而参考书又很少，所以在此给出一个源码，供大家参考ypedef 声明有助于创建平台无关类型，甚至能隐藏复杂和难以理解的语法。不管怎样，使用 typedef 能为代码带来意想不到的好处，通过本文你可以学习用 typedef 避免缺欠，从而使代码更健壮。 文档中含有完整代码及注释，并且有typedef的详细用法。
JavaScript学习笔记,javascript基础知识,基础语法整理.pdf
11-24
JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言，能实现网页的交互功能。下面是该资源中的重要知识点总结： 一、 JavaScript 基本概念 * ...
typedef的使用
03-11 206
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 6321
JavaScript基础语法学习笔记，视频教程链接放在末尾
【JavaScript】基本语法大全
我的主页
02-24 8004
本期讲解：JavaScript中的数据类型、表达式、运算符、选择与循环结构。
typedef与typeof
iefswang的专栏
09-04 3881
typedef 作用： 给一个数据类型起一个别名。使得编程时较简单规范。其中有一点需要注意，如 typedef char*  pstr2； char string[4]; const char * pstr1=string; const pstr2=string; pstr1++; pstr2++; 这里会在pstr2++处报错。原因是pstr2是const类型，不能进
JavaScript基本语法
weixin_62270300的博客
02-25 2887
关于JavaScript基本语法大家的掌握有多少呢？接下来我们从以下方面一起回忆一下 首先关于JavaScript的认识 什么是JavaScript？ JavaScript的组成部分 JavaScript的主要用途 脚本执行原理 什么是JavaScript？ JavaScript是一种直译式脚本语言，是一种弱类型的语言。最早是在HTML网页上使用，用来给HTML网页增加动态效果。 JavaScript的组成部分是什么? ECMAScript ：JavaScript的基本语法 DOM
JavaScript基础语法速成指南
"快速自学JavaScript的基础语法文档，由作者写代码的小鱼儿整理，用于学习交流，涵盖了JavaScript的简介、特点、执行环境、作用及历史背景等基础知识。" JavaScript是互联网上广泛使用的脚本语言，它是一种基于对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值