728x90
옵션 체이닝
- 개체의 속성에 액세스하거나 함수를 호출한다.
- ES11에서 도입되었다.
- 객체의 값을 호출할 때 안전성을 유지하면서 호출이 가능하다.
- 객체의 키 앞에 ' ? ' 구문을 추가해서 작성한다.
- 객체의 키 값이 있는지 확인하고 없으면 undefined를 던져 오류가 나지 않도록 방지해준다.
- 오류가 나지 않는 이유는 객체의 키 값을 확인하고 type에러가 나지 않게 방지해주기 때문이다.
let obj = {name : "wi", content : "내용"};
console.log(obj?.name);
//결과: wi
console.log(obj?.age);
//결과: undefined
console.time() / console.timeEnd()
- 코드를 작성하면서 테스트 코드 등을 작성할 때 코드의 실행시간을 확인해야하는 경우가 생길 수 있다.
- 타이머를 시작해 작업이 얼마나 걸리는지 추척할 수 있다.
- 각 타이머에게 고유한 이름을 줄 수 있다.
- console.time( name )
- 새 타이머에게 설정할 이름을 name 자리에 지정한다.
- 같은 이름으로 console.timeEnd( name )에 호출하면 해당 타이머가 중단된다.
- 한 페이지에 최대 10,000개의 타이머를 설정할 수 있다.
- console.timeEnd()가 호출되면 타이머가 종료된다.
👩🏫실습_ 게시판 만들기
실습내용
- 수업시간에 따라서 입력해 본 코드에 수정버튼을 생성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
<style>
.board-content div{
border: 1px solid;
height: 30px;
min-width: 100px;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<input type="text">
<input type="text">
<button id="addBtn">등록</button>
</div>
<div class="board">
</div>
</body>
<script>
//보드의 내용을 담아놓을 배열
let boardArr = [];
let _index = 1;
//보드의 내용을 만들어줄 생성자함수
//객체에서 구조분해핧당으로 값을 가져올것
//매개변수 부분에 중괄호 작성
//객체에서 가져올 키 값을 작성해준다.
//_name, _content, _id의 키 값을 가져와야 겠다.
//구조분해 할당으로
function creatBoard({_name, _content, _id}){
this.name = _name;
this.content = _content;
this.id = _id;
}
function addBoard(){
//배열 구조분해할당 순서대로
//배열의 0번 1번 순서대로
//첫 번째 input이 input01에 담기고
//두 번째 input이 input02에 담긴다.
let [input01,input02] = document.querySelectorAll('input');
//new 빈 객체 만들고
//뒤에 생성자 함수
//매개변수로 전달한 객체의 키 값을 기준으로
//_name과 _content와 _id의 값이 구조분해할당으로 할당된다. 키를 기준으로 할당되기 때문에 키의 이름이 같아야 한다.
//글의 갯수와 맞출것인지 아니면 글 번호를 매겨놓고 게시판을 유지할 것인지
//다시 번호를 갱신한다하면 그냥 반복문에서 처리 가능하다.
let board = new creatBoard({_name : input01.value, _content : input02.value, _id : _index });
_index++;
boardArr.push(board);
console.log(boardArr);
render();
}
function render(){
//내용 초기화
document.querySelector('.board').innerHTML = "";
//객체를 담고있는 배열
boardArr.forEach(function(item,index){
//item은 객체가 순서대로 할당되고
let div01 = document.createElement("div");
let div02 = document.createElement("div");
let div03 = document.createElement("div");
let div04 = document.createElement("div");
let div05 = document.createElement("div");
div05.style.display = "none";
let button = document.createElement('button');
let Sbutton = document.createElement('button');
let Rbutton = document.createElement('button');
Rbutton.innerHTML = "수정등록";
Rbutton.style.display = "none";
button.onclick = function(){
//div01 태그 제거
div01.remove();
//boardArr배열에서 제거
//제거를 시작할 인덱스 몇 개를 제거할지 두 번째 매개변수로
boardArr.splice(index,1);
render();
}
Sbutton.onclick = function(){
let Sinput01 = document.createElement('input');
let Sinput02 = document.createElement('input');
div05.append(Sinput01, Sinput02, Rbutton);
Sinput01.type = "text";
Sinput02.type = "text";
div05.style.display = "block";
Rbutton.style.display = "inline";
Rbutton.onclick = function(){
/*방법 1_AH
item['name'] = Sinput01.value;
item['content'] = Sinput02.value;
*/
//방법2_내가한것
let Reboard = new creatBoard({_name : Sinput01.value, _content : Sinput02.value, _id : item["id"]});
/*이슈! push 진행 시 게시글 아래에 삽입되는 현상 발생 splice로 해결완료*/
boardArr.splice(index,1,Reboard); //splice(index,제거할 요소개수, 배열에 추가될 요소)
render();
}
}
button.innerHTML = "삭제";
Sbutton.innerHTML = "수정";
//구조분해할당
let {name, content, id} = item;
div02.innerHTML = id; //글 번호 (id = 글번호 값이 삭제 추가에도 유지 / index = 글 번호 값이 삭제 추가에 따라 변한다.)
div03.innerHTML = content; //글 내용
div04.innerHTML = name; //작성자
div01.style.display = "flex";
div01.className = "board-content";
div01.append(div02,div03,div04,button,Sbutton,div05);
document.querySelector('.board').append(div01);
})
}
addBtn.onclick = addBoard;
</script>
</html>👩🏫예시_가위바위보 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가위바위보</title>
<style>
.player-select,
.com-select{
width: 180px;
height: 154px;
background-image: url('https://sites.google.com/site/hafsrsp/_/rsrc/1468855017636/config/customLogo.gif?revision=2');
background-repeat: no-repeat;
border: 1px solid;
background-size: 440px;
background-position-x: 25px;
}
.rock{
background-position-x: 25px;
}
.paper{
background-position-x: -269px;
}
.scissors{
background-position-x: -122px;
}
.game-wrap{
display: flex;
}
</style>
</head>
<body>
<!--버튼 가위 바위 보-->
<div class="game-wrap">
<!--player 선택한 이미지-->
<div class="player-select"></div>
<div class="com-select"></div>
</div>
<h1 class="result">결과</h1>
<p class="subResult">내용</p>
<button class="player-btn">가위</button>
<button class="player-btn">보</button>
<button class="player-btn">바위</button>
</body>
<script>
//클래스의 이름으로 사용하고 결과에서도 사용할 가위 바위 보를 담은 문자열 배열을 만들자
let gameArr = ["scissors", "paper", "rock"];
//버튼들을 담아놓고
let playerBtns = document.querySelectorAll('.player-btn');
//player화면 선택한 결과를 보여줄 태그
let playerSelect = document.querySelector('.player-select')
//컴퓨터의 결과를 보여줄 태그
function init(){
gameArr.forEach(function(item,index){
//"scissors", "paper", "rock" 순서대로 item에 담긴다.
//index = 0, 1, 2이 순서대로
//playerBtns[0], playerBtns[1], playerBtns[2]
//첫 번째 버튼, 두 번째 버튼, 세 번째 버튼
playerBtns[index].addEventListener('click', function(){
//player 화면 선택한 가위나 바위 보 이미지를 보여주는 태그
//클래스를 추가하되 player-select를 유지하고 새로운 클래스를 추가해주자.
playerSelect.className = "player-select "+item;
//구조분해 할당으로 받고
let {value,text} = gameStart(item);
//결과
document.querySelector('.result').innerHTML = value;
//내용
document.querySelector('.subResult').innerHTML = text;
})
})
}
init();
function gameStart(player){
//랜덤 값으로 gameArr베열 안에 가위, 바위, 보를 가져오자
let comSelect = gameArr[Math.floor(Math.random() * gameArr.length)];
document.querySelector('.com-select').className = 'com-select ' + comSelect;
//무승부 거르고 시작
if(player == comSelect){
return {value : "무승부", text : "다시하세요"};
}
//&&: 둘 다 true일 때
//||: 둘 중 하나가 true일 때
else if(player == "rock" && comSelect == "scissors" ||
player == "paper" && comSelect == "rock" ||
player == "scissors" && comSelect == "paper"){
//여기서 이기는 조건을 만들어보자
return {value : "승리", text : "축하축하"};
}
else{
return { value : "패배", text : "졌습니다."};
}
//함수 실행하면 반환값이 객체다...
}
</script>
</html>결과
내용
728x90
