JavaScript（一）、(对象、函数、数组、数据类型；正则表达式；AJAX)

JavaScript 代码是由浏览器中的JavaScript解析器来执行的，JavaScript 解析器 在运行 JavaScript 代码的时候分两步：预解析 和 代码执行。

    预解析：

目录

预解析 

 一、对象、函数、数组、数据类型

（一）、对象

1、创建对象的方法：

2、常见内置对象有：Math、Data等。。。。

 (二)、函数

 一、arguments 对象

 (三)、数组

（四）、数据类型 

1、数据类型分类

2、检测数据类型 typeof

3、数据类型转换

二、正则表达式

三、AJAX

 Node.js 基础知识------Ajax详细的环境搭建_举一个栗子吖的博客-CSDN博客_nodejs+ajaxhttps://blog.csdn.net/qq_45359288/article/details/124016992

1、什么是ajax

2、工作原理

1、json 格式 

2、xml 格式

 3、Ajax 的核心： XMLHttpRequest 对象

 4、Ajax 的请求方式： 

1、get请求

2、post请求

 5、获得服务器响应方式： 

1、onload

2、onreadystatechange

五、json/XML

---

一、对象、函数、数组、数据类型

对象、函数、数组、数据类型、 （一）、对象                                      自定义对象， 内置对象， 浏览器对象           对象里面包括属性和方法 区别 变量和属性 1. 声明方式；存在形式；使用的方法 函数和方法 　函数（function）是可以执行的javascript代码块，由javascript程序定义或javascript实现预定义。函数可以带有实际参数或者形式参数，用于指定这个函数执行计算要使用的一个或多个值，而且还可以返回值，以表示计算的结果。 　　方法（method）是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。假设有一个函数是fn，一个对象是obj，那么就可以定义一个method： 方法中的数据是隐式传递的； 方法可以操作类内部的数据（请记住，对象是类的实例化–类定义了一个数据类型，而对象是该数据类型的一个实例化） 1、创建对象的方法： 1.1、 1.2、 1.3、  使用var ldh = new Star() 调用函数创建一个对象 ldh； 2、常见内置对象有：Math、Data等。。。。 Math - JavaScript | MDN (mozilla.org)  (二)、函数  一、arguments 对象 1、arguments  指的是传递到函数或由函数接收到的真实值。当不确定参数传递的个数时，可以使用。 它是当前函数的一个内置对象，所有的函数都内置了一个arguments 对象，arguments 对象中存储了传递的所有实参。 function example(x) { alert(x); //1 alert(arguments.length); //3 for (var i = 0; i < arguments.length; i++) { alert(arguments[i]); //1,2,3 } } example(1, 2, 3);  (三)、数组 arr = [1,2,3,'pink']   （四）、数据类型  1、数据类型分类   2、检测数据类型 typeof 3、数据类型转换

二、正则表达式

符号	表达式	可匹配的	意思
[]	[p,P]ython  [0-9] [0-9a-zA-Z] [p-z\-] [^0-9]	python3,  Python+ ,    0,9,822 0aA, Fc8 qpzx-- hxsggus	区间[] [] 中的内容至少出现一次即可; 匹配特殊字符用\; 前面使用-来表示区间，-为特殊字符 前面加^ 表示不匹配后面的内容
\	\d \D	93793240 bhjvfbkj	只匹配数字 匹配所有非数字
	\w \W	aknAVJHBm -+832876.；】	只匹配字母（无论大小写） 不匹配字母（无论大小写）
	\s		空白
	\b （\bmaster\b）	hjsmasterj99	匹配完整的单词边界
^	^python	python	区间外面加^,只匹配开头的单词
$	python$ ^python$	python	字符段后面加$,只匹配末尾结尾的单词 只匹配 python
.	a.. .b	aii; a89;  basdvlb; 13b	除了换行符不能匹配其他都可以
?	1  honou?r \d{8,9} 2  \d{8,9}?	1  honour; honor 12345678,123456789 2  12345678	1.u可出现，可不出现 2.非贪婪模式 可以匹配8个或9个
.?
{}	\d{9} \d{9,} \d{0,9}	123456789 1234567890987	匹配的个数为9 匹配的数子个数为9个及以上 匹配的个数为0到9个
+	f.+	ff722hsn1l82y--..	等价于 {1,}  1到无数个字符 一个单独的f不能匹配，f后面需要至少跟一个字符。
*	f.*	f	等价于 {0,} 0到无数个字符
()	<div>(.*)</div>	<div>hi</div>	提取()里面的数据hi
(?:表达式)			（）中的内容表示非捕获组
回溯分组\n	<(\w+)>(.*?)</\1>	<font>提示</font>	提取到 提示， 回溯第1个分组(\w+) 对于<font>提示</input> 里面的内容是不提取的
正向先行断言（环视） (?=表达式)		只提取喜欢，不提取你	所在的位置必须能匹配表达式；
/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,20}$/  也可以 不加$也可以
反向先行断言（环视） (?!表达式)		只提取喜欢，不提取你	目的是保证右边不出现某字符
正向后行断言（环视） (?<=表达式)		只提取‘’我’后面的，和 ‘你’ 前面的 ‘喜欢’。	指在某个位置向左看，所在的位置必须能匹配表达式；
反向后行断言（环视） (?<!表达式)		喜欢的前面没有我，后面没有你

