WEB 筆記

第 11 屆 iThome 鐵人賽

自我挑戰組

練習程式系列第 35 篇

11th鐵人賽

tedtedtedtedted

2019-10-29 23:30:00

4650 瀏覽

分享至

繼續整理學習的東西

js 筆記

1
可以先到教學網站熟悉語法，這個網站不錯:
https://www.sololearn.com/
也有app。

2
要怎麼取得一個元素的id?
Get ID of dom-element
有兩種方法:

element.getAttribute('id');

element.id;

看到下面的解答，element.id比element.getAttribute('id')快:
https://jsperf.com/getattribute-vs-id

但是element.id可能會取得子元素:
http://jsfiddle.net/0tjrLx4u/

3
用jsp開發網頁，常常需要在html用jsp的變數。像是button的點擊事件，到一個js的function。
用'<%=變數 %>'就可以了:

onclick="Hi('<%=name %>')"

參考:JSP中java代码与js之间的传值

不能這樣(=位置錯誤會有錯誤):

onclick="Hi('<% =name %>')"

參考:JSP报错"Syntax error on token "=", @ expected"的完美解决方案

4
js的陣列和陣列長度也常用到:
Array.length

5
HTML DOM querySelectorAll() 方法
常常會用class來取得所有擁有那個class的元素:

var items = document.querySelectorAll('.ui-item')

然後再用迴圈跑所有的元素:
(el就是每個元素的變數)

Array.prototype.forEach.call(items, function(el) {
    var el_id = el.getAttribute("id")
    console.log('el_id:' + el_id);
});

6
取得屬性內容也蠻常用到的。像是按按鈕交換顏色
像是:某個元素沒有style屬性，就增加style屬性；有style屬性，就移除style屬性

var stylename = document.getElementById(element).getAttribute("style");
var changecolor = document.getElementById(element);
if (stylename == null) {
    changecolor.setAttribute("style", "background-color:#000000");
} else {
    changecolor.removeAttribute("style");
}

7
WebGL:
WebGL Tutorial 2 - Shaders in 11 Minutes
WebGL: 2D and 3D graphics for the web
WebGL

WebGL是一種JavaScript API，用於在不使用外掛程式的情況下在任何相容的網頁瀏覽器中呈現互動式2D和3D圖形

可將影像處理和效果的GPU加速使用方式當做網頁Canvas的一部分

WebGL程式由JavaScript編寫的控制代碼和OpenGL Shading Language（GLSL）編寫的著色器代碼組成

8
How to get value of selected radio button?
How do you get the currently selected in a via JavaScript?

How do I make an HTML button not reload the page

9
中文字網址在IE或有這個錯誤

java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

所以要轉碼，參考:
JavaScript 的 encodeURIComponent() 會將字串轉換成 UTF-8 編碼
 Handling UTF-8 in JavaScript, PHP, and Non-UTF8 Databases

encodeURIComponent("中文字網址");

css 筆記

1
圖片當背景圖參考:
trycss3_background-size

Q:如果要某個元素全部畫面顯示圖片，那個元素的高度要怎麼調整到100%?
A:要把那個元素的所有上層元素的height都寫成100%和那個元素的height也寫成100%
參考:How to make a div 100% height of the browser window

試了一下:
這個好像不一定要寫:

body, html {
  height: 100%;
}

但是其他的上層元素要寫

2
Change an HTML5 input's placeholder color with CSS

::placeholder { 
   
}

3
用 css 讓區塊水平垂直置中

jQuery Mobile

CHAPTER 12 - jQuery Mobile 教學 ( 基礎 )

5
用,就可以合在一起寫，代表這五個東西的css都一樣，都有 font-size: 18px !important;

.ui-a,.ui-b,.ui-c,.ui-d,.ui-e{
  font-size: 18px !important;
}

6
階層下的css 這樣用(table常用):

table.myFormat tr th
{ 
  font-size: 50px;
}

html長這樣:

   <table class='myFormat'>
         <tr>
           <th class="anum">人員font-size: 50px</th>
           <th class="num">數目font-size: 50px</th> 
         </tr>
   </table>

html 筆記

1
SVG:
可縮放向量圖形
 設計師對 SVG 應該有的觀念

