常連

拍手喝采

ユーザーがマークダウンで投稿できる簡易なメモアプリを作成しました。
XSS対策として、「<」と「>」を「&lt;」と「&gt;」に変換する処理を追加しました。
何故この二つかと言うと、htmlであれ、scriptであれ、この二つをエスケープすればそのコード自体を無効化できると思ったからです。
ところが、特殊文字はこれ以外にも、以下のようなものがあるかと思います。

```html
& --> &amp;
< --> &lt;
> --> &gt;
" --> &quot;
' --> &#x27;
/ --> &#x2F;
```

果たして「<」と「>」だけでは足りず、頻繁に見かける上記６種類をエスケープする必要があるのでしょうか？
調べてもしっくりとする答えが見つからなかったので質問させて頂きました。
何か知っている方がいましたら、どんな意見でも構いませんので、頂けると幸いです。よろしくお願いします。

フォームからの入力によるXSS対策として、エスケープさせる特殊文字は「<」と「>」だけでは不十分なのでしょうか？

## 摩訶不思議な現象が起きて困っております。
フロントエンドを通常のjqueryを入れたHTML（localhost）、バックエンドをPythonのFlask(レンタルサーバ)を使ってデータのやりとりをしています。HTMLからPost通信でバックエンドのAPIを叩くのですが、クエリパラメータで一定の文字数以上を渡した時にのみCorsエラーが発生します。
```log
Access to XMLHttpRequest at 'http://api.myDomain.com/test/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

### 不思議なのは一定以上の文字列を渡した時にのみ発生することです

フロントエンドからは下記でAPIを叩いています。
なお、#input_messageはtextareaでとったユーザーの入力文字列です。
```javascript
function main(){

  console.log(123);
  let input_message = document.getElementById("input_message").value;
  $.post( 'http://api.myDomain/test/', 'queryA='+input_message )
    .done(function( data ) {
        console.log( data );
        data = JSON.parse(data)
        document.getElementById("output_message").value = data;
    })

```
この時、渡すデータの文字数が１００文字程度以上だとエラーが発生するのですが、それ以下だと発生しません。エラーメッセージは下記です。

```log
Access to XMLHttpRequest at 'http://api.myDomain.com/test/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```
なのでバックエンド側でCors設定していないようなメッセージですが、短いデータを渡すと処理されます。
なので全く意味がわからず困っております。なお、バックエンドはPythonのFlask3.0.9です。Corsはすべて解除しております。
```python
# -*- coding: utf-8 -*-
import json
from flask import Flask,request
from flask_cors import CORS
from google.cloud import language
from google.cloud.language import enums
from google.cloud.language import types

from google.cloud import language_v1
from google.cloud.language_v1 import enums
app = Flask(__name__)
CORS(app)
```

ある文字数以上で発生するのでまったく意味がわかりません。
どなたかアドバイスいただけないでしょうか。

### ヘッダー情報

ヘッダー情報などを追記します。（Chromeのネットワークタブで確認しました）
◎渡す文字数が少なくてうまくいく場合

```general
Request URL: http://api.myDomain.com/test/
Request Method: POST
Status Code: 200 OK
Remote Address: 183.**.**.37:80
Referrer Policy: strict-origin-when-cross-origin
```

```responseHeader
HTTP/1.1 200 OK
Server: nginx
Date: Sat, 17 Oct 2020 00:51:54 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 219
Connection: keep-alive
Access-Control-Allow-Origin: http://localhost:8080
Vary: Origin
Accept-Ranges: bytes

```

```RequestHeader
POST /test/ HTTP/1.1
Host: api.np-sys.com
Connection: keep-alive
Content-Length: 58
Accept: */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Origin: http://localhost:8080
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US;q=0.9,en;q=0.8
```


◎渡す文字数が多くてうまくいかない場合

```general
Request URL: http://api.myDOmain.com/test/
Referrer Policy: strict-origin-when-cross-origin
```

```responseHeader
HTTP/1.1 500 Internal Server Error
Server: nginx
Date: Sat, 17 Oct 2020 00:51:56 GMT
Content-Type: text/html
Content-Length: 3028
Connection: keep-alive
Last-Modified: Sat, 28 Jul 2018 08:59:43 GMT
ETag: "bd4-5720b730b4f22"

```

```RequestHeader
POST /test/ HTTP/1.1
Host: api.myDomain.com
Connection: keep-alive
Content-Length: 311
Accept: */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Origin: http://localhost:8080
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US;q=0.9,en;q=0.8
```


情報不足や要領悪い部分あると思いますが、何卒よろしくお願いいたします。

摩訶不思議な現象。Corsエラーがクエリパラメータで一定の文字数以上を渡した時にのみ発生する

### 前提・実現したいこと

ベーシック認証のユーザー名・パスワードの組合せに、日本語を利用することは可能か知りたいです？


### 試したこと

試しにユーザー名をカタカナ、パスワードを数字で.htpasswdを作ってみましたが、
Google Chrome、Microsoft Edge、Firefox、Safariはアクセスできました。
Internet Exploror11のみ何度入力しても承認されませんでした。
（いずれも最新版、Safari以外はWindows10 64bit）

ここで質問ですが、ユーザーIDをカタカナなど日本語文字で運用することは、仕様的にOKなのでしょうか。
ご存じの方がいましたら、よろしくお願いします。

ベーシック認証のユーザー名に日本語は可能か？

###前提・実現したいこと
Bootstrapでsr-onlyクラスというのがあると知りました（http://hono-design.seesaa.net/article/385717552.html）
実はなにかよくわかってないので教えてくれたらうれしい

###発生している問題・エラーメッセージ
sr-onlyクラスがやってることって本来あるはずの文字を見えなくしているのでブラックハットSEOになりますよね？
GOOGLE的にどうなんですか？
###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

sr-onlyはブラック法度SEOになるのか？

FullCalendarを使ってgoogle calendarに登録しているイベントを取得しています。
例として、日本の祝日なのですが、下記のように記載しました。

```
eventSources: [
  {
    googleCalendarId: 'ja.japanese#holiday@group.v.calendar.google.com',
    className: 'event_holiday',
    success:function(info) {
      let event = document.getElementsByClassName('fc-list-event');
      console.log(event);
      console.log(event.length);
    }
  }
]
```

その結果、

`console.log(event)`部分の結果↓

```
HTMLCollection []
0: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
1: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
2: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
3: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
4: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
5: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
6: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
7: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
8: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
9: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future.event_holiday
10: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future.event_holiday
11: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
12: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
13: tr.fc-list-event.fc-event-forced-url.fc-event.fc-event-start.fc-event-end.fc-event-future
length: 14
__proto__: HTMLCollection
```

`console.log(event.length)`部分の結果↓

```
0
```

propertyのlengthは取得できないでしょうか…
各`tr`要素について実行したいことがあるのですが、for文やforEachをまわすことができず困っています。

HTMLCollectionのlengthってなになのでしょう？

javascript jQuery teratail初心者です。よろしくお願い致します。

webサイトを開くと、fadeInしながらサイトを表示させるといった単純なものを作っています。

画像をたくさん張り付けているサイトを想定して作っていまして、
全てが揃ってから表示できるかを見るために
容量の重い画像から軽い画像を30枚くらい表示させています。
重い画像は、あるサイトの航空写真で40M ぐらいの画像を
30枚のうち半分くらい使っています。

jquery, javascript を使い自分なりに調べながら作っていたところ、
chrome では問題なく表現できているのですが、

firefox, edge, IE(11)では、fadeInしながらパラパラと表示していき、
自分が思い描いている全ての画像が同時にfadeInするといった具合になりません。

いくら調べても分かりません。
こういうものだと納得しなければならないのか、
それとも別の方法があるのか、
コード自体まちがっているのか・・・。

どうかお力添えのほう、よろしくお願いいたします。

---
説明不足と気づいたことがあって質問したいので追記します。

ローディングを作ろうとしています。
「コンテンツ部分を隠しておく」→「ローディング表示」→「コンテンツ表示」の
「ローディング」の部分は後で作るとして、
すべてが読み込まれたらfadeIn して表示させる部分を作ってみました。

現在 各画像をload イベントでとって、読み込み完了したらカウント重ね、
揃ったら親要素をfadeIn させ表示するまではできているのではないかと思っています。

そこで気づいたのが、上記の方にも書きましたが、
chrome以外のブラウザだけ重い画像がパラパラと遅れて表示していることに。
ブラウザによって全てが揃った状態で表示してくれません。
全てが揃っているというのは確実に表示した状態でという意味です。

自分のなかでは、
読み込み完了 = 表示も完了。
だと思っていたので今のような表示の仕方が納得できないのです。
表示を揃えることってできないのか？と思い質問しました。
ここまで重い画像を載せることはしませんし、
軽い画像では現象が見られないためいいかとは思うのですが
軽い画像でも本当の意味では揃ってないのですよね・・・。


あとこれを書いている最中に疑問に思ったことがあったため
申し訳ないのですが質問させていただきます。
今回と関係あるのかもしれません。
よそ様のサイトを見ているときに回線のせいもあるかもしれませんが、
画像が徐々に表示されている状態は
読み込んでいる最中なのか、読み込み完了はしている状態なのか？？？
今回の場合ですと、loadイベントの中に入ったのか入っていないのか？？？
これが分かると読み込み完了の意味が少し理解できるのかな・・・

どうかよろしくお願いします。








---
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<style>
        .gallery {
            display: none;
        }

        .gallery .container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 1000px;
            margin: 0 auto;
            background-color: #ebb7b7;
        }

        .gallery .container .im {
            display: inline-block;
            flex: 1 1 300px;
            max-width: 300px;
        }
    </style>
