Canvas、客户端、表单

文章目录[隐藏]

Canvas
客户端存储
- 基本语法
- 储存复杂数据IndexedDB
Web表单

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>

使用滑块的一个问题是，它们不提供任何种类的视觉反馈来说明当前的值是什么。这是我们附加了一个包含当前值输出的元素的原因。你可以在任何元素内显示一个输入值或一个计算的输出值，但是 <output> 是特殊的，就像 <label> 那样，它可以指定 for 属性，允许你将它与输出值来自的一个或多个元素联系起来。

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">

在支持的情况下，点击一个颜色控件将倾向于显示操作系统的默认颜色选择功能，以便真正做出选择。

其他控件

多行文本域使用元素指定。</p> <p>下拉控件：</p> <p> 选择框，</p> <p> 自动补全框</p> <p>Datalist 支持和回退</p> <p>计量器和进度条</p> <h2 id="表单数据校验">表单数据校验</h2> <p>在 Web 中，你可能会遇见各种不同的表单校验：</p> <ul> <li> <p>客户端校验</p> <p>发生在浏览器端，表单数据被提交到服务器之前，这种方式相较于服务器端校验来说，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验可以进一步细分成下面这些方式：</p> <ul> <li><strong>JavaScript</strong> 校验，这是可以完全自定义的实现方式；</li> <li>HTML5 <strong>内置校验</strong>，这不需要 JavaScript，而且性能更好，但是不能像 JavaScript 那样可自定义。</li> </ul> </li> <li> <p><strong>服务器端校验</strong>则是发生在浏览器提交数据并被服务器端程序接收之后 —— 通常服务器端校验都是发生在将数据写入数据库之前，如果数据没通过校验，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因，服务器端校验不像客户端校验那样有好的用户体验，因为它直到整个表单都提交后才能返回错误信息。但是服务器端校验是你的应用对抗错误/恶意数据的最后防线，在这之后，数据将被持久化至数据库。当今所有的服务端框架都提供了数据<strong>校验</strong>与<strong>清洁</strong>功能（让数据更安全）。</p> </li> </ul> <h3 id="required属性">required属性</h3> <p>使输入成为必需的，则可以使用此属性标记元素。当设置此属性时，如果输入为空，该表单将不会提交（并将显示错误消息），输入也将被视为无效。</p> <h3 id="正则表达式校验">正则表达式校验</h3> <p>parttern ，可以用来匹配文本字符串中字符的组合的模式</p> <h3 id="限制输入长度">限制输入长度</h3> <p>所有文本框可以使用<code>minlength</code> 和 <code>maxlength</code> 属性来限制长度。</p> <p>在数字条目中，该 <code>min</code> 和 <code>max</code> 属性同样提供校验约束。</p> <h2 id="发送文件">发送文件</h2> <p>用 HTML 表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而所有其他数据都是文本数据。由于 HTTP 是一种文本协议，所以处理二进制数据有特殊的要求。</p> <h3 id="enctype属性">enctype属性</h3> <p>该属性允许您指定在提交表单时所生成的请求中的<code>Content-Type</code>的 HTTP 数据头的值。这个数据头非常重要，因为它告诉服务器正在发送什么样的数据。默认情况下，它的值是<code>application/x-www-form-urlencoded</code>。它的意思是：“这是已编码为 URL 参数的表单数据。”</p> <p>如果想要发送文件，需要额外的三个步骤：</p> <ul> <li>将<code>method</code>属性设置为<code>POST</code>，因为文件内容不能放入 URL 参数中。</li> <li>将<code>enctype</code>的值设置为<code>multipart/form-data</code>，因为数据将被分成多个部分，每个文件单独占用一个部分，表单正文中包含的文本数据（如果文本也输入到表单中）占用一个部分。</li> <li>包含一个或多个<strong>File picker</strong>小部件，允许用户选择将要上传的文件。</li> </ul> <pre><code class="language-html"><form method="post" enctype="multipart/form-data"> <div> <label for="file">Choose a file</label> <input type="file" id="file" name="myFile"> </div> <div> <button>Send the file</button> </div> </form> </code></pre> <h2 id="发送表单数据">发送表单数据</h2> <h3 id="使用xmlhttprequest">使用XMLHttpRequest</h3> <pre><code class="language-javascript">function sendData(data) { var XHR = new XMLHttpRequest(); var urlEncodedData = ""; var urlEncodedDataPairs = []; var name; // 将数据对象转换为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>