Canvas、客户端、表单
Canvas
var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
滚动条还是可见的,原因是我们的“全窗尺寸画布”包含 元素的外边距(margin
),使得文档比窗口略宽。为使滚动条消失,需要删除 元素的 margin
并将 overflow
设置为 hidden
。
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
添加2D画布
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, width, height);
使用fillstyle
来填充颜色(其有第四个参数可设置透明度),然后使用fillrect
方法绘制一个覆盖整个区域的矩形(前两个参数是矩形左上顶点的坐标,后两个参数是矩形的长宽)
ctx.beginPath();
ctx.moveTo(50, 50);
绘制路径
beginPath 在钢笔当前所在位置开始绘制一条路径。
moveTo 将钢笔移动至另一个坐标点,不记录、不留痕迹,只将钢笔“跳”至新位置。
lineTo 将钢笔绘画至另一个坐标点,留下直线痕迹。
fill 通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。
stroke 通过为当前绘制路径的区域描边,来绘制一个只有边框的形状。
绘制图片
image.onload = function() {
ctx.drawImage(image, 50, 50);
}
用 drawImage()
函数来嵌入图片,应确保图片先载入完毕,否则运行会出错。
translate 移动画布左上角顶点。
ctx.translate(width/2, height/2);
**requestAnimationFrame **实现动画效果。
客户端存储
基本语法
web storage据都包含在浏览器内两个类似于对象的结构中: sessionStorage
和 localStorage
第一种方法,只要浏览器开着,数据就会一直保存 (关闭浏览器时数据会丢失) ,而第二种会一直保存数据,甚至到浏览器关闭又开启后也是这样。一般而言,第二种更有用。
Storage.setItem()
方法允许您在存储中保存一个数据项——它接受两个参数:数据项的名字及其值。试着把它输入到你的 JavaScript 控制台
Storage.getItem()
方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。
Storage.removeItem()
方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。
localStorage.setItem('name','Chris');
web storage会为每个域提供一个单独的数据存储区 (每个单独的网址都在浏览器中加载)
储存复杂数据IndexedDB
可以在浏览器中访问的一个完整的数据库系统,在这里,你可以存储复杂的关系数据。其种类不限于像字符串和数字这样的简单值。你可以在一个 IndexedDB 中存储视频,图像和许多其他的内容。但是,这确实是有代价的:使用 IndexedDB 要比 Web Storage API 复杂得多。
// Open our database; it is created if it doesn't already exist
// (see onupgradeneeded below)
let request = window.indexedDB.open('notes', 1);
// onerror handler signifies that the database didn't open successfully
request.onerror = function() {
console.log('Database failed to open');
};
// onsuccess handler signifies that the database opened successfully
request.onsuccess = function() {
console.log('Database opened successfully');
// Store the opened database object in the db variable. This is used a lot below
db = request.result;
// Run the displayData() function to display the notes already in the IDB
displayData();
};
Web表单
lable标签
label
中的for属性规定了与哪个表单元素绑定。for属性的值和表单元素的id值一样,即可完成该label标签与该表单元素的绑定。
<label for="test">label标签</label>
<input type="text" id="test" name="name">
如上所示,该label便签和input便签完成了绑定,当鼠标点击label
标签时,input
元素会被触发,用户即可完成输入。
label
标签加上for属性绑定了表单元素后,可以提高用户体验。
当点击label
标签内的文本后,就会触发绑定的表单元素。也就是说,当用户渲染该标签时,浏览器就会自动将焦点转到绑定的表单控件上。使标签可以点击。
隐藏内容
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
另一个原生的文本框控件是 hidden
input 类型。它被用于创建对用户不可见的表单部件,但在发送表单时,会与其它的表单数据一起被发送到服务器——例如,你可能希望向服务器提交一个时间戳,说明订单是何时产生的。因为它是隐藏的,所以用户看不到也不能简单地修改该值,它将永远不会获得焦点,屏幕阅读器也不会注意到它。
如果创建了这样一个元素,就需要设置它的 name
和 value
属性。元素的值可以通过 JavaScript 动态设置。hidden
input 类型不应有关联的标签(label
元素)。
复选框和单选框
checkbox
<fieldset>
<legend>Choose all the vegetables you like to eat</legend>
<ul>
<li>
<label for="carrots">Carrots</label>
<input type="checkbox" id="carrots" name="vegetable" value="carrots" checked>
</li>
<li>
<label for="peas">Peas</label>
<input type="checkbox" id="peas" name="vegetable" value="peas">
</li>
<li>
<label for="cabbage">Cabbage</label>
<input type="checkbox" id="cabbage" name="vegetable" value="cabbage">
</li>
</ul>
</fieldset>
相关的复选框元素应该使用具有相同值的 name
属性。包含 checked
属性使复选框在页面加载时自动被选中。
radio
<fieldset>
<legend>What is your favorite meal?</legend>
<ul>
<li>
<label for="soup">Soup</label>
<input type="radio" id="soup" name="meal" value="soup" checked>
</li>
<li>
<label for="curry">Curry</label>
<input type="radio" id="curry" name="meal" value="curry">
</li>
<li>
<label for="pizza">Pizza</label>
<input type="radio" id="pizza" name="meal" value="pizza">
</li>
</ul>
</fieldset>
几个单选按钮可以连接在一起。如果它们的 name
属性共享相同的值,那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选;这意味着当其中一个被选中时,所有其他的都将自动未选中。如果没有选中任何一个,那么整个单选按钮池就被认为处于未知状态,并且没有以表单的形式发送任何值。
图像按钮
图像按钮(image button)控件渲染的方式与几乎完全相同。只是在用户点击它时,图像按钮的行为与提交(submit)按钮相同。
图像按钮是使用 type
属性值设置为 image
的元素创建的。这个元素支持与元素相同的属性,和其他表单按钮支持的所有属性。
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30">
文件选择器
HTML 表单能够将文件发送到服务器;要创建一个文件选择器小部件,您可以使用元素,将它的 type
属性设置为 file
。被接受的文件类型可以使用 accept
属性来约束。此外,如果您想让用户选择多个文件,那么可以通过添加 multiple
属性来实现。
<input type="file" name="file" id="file" accept="image/*" multiple>
在一些移动终端上,文件选择器可以访问由设备相机和麦克风直接获取的图片、视频、音频。我们只需要这样设置 accept
属性即可(分别对应相机捕获的图片、视频和麦克风获取的音频):
<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
滑块控件
在元素中使用 range
作为属性 type
的值,就可以创建一个滑块,滑块可以通过鼠标、触摸,或用键盘的方向键移动。
<label for="price">Choose a maximum house price: </label>
<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
<output class="price-output" for="price"></output>
使用滑块的一个问题是,它们不提供任何种类的视觉反馈来说明当前的值是什么。这是我们附加了一个包含当前值输出的
const price = document.querySelector('#price');
const output = document.querySelector('.price-output');
output.textContent = price.value;
price.addEventListener('input', () => {
output.textContent = price.value;
});
这里我们将 range
输入元素和 output
元素存为了两个变量。然后我们马上将 output
的 textContent
属性设置为 input 的 value
。设置了一个事件监听器,确保每次范围滑块移动时,output
的 textContent
总是可以及时更新为新值。
日期和时间选择器
<input type="datetime-local" name="datetime" id="datetime">
创建了显示和选择一个没有特定时区信息的日期和时间的控件。
颜色选择器
<input type="color" name="color" id="color">
在支持的情况下,点击一个颜色控件将倾向于显示操作系统的默认颜色选择功能,以便真正做出选择。
其他控件
多行文本域使用元素
// 将数据对象转换为URL编码的键/值对数组。
for(name in data) {
urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}
// 将配对合并为单个字符串,并将所有%编码的空格替换为
// “+”字符;匹配浏览器表单提交的行为。
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
// 定义成功数据提交时发生的情况
XHR.addEventListener('load', function(event) {
alert('耶!已发送数据并加载响应。');
});
// 定义错误提示
XHR.addEventListener('error', function(event) {
alert('哎呀!出问题了。');
});
// 建立我们的请求
XHR.open('POST', 'https://example.com/cors.php');
// 为表单数据 POST 请求添加所需的 HTTP 头
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 最后,发送我们的数据。
XHR.send(urlEncodedData);
}
</code></pre>
<h3 id="使用xmlhttprequest和formdata">使用XMLHttpRequest和FormData</h3>
<p>对象可以用来构建用于传输的表单数据,或是获取表单元素中的数据来管理它的发送方式。请注意,<code>FormData</code> 对象是“只写”的,这意味着您可以更改它们,但不能检索其内容。</p>
<pre><code class="language-javascript">function sendData(data) {
var XHR = new XMLHttpRequest();
var FD = new FormData();
// 把我们的数据添加到这个 FormData 对象中
for(name in data) {
FD.append(name, data[name]);
}
// 定义数据成功发送并返回后执行的操作
XHR.addEventListener('load', function(event) {
alert('Yeah! 已发送数据并加载响应。');
});
// 定义发生错误时执行的操作
XHR.addEventListener('error', function(event) {
alert('Oops! 出错了。');
});
// 设置请求地址和方法
XHR.open('POST', 'https://example.com/cors.php');
// 发送这个 formData 对象,HTTP 请求头会自动设置
XHR.send(FD);
}
</code></pre>
<h3 id="也可以使用绑定到表单元素上的-formdata">也可以使用绑定到表单元素上的 FormData</h3>
<pre><code class="language-javascript">window.addEventListener("load", function () {
function sendData() {
var XHR = new XMLHttpRequest();
// 我们把这个 FormData 和表单元素绑定在一起。
var FD = new FormData(form);
// 我们定义了数据成功发送时会发生的事。
XHR.addEventListener("load", function(event) {
alert(event.target.responseText);
});
// 我们定义了失败的情形下会发生的事
XHR.addEventListener("error", function(event) {
alert('哎呀!出了一些问题。');
});
// 我们设置了我们的请求
XHR.open("POST", "https://example.com/cors.php");
// 发送的数据是由用户在表单中提供的
XHR.send(FD);
}
// 我们需要获取表单元素
var form = document.getElementById("myForm");
// ...然后接管表单的提交事件
form.addEventListener("submit", function (event) {
event.preventDefault();
sendData();
});
});
</code></pre>
<h3 id="dom-api-构建表单">DOM API 构建表单</h3>
<p>最古老的异步发送表单数据方法是用 DOM API 构建表单,然后将其数据发送到隐藏的<iframe>。要获得提交的结果,请获取<iframe>的内容。(不建议使用)</p>
<h2 id="form表单提交和ajax区别"><strong>form</strong>表单提交和<strong>ajax</strong>区别</h2>
<p>上述两种提交方式的区别和适用场景说明<br>
<strong>form</strong>表单提交:提交并刷新当前页面,或者提交后跳转到其他页面。<br>
ajax:提交数据并展示后台返回的处理信息。<br>
<strong>form</strong>表单提交比较适合采用FORM提交的方式处理,简单方便,还可以使用HTML5新添加的一些基本验证。ajax比较适合采用Ajax提交的方式处理,在success函数中对返回的信息做一些需要的操作处理,不过需要通过js对用户输入做取出操作,通过参数传递给后台处理。<br>
根据不同的情况选择不同的处理方式,一般FORM提交处理的方式比较多的使用,Ajax更多的使用在动态加载更多元素。<br>
FORM和Ajax使用的<strong>最大区别</strong>是:FORM需要刷新页面,而Ajax可以在不刷新页面的情况下执行数据请求或者提交数据等操作,如果需要在Ajax提交成功后刷新页面,可以调用window对象的location属性的load()方法重新加载当前文档。</p>
<h1 id="get请求和post">GET请求和POST</h1>
<p><img src="https://img-blog.csdnimg.cn/20210325210742187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4MTI5,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" loading="lazy"></p>
<p>GET 方法的参数应该放在 url 中,POST 方法参数应该放在 body 中</p>
<p>举个例子,如果参数是 name=zhangsan.c, age=22。<br>
GET 方法简约版报文可能是这样的
<br>
GET /index.php?name=zhangsan.c&age=22 HTTP/1.1<br>
Host: localhost</p>
<p>POST 方法简约版报文可能是这样的
<br>
POST /index.php HTTP/1.1<br>
Host: localhost
<br>
Content-Type: application/x-www-form-urlencoded name=zhangsan. c&age=22</p>
<p>GET 方法参数写法并不固定,解析报文的过程是通过获取 TCP 数据,用正则等工具从数据中获取 Header 和 Body,从而提取参数。</p>
<p>也就是说,我们可以自己约定参数的写法,只要服务端能够解释出来就行,一种比较流行的写法是这样 : http: //www .example.com/user/name/yourname/age/22</p>
<p>从传输的角度来说,他们都是不安全的,因为 HTTP 在网络上是明文传输,只要在网络节点上抓包,就能完整地获取数据报文。要想安全传输,就只有加密,也就是 HTTPS</p>
<h1 id="cors">CORS</h1>
<pre><code class="language-javascript">router.options('/api/*', (req, res) => {
res.header('Access-Control-Allow-Credentials', true)
res.header('Access-Control-Allow-Origin', req.headers.origin)
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, PATCH, DELETE')
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept, Credentials'
)
res.send('ok')
})
</code></pre>
<p><strong>Access-Control-Allow-Origin</strong>(必须有)<br>
代表允许哪个域访问。当字段值为*时,就代表任意域都可以访问</p>
<p><strong>Access-Control-Allow-Credentials</strong>(资格)</p>
<p>它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。</p>
<p><strong>Access-Control-Allow-Methods</strong></p>
<p>Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。</p>
<p><strong>Access-Control-Allow-Headers</strong></p>
<p>Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。</p>
<ul>
<li>简单请求(<code>GET,HEAD,POST</code>):不管是否跨域,只要发出去了,一定会到达服务端并被执行,浏览器只会隐藏返回值</li>
<li>复杂请求:先发预检,预检不会真正执行业务逻辑,预检通过后才会发送真正请求并在服务端被执行</li>
</ul>