<body>
    <div class="gallery">
        <div class="container">
            <img src="../images/bg00.jpg" alt="" class="im">
	　　<img src="../images/bg01.jpg" alt="" class="im">
	　　<img src="../images/bg02.jpg" alt="" class="im">
	　　<img src="../images/bg03.jpg" alt="" class="im">
	　　<img src="../images/bg04.jpg" alt="" class="im">
	　　<img src="../images/bg05.jpg" alt="" class="im">
	　　<img src="../images/bg06.jpg" alt="" class="im">
	　　<img src="../images/bg07.jpg" alt="" class="im">
	　　<img src="../images/bg08.jpg" alt="" class="im">
	　　<img src="../images/bg09.jpg" alt="" class="im">
	　　<img src="../images/bg10.jpg" alt="" class="im">
	　　<img src="../images/bg11.jpg" alt="" class="im">
	　　<img src="../images/bg12.jpg" alt="" class="im">
	　　<img src="../images/bg13.jpg" alt="" class="im">
	　　<img src="../images/bg14.jpg" alt="" class="im">
	　　<img src="../images/bg15.jpg" alt="" class="im">
	　　<img src="../images/bg16.jpg" alt="" class="im">
	　　<img src="../images/bg17.jpg" alt="" class="im">
	　　<img src="../images/bg18.jpg" alt="" class="im">
	　　<img src="../images/bg19.jpg" alt="" class="im">
	　　<img src="../images/bg20.jpg" alt="" class="im">
	　　<img src="../images/bg21.jpg" alt="" class="im">
	　　<img src="../images/bg22.jpg" alt="" class="im">
	　　<img src="../images/bg23.jpg" alt="" class="im">
	　　<img src="../images/bg24.jpg" alt="" class="im">
	　　<img src="../images/bg25.jpg" alt="" class="im">
	　　<img src="../images/bg26.jpg" alt="" class="im">
	　　<img src="../images/bg27.jpg" alt="" class="im">
	　　<img src="../images/bg28.jpg" alt="" class="im">
	　　<img src="../images/bg29.jpg" alt="" class="im">
	　　<img src="../images/bg30.jpg" alt="" class="im">
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var img = document.querySelectorAll('.im');
        var loadCount = 0;
        var imgLength = img.length;
        for (var i = 0; i < img.length; i++) {

            var image = new Image();
            image.src = img[i].src;
            img[i].src = '';

            img[i].addEventListener('load', function (e) {
                loadCount++;
                if (loadCount === imgLength) {
                    $('.gallery').fadeIn(1500);
                }
            }, false);
            img[i].src = image.src;
        }

    </script>
