From f589527822b68a8215b7ec9b1b6765900e8ca5b8 Mon Sep 17 00:00:00 2001
From: Rikako Wu <496063163@qq.com>
Date: Mon, 9 May 2022 22:49:52 +0800
Subject: [PATCH] daily commit

---
 javascript/dom.md                      |  61 +++++++++++++++
 javascript/js canvas.md                |  74 ++++++++++++++++++
 javascript/js storage.md               | 100 +++++++++++++++++++++++++
 javascript/从服务端获取数据.md |  23 ++++++
 4 files changed, 258 insertions(+)
 create mode 100644 javascript/dom.md
 create mode 100644 javascript/js canvas.md
 create mode 100644 javascript/js storage.md
 create mode 100644 javascript/从服务端获取数据.md

diff --git a/javascript/dom.md b/javascript/dom.md
new file mode 100644
index 0000000..af8005c
--- /dev/null
+++ b/javascript/dom.md
@@ -0,0 +1,61 @@
+# dom
+- ## js中dom模型的简介
+  - js的dom中常用对象：
+    - window：浏览器用来载入页面的tab，通过js中的window对象，用户可以通过调用window对象中的方法完成如下操作：
+      - 返回窗口大小
+      - 操作导入window中的document
+      - 存储特定页面的数据
+      - 在当前document中添加handler
+    - navigator：可以通过该对象来检索浏览器的状态和身份信息
+    - document：代表载入window的html文档
+  - dom树形结构：
+    - root node：在dom树结构中，根节点总是html节点
+    - 子节点：直接位于另一个节点内的节点
+    - 后代节点：如果一个节点位于另一个节点内，不管是直接位于还是间接被包含
+    - 父节点：如果一个节点直接包含另一个节点
+    - 兄弟节点：如果两个节点位于dom树中的同一层，并且具有相同的父节点，那么他们就是兄弟节点
+- ## document api查找节点元素
+  - querySelector：
+    - document.querySelector()会返回第一个匹配的元素
+        ```javascript
+        document.querySelector("p")
+        ```
+  - querySelector:
+    - 返回所有满足条件的元素，按照NodeList的形式返回
+        ```javascript
+        document.querySelectorAll("p")
+        ```
+- ## document api创建新元素
+  - document.createElement:
+    ```javascript
+    let node=document.createElement('p')
+    let p_node=document.querySelector('p')
+    p_node.apendChild(node)
+    ```
+  - node.appendChild:通过该方法可以为节点插入新的子元素
+  - document.createTextNode：创建新的文本节点（类似与#text的子节点）
+- ## document api 移除元素
+  - parentNode.removeChild：移除子元素
+    ```javascript
+    let par_node=document.querySelector("div")
+    let child_node=document.querySelector("div > p")
+    par_node.removeChild(child_node)
+    ```
+  - childNode.remove:对子元素可以直接调用remove
+    ```javascript
+    let child_node=document.querySelector("div > p")
+    child_node 
+    ```
+- ## js修改css样式
+  - 可以通过修改HTMLElement.style中的属性来通过js修改html页面中元素的样式，其会通过inline style（html元素的style属性）来修改页面样式
+    ```javascript
+    let node=document.querySelector("p")
+    node.style.background="grey"
+    ```
+  - 除了可以通过修改inline style来动态修改元素属性外，还可以预先在css中为各个class指定样式，然后在运行时动态的通过js来修改元素的class属性，此时会为元素应用不同的样式
+    ```javascript
+    let node=document.querySelector("p")
+    node.setAttribute('class','white-style')
+    ```
+  
+
diff --git a/javascript/js canvas.md b/javascript/js canvas.md
new file mode 100644
index 0000000..2eee5a6
--- /dev/null
+++ b/javascript/js canvas.md	
@@ -0,0 +1,74 @@
+# js canvas
+- ## canvas api
+  - 获取canvas元素：
+    ```javascript
+    let canvas=document.querySelector(canvas_name)
+    ```
+  - 获取canvas上下文：
+    ```javascript
+    // 获取2d上下文，之后可以通过ctx操作canvas元素
+    let ctx=canvas.getContext("2d")
+    ```
+  - 填充矩形：
+    ```javascript
+    ctx.fillStyle='rgb(255,0,0)'
+    ctx.fillRect(0,0,100,100)
+    ```
+    - 如果画了多个图形，那么按照画的顺序，后画的元素将会覆盖在先画的图形之上
+    - 通过为ctx.fillStyle指定rgba，可以画半透明的元素，alpha的值为0～1,值越接近0越透明
+  - 只画矩形轮廓
+    ```javascript
+    ctx.strokeStyle='rgb(255,0,0)';
+    ctx.strokeRect(x,y,width,height);
+
+    // 默认情况下轮廓宽度是1px，但是可以通过ctx.lienWidth来调整宽度
+    ctx.lineWidth=5
+    ```
+  - 画Path：画Path主要可以通过如下api
+    - ctx.beginPath：在当前所处的位置开始path
+    - ctx.moveTo：移动当前位置到指定位置，而不记录移动的线条
+    - ctx.lineTo：在path中记录线条
+    - ctx.fill：通过先前的path创建fill图形
+    - ctx.stroke：通过先前的path创建stroke图形
+  - 画圆形：通过ctx.arc画圆形
+    ```javascript
+    // arc有6个参数，分别如下
+    //  1～2： 圆心的x和y坐标
+    //  3：半径的像素
+    //  4～5：开始的角度和结束的角度（弧度制）
+    //  6：是否按逆时针画
+    // arc的0度是水平向右
+    ctx.arc(100,100,100,0,2*Math.Pi,true)
+    // 默认情况下0度位于水平向右，但是角度增长默认是顺时针方向，在没有指定第六个参数时其默认也是顺时针方向绘制（第六个参数为false）。但是可以指定第六个参数为true，指定为true会逆时针方向绘制
+    // 当path不是封闭图形时，调用fill时会将开始位置和结束位置连接后填充
+    ```
+  - 在canvas中绘制text文本
+    - 可以通过ctx.fillText来绘制填充文本
+    - 可以通过ctx.strokeText来绘制文本边框
+    - 可以通过ctx.font来修改字体的种类和大小
+    ```javascript
+    // fillText接受3个参数
+    //  1.想要绘制的文本
+    //  2.绘制文本的开始x位置
+    //  3.绘制文本的开始y位置
+    //  绘制文本的开始位置是左下角位置，并不是左上角
+    ctx.fillText(str,x,y)
+    ```
+  - 在canvas中绘制图片
+    - 可以通过ctx.drawImage在canvas中绘制图片，其接受如下参数：
+      - 一个image对象的引用
+      - 想要绘制的图片的裁剪部分左上角的x坐标和y坐标
+      - 想要绘制的图片的裁剪部分的width和height
+      - 想要将裁剪部分绘制在canvas上的位置，相对于（0,0）的x和y坐标
+      - 指定想要绘制裁剪部分的width和height，可以与裁剪部分的width和height相同，也可以将裁剪部分resize
+    ```javascript
+    ctx.drawImage(image,image_x,image_y,image_width,image_height,0,0,image_x,image_y)
+    ```
+  - 在canvas中创建动画：
+    - 常用的api：
+      - ctx.translate: 移动canvas和其origin point，水平方向移动x像素，垂直方向移动y单位
+      - ctx.rotate：旋转整个canvas，以origin point为中心
+    - 创建动画的api：
+      - window.requestAnimationFrame(func)来令动画以特定的帧率刷新（60帧/s）
+      - 通过向requestAnimationFrame来传递一个函数刷新canvas，并且func中继续调用requestAnimationFrame来获取下一帧
+      - 当不想继续动画时，可以不再在func中调用requestAnimationFrame，或者可以调用cancelAnimationFrame来停止获取下一帧动画
diff --git a/javascript/js storage.md b/javascript/js storage.md
new file mode 100644
index 0000000..349b17d
--- /dev/null
+++ b/javascript/js storage.md	
@@ -0,0 +1,100 @@
+# js storage
+- ## js在客户端存储数据的方式
+  - Web Storage api：通常用来存储简单的数据，以name-value的形式存储
+
+- ## Web Storage api
+  - 存储种类：
+    - localStorage
+      - 该种方式即使浏览器被关闭，数据仍然不会丢失，下次重新打开浏览器时数据仍然存在
+      - 无论刷新还是关闭页面，数据仍然不会丢失
+    - sessionStorage：
+      - 该种方式只会在浏览器打开时存储数据，一旦浏览器被关闭，存储的数据会消失
+      - 该方式存储的数据在刷新页面后仍然会存在，但是当页面关闭后，数据会丢失
+  - 存储信息和删除信息方式：
+    - localStorage：
+        ```javascript
+        localStorage.setItem(name,value)
+        localStorage.getItem(name)
+        localStorage.removeItem(name)
+        ```
+    - sessionStorage:
+        ```javascript
+        sessionStorage.setItem(name,value)
+        sessionStorage.getItem(name)
+        session.removeItem(name)
+        ```
+  - 对于不同的域名，Storage是分别储存的，位于同一域名下的页面可以共享Storage中存储的信息，但是位于不同域名的页面Storage信息无法共享
+- ## indexedDB
+  - 数据库操作（数据库操作都是异步的，不必在数据库操作进行时阻塞，可以为数据库操作请求添加handler来处理完成的请求）
+    - 打开db：
+      ```javascript
+      // 该方法会打开name指定的数据库，如果该数据库不存在，
+      // 会创建一个新的数据库
+      let db_request=window.indexedDB.open(name,version)
+      ```
+    - 为数据库操作添加handler：
+        ```javascript
+        // 可以为数据库操作添加success、error的handler
+        db_request.addEventHandler('success',handler)
+        db_request.addEventHandler('error',error_handler)
+
+        // 为upgradeneeded事件指定handler
+        // 如果一个数据库还没有被设置，或者该数据库打开
+        // 的版本号大于其本身版本号
+        db_request.addEventHnalder((e)=>{
+            db=e.target.result
+            obj_store=db.createObjectStore(name,{keyPath:"id",autoIncrement:true})
+
+            obj_store.createIndex(name,value,{unique:false})
+        })
+        ```
+        - 如果打开数据库操作完成，会触发success事件，打开的数据库对象可以通过db_request.result来访问
+        - 如果打开数据库操作失败，会触发error事件
+        - 数据库如果没有被设置，会抛出upgradeneeded事件，并且upgradeneeded事件在success事件之前
+    -  向数据库的ObjectStore中添加记录：
+       -  首先要开启一个事务，通过db.transaction([objectStoreName...],mode:"readwrite")
+          ```javascript
+          let tr=db.transaction([obj_store...],"readwrite")
+          ```
+       -  通过事务获取object store对象
+          ```javascript
+          let obj_store=tr.objectStore(obj_store)
+          ```
+        - 调用add操作向object store中添加记录，并且为返回的request对象的事件添加监听器
+          ```javascript
+          let add_request=obj_store.add({
+            key1:value1,
+            key2:value2,
+            ...
+          })
+          // 为request的success事件添加handler
+          add_request.addEventHanlder('success',success_handler)
+
+          // 为transaction的complete事件添加handler
+          tr.addEventHandler('complete',handler)
+          // 为事务的error事件添加handler
+          tr.addEventHandler('error',err_handler)
+          ```
+      - 遍历objectStore对象中的记录
+        ```javascript
+        let object_store=db.transaction(object_store_name).objectStore(obj_store_name)
+        object_store.openCursor().addEventHandler('success',(e)=>{
+          // 获取request.result的结果值
+          const cursor=e.target.result
+          if(cursor) {
+            // 操作数据
+
+            // 迭代到下一个项目
+            // 如果还存在下一个记录，那么request的success
+            // 事件会再次被触发
+            cursor.continue()
+          }
+        })
+        ```
+      - 删除objectStore中的记录
+        ```javascript
+        objectStore.delete(primary_key)
+        tr.addEventHandler('complete',handler)
+        ```
+
+    
diff --git a/javascript/从服务端获取数据.md b/javascript/从服务端获取数据.md
new file mode 100644
index 0000000..fb868c7
--- /dev/null
+++ b/javascript/从服务端获取数据.md
@@ -0,0 +1,23 @@
+# js fetch data from server
+- ## js fetch和前后端分离
+  - 在传统前后段项目中，通常会用jsp技术来生成动态页面。用户想要与服务端进行请求时，服务端会重新向客户端发送整个页面，即使页面中的大部分数据都和之前的页面相同。用户端会重新对页面进行载入。
+  - 通过js的fetch api，客户端可以在向服务端发送请求后，仅仅接受服务端返回的需要更新的数据，而不是整个新页面。用户在接受数据后可以通过dom api根据接受数据对页面进行修改。这样用户不用接受并且重载整个全新的页面。
+  - 实现前后端分离的技术通常称之为ajax（asynchronous javascript and xml，之前通常通过xml格式来传输数据，但是现在一般使用json格式来传输数据，但该技术名称仍然叫做ajax）
+- ## 具体从服务端接收数据的api
+  - fetch
+  - XMLHttpRequest
+  ```javascript
+  let request=new XMLHttpRequest();
+  try {
+      request.open('GET',url_path);
+      request.responseType='json';
+      // 为load和error事件添加事件handler
+      // load事件在response完全完成之后才会被触发
+      // error事件在请求发生错误时被触发
+      request.addEventHandler('load',load_handler);
+      request.addEventHandler('error',error_handler);
+      request.send();
+  }catch(err) {
+      console.log(err);
+  }
+  ```
\ No newline at end of file