发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

Canvas、客户端、表单

共田八

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
显示全部楼层
Canvas
  1. var canvas = document.querySelector('.myCanvas');
  2. var width = canvas.width = window.innerWidth;
  3. var height = canvas.height = window.innerHeight;
复制代码
滚动条还是可见的，原因是我们的“全窗尺寸画布”包含 元素的外边距（margin），使得文档比窗口略宽。为使滚动条消失，需要删除  元素的 margin 并将 overflow 设置为 hidden。
  1. [/code]添加2D画布
  2. [code]var ctx = canvas.getContext('2d');
  4. ctx.fillStyle = 'rgb(0, 0, 0)';
  5. ctx.fillRect(0, 0, width, height);
复制代码
使用fillstyle来填充颜色(其有第四个参数可设置透明度)，然后使用fillrect方法绘制一个覆盖整个区域的矩形(前两个参数是矩形左上顶点的坐标，后两个参数是矩形的长宽)
  1. ctx.beginPath();
  2. ctx.moveTo(50, 50);
复制代码
绘制路径
beginPath 在钢笔当前所在位置开始绘制一条路径。
moveTo 将钢笔移动至另一个坐标点，不记录、不留痕迹，只将钢笔“跳”至新位置。
lineTo 将钢笔绘画至另一个坐标点，留下直线痕迹。
fill 通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。
stroke 通过为当前绘制路径的区域描边，来绘制一个只有边框的形状。
绘制图片
  1. image.onload = function() {
  2.   ctx.drawImage(image, 50, 50);
  3. }
复制代码
用 drawImage() 函数来嵌入图片，应确保图片先载入完毕，否则运行会出错。
translate 移动画布左上角顶点。
  1. ctx.translate(width/2, height/2);
复制代码
**requestAnimationFrame **实现动画效果。
客户端存储

基本语法

web storage据都包含在浏览器内两个类似于对象的结构中： sessionStorage 和 localStorage 第一种方法，只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失) ，而第二种会一直保存数据，甚至到浏览器关闭又开启后也是这样。一般而言，第二种更有用。
Storage.setItem()方法允许您在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的 JavaScript 控制台
Storage.getItem() 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。
Storage.removeItem() 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。
  1. localStorage.setItem('name','Chris');
复制代码
web storage会为每个域提供一个单独的数据存储区 (每个单独的网址都在浏览器中加载)
储存复杂数据IndexedDB

可以在浏览器中访问的一个完整的数据库系统，在这里，你可以存储复杂的关系数据。其种类不限于像字符串和数字这样的简单值。你可以在一个 IndexedDB 中存储视频，图像和许多其他的内容。但是，这确实是有代价的：使用 IndexedDB 要比 Web Storage API 复杂得多。
  1. // Open our database; it is created if it doesn't already exist
  2. // (see onupgradeneeded below)
  3. let request = window.indexedDB.open('notes', 1);
  5. // onerror handler signifies that the database didn't open successfully
  6. request.onerror = function() {
  7.   console.log('Database failed to open');
  8. };
  10. // onsuccess handler signifies that the database opened successfully
  11. request.onsuccess = function() {
  12.   console.log('Database opened successfully');
  14.   // Store the opened database object in the db variable. This is used a lot below
  15.   db = request.result;
  17.   // Run the displayData() function to display the notes already in the IDB
  18.   displayData();
  19. };
复制代码
Web表单

lable标签

label中的for属性规定了与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该<label for="test">label标签</label>
<input type="text"  id="test" name="name">与该表单元素的绑定。
  1. <label for="test">label标签</label>
  2. <input type="text"  id="test" name="name">
复制代码
如上所示，该label便签和input便签完成了绑定，当鼠标点击<label for="test">label标签</label>
<input type="text"  id="test" name="name">时，input元素会被触发，用户即可完成输入。
<label for="test">label标签</label>
<input type="text"  id="test" name="name">加上for属性绑定了表单元素后，可以提高用户体验。
当点击<label for="test">label标签</label>
<input type="text"  id="test" name="name">内的文本后，就会触发绑定的表单元素。也就是说，当用户渲染该标签时，浏览器就会自动将焦点转到绑定的表单控件上。使标签可以点击。
隐藏内容
  1. [/code]另一个原生的文本框控件是 hidden input 类型。它被用于创建对用户不可见的表单部件，但在发送表单时，会与其它的表单数据一起被发送到服务器——例如，你可能希望向服务器提交一个时间戳，说明订单是何时产生的。因为它是隐藏的，所以用户看不到也不能简单地修改该值，它将永远不会获得焦点，屏幕阅读器也不会注意到它。
  2. 如果创建了这样一个元素，就需要设置它的 name 和 value 属性。元素的值可以通过 JavaScript 动态设置。hidden input 类型不应有关联的标签（label 元素）。
  3. [size=5]复选框和单选框[/size]
  5. [size=4]checkbox[/size]
  7. [code]<fieldset>
  8.   <legend>Choose all the vegetables you like to eat</legend>
  9.   <ul>
  10.     <li>
  11.       <label for="carrots">Carrots</label>
  12.       <input type="checkbox" id="carrots" name="vegetable" value="carrots" checked>
  13.     </li>
  14.     <li>
  15.       <label for="peas">Peas</label>
  16.       <input type="checkbox" id="peas" name="vegetable" value="peas">
  17.     </li>
  18.     <li>
  19.       <label for="cabbage">Cabbage</label>
  20.       <input type="checkbox" id="cabbage" name="vegetable" value="cabbage">
  21.     </li>
  22.   </ul>
  23. </fieldset>