可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。

mysql 筆記

1
自動增加從1開始:
How to reset AUTO_INCREMENT in MySQL?

方法:

DELETE tablename and then ALTER TABLE tablename AUTO_INCREMENT = 1

2
Handling the null value from a resultset in JAVA

3
遇到錯誤:
MySQL Workbench unable to restore workspace
採用這個方法:

C:\Users\YOURUSER\AppData\Roaming\MySQL\Workbench\sql_workspaces
然後找到.autosave檔，像是:Local_instance_MySQL57-1.autosave
把裡面的lock檔案刪掉。

4
UNION中ORDER By的使用

5
How to define a custom ORDER BY order in mySQL

客製化的排序，採用方法:在用一個table，名稱對數字，像是:Cupcake 3 、Donut 4、Eclair 5 、Froyo 8、Gingerbread 9 、 Honeycomb 11、Ice Cream Sandwich 14 、Jelly Bean 16 、KitKat 19、Lollipop 21
、Marshmallow 23、Nougat 24、Oreo 26、Pie 28
然後再 join 名稱 order by 數字

6
mysql 出现You can't specify target table for update in FROM clause错误的解决方法
 MySQL error 1241: Operand should contain 1 column(s)
MySQL Delete with Group By

遇到錯誤:mySQL 不給開啟，開了馬上關

the MySQL service on local computer started and then stopped

參考解答2，引用:

If using version 8 and you edit the my.ini I found that Notepad is putting 3 hex characters at the beginning of the my.ini file. EF BB BF. Deleting the 3 characters from the beginning of the file in a hex editor fixes the problem.

In version 8 they are accidentally putting Unicode characters in the ini file. This is causing Notepad to save the file with Byte order mark characters.

在編輯mySQL8的設定檔my.ini時，檔案會在前面自動增加EF BB BF 。不過一般編輯器看不到，所以要去找16進位編輯器。然後把EF BB BF刪掉，在重啟mySQL就成功了。

8
When is Flush Privileges in MySQL really needed?

參考解答一，引用:

To tell the server to reload the grant tables, perform a flush-privileges operation. This can be done by issuing a FLUSH PRIVILEGES statement or by executing a mysqladmin flush-privileges or mysqladmin reload command.

讓資料庫重載grant tables。

If you modify the grant tables indirectly using account-management statements such as GRANT, REVOKE, SET PASSWORD, or RENAME USER, the server notices these changes and loads the grant tables into memory again immediately.

如果有用了一些關鍵字:GRANT, REVOKE, SET PASSWORD, or RENAME USER ，就會自動重載。不用
Flush Privileges。

如果用

UPDATE `mysql`.`user` SET `Select_priv` = 'Y' WHERE (`Host` = '127.0.0.1') and (`User` = 'user');

這段sql的意思我猜是: 使用者 user (ip來源是:127.0.0.1) 增加 Select 的權限
應該就需要在下 Flush Privileges 指令。

9
MySQL “show users”: How to show/list the users in a MySQL database

10
mysql 學習網站:
MySQL Foreign Key
https://www.mysqltutorial.org/mysql-foreign-key/

應用層筆記

1
理解 Session 和 Cookie
循序漸進理解 HTTP Cache 機制
 How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?
Add an Expires or a Cache-Control header in JSP

2 post有application/x-www-form-urlencoded 或 multipart/form-data。
multipart/form-data沒試過，可能要來練習(multipart/form-data可以直接傳送檔案，像是:.jpg)

參考:
深入解析 multipart/form-data
Okhttp3 : 6 MULTIPART Request (Send binary data/files/images/songs)
原来 POST 是这样发送数据
 windows 10 xampp 設定 mysql 密碼與相關 php.ini 時區、上傳容量限制設定
 PHP file upload error tmp_name is empty
How To Upload Large Files To Web Server in Android

3發現有兩種cache，disk和memory

okhttp cache 測試

要先有這個:

OkHttpClient.Builder()
.cache(cache())

第一次GET會是這樣(server會有setcookie):
client

    Host: jsonplaceholder.typicode.com
    Connection: Keep-Alive
    Accept-Encoding: gzip
    User-Agent: okhttp/3.12.0

