11.26

1.17.4 数学：
Math 对象
Math 对象用于执行数学任务。
使用 Math 的属性和方法的语法：
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
ceil(x)
对数进行上舍入。
floor(x)
对数进行下舍入。

max(x,y)
返回 x 和 y 中的最高值。
min(x,y)
返回 x 和 y 中的最低值。
pow(x,y)
返回 x 的 y 次幂。
random()
返回 0 ~ 1 之间的随机数。
round(x)
把数四舍五入为最接近的整数。
sqrt(x)
返回数的平方根。

1.18 随机数:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

// for(let i=0;i<10;i++){
// let r = Math.floor(Math.random()*10);
// console.log(r)
// }

let student = ["丁炜鸿","小辉","小东","小林","小辉2","小辉3"];

//r其实是随机生成的一个下标
let r = Math.floor(Math.random()*6);

//要输出这个数组的元素
console.log(student[r]);

</script>
</body>
</html>

1.18.1 双色球:

红色球号码区由1-33共三十三个号码组成，蓝色球号码区由1-16共十六个号码组成。投注时选择6个红色球号码和1个蓝色球号码组成一注进行单式投注，每注金额人民币2元。

从1-33随机选择6个，但是要求不能重复.
从1-16随机选择1个.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.red{border-radius: 15px; border: 1px solid red; width: 20px; height: 20px; float: left; color: red}

.blue{border-radius: 15px; border: 1px solid blue; width: 20px; height: 20px; float: left}
</style>
</head>
<body>

// 从1-33随机选择6个，但是要求不能重复.
//创建一个数组，用来存放红球
let redarray = new Array();

//存放33个红球的数组[从已经编号33个球中]
let redinit = new Array(33);

//赋值为默认
for(let i=0;i<redinit.length;i++){
redinit[i] = i+1;
}

console.log("红球初始编号: "+redinit)

//随机
for(let i=0;i<6;i++){
//随机数的下标 ->redinit.length 每次要变化的
let rindex = Math.floor(Math.random()*redinit.length);

console.log(i+"--- "+redinit[rindex]);

//将这个下标rindex的值存放在数组中
redarray.push(redinit[rindex])

//将此次生成的球从原始 init数组中删除
redinit.splice(rindex,1)

console.log("redinit.length :"+redinit.length)
console.log("redinit: "+redinit)

}

console.log(redarray)

redarray.sort(function(a,b){
return a-b;
});

console.log(redarray)
//得到页面上div元素
let reddiv = document.getElementsByClassName("red");
for(let i=0;i<reddiv.length;i++){
if(redarray[i]<10){
reddiv[i].innerHTML = "0"+redarray[i];
}
else{
reddiv[i].innerHTML = redarray[i];
}

}
//再生成一个蓝球
// let blue = Math.ceil(Math.random()*16);
//
// console.log(blue)

</script>
</body>
</html>

1.19 函数:
//1 函数是一段代码,完成特定某个功能的块.可以被多次调用
//2 语法结构: function 固定的
// 函数名-> 自定义,动词，功能相关的 getmax,getsum,findById,sort
//() 固定，当然括号可以为空，可以写 -> "参数" ->函数执行的过程中，需要依赖外部数据，这些数据通过参数传递进来.
//函数执行的前提条件.
//定义函数 -》求两个数字中的最大值参数前不要加 let var -》还不能确定参数的值，我们将这种定义函数参数成为形式参数，简称形参

以上是最基础函数的定义和调用，我们下面做表表格汇总.

语法函数参数返回值调用方法
//无参数，无返回值
function fun01(){
console.log("fun01")
}
无参数，执行不需要条件无返回值. 1.直接在js中调用
2.事件调用
//无参数，有返回值
function fun02(){
return "string";
}
无参数，执行不需要条件有返回值.必须要接收并处理.
1.直接在js中调用
2.事件调用
//实现特定功能: 计算两个数字的和
function getsum(a,b){
//在函数内部，将a和b当成已知条件
let sum = a+b;
console.log("sum :"+sum);
}
有两个参数，分别为a和b，用逗号隔开没有返回值. 1.直接在js中调用
2.事件调用
function getsum2(a,b){
//在函数内部，将a和b当成已知条件
let sum = a+b;

//return 后面的内容就是返回值
return sum;
}
有两个参数，分别为a和b，用逗号隔开有返回值.必须要接收并处理.

用的是最多的.
//return 后面的内容就是返回值
//1. 函数中只能return 一次
//2. 如果有多次return的代码也只是去执行第一个而已
//3.其实 return 的功能是结束当前的函数
1.直接在js中调用
2.事件调用

函数定义和调用:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

<input type="button" value="匹配个女朋友" onclick="randomgf()"><br/>
林恒辉的女票:
<div id="result">
图片，动画，视频，额我脑子描述。。。。。
</div>

//随机数 0-9
let r = Math.floor(Math.random()*10);

//定义数组 ->名字图片...
let star = ["不知火舞","凤姐","峭壁咯","李若彤","关之琳","邱淑贞","周慧敏","胡歌","古力娜扎","马儿扎哈"];