复制代码
相关的复选框元素应该使用具有相同值的 name 属性。包含 checked 属性使复选框在页面加载时自动被选中。
radio
  1. <fieldset>
  2.   <legend>What is your favorite meal?</legend>
  3.   <ul>
  4.     <li>
  5.       <label for="soup">Soup</label>
  6.       <input type="radio" id="soup" name="meal" value="soup" checked>
  7.     </li>
  8.     <li>
  9.       <label for="curry">Curry</label>
  10.       <input type="radio" id="curry" name="meal" value="curry">
  11.     </li>
  12.     <li>
  13.       <label for="pizza">Pizza</label>
  14.       <input type="radio" id="pizza" name="meal" value="pizza">
  15.     </li>
  16.   </ul>
  17. </fieldset>
复制代码
几个单选按钮可以连接在一起。如果它们的 name属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，并且没有以表单的形式发送任何值。
图像按钮

图像按钮（image button）控件渲染的方式与<img>几乎完全相同。只是在用户点击它时，图像按钮的行为与提交（submit）按钮相同。
图像按钮是使用 type 属性值设置为 image 的元素创建的。这个元素支持与<img>元素相同的属性，和其他表单按钮支持的所有属性。
  1. [/code][size=5]文件选择器[/size]
  3. HTML 表单能够将文件发送到服务器；要创建一个文件选择器小部件，您可以使用元素，将它的 type 属性设置为 file。被接受的文件类型可以使用 accept 属性来约束。此外，如果您想让用户选择多个文件，那么可以通过添加 multiple 属性来实现。
  4. [code]
复制代码
在一些移动终端上，文件选择器可以访问由设备相机和麦克风直接获取的图片、视频、音频。我们只需要这样设置 accept 属性即可（分别对应相机捕获的图片、视频和麦克风获取的音频）：
  1. [/code][size=5]滑块控件[/size]
  3. 在元素中使用 range 作为属性 type 的值，就可以创建一个滑块，滑块可以通过鼠标、触摸，或用键盘的方向键移动。
  4. [code]<label for="price">Choose a maximum house price: </label>
  5. <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
  6. <output  for="price"></output>
复制代码
使用滑块的一个问题是，它们不提供任何种类的视觉反馈来说明当前的值是什么。这是我们附加了一个包含当前值输出的元素的原因。你可以在任何元素内显示一个输入值或一个计算的输出值，但是  是特殊的，就像  那样，它可以指定 for 属性，允许你将它与输出值来自的一个或多个元素联系起来。
  1. const price = document.querySelector('#price');
  2. const output = document.querySelector('.price-output');
  4. output.textContent = price.value;
  6. price.addEventListener('input', () => {
  7.   output.textContent = price.value;
  8. });
复制代码
这里我们将 range 输入元素和 output 元素存为了两个变量。然后我们马上将 output 的 textContent 属性设置为 input 的 value 。设置了一个事件监听器，确保每次范围滑块移动时，output 的 textContent 总是可以及时更新为新值。
日期和时间选择器
  1. [/code]创建了显示和选择一个没有特定时区信息的日期和时间的控件。
  2. [size=5]颜色选择器[/size]
  4. [code]
复制代码
在支持的情况下，点击一个颜色控件将倾向于显示操作系统的默认颜色选择功能，以便真正做出选择。
其他控件

多行文本域使用元素指定。
下拉控件：
​        选择框，
​        自动补全框
Datalist 支持和回退
计量器和进度条
表单数据校验

在 Web 中，你可能会遇见各种不同的表单校验：

  • 客户端校验
    发生在浏览器端，表单数据被提交到服务器之前，这种方式相较于服务器端校验来说，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验可以进一步细分成下面这些方式：

    • JavaScript 校验，这是可以完全自定义的实现方式；
    • HTML5 内置校验，这不需要 JavaScript，而且性能更好，但是不能像 JavaScript 那样可自定义。

  • 服务器端校验则是发生在浏览器提交数据并被服务器端程序接收之后 —— 通常服务器端校验都是发生在将数据写入数据库之前，如果数据没通过校验，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因，服务器端校验不像客户端校验那样有好的用户体验，因为它直到整个表单都提交后才能返回错误信息。但是服务器端校验是你的应用对抗错误/恶意数据的最后防线，在这之后，数据将被持久化至数据库。当今所有的服务端框架都提供了数据校验与清洁功能（让数据更安全）。