</body>
</html>
```

jQueryのfadeInで読み込んだ画像を同時に表示させたい。

以下のサイトを参考にpythonで自動変換を実施したいです。
方法をご教示頂けないでしょうか

どうゆう法則性で変換するのか？
なぜサイズが違うのかが全然わかりません

Value　　　　CBOR　JSON
0 　　　　　　1 　　1 
23 　　　　　 1 　　2 
[1, 2, 3, 4] 5 　　9 

[リンク内容](https://qiita.com/ritou/items/f3eafedab038d17e3066)

jsonをCBORに変換したい

Bootstrapで[この例と同様の](https://getbootstrap.com/docs/4.4/components/scrollspy/#example-with-list-group)Scrollspyを制作しているのですが、上手くいきません。

読み込めていないソースコードがあるのでしょうか？

#該当のソースコード
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    
    <div id="list-example" class="list-group">
        <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
        <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 5</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 6</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 7</a>
      </div>
      <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
        <h4 id="list-item-1">Item 1</h4>
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
        <h4 id="list-item-2">Item 2</h4>
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
        <h4 id="list-item-3">Item 3</h4>
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
        <h4 id="list-item-4">Item 4</h4>
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
        <h4 id="list-item-5">Item 5</h4>
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
        <h4 id="list-item-6">Item 6</h4>
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
        <h4 id="list-item-7">Item 7</h4>
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

    </div>


    
    <script>
        $('body').scrollspy({ target: '#navbar-example' })
    </script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
```