//可以直接将star的值显示在div
document.getElementById("result").innerHTML = star[r];

}

</script>

</body>
</html>
1.19.1 刷题模式:
求和:
用函数来实现，传递一个参数n给函数，返回值为1+2+…+n的和

//2带参数有返回值
//用函数来实现，传递一个参数n给函数，返回值为1+2+…+n的和
function getsum(n){

let sum = 0;
if(n<1){
return 0;
}
else{
for(let i=1;i<=n;i++){

sum+=i;
}
return sum;
}
}

用函数来实现，传递一个参数n给函数，判断这个n是否是偶数,并返回结果;

/**
* 用函数来实现，传递一个参数n给函数，判断这个n是否是偶数,并返回结果; 这种用的多.
* @param n
* @returns {boolean} true 是偶数 false不是偶数
*/
function iseven(n){

if(n%2==0){
return true;
}
return false;
}

用函数来实现，传递一个参数n给函数，判断这个数字n是否是质数，并返回结果.

/**
* 用函数来实现，传递一个参数n给函数，判断这个数字n是否是质数，并返回结果.
* 计算的反而不是1和他本身。 1到本身之间的数
* 7 -》2 3 4 5 6
* 9 -》2 3-》game over 不是质数
* 101 -> %2 %3 %4 .......%100
* 101 -> %2 %3 %4 .......%50.没必要，到一半
* 101 -> %2 %3 %4 .......101的平方根.
* @param n
* @returns {*}
*/
function isprime(n){

for(let i=2;i<=Math.sqrt(n);i++){
if(n%i==0){
return false;
}
}
return true;
}

用函数来实现，传递一个参数name给函数，给这个人卜卦，并返回结果.

1.20 自定义对象:
1.21 DOM操作: DOM和BOM
1.22 Ajax*:阿贾克斯 JSON

1.22.1 AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

1.22.2 XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 对象用于和服务器交换数据。
1.22.3 向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。
• string：仅用于 POST 请求

1.22.4 服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
1.22.5 onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

1.22.6 参考：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>

//事件写来
xhr.onreadystatechange = function(){

//4 请求已完成，且响应已就绪
//200: "OK"
if(xhr.readyState == 4 && xhr.status == 200){

//拿到服务器响应的数据
let result = xhr.responseText;
console.log(result);

}
}

}
</script>
</body>
</html>

完成上面的代码体会ajax执行过程，debug查看具体过程。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>

//3 事件写来
xhr.onreadystatechange = function(){

//4 请求已完成，且响应已就绪
//200: "OK"
if(xhr.readyState == 4 && xhr.status == 200){

//拿到服务器响应的数据,默认响应结果是普通的文本
let response = xhr.responseText;

//需要将拿到数据解析成对象->JS对象
let parseData = JSON.parse(response);
console.log(parseData);

//对象.属性
console.log(parseData.message)
console.log(parseData.code)

//解析 name : 赵xx
console.log(parseData.result.name)

document.getElementById("username").innerHTML = parseData.result.name;

}
}

}
</script>
</body>
</html>

从服务器接口拿到数据，解析json.

http://poetry.apiopen.top/poetryAuthor?count=2&page=1&name=李白

http://poetry.apiopen.top/poetryAuthor?name=%E5%B2%B3%E9%A3%9E
我们发现上面接口可以精简为
http://poetry.apiopen.top/poetryAuthor
我们可以传递参数给这个接口: 格式是 ?name=诗人名字
响应的结果也是根据name来返回的.

1. 设计页面
2.传递参数

3.解析结果并显示

1.22.7 最终代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>

<div id="username"></div>
<div id="simpleIntro"></div>
<div id="detailIntro"></div>
<script>
function loadData(){
//要通过ajax拿到数据,从网络上的某个接口来.
//1 .创建一个核心对象 XMLHttpRequest
let xhr = new XMLHttpRequest();
//2. 先open,设置请求方法,get ; url地址:远端接口请求; async是否异步
//http://poetry.apiopen.top/poetryAuthor?name=

let pname = document.getElementById("pname").value;

xhr.open("GET","http://poetry.apiopen.top/poetryAuthor?name="+pname,true);
//再send
xhr.send();

//3 事件写来
xhr.onreadystatechange = function(){

//4 请求已完成，且响应已就绪
//200: "OK"
if(xhr.readyState == 4 && xhr.status == 200){

//拿到服务器响应的数据,默认响应结果是普通的文本
let response = xhr.responseText;

//需要将拿到数据解析成对象->JS对象
let parseData = JSON.parse(response);
console.log(parseData);

if(parseData.result.name==undefined){
document.getElementById("username").innerHTML = "查无此人";

return ;
}

document.getElementById("username").innerHTML = parseData.result.name;
document.getElementById("simpleIntro").innerHTML = parseData.result.simpleIntro;

//detailIntro
// //替换\n-><br/>
document.getElementById("detailIntro").innerHTML = parseData.result.detailIntro.replace(/\\n/g,"<br>");

}
}

}

</script>
</body>
</html>

http://poetry.apiopen.top/poetryFull?count=2&page=1

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>