required属性

使输入成为必需的，则可以使用此属性标记元素。当设置此属性时，如果输入为空，该表单将不会提交（并将显示错误消息），输入也将被视为无效。
正则表达式校验

parttern ，可以用来匹配文本字符串中字符的组合的模式
限制输入长度

所有文本框 可以使用minlength 和 maxlength 属性来限制长度。
在数字条目中，该 min 和 max 属性同样提供校验约束。
发送文件

用 HTML 表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而所有其他数据都是文本数据。由于 HTTP 是一种文本协议，所以处理二进制数据有特殊的要求。
enctype属性

该属性允许您指定在提交表单时所生成的请求中的Content-Type的 HTTP 数据头的值。这个数据头非常重要，因为它告诉服务器正在发送什么样的数据。默认情况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为 URL 参数的表单数据。”
如果想要发送文件，需要额外的三个步骤：

  • 将method属性设置为POST，因为文件内容不能放入 URL 参数中。
  • 将enctype的值设置为multipart/form-data，因为数据将被分成多个部分，每个文件单独占用一个部分，表单正文中包含的文本数据（如果文本也输入到表单中）占用一个部分。
  • 包含一个或多个File picker小部件，允许用户选择将要上传的文件。
      Choose a file            Send the file  发送表单数据

使用XMLHttpRequest

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);}使用XMLHttpRequest和FormData

对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。请注意，FormData 对象是“只写”的，这意味着您可以更改它们，但不能检索其内容。
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);}也可以使用绑定到表单元素上的 FormData

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();  });});DOM API 构建表单

最古老的异步发送表单数据方法是用 DOM API 构建表单，然后将其数据发送到隐藏的。要获得提交的结果，请获取的内容。(不建议使用)
form表单提交和ajax区别

上述两种提交方式的区别和适用场景说明
form表单提交：提交并刷新当前页面，或者提交后跳转到其他页面。
ajax：提交数据并展示后台返回的处理信息。
form表单提交比较适合采用FORM提交的方式处理，简单方便，还可以使用HTML5新添加的一些基本验证。ajax比较适合采用Ajax提交的方式处理，在success函数中对返回的信息做一些需要的操作处理，不过需要通过js对用户输入做取出操作，通过参数传递给后台处理。
根据不同的情况选择不同的处理方式，一般FORM提交处理的方式比较多的使用，Ajax更多的使用在动态加载更多元素。
FORM和Ajax使用的最大区别是：FORM需要刷新页面，而Ajax可以在不刷新页面的情况下执行数据请求或者提交数据等操作，如果需要在Ajax提交成功后刷新页面，可以调用window对象的location属性的load()方法重新加载当前文档。
GET请求和POST


GET 方法的参数应该放在 url 中，POST 方法参数应该放在 body 中
举个例子，如果参数是 name=zhangsan.c, age=22。
GET 方法简约版报文可能是这样的

GET /index.php?name=zhangsan.c&age=22 HTTP/1.1
Host: localhost
POST 方法简约版报文可能是这样的


POST /index.php HTTP/1.1

Host: localhost


Content-Type: application/x-www-form-urlencoded name=zhangsan. c&age=22
GET 方法参数写法并不固定，解析报文的过程是通过获取 TCP 数据，用正则等工具从数据中获取 Header 和 Body，从而提取参数。
也就是说，我们可以自己约定参数的写法，只要服务端能够解释出来就行，一种比较流行的写法是这样 : http: //www .example.com/user/name/yourname/age/22
从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输，只要在网络节点上抓包，就能完整地获取数据报文。要想安全传输，就只有加密，也就是 HTTPS
CORS

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')})Access-Control-Allow-Origin（必须有）
代表允许哪个域访问。当字段值为*时，就代表任意域都可以访问
Access-Control-Allow-Credentials（资格）
它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
Access-Control-Allow-Methods
Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。
Access-Control-Allow-Headers
Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

  • 简单请求（GET，HEAD，POST）：不管是否跨域，只要发出去了，一定会到达服务端并被执行，浏览器只会隐藏返回值
  • 复杂请求：先发预检，预检不会真正执行业务逻辑，预检通过后才会发送真正请求并在服务端被执行
</p>
来源:https://www.cnblogs.com/ggonekim/p/17180533.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Canvas、客户端、表单

下一篇: webgl 系列 —— 三角形

发表于 2023-3-5 18:47:02

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4