server:

    date: Sun, 17 May 2020 15:20:57 GMT
    content-type: application/json; charset=utf-8
    set-cookie: __cfduid=d93d55387df330bf2985e565f64ed5d531589728857; expires=Tue, 16-Jun-20 15:20:57 GMT; path=/; domain=.typicode.com; HttpOnly; SameSite=Lax
    x-powered-by: Express
    vary: Origin, Accept-Encoding
    access-control-allow-credentials: true
    cache-control: max-age=14400
    pragma: no-cache
    expires: -1
    x-content-type-options: nosniff
    etag: W/"ec-T/bZtLnSD6OcyIHJYg7/JH1AI4k"
    via: 1.1 vegur
    cf-cache-status: HIT
    age: 730
    expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    server: cloudflare
    cf-ray: 594e5350ff1cd96a-HKG
    content-encoding: gzip
    cf-request-id: 02c4d266990000d96af4833200000001

之後第二次，GET會是這樣(client會有cookie):
client

    Host: jsonplaceholder.typicode.com
    Connection: Keep-Alive
    Accept-Encoding: gzip
    Cookie: __cfduid=d93d55387df330bf2985e565f64ed5d531589728857
    User-Agent: okhttp/3.12.0
    If-None-Match: W/"ec-T/bZtLnSD6OcyIHJYg7/JH1AI4k"

server

    date: Sun, 17 May 2020 15:22:05 GMT
    x-powered-by: Express
    vary: Origin, Accept-Encoding
    access-control-allow-credentials: true
    cache-control: max-age=14400
    pragma: no-cache
    expires: -1
    x-content-type-options: nosniff
    etag: W/"ec-T/bZtLnSD6OcyIHJYg7/JH1AI4k"
    via: 1.1 vegur
    cf-cache-status: HIT
    age: 798
    expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    server: cloudflare
    cf-ray: 594e54f78a62122e-HKG
    cf-request-id: 02c4d36eb90000122ea83d2200000001

然後reponse.code()會是304

應該是因為 server的 pragma: no-cache或cache-control: max-age=14400 和 etag: W/"105970-HCYFejK2YCxztz8++2rHnutkPOQ"
和client 的 If-None-Match: W/"105970-HCYFejK2YCxztz8++2rHnutkPOQ"

會有這個效果:

把頁面快取起來( pragma: no-cache、cache-control)，但只要首頁一變動( etag、If-None-Match)，就能夠立刻看到新的頁面

然後第一次server先送個cookie ，之後 client就拿這個cookie 去跟 server 確認資料有沒有更新

簡單的觀察方法就是
瀏覽器觀察這個網址的 (200)和(304)的時間差距不小:
https://jsonplaceholder.typicode.com/photos

發現一個問題，cookie是採用這個方法:

Automatic cookie handling with OkHttp 3
解答三:

public class MyCookieJar implements CookieJar {

    private List<Cookie> cookies;

    @Override
    public void saveFromResponse(HttpUrl url, List<Cookie> cookies) {
        this.cookies =  cookies;
    }

    @Override
    public List<Cookie> loadForRequest(HttpUrl url) {
        if (cookies != null)
            return cookies;
        return new ArrayList<Cookie>();

    } 
}

如果一開始https://jsonplaceholder.typicode.com/photos/1 接著換 https://jsonplaceholder.typicode.com/photos/4
，cookie還是同一個。

如果okhttp沒有cookie(.cookieJar(new MyCookieJar())) 會是這樣

第一次
client:

    Host: jsonplaceholder.typicode.com
    Connection: Keep-Alive
    Accept-Encoding: gzip
    User-Agent: okhttp/3.12.0

server:

    date: Sun, 17 May 2020 15:30:27 GMT
    content-type: application/json; charset=utf-8
    set-cookie: __cfduid=d5b9b04e6846c15a9a250b405bc9da0de1589729427; expires=Tue, 16-Jun-20 15:30:27 GMT; path=/; domain=.typicode.com; HttpOnly; SameSite=Lax
    x-powered-by: Express
    vary: Origin, Accept-Encoding
    access-control-allow-credentials: true
    cache-control: max-age=14400
    pragma: no-cache
    expires: -1
    x-content-type-options: nosniff
    etag: W/"ce-XaHRmQh6w74+GXYUaCmeotTHMZE"
    via: 1.1 vegur
    cf-cache-status: HIT
    age: 5441
    expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    server: cloudflare
    cf-ray: 594e613b0863197f-HKG
    content-encoding: gzip
    cf-request-id: 02c4db18e90000197ff5a96200000001

