[JavaScript] Week2

https://github.com/YOOGOMJA/javascript_study

github - wiki 보면 전체 볼 수 있음

https://github.com/YOOGOMJA/javascript_study/wiki/Week2

1.2.2

onkeypress에 return false;를 넘겨주면 키 입력을 막을 수 있습니다.

onkeydown='on(0,this,event)'

function on(type, obj, evt){

return false;

}

그러면 입력 못함.

clear() console 꺠끗

<button type='button' id='btn'/>
<script>
  // click이벤트 주기
  document.getElementById('btn').addEventListener('click' , function(event){
     // 클릭이벤트가 실행됐을 때 실행되는 부분
  });
</script>

이부분 이해하긔

=======

example2.html

<div class='square' onclick='select(this)' data-square-eq='1'>

1

</div>

data- 는 표준이다. ㅎㅁ,,,

for(var i = 0 ; i < currentElems.length; i++){

currentElems[i].classList.remove("square-select");

}

클릭해제 by class 삭제

클릭하면 일단 다 체크해제 그게 위에 for문이야

====

[e3]

e2를 jQuery를 쓸거야

외부라이브러리를 써볼거야 jQuery에 있는 라이브러리를 그때그때 ㄱ져올거여~

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

이거만한게 없다~~

https://jquery.com/

jQuery는 select만 알면돼

wiki 참고

4.1. selector

차이 1)

<jquery>

$('#selected');

<javascript>

document.getElementById("selected");

똑 같 다

차이 2)

var txtSelected = $('#selected');

txtSelected.text(selected);

.innerText 이거 대신!!! 엄청 쉬워졌죵

차이 3)

$('.square').removeClass('square-select');

for(var i = 0 ; i < currentElems.length; i++){

currentElems[i].classList.remove("square-select");

}

와우~! for문 안돌려도 다 한꺼번에 지워준다는거죵

- 오~~

var a = document~

$(a) 하면 제이쿼리 객체로 바뀜

$(a).text(1) 이렇게 할 수 있어

차이 4)

document.createElement('div') 대신

$('<div></div>')

var b = $(<tr><td class="td1"></td></tr>

b.find('.td1') 이렇게 검색도 가능

오~~~~ 

createElement 만들때 진짜 편하다

- find

현재 아이의 하위애들을 찾을 수 있어~

$(#selected) === $(document).find(#selected) ??????

$(.container).find('.square')

container안에 square를 다 find한다!?!?!?!!?

=======

prac2

div 3개 선택되면 숨겨지게

active class?

숨김 처리 -> hide class를 만들어

tab1 누르면 얘한테는 hide 클래스가 없지만

다른애들은 있어서 안보이는거

클래스가 있고없고 -> 보이고말고

흑흑 어렵겠다

select 함수만 하면돼

data-nav-eq

data-box-eq 둘을 일치시키면 된다!?!?

solution에 jQuery로 되어있음 이게 더 편하댕