자바스크립트 공부 시작했다
사실 아직 HTML/CSS 배울게 있기는 하다만
제로초 선생은 그러셨지 프로그래밍은 100% 하고 갈게 아니라 하면서 오고가며 배우는 것이라 80%는 됐다는 판단을 했고
그리고 HTML/CSS/js는 항상 3형제처럼 붙어다니지 않는가?
약 일주일간 배운 것들을 계속 사용해보면서 DOM으로 문서 조작하는 법을
얼른 배우고 싶어 이렇게 급작스레 자바스크립트 공부를 시작했다.
그래도 어떤 레이아웃을 주던 만들어낼 자신이 생겼기 때문에
본격 프로그래밍을 !
배우기에 지나치게 빠르지 않다고 판단
대충 이렇게 버튼 두개 만들어 주고
아이디짠 누르면 짠
비번짠 누르면 짠!
<body>
<div class="box-con">
<div class="box"></div>
<div>
<button onclick="아이디짠()">아이디짠</button>
<button onclick="비번짠()">비번짠</button>
</div>
</div>
<script>
function 아이디짠(){
박스없애기();
document.querySelector('.box').style.display = 'block';
document.querySelector('.box').innerHTML = '아이디를 입력하시옹';
}
function 비번짠(){
박스없애기();
document.querySelector('.box').style.display = 'block';
document.querySelector('.box').innerHTML = '비번를 입력하시옹';
}
const 박스없애기 = () => document.querySelector('.box').style.display = 'none';
</script>제법 축약 잘해서 짠듯
함수 이름이 한글인건 영타가 느리고 생각하기 싫어서인데
영어로 해버릇 해야지
뭔가 다들 쿼리셀렉터를 많이 쓰는 것 같아서 그거로 구현해봤구
그리고 화살표 함수 정말 간단해 ! 유용할 것 같구만 !
css의 display와 HTML 내용을 수정해주는 너무 간단한 함수 몇개
만들어봤슈 안녕히!
다시보니 손볼 곳이 많아보여 수정했다
<body>
<div class="box-con">
<div class="box"></div>
<div>
<button onclick="짠('id입력')">아이디짠</button>
<button onclick="짠('pw입력')">비번짠</button>
</div>
</div>
<script>
function 짠(inHtml){
박스없애기();
document.querySelector('.box').style.display = 'block';
document.querySelector('.box').innerHTML = inHtml;
}
const 박스없애기 = () => document.querySelector('.box').style.display = 'none';
</script>
</body>```
안녕하시오?