#結果

![イメージ説明](f8f103a74083a369688d14d38689bcd6.png)

BootstrapでScrollspyの実装

### 前提・実現したいこと

Webページ上で文字の組み合わせが表記として問題がないかを検索してハイライトするブックマークレットを作りたい。

### 発生している問題

後よみ先読みなどで済む単語の検索だけなら可能なのですが、語群から組み合わせの可能性を検索してくるという段階がどうしたら良いのかわからずつまづいています。

少数の語彙群であれば、組み合わせ全網羅も可能かもしれませんが、語群内の単語数がけっこうあるため、自動で組み合わせを検索できたらと思いました。

### 現時点で動かせているソースコード例
全角の英数字やかっこ記号、年を表す以外の4桁以上の数字の羅列、「取り消し」をルールに基づいてWebページ上で検索し、ひっかけてハイライトさせようとしたもの
```javascript
javascript: var s = '[ａ-ｚＡ-Ｚ０-９()｢｣],[0-9]{4}(?!年),(取りけ|とり消|とりけ),取り消し(?=[亜-熙]),(?<=[亜-熙])取り消し,(?<![亜-熙])取消(の|に|を|が|は|も|と|や)'
var A = s.split(',');
var R = new Array();
B = A.map(function (d, i) { rn = Math.floor(Math.random() * 1000);
R.push({ no: 'z' + rn, name: d }); d = '(' + d + ')'; d = new RegExp(d, 'gi'); return d; });
b = document.body.innerHTML;  
B.forEach(function (d, i) {
  if (b.indexOf(d)) { b = b.replace(d, '<span name=' + R[i].no + ' class=' + R[i].no + ' style=\'font-size:24px!important;color:#000!important;background-color:yellow!important;font-weight:bold!important;\'>$1</span>');  } 
}
); 
void(document.body.innerHTML = b);
```
↑「取り消し」の部分について、それっぽい動きはするものの適切でなく未完成です…。

### 補足情報（語群の具体的とルールの具体的な話）
- A語群（送り仮名をつける開いた状態）：受け付け、取り扱い、申し込み、取り消し…
- A語群（送り仮名をつけない閉じた状態）：受付、取扱、申込、取消…
- B語群：期間、前、後、者…

**ひっかけたいNG規則**
0. 閉じたA + 動詞の活用
＜例＞受付する、取扱させていただく
0. 閉じたA + 閉じたA + 閉じたB
＜例＞取扱受付期間
0. 開いたA + 助詞
＜例＞受け付けを、取り扱いは
0. 開いたA + 閉じたB
＜例＞受け付け期間、申し込み後

Webページ上で文字の組み合わせ表記をチェックし、ハイライトするブックマークレットの作り方

### 前提・実現したいこと

現在、html、css、javascriptでホームページの作成を行っています。
ホームページのbody部分は、大きく２列に分かれており、左側の列に他のページへのリンクを表示しています。
イメージとしては以下のような形で各ページへのリンクを一覧で出しているのですが、ページが増えるにつれてリンクを増やした際に、このリンク部分の記述を変更していくのが辛くなってきました。

### 該当のソースコード
```html
<div id="columnL">
  <div class="submenu">
    <h4><li><a href="aaa.html">aaa1</a></li></h4>
      <li><a href="bbb.html">bbb1</a></li>
      <li><a href="ccc.html">ccc1</a></li>

```

現在全部で50ページほどなのですが、ページを増やすたびに、例えば上記のbbb.htmlとccc.htmlの間にddd.htmlという新しいページのリンクを追加する場合、現在は地道に50ページ分のページを全て以下のように書き換えていっています。
### 該当のソースコード
```html
<div id="columnL">
  <div class="submenu">
    <h4><li><a href="aaa.html">aaa1</a></li></h4>
      <li><a href="bbb.html">bbb1</a></li>
      <li><a href="ddd.html">ddd1</a></li> 
      <li><a href="ccc.html">ccc1</a></li>

```

