1-1
자바스크립트 왜 쓰나요?
"html 조작과 변경"을 위해
html을 왜 조작하나요?
- 웹페이지 UI제작 가능하다
- 유저가 입력한 데이터를 검사할 수도 있다
- 유저가 버튼을 누르면 서버로 데이터 요청할 수도 있다
/* 웹문서의 id='???'인거 찾아서 그거의 !!!에다가 ^^^ 집어넣어라 */
document.getElementById('???').!!! = '^^^';셀렉터
getElementById()는 셀렉터라고 부른다. html 요소를 찾기 위해 사용한다.
프로그래밍 하는법
컴퓨터에게 일 시키는게 프로그래밍이다.
코드를 막 짜서 컴퓨터에게 이거해라 저거해라 시키는거다.
컴퓨터는 지능이 0이라 사람에게 대화하듯 "너 저기가서 저것 좀 바꿔" 하면 안된다.
"너 id가 hello인 html요소를 찾아서 그 안의 내용을 안녕으로 바꿔"
이래야 알아듣는다.
1-2
기본적인 UI 만드는 법칙
- HTML CSS로 미리 UI디자인을 해놓고 당장 필요하지 않으면 평소엔 숨긴다
- 버튼을 누르거나 할 경우 UI를 보여달라고 자바스크립트 코드짬
이게 다임
/* html 파일 */
<div class="alert-box">
<p>알림창임</p>
<button id="closeBtn" class="btn btn-primary">닫기</button>
</div>
<button id="openAlert" class="btn btn-primary">열기</button>/* css 파일 */
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}이렇게 UI 디자인을 미리 해 놓고 당장은 필요없으니 숨겨놓은 다음
document.querySelector('#openAlert').addEventListener('click', function() {
document.querySelector('.alert-box').style.display = 'block';
})
document.querySelector('#closeBtn').addEventListener('click', function() {
document.querySelector('.alert-box').style.display = 'none';
})이런식으로 필요에 따라 UI를 띄우고 없애고 하면된다.
1-3
함수 왜 쓰냐?
긴 코드를 축약할 수 있으니까!
보기에도 좋고 재사용에도 용이하다
1-4
함수를 이용해보자!!
/* openAlert 함수에 의해서 버튼 클릭시 alert-box의 display값과 텍스트 변경*/
<div class="alert-box">
<p id="message">알림창임</p>
<button id="closeBtn" class="btn btn-primary" onclick="openAlert('none', '알림창임');">닫기</button>
</div>
<button id="btn1" class="btn btn-primary" onclick="openAlert('block', '아이디를 입력하세요');">아이디</button>
<button id="btn2" class="btn btn-primary" onclick="openAlert('block', '비번을 입력하세요');">비밀번호</button>
<script>
function openAlert(displayState, text) {
console.log('ff');
document.getElementsByClassName('alert-box')[0].style.display = displayState;
document.getElementById('message').innerHTML = text;
}
</script>1-5
이벤트리스너 왜 쓰냐?
이벤트가 일어나길 기다리다가 이벤트가 일어나면 내부 코드를 실행 해주는 친구
이벤트는 유저가 어느 페이지에서 하는 클릭, 드래그, 키입력 등을 일컫는 말
document.getElementById('btn1').addEventListener('click', function () {
내부 코드 작성
})저렇게 함수의 파라미터로 넘겨지는 함수를 '콜백함수' 라고한다.
순차적으로 실행하고 싶을 때 넣는 거임.
1-6
querySelector
document.querySelector('#btn1').addEventListener('click', function () {
/// 내부 코드 작성
})위처럼 변경, css 형식대로 [아이디는 # / 클래스명은 .] 을 붙이고 사용!
document.querySelectorAll('.btn1')[0].addEventListener('click', function () {
/// 내부 코드 작성
})querySelectorAll은 해당 클래스가 여러개일때 사용가능 [0]과 같이 인덱스 번호 부여
1-7
jquery 왜 쓰냐?
js 코딩 편하게 하려고, 더 짧고 직관적인 단어라서 이해하기도, 코딩하기도 쉽다.
다른 언어가 아니다. 같은언언데 그냥 편하려고 쓰는거다.
jquery의 $는 querySelector와 같은 효과가 있다.
$('.hello').html('바보');이렇게 사용가능하다.
참고로 jquery에는 jquery문법만 적용가능, 반대의 경우도 마찬가지다.
$('.hello').innerHTML('바보');이런거 안된단 소리다.
지금까지 배운거로 혼자 만들어본것
/* html 파일 */
<div id='modal' class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Login 하세요</p>
</div>
<div class="modal-footer">
<button id='closeModal' type="button" class="btn btn-secondary">Close</button>
<button id="successLogin" type="button" class="btn btn-primary">로그인하러가기</button>
</div>
</div>
</div>
</div>
<div id="modalLogout" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Logout</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>진짜 로그아웃 할래요?</p>
</div>
<div class="modal-footer">
<button id='closeModalLogout' type="button" class="btn btn-secondary">Nope</button>
<button id="successLogout" type="button" class="btn btn-primary">넹</button>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<button class="btn btn-primary" id="loginBtn">로그인</button>/* js파일 */
$('#loginBtn').on('click', function () {
if (document.querySelector('#loginBtn').innerHTML == '로그인') {
$('#modal').modal('show');
$('#closeModal').on('click', function () {
$('#modal').modal('hide');
})
$('#successLogin').on('click', function () {
$('#modal').modal('hide');
$('#loginBtn').html('Logout');
})
} else {
$('#modalLogout').modal('show');
$('#closeModalLogout').on('click', function () {
$('#modalLogout').modal('hide');
})
$('#successLogout').on('click', function () {
$('#modalLogout').modal('hide');
$('#loginBtn').html('로그인');
})
}
})
document.querySelector('.navbar-toggler').addEventListener('click', function () {
if (document.querySelector('.list-group').classList.contains('show')) {
document.querySelector('.list-group').classList.remove('show');
} else {
document.querySelector('.list-group').classList.add('show');
}
})
