[TIL]21.04.22

25901 ワード
TIL CSS テキストリンク
モジュール関数の適用
:
ex)モジュールモード
const makeCounter = () =>{
        let value = 0;

        return {
            increase: ()=> {
                value += 1;
            }
            decrease: ()=> {
                value -= 1;
            }
            getvalue: ()=> value;
        }
}

let counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getvalue();    //===> 출력 값 : 2
ex 2)HTML文字列生成器
const tagMaker = tag => content => `<${tag}>${content}</${tag}>`;

const divMaker = tagMaker(div);

// 두번째 argument로 넣기위해선 변수를 선언해서 함수를 넣고 쓰면 안된다.
// let contentMaker = tagMaker('Hi, there');
// contentMaker = tagMaker('codestates');

// 첫번째 인자의 값, 즉, 위에서 div를 넣은 값을 건드리지 않고 두번째인자에만 값을 넣기 위해선..
divMaker('Hi, there');      // '<div>Hi,there</div>'
divMaker('codestates');     // '<div>codestates</div>'

const anchorMaker = tagMaker('a');
anchorMaker('go');      // '<a>go</a>'
anchorMaker('to web');  // '<a>to web</a>'
編集で大文字検索を見て見つけたいヒント...
:command+'+'orcommand'-'は、スクリーンコンソール、Vscodeのフォントサイズを大きくまたは小さくすることができます.
英語であれコンピューター言語であれ、私から見れば、言語は大量の入力と出力を必要とし、実力を蓄積することができる.
コデスタッツ監督の一人は、「コードはペンキのようだ.初めて塗った時は色が薄く、穴も
「私にはもう一つの場所があるように、何度か塗ると色が濃くなるように、コードもいろいろな復習と実習を通じて自分の実力を高めることができます.」彼は言った.
では、Closer関数に別の例を書きたいと思います.
ex3)
let seenYet = function(){
       let archive = {};
        return function(val){
            if(archive[val]){
                return true;
            }
            archive[val] = true;
            return false;
        }
}

let a = seenYet();
a(true);
console.log(a());   // false
console.log(a());   // true
コードの説明
:ここでcloser関数は「seenYet関数で返される匿名関数」です.closer関数として定義できる条件は、自分(内部関数、すなわちcloser関数)を使用して自分の関数、すなわち外部関数の変数を返すことができるかどうかです.上記のラベルで内容を囲み、文字テンプレートにコンテンツを出力する関数から、最初のパラメータではなく2番目のパラメータに値を入力すると、外部関数はその値を記憶し、2番目のパラメータ、すなわち内部関数(closer関数)の値を変更すると、実際にはコンテンツの値しか変更されないことがわかります.
したがって、seenYet関数を指定したaがseenYet関数の内部関数(closer関数でもある)をa(true)と呼ぶと、最初のコンソールが得られます.ログにtrueが表示される可能性がありますが、もしそうであれば、valというパラメータにtrueの値があるかどうか、if文のarchivep[val]にtrueの値があるかどうか.あなたが聞いたときはありません.パラメータとしてパラメータに入れたvalをarchive[val]に入れず、archiveは外部関数で空のオブジェクトであるため、もちろんキー値もありません.
.
.
.
.
.
.
FlexBoxを使用してVscodeのようなレイアウトを作成
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Vscode layout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="data.js"></script>
</head>
<body>
    <div id="container">
      <div class="col w10">
        <div class="icon">아이콘 1</div>
        <div class="icon">아이콘 2</div>
        <div class="icon">아이콘 3</div>
      </div>
      <div class="col w20">
        <div class="row h40">영역1</div>
        <div class="row h40">영역2</div>
        <div class="row h20">영역3</div>
      </div>
      <div class="col w70">
        <div class="row h80">영역4</div>
        <div class="row h20">영역5</div>
      </div>
    </div> 
  </body>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 40px;
  }
  
  body {
    padding: 0;
    background: white;
  }
  
  #container {
    display: flex;
    min-height: 100vh;
    background: whitesmoke;
    padding: 0.4rem;
    margin: 0.4rem;
  }
  
  .icon {
    margin: 0.4rem;
    border: 1px dashed orange;
  }
  
  .col {
    display: flex;
    flex-direction: column;
    padding: 0.4rem; 
    border: 1px solid red;
  }
  
  .row {
    border: 1px dashed purple;
  }
  
  .w10 {
    flex: 1 0 0;
  }
  .w20 {
    flex: 2 0 0;
  }
  .w70 {
    flex: 7 0 0;
  }
  
  .h20 {
    flex: 2 0 0;
  }
  
  .h40 {
    flex: 4 0 0;
  }
  
  .h80 {
    flex: 8 0 0;
  }
grow(膨張指数)、shorth(収縮指数)、basic(デフォルトサイズ)
[TIL] Code Kata 5
ピットを埋めるシリアルポートはデータの不完全なパケットの解決方法を受け入れます