三、AJAX

附： Ajax详细的环境搭建 (在本机上建服务器) 因为Ajax 需要用到服务器，所有需要一些环境搭建  Node.js 基础知识------Ajax详细的环境搭建_举一个栗子吖的博客-CSDN博客_nodejs+ajaxhttps://blog.csdn.net/qq_45359288/article/details/124016992 在后面执行代码时可能会出现错误，应该是出现了跨域问题，要在powershell 里 npm i cors, 然后再在app.js里路由前引入cors，const cors = require('cors'),然后app.use(cors()) //跨域问题   ：   尝试加载的网页和 XML文件 都必须位于相同服务器 // 比如：尝试加载的网页url=http://127.0.0.0:5000/server/public/test1.html // 服务器里的文件 url= http://localhost:3000/first 出现跨域问题

1、什么是ajax

AJAX = Asynchronous JavaScript And XML.

AJAX 仅仅组合了：

• 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
• JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

2、工作原理

1、json 格式  <script> var xhttp = new XMLHttpRequest(); xhttp.open('get','http://localhost:3000/second'); xhttp.send(); xhttp.onload = function(){ console.log(xhttp.responseText); //直接得到的是json字符串 var respsecd = JSON.parse(xhttp.responseText); // 将json字符串 转换为 JSON 对象 console.log(respsecd); // 从后端服务器 将数据显示在 前端页面 var str = '<h2>'+ respsecd.name +'</h2>' document.body.innerHTML = str; } </script> 2、xml 格式 从 XML 文件提取节点（因素），最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新： xhttp.open("GET", "/demo/music_list.xml", true); var xmlDoc = xml.responseXML; var x = xmlDoc.getElementsByTagName("TRACK");

 3、Ajax 的核心： XMLHttpRequest 对象

所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是：variable = new XMLHttpRequest();

 4、Ajax 的请求方式： 

1、get请求 （1）、不带参          xhttp.open('get', 'http://localhost:3000/first',true);         xhttp.send(); （2）、带参 // 客户端            var params = "username=" + inputUsername.value + "&password=" + inputPassword.value;             var xhttp = new XMLHttpRequest();             xhttp.open('get', 'http://localhost:3000/get?' + params);             xhttp.send();             // 4、获取服务端响应到客户端的数据             xhttp.onload = function () {                 console.log(xhttp.responseText)             } // 服务器 app.get('/get',(req,res) => {     // req.query 拿到请求的参数     res.send(req.query); });

2、post请求 （1）、带参 xhttp.open('post', 'http://localhost:3000/post' );             // setRequestHeader() 添加一个 HTTP 头部,来规范参数格式             xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");             xhttp.send(params); app.post('/post',(req,res) => {     // req.body 拿到请求的参数     res.send(req.body); }); 当参数的格式为json时： <script> // 请求参数格式为json时 var jsonGeshi = { name: "zhangsan", age: '20' }; var xhttp = new XMLHttpRequest(); // json xhttp.open('post', 'http://localhost:3000/json'); // setRequestHeader() 添加一个 HTTP 头部,来规范参数格式 xhttp.setRequestHeader("Content-type", "application/json"); xhttp.send(JSON.stringify(jsonGeshi)); //将json对象转换为json字符串 // 4、获取服务端响应到客户端的数据 xhttp.onload = function () { console.log(xhttp.responseText) } app.post('/json',(req,res) => { // req.body 拿到post 方式请求的参数 res.send(req.body); }); （2）、

 5、获得服务器响应方式： 

1、onload / 4、获取服务端响应到客户端的数据     xhttp.onload = function () {         console.log(xhttp.responseText);     }; 2、onreadystatechange / 4、获取服务端响应到客户端的数据     xhttp.onreadystatechange = function () {         if (this.readyState == 4 && this.status == 200) {             console.log(xhttp.responseText);         }     };

五、json/XML