</div>

xhr.open("GET","http://poetry.apiopen.top/poetryFull?count=2&page=1",true);
//再send
xhr.send();

//3 事件写来
xhr.onreadystatechange = function(){

//4 请求已完成，且响应已就绪
//200: "OK"
if(xhr.readyState == 4 && xhr.status == 200){

//拿到服务器响应的数据,默认响应结果是普通的文本
let response = xhr.responseText;

//需要将拿到数据解析成对象->JS对象
let parseData = JSON.parse(response);
//console.log(parseData);

//拿到的是result
let array = parseData.result;

// console.log(array)

//循环遍历数组
for(let i = 0 ;i<array.length; i++){

let poem = array[i];
console.log(poem)

//提取poem对象的数据
document.getElementById("poem").innerHTML += poem.title +"<br/>";
//dynasty
document.getElementById("poem").innerHTML += poem.dynasty +"<br/>";
//writer
document.getElementById("poem").innerHTML += poem.writer +"<br/>";
//type
document.getElementById("poem").innerHTML += poem.type +"<br/>";
//content
document.getElementById("poem").innerHTML += poem.content +"<br/><hr>";

}

}
}

}

</script>
</body>
</html>

https://api.apiopen.top/getAllUrl

1.23 再说ajax
1. 服务端接口提供一个请求地址,暴露出来给我们的客户端访问: ajax
2.在客户端使用ajax技术来发送请求给服务器.

注意:不是所有的接口都可以通过ajax直接调用的，有些接口有特定方法，例如baiduAI的java代码来调用.

服务端接口:
1. 别人写好的，放在网络上公开出来的
https://gitee.com/safflower_club/free_api_interface

2.可以自己写的.掌握后端接口的编码的技术: node,java,PHP,等等

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>回顾函数</title>
</head>
<body>

//2.设置要连接的服务器url 方法
//从服务器接口拿数据，"GET"
//https://api.apiopen.top/getTencentNews
xhr.open("GET","https://api.apiopen.top/getTencentNews",true);

//发送请求
xhr.send();

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status ==200){

let response =JSON.parse(xhr.responseText);

console.log(response.data);
//遍历response.data
let array = response.data;
for(let i=0;i<array.length; i++){

console.log(array[i].title);
console.log(array[i].intro);
console.log("**********************");

}
}
}
</script>

</body>
</html>

解析：将数据显示在网页上，注意美观.
https://api.apiopen.top/getImages

1.24 再说JSON:
JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。

1.24.1 什么是 JSON ？
•JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
•JSON 是轻量级的文本数据交换格式
•JSON 独立于语言 *
•JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

1.24.2 JSON 语法规则
JSON 语法是 JavaScript 对象表示法语法的子集。
• 数据在名称/值对中
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

https://www.bejson.com/

1.24.3 JSON 值
JSON 值可以是：
• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在方括号中）
• 对象（在花括号中）
• null

1.24.4 JSON 文件
• JSON 文件的文件类型是 ".json"
• JSON 文本的 MIME 类型是 "application/json"

1.24.5 把 JSON 文本转换为 JavaScript 对象
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。

可以使用eval:
可以使用： JSON.parse将字符串文本转化为js对象.

定义一个.json文件，保存一些你喜欢的明星.

使用ajax方法去请求这个json文件.

但是发现json文件中文乱码了.

参考代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>回顾函数</title>
</head>
<body>

//2.设置要连接的服务器url 方法
//从服务器接口拿数据，"GET"

//直接请求文件
xhr.open("GET","star.json",true);

//发送请求
xhr.send();

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status ==200){

let response =JSON.parse(xhr.responseText);

console.log(response.results);
//遍历response.data
let array = response.results;
for(let i=0;i<array.length; i++){

console.log(array[i].name);
console.log(array[i].img);
console.log("**********************");

}
}
}
</script>

</body>
</html>

1.25 jQuery中的ajax:

1.25.1 定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
1.25.2 语法
jQuery.ajax([settings])
参数描述
settings 可选。用于配置 Ajax 请求的键值对集合。
可以通过 $.ajaxSetup() 设置任何选项的默认值。

url
类型：String
默认值: 当前页地址。发送请求的地址。
type
类型：String
默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
• "xml": 返回 XML 文档，可用 jQuery 处理。
• "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
• "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
• "json": 返回 JSON 数据。
• "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
• "text": 返回纯文本字符串

success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。

1.25.3 参考代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>

<button onclick="funajax()">ajax</button>

<script>
function funajax(){
$.ajax({
//Ajax 请求的键值对集合
url: "https://api.apiopen.top/getTencentNews",
type: "GET",
async: true,
dataType: "json",
success: function(res){
//res 从服务器返回的数据
console.log(res);

let array = res.data;
for(let i=0;i<array.length; i++){

console.log(array[i].title);
console.log(array[i].intro);
console.log("**********************");

}
}

});

}

</script>
</body>
</html>

posted @ 2021-11-26 16:39 左边第三只猫阅读(63) 评论(0) 收藏举报

刷新页面返回顶部

左边第三只猫

11.26

公告