const btnArr= ['a','aa','d' , 'ad' ];
btnArr.push('aa')
console.log(btnArr[2])const 는 교수님이 다음에 알려주신다고 한다.
<script type="text/javascript">
const btnArr= [];
function addCard(){
newId=btnArr.length;
console.log(newId);
cardInput=document.querySelector('#text');
/*아이디 값을 받아서 변수에 담아았다*/
cardlist=document.querySelector('#text_list');
/*내용 출력하는 영역 설정*/
li=document.createElement('li');
/*내용 출력하는 최소단위 엘리먼트*/
li.innerHTML=cardInput.value;
/*li안에 내용을 넣기위해서; cardinput 에 있는 글자를 넣기위해*/
delBtn=document.createElement('button');
/*li안에 버튼을 넣기위해 버튼만 생성*/
delBtn.innerHTML='X';
/*버튼 안에 내용을 넣기위해*/
delBtn.setAttribute('id','newId');
/*버튼에 속성값을 넣기 위해 <버튼 id='[newId]'>X<버튼>>*/
delBtn.onclick = function(){
cardlist.removeChild(this.parentNode);
/*cardlist 는 내용을 출력하는 부분
removeChikd 는 매서드 안에 있는 값을 노드제거
this.parentNode 는 this 개념을 알아야한다.
parentNode 는 나의 부모 엘리먼트*/
}
/*버튼을 누렀을때 ()안에 있는 내용이 실행된다.*/
li.appendChild(delBtn);
/*li ()안에 여태 만들었던 delBtn을 넣는다.
<li></li>*/
cardlist.appendChild(li);
/*안에 li 값을 넣는다.*/
btnArr.push(cardInput.value);
/*배열에 cardiput.value 를 넣는다.*/
}위에 코드를 필요없는 부분을 빼면 이렇게 된다. 뺀 부분은 배열과 관련된 코드인데, 처음 배열은 넣은 것은 내가 클릭했을때 삭제하고 싶은 부분에 위치를 확인하고 없애기위해 배열하여 위치를 만들어주고 그것을 지정해줬는데
function 기능을 주면서 cardlist.removeChild(this.parentNode) 라고 명령어를 주면서 this 가 지정을 해주면서 배열해주는 코드들이 필요가 없어졌다.
<script type="text/javascript">
function addCard() {
cardInput = document.querySelector('#text');
cardlist = document.querySelector('#text_list');
li = document.createElement('li');
li.innerHTML = cardInput.value;
delBtn = document.createElement('button');
delBtn.innerHTML = 'X';
delBtn.onclick = function () {
cardlist.removeChild(this.parentNode);
}
li.appendChild(delBtn);
cardlist.appendChild(li);
}
</script>여러번 연습해서 안보고 칠수 있지만 계속 한두개씩 오타가 있어 오류가 난후 수정한다...
타자연습을 더 해서 오타를 좀더 줄이면서 해야 할것같다. 지금은 조금씩 배우면서 하는 거라 금방 오류를 찾지만
코드를 길게 쓸때 더 어려워 질테니...
<body>
<div id="root">
</div>
<script type="text/javascript">
function myTimer() {
date = new Date();
time = date.toLocaleTimeString();
document.querySelector('#root').innerHTML = time;
}
setInterval(myTimer, 1000);
</script>
</body>
<div>
<ul id='as'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
function pick(){
as = document.querySelector('#as');
li = document.querySelectorAll('#as>li');
as.appendChild(li[0]);
}
setInterval(pick, 1000);
</script>setInterval 은 1000 당 1초다.
사진을 바뀌게 하는 코드
다른건 이해 가는데 li 의 선택 범위를 왜 #as>li 로 줘야 하는 지 이해가 안갔지만 김동철님께서 친절하세 설명해주심
#as>li 로 명령을 주면 배열로 인식해서 li[0] 원하는 위치에 엘리먼트에 명령을 줄수있어서다.
li에 모두 클래스를 줘서 불러올 경우 그 불러온 엘리먼트에 제일 위에 부분에 자동으로 명령을 줘서 우연히 되었던 거였다.
매서드는 ()안에 있는 걸 엘리먼트 형식으로 불러온다. 데이터 타입.
[] 배열로 가져와서 엘리먼트 형식으로 불러온다
[li,li,li,li,li,] 이런 식으로. 0,1,2,3,4 순으로.
setInretval 안에 들어가는 값을 '인자값'이다. 앞으로 안에 어떤 데이터 타입이 들어가는지 알아야한다.
function myTimer() {
date = new Date();
time = date.toLocaleTimeString();
document.querySelector('#root').innerHTML = time;
}
setInterval(myTimer, 1000);시계를 만드는 코드