常連

自己紹介

### 前提・実現したいこと

以下サンプルコードのように、「特定の要素」と「document」に対して`addEventListener `を設定する場合、処理の順番はどのように決まるのでしょうか？

「document」のほうを最初に実行したいのですが、「document」を「特定の要素」よりも先に記述しても、結果は変わりませんでした。

どうすれば、「document」のほうを最初に実行できますか？




### 該当のソースコード

```ここに言語名を入力
    document.querySelector('#hoge').addEventListener('click', (_ev) => {
      console.log("次にしたい処理")
    })
    document.addEventListener('click', (_ev) => {
      console.log("最初にしたい処理")
    })
    // "次にしたい処理" → "最初にしたい処理" で出力される
```

```ここに言語名を入力
    // 上下逆に書いても出力順は変わらなかった
    document.addEventListener('click', (_ev) => {
      console.log("最初にしたい処理")
    })
    document.querySelector('#hoge').addEventListener('click', (_ev) => {
      console.log("次にしたい処理")
    })
    // "次にしたい処理" → "最初にしたい処理" で出力される
```

addEventListenerの処理の順番について

添付のサイトのように、ビューポートの幅を変えても、正方形の比率を保ったままビューポートに付随するtableとdivを作りたいのですが、どのようなコードを書いたらいいか分かりません。

http://yuka141247.html.xdomain.jp
※添付サイトはimgを置いているだけです。

```html
<div class="wrap">
  <table>
    <tr><th colspan="7">2021/6</th></tr>
    <tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr>
    <tr><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
    <tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
    <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
    <tr><td>28</td><td>29</td><td>30</td><td></td><td></td><td></td><td></td></tr>
  </table>
  <div></div>
</div>
```

```css
.wrap {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.wrap table {
  width: 490px;
  height: 490px;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid black;
  text-align: center;
}

.wrap table td, .test table th{
  border: 1px solid black;
}

.wrap div {
  width: 490px;
  height: 490px;
  background-color: #2cb4ad;
}
```

比率を保ったまま収縮するtableを作りたい

# 分からないこと
JavaScriptの非同期処理(Promise)の使い方がさっぱり分かりません。
実際に試してみようと思って、以下のコード
```Javascript
const promise = new Promise((resolve)=>{
    console.log("1番目");
    resolve();})
    
    .then(()=>
        {setTimeout(()=>{
            console.log("2番目")},1000);
        return 1;})
    
    .then(()=>{
        console.log("3番目");
        return 1;})
        
    .catch((e)=>{
        console.log("error")})

    console.log("1番目");
```
を書いてみたのですが、結果は、
```Javascript
1番目
3番目
2番目
```
とただの同期処理になってしまいます。
一応色々なサイトを見てはみたのですが、何が問題かも理解できず…
Promiseの使い方というところに関して
- **resolveとreturnそれぞれの使い所、使い分け**
- **Promise(()=>{})や.then(()=>{})と書いた時、左の()に引数を明記するのはどんな時か**
- 以下のコードのように
　```JavaScript
function A(val){
　return new Promise(function(resolve,reject){
　　if(val){
　　　setTimeout(function(){
　　　　resolve()},1000)
　　}else{
　　　reject();
}})}
```
　**と最初に関数Aの返り値をPromiseにして、その後"A.then"と書くことがあるがそれはどのような時か？(そのように書くメリット？)**
以上3点も含めて教えていただけると非常に有り難いです。よろしくお願いいたします。


# 環境
macOS Mojave 10.14.6
IDE->Visual Studio Code
でjsファイルを作ってnodeで実行しています

JavaScriptの非同期処理(Promise)の使い方が分からない

JavaScript初心者です。

http://localhost:3000/ にてindex.ejsを読み込みたいです。
現状、404エラーが出てしまいます。
確認すべき箇所をご指摘いただけますと幸いです。

```ここに言語を入力
// expressを読み込めるようにしている。
const express = require('express');
// express()をappに格納する。
const app = express();
// ファイルシステムを読み込む。
const fs = require('fs');
const index_page = fs.readFileSync('./views/index.ejs','utf8');

function getFromClient(req,res){
    //レンダリングを行う
    var content = ejs.render(index_page,{
        title: "Top Page",
        content: "これはめいんメインとなるページです．<br>Top page!!",
        foot: "top page",
    });
    res.writeHead(200,{'Content-Type':'text/html'});
        res.write(content);
        res.end();
    }
//
app.engine('sug',(filePath, options, callback) => {
  fs.readFile(filePath, (err, content) => {
    if(err) return callback(err)
    const rendered = content.toString()
    .replace('#title#', `<title>${options.title}</title>`)
    .replace('#message#', '<h1>' + options.message + '</h1>')
    .replace('#content#','<div>'+ options.content + '</div>' )
    return callback(null, rendered)
  })
})

app.set('views', './views')
app.set('view engine', 'sug')
// renderで指定したファイルを画面に表示させる
app.get('/sug', (req, res) => {
  res.render('template.sug', { title: 'PageTitle', message: '&#x1f9dd; abcde', content: '&#x1f43c; first content'})
})
// localhost:3000にアクセスされた時のレスポンド
// Mount routeルーティングとはクライアントが要求するURIに応じてどのような処理を実行するかを返すかを振り分ける処理
app.get('/sug', (req, res) => {
  res.send('<h1>&#x1f9dd;</h1>')
})

// アクセス可能なサーバーを起動する。listenで待ち受け状態にする、これによりリクエストを受け取ることができるようになるらしい
app.listen(3000, () => console.log('hello i am listening on port 3000'))

```

![イメージ説明](4035fd56e076f6c656997b86f6c3bf75.png)