恐らくHPを作り始める前に、真面目にHPの作り方について学んで構成をしっかり考えてよかったのかとは思うのですが、なんとなくで作り始めたために現在更新するのが苦痛になってきています。
上記のリンクについてはテンプレートのようなページを作っておいて、上記のリンク用の列は、そのページに記載されている内容を読みに行くといったような設定は可能でしょうか？
（あるいはもっと素直な作り方はできるでしょうか？）
ご専門の方のお知恵を貸していただけると非常に有難いです。

宜しくお願いします。

htmlのあるセクションの内容を一括で変更したい

### 質問内容

30MB以上あるJPG形式の画像をブラウザ(Chrome)で読み込ませ、そのimgタグにonloadをつけたのですが、当たり前ですが**読み込みが完了すると**onloadが実行されてしまいます。
テストに使用したしたページ:
```html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script>
    function loads(){alert("load!");}
    function errors(){alert("error!");}
    </script>
    <img src="file:///C:/Users/user/Pictures/bigsize.jpg" onload="loads()" onerror="errors()">
  </body>
</html>

```
ですが、サイズの大きい画像の場合、表示に時間がかかりイベントが呼ばれた時点で全体が表示されていない場合があります。

実現したいことは、**画像の表示**が完了してから処理をしたいです。

何か方法がありましたらお願いいたします。

動作確認:Windows 10;Google Chrome[Ver80.0.3987.132]

画像の「表示」が完了した後に処理を実行する方法

jQueryでクライアントのリロード判定をする方法を教えてください。
理想はクライアントがリロードするとイベントが発生するようにしたいです。

jQueryでのリロード判定

お疲れ様です、古いサイトのソースをしていると
fontを使うことがあるのですが調ても意味がわからないものがあります

```
 <font size="5" face="ＭＳ 明朝" color="darkred">見出し</font> 
```

それが以下のソースコードなのですが

```
 <font color="#eca23fyellow">見出し</font>
```

普通の色指定かと思ってちゃんと読んでいなかったのですが
よくよく読んでみたら色を二つ書いてあり赤色になっていました（#eca23~とyellow？）

色の合成？おまじない？
古い書き方でもう情報がどこにもない？など様々な考えをしてみましたが
けっきょく何の意味があるのかさっぱりわかりませんでした

どういった原理で動いてるのか、ヒントだけでも構いませんので教えてください
よろしくお願いします。

文字色に関する不思議な結果？

```Rust
let mut arr = vec![1, 2, 3];
for item in &mut arr{
    *item = *item * 2;
}
```
上記のように、arrベクタの各要素を更新する処理についてですが、
上記を関数型プログラミング形式で書くにはどのようにすればよいのでしょうか？

arr = arr.iter().map(|&x| x=x*2).collect<Vec<i32>>
イメージ的には上記のような雰囲気で書きたいと思ってます。
関数型プログラミングは再代入不可だから、そもそも書き方がおかしいのかもしれませんが…。

forループを関数型プログラミング形式に書き直したい

lambdaの関数を開発中です。
あるライブラリをnpmでインストールしようとしたら、aws-sdkに依存しているようで、ファイルサイズが一気に10MBを超えてしまいます。
lambdaは最初からaws-sdkが入っているので、aws-sdkをインストールしないで、ライブラリをインストールしたいです。

npmにそのようなオプションは用意されていますか？

npmで依存するパッケージをインストールせずに単体でインストールする方法はありますか？

お世話になります、他人が作ったJavaScriptを見ていると
唐突に謎の書き方が出てきますが言語化が難しく調べるのが難しいものがあります

その一つが以下のソースなのですが

```ここに言語を入力
TextEditor.prototype.createElements = function () {
  this.TEXTAREA = document.createElement('TEXTAREA');
  this.TEXTAREA.tabIndex = -1;
  (0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
  this.textareaStyle = this.TEXTAREA.style;
  this.textareaStyle.width = 0;
  this.textareaStyle.height = 0;
  this.TEXTAREA_PARENT = document.createElement('DIV');
  (0, _element.addClass)(this.TEXTAREA_PARENT, 'handsontableInputHolder');
  this.textareaParentStyle = this.TEXTAREA_PARENT.style;
  this.textareaParentStyle.zIndex = '-1';
  this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
  this.instance.rootElement.appendChild(this.TEXTAREA_PARENT);
};
```

お行儀のよい右辺左辺の読みやすいコードだなと思っていたら、、
この途中ででてくる二つの括弧はなにを意味しているのでしょうか


```ここに言語を入力
(0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
```

