코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.
JS
자바스크립트에서 =(등호)는 '같다'가 아닌 '오른쪽의 값을 왼쪽에 넣으라는 뜻'
HTML에 JS로 출력하기
<h1 id="hello">안녕하세요</h1>
document.getElementById('hello').innerHTML = '안녕';
형식
document.getElementById('???').??? = '???';
document.getElementById('hello').style.color = 'red';
이런식으로 컬러만 바꿀수도 있음. 다양하게 쓸 수 있다.
.getElementById()는 셀렉터. html 요소를 찾기 위해 사용
.innerHTML / .style / .color 이렇게 점찍는데 괄호없는건 메소드(또는 함수) 라고 부름alert 박스
UI 만드는 방법
1. HTML/CSS 미리 디자인 (필요하면 미리 숨기기)
2. 필요할 때 보여달라고 자바스크립트로 코드 짬
<div class="alert-box" id="alert">
알림창
<button onclick="document.getElementById('alert').style.display = 'none'" class="btn_close"></button>
</div>
<button onclick="document.getElementById('alert').style.display = 'block'">버튼</button>☞ 버튼 클릭 onclick
function
긴 코드를 축약하고 싶을때 사용
<div class="alert-box" id="alert">
알림창 <button onclick="닫기()" class="btn_close"></button>
</div>
<button onclick="열기()">버튼</button>
<script>
function 열기() {
document.getElementById('alert').style.display = 'block'
}
function 닫기() {
document.getElementById('alert').style.display = 'none'
}
</script>function의 또 다른 용도
<div class="alert-box" id="alert">
알림창 <button onclick="알림창('none')" class="btn_close"></button>
</div>
<button onclick="알림창('block')">버튼</button>
<script>
function 알림창(파라미터) {
document.getElementById('alert').style.display = 파라미터;
}
</script>
☞ 하나의 function으로 on off가 가능해짐
function 연산() {
2 + 1
}
function 연산2() {
2 + 2
}
function 연산3() {
2 + 3
}
// 이렇게 여러번 하는 대신 다른 한번에 사용도 가능함
function 연산(수치) {
2 + 수치
}
연산(1); // 2+1
연산(2); // 2+2
연산(3); // 2+3
여러 파라미터도 사용이 가능함
function 열기(파라미터, 파라미터2) {
document.getElementById('파라미터2').style.display = 파라미터;
}
열기('파라미터', '파라미터2') <div class="alert-box" id="alert">
알림창 <button onclick="열기('none')" class="btn_close"></button>
</div>
<button onclick="열기('block')">버튼1</button>
<button onclick="열기('block')">버튼2</button>
<script>
function 열기(구멍) {
document.getElementById('alert').style.display = 구멍;
}
</script>버튼 2개로 각각 메세지 출력
<div class="alert-box" id="alert">
<p id="title">알림창</p>
<button onclick="알림창('none')" class="btn_close"></button>
</div>
<button onclick="아이디알림창()">버튼1</button>
<button onclick="비밀번호알림창()">버튼2</button>
<script>
function 아이디알림창() {
document.getElementById('alert').style.display = 'block';
document.getElementById('title').innerHTML = '아이디를 입력해주세요.'
}
function 비밀번호알림창() {
document.getElementById('alert').style.display = 'block';
document.getElementById('title').innerHTML = '비밀번호를 입력해주세요.'
}
function 알림창(구멍) {
document.getElementById('alert').style.display = 구멍;
}
// function 열기() {
// document.getElementById('alert').style.display = 'block'
// }
// function 닫기() {
// document.getElementById('alert').style.display = 'none'
// }
</script>버튼 2개로 다른메세지를 파라미터 이용해서 출력하기
<div class="alert-box" id="alert">
<p id="title">알림창</p>
<button onclick="알림창('','none')" class="btn_close"></button>
</div>
<button onclick="알림창('아이디를 입력해주세요.','block')">버튼1</button>
<button onclick="알림창('비밀번호를 입력해주세요.','block')">버튼2</button>
<script>
function 알림창(메세지, 온오프) {
document.getElementById('alert').style.display = 온오프;
document.getElementById('title').innerHTML = 메세지;
}
</script>☞ 엄청 짜릿하다. 진짜 재밌다. 와 이걸 내가 하네? 정말 뿌듯함을 느낌
getElemntBy
document.getElementsByClassName('title')[0].innerHTML = '반가워';
ByClassName은 해당하는 class를 지정할 수 있는 셀렉터인데 class는 중복이 가능하기 때문에 맨 윗줄부터 몇번째 인덱스인지 알려줘야함.
컴퓨터는 0으로부터 시작함
ByTagName은 태그를 말함 <button 이런걸 말함
addEnventListerner()
addEnventListerner()는 다양한 이벤트 사용이 가능하다.
keydown(키보드 감지), scroll(스크롤 감지), mouseover(마우스오버) 등 다양하게 사용이 가능함
html의 onclick 대신 쓸 수 있다.
형식
document.getElementById('close').addEventListener('click',function(){
실행할 코드
});
<button id="close">닫기 </button>
<script>
document.getElementById('close').addEventListener('click',function(){
document.getElementById('alert').style.display = 'none';
});
</script>addEventListener('click',function(){})의 function(){}은 콜백 함수라고 부름
오늘의 한줄평 : 와, 자바스크립트가 진짜 진짜 사막에서 오아시스 만난거같이 조금더 알게 되어서 좋았다 :)
출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui
