TIL#5. 1週間目終了?!これから

26614 ワード

テキストリンク

🧟‍♀️ああ...黄麻..。

Replitの宿題は全部終わりました.習ったことを整理します.
今日は金曜日ですが、週末はいかがですか.と思うけど.
私は私を知っているので、明日の私に渡すことはできません.
見当はつかないが、今日学んだことは整理しないで記録しないようにしましょう.

オブジェクトにアクセスしたい場合

Class vs Object?

クラスはオブジェクトを工場のように印刷するためのフレームワークです!
クラスとオブジェクトの構造は似ているように見えますが、クラスには構造関数があります!

class Car {
  ##클래스 생성
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
## 클래스를 통해 생성된 객체는 인스턴스라고한다
const morning = new Car('Morning', 2000000);

方法

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }


  applyDiscount(discount) {  
    return this.price * discount;   
  }


  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}

オブジェクトキー変数としてアクセス

const information = {
  name: '김개발'
}
#위에 객체에 verb를 key, project를 value 넣고싶을때 방법
const verb = 'developes' 
const project = 'facebook'

2つの方法があります.[B]の場合、keyとvalueは常に固定されている必要があります.

information[verb] = project // [A]
information.developes = 'facebook' // [B]

注意:https://www.notion.so/29-object-3-c2628eea9c9445889b674707d26350b9

オブジェクトの遍歴

1.ゲートを順番に受信して転送する方法
配列を押して

objectキーを受信!

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

object値も同じ!アレイごとに受信!

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

オブジェクトによる

の受信

const entries = Object.entries(obj)
/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

2. for-in

const arr = ['coconut', 'banana', 'pepper', 'coriander'];
//i는 0으로 초기화 하고 i를 1씩 자동증가시키기
for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

オブジェクト上をスクロールするfor in

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
for (let key in obj) {	//객체의 각각의 키에 해당하는 문자열을 할당
  const value = obj[key]
  console.log(key)
  console.log(value)
}

::Assignmentは私の意思で答えます
https://www.notion.so/29-object-3-c2628eea9c9445889b674707d26350b9

// Assignment - 다음 함수 안에 코드를 구현하세요
const getScorePoint = score =>{
    switch(score){
        case 'A+':
            return 4.5;
        case 'A':
            return 4.0;
        case 'B+':
            return 3.5;
        case 'B':
            return 3;
        case 'C+':
            return 2.5;
        case 'C':
            return 2;
        case 'D+':
            return 1.5;
        case 'D':
            return 1;
        case 'F':
            return 0;
    }
}
const getExamResult = (scores, requiredClasses) => {
    for(let key in scores){
        let score = scores[key];
        // console.log(scores[key],getScorePoint(score));
        scores[key] = getScorePoint(score);
    }
    for(let i in requiredClasses){
        let checkNum = 0;
        for(let key in scores){
            if (requiredClasses[i] == key){
                checkNum++;
            }
        }
        if(checkNum===0){
            console.log(requiredClasses[i]);
            scores[requiredClasses[i]] = 0;
        }
    }
    // console.log(scores);
    const result = scores;
    return result
  }
  let scores = {
    '생활속의회계': 'C',
    '논리적글쓰기': 'B',
    '독일문화의이해': 'B+',
    '기초수학': 'D+',
    '영어회화': 'C+',
    '인지발달심리학': 'A+',
  };
  const requiredClasses =  ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];
console.log(getExamResult(scores, requiredClasses));

Event

インタラクティブサイトのために、JavaScriptでイベントを検出してプログラムし、対応する結果を生成します.

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

「イベントタイプ」を参照してください.

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

::Assignmentは私の意思で答えます
https://www.notion.so/Check-Point-32-Event-a90138c30a7a495ca709bde6be9e9ec1

const thisIsPw = document.getElementById('password');
const thisIsRePw = document.getElementById('re-password');
thisIsRePw.addEventListener('keyup', function(event) {
  // thisIsCode.innerHTML = event.keyCode;
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;
  // alert("test");
  const alert = document.querySelector(".alert");
  if(password ==rePassword){
      alert.innerHTML = "";
  }else{
      alert.innerHTML = "비밀번호가 일치하지 않습니다";
  }
});

DOMって何?!(Document Object Model)

DOM(dom)は,ウェブページのHTMLを階層化し,ツリー構造を形成するオブジェクトモデルである.
DOMは、HTMLページとスクリプト言語(Javascript)を接続する役割です.

javascriptはhtmlにどのようにアクセスしますか?!
JavaScriptのドキュメントオブジェクトはDOM構造へのアクセスの関門であり、ドキュメントオブジェクトはHTMLドキュメントである!

JavaScriptでhtmlをデバッグ!

function addPTag() {
  const Ptag = document.createElement('p');
  const h1 = document.querySelector('h1');
  Ptag.className = "dom";
  Ptag.innerHTML = "DOM";
  h1.appendChild(Ptag);
}