일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 이분 검색
- recoil
- CI/CD
- CORS
- Jest
- TS
- map
- 투포인터
- tailwind
- autosize
- app router
- async/await
- React
- 인터섹션
- 태그된 유니온
- Promise
- webpack
- 반공변성
- 무한 스크롤
- Cypress
- RTK Query
- useAppDispatch
- 리터럴 타입
- 공변성
- ESlint
- 호이스팅
- 결정 알고리즘
- dfs
- 타입 좁히기
- SSR
Archives
- Today
- Total
짧은코딩
DOM 기술 용어, 코드 작성 기준 본문
반응형
시맨틱(Semantic): 의미(뜻)를 시맨틱이라 부른다. 코드가 의미를 갖도록 시맨틱을 부여하여 코드를 작성해야 한다고 말한다.
함수 안에 코드를 간단하게 하여 뉘앙스의 범위를 잘 지키도록 해야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for=music>좋아하는 음악은?</label>
<input id=music value="장르를 입력하세요">
<script src="test.js"></script>
</body>
</html>
-label for 사용법
<label> 태그는 for 속성을 사용해서 <input> 태그의 id 속성에 연계해서 사용, label의 for값과 input의 id값을 일치시키면 된다.
const music = {
createElement(id){
this.element = document.getElementById(id);
},
get getAttributeValue(){
return this.element.value;
},
set setAttributevalue(value){
this.element.value = value;
}
};
music.createElement("music");
console.log(music.getAttributeValue);
music.setAttributevalue="클래식";
music은 오브젝트
createElement 함수에서 music을 받아 설정을 해준다.
getAttributeValue 함수는 지금 있는 value 값을 가져와서 "장르를 입력하세요"가 출력된다.
serAttributeValue는 value를 바꿔준다.
-결과
반응형
'JS' 카테고리의 다른 글
자바스크립트-코딩 스타일 (0) | 2022.05.11 |
---|---|
자바스크립트-디버깅 (0) | 2022.05.10 |
자바스크립트-nullish 병합 연산자 ??, 반복문, 함수 (0) | 2022.05.09 |
자바스크립트-if문, 논리 연산자 (0) | 2022.05.08 |
자바스크립트 기본 (0) | 2022.05.07 |
Comments