代入なの？関数なの？まったく意味が分かりません
関係ないですが、JavaScriptってトリッキーな書き方がかっこいいみたいな風潮ないですかね？

すみません、それは置いといて
それは即時関数だよとか可変変数だよとか調べるためのヒントだけでも構いません
ベテランの方お教えいただけますと幸いです

JavaScriptを読んでいてたまに出てくる唐突な二つの括弧の意味

## 質問
下記のコードの関数`asyncAwaitVariables`と`asyncAwaitDirect`の違いが謎過ぎます。
awaitをPromise変数に使うかPromiseを返却する関数の実行結果に使うかで結果が変わるのはなぜなのでしょうか。

## コード
```JavaScript
'use strict';

const start = new Date();
const callback = () => {
  const end = new Date();
  const lapseMs = end.getTime() - start.getTime();
  return `${lapseMs}ミリ秒後`;
};
const createTimeoutPromise = (ms, callback) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(callback());
    }, ms);
  });
};
const asyncAwaitVariables = async (ms, callback) => {
  const results = [];
  const promise0 = createTimeoutPromise(ms, callback);
  const promise1 = createTimeoutPromise(ms, callback);
  const promise2 = createTimeoutPromise(ms, callback);
  results.push(await promise0);
  results.push(await promise1);
  results.push(await promise2);
  console.log('asyncAwaitVariables', results);
};
const asyncAwaitDirect = async (ms, callback) => {
  const results = [];
  results.push(await createTimeoutPromise(ms, callback));
  results.push(await createTimeoutPromise(ms, callback));
  results.push(await createTimeoutPromise(ms, callback));
  console.log('asyncAwaitDirect...', results);
};
const main = () => {
  const ms = 100;
  asyncAwaitVariables(ms, callback);
  asyncAwaitDirect(ms, callback);
};
main();
```

## 出力結果
``` JavaScript
asyncAwaitVariables [ '102ミリ秒後', '104ミリ秒後', '104ミリ秒後' ]
asyncAwaitDirect... [ '104ミリ秒後', '206ミリ秒後', '306ミリ秒後' ]
```

awaitをPromise変数に使うかPromiseを返却する関数の実行結果に使うかで結果が変わる

現在「htmlとcssで基礎から学ぶjavascript」という少し古い本で勉強しているのですが、そこで以下のようなコードを書きました。

```javascript
<DOCTYPE html>
<html>
  <meta>
    <meta charset="utf-8">
    <title>タイトルで～す</title>
  </meta>

  <body>
    <p>Pタグです</p>
    <h1>h1タグです</h1>

    <script>
      window.alert("アラートです");
    </script>
  </body>
</html>
```

本の説明では、<script>がbodyの中で一番下にある為、pタグやh1タグの文字が表示されてから、アラートが表示されるとありましたが、chromeで実行するとアラートが表示されてからpタグh1タグが表示されます。
IE11では期待通りの順番になりました。

質問したい事は次の事です。
1.chromeだとjavascriptの実行が先になってしまうのは仕様ですか？
2.1の質問がはいの場合、どのような方法で回避するのが主流なのでしょうか？

わかる方いらしたら回答よろしくお願いします。

Chromeでjavascriptの期待通りの実行順にならない

CSSで破線の円を作りたいと思い、以下の処理で作成を行いました。
```ここに言語を入力
/*CSS*/
.ring {
  width: 1598px;
  height: 1598px;
  margin: -810px 0 0 -810px;
  border-width: 15px;
  border-style: dashed !important;
  border-radius: 952px !important;
  opacity: 0.2;
  -moz-transform: translateZ(75px);
  -webkit-transform: translateZ(75px);
  box-shadow: none;
}
```
この処理で破線の円は表示出来たのですが、
破線の終わりと始まりの部分の間隔が狭くなってしまい、間隔が均一になりませんでした。
![イメージ説明](f56be84f57e8ef2ab8865945aa0c7761.png)
破線の間隔を統一した円はどうすれば作成出来るでしょうか？

CSSで破線の円を作りたい

### 前提・実現したいこと

javascriptで、画面上の対象座標に位置する要素を取得する為に
「document.elementFromPoint(x,y)」を使用していますが
この関数は、画面表示（可視領域）内の要素のみ取得可能な仕様となっています。

### 発生している問題

画面表示（可視領域）外の要素を取得することができないので
取得する方法がないか探しています。


### 補足情報
ブラウザは、chromeです。
「document.elementFromPoint(x,y)」にはこだわりません。