第二次
client:

    Host: jsonplaceholder.typicode.com
    Connection: Keep-Alive
    Accept-Encoding: gzip
    User-Agent: okhttp/3.12.0
    If-None-Match: W/"ce-XaHRmQh6w74+GXYUaCmeotTHMZE"

server

    date: Sun, 17 May 2020 15:30:29 GMT
    set-cookie: __cfduid=dff6b0ad604f547456e598dde0532a73c1589729429; expires=Tue, 16-Jun-20 15:30:29 GMT; path=/; domain=.typicode.com; HttpOnly; SameSite=Lax
    x-powered-by: Express
    vary: Origin, Accept-Encoding
    access-control-allow-credentials: true
    cache-control: max-age=14400
    pragma: no-cache
    expires: -1
    x-content-type-options: nosniff
    etag: W/"ce-XaHRmQh6w74+GXYUaCmeotTHMZE"
    via: 1.1 vegur
    cf-cache-status: HIT
    age: 5443
    expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    server: cloudflare
    cf-ray: 594e6145de6e3377-HKG
    cf-request-id: 02c4db1fa900003377c421f200000001

也是 reponse.code() = 304

不同的地方好像在因為 client沒有cookie，所以server 會不斷 set-cookie。
但是 If-None-Match: W/"ce-XaHRmQh6w74+GXYUaCmeotTHMZE" 這個東西應該也算存在cache之類的吧!不然為什麼
client第一次request沒有這東西，但是第一次server回傳 etag: W/"ce-XaHRmQh6w74+GXYUaCmeotTHMZE" 後，第二次request 就有這東西了。

然後測試看看把.cache(cache())去掉，就沒有If-None-Match: W/"ce-XaHRmQh6w74+GXYUaCmeotTHMZE"了，而且
.cache(cache())拿掉應該就是不用cache，所以都會回傳200

那如果保留.cache(cache()) 但是去掉 If-None-Match: W/"ce-XaHRmQh6w74+GXYUaCmeotTHMZE" ，會如何?
還是都200
但是會依據cache-control: max-age=14400 ，如果時間小於max-age=14400 (秒)，好像就不會再去連網路要資料了。會直接用cache的，但是如果設定成cache-control: max-age=0 ，就會一直連網路，回傳200 。

但是如果同時有這兩個 Cache-Control: max-age=5000 、 pragma: no-cache ，
pragma: no-cache還是有效的，所以要去掉pragma: no-cache。

其他參考:
Retrofit Caching Example and Why it SUCKS
Http user agent changed after 3.6.1 release #546
What is difference between max-age and max-stale in cache control mechanism
SearchView onQueryTextSubmit runs twice while I pressed once

學習網頁,參考這位大大的網站：
Java Servlet 的 HttpSessionListener 的使用方式：監控與統計伺服器的所有 session 狀態
 使用 Tomcat 7 與 Java Servlet 3.0 API 實作 Asynchronous Servlets：提升伺服器效率的方案
 在選擇網頁空間時應該注意哪些重點？
使用 DATA URI 將圖片以 Base64 編碼並內崁至網頁中，加速載入速度
 JavaScript 記憶體洩漏（Memory Leak）問題
 HTML5 Please：提供各種 HTML5 與 CSS 語法在瀏覽器相容性問題上的使用建議
 CloudFlare 免費 CDN 伺服器使用教學，加速網站載入速度，阻擋惡意流量
 內容傳遞網路（CDN）對於手機瀏覽網頁的加速效果不好？
修改 Chrome 瀏覽器安全性設定，解決網頁開發階段 Access-Control-Allow-Origin 問題
 Apache 設定 Proxy 功能
 Tomcat 設定 SSL（HTTPS 加密)