자바스크립트 너무 뒤죽박죽으로 공부하고 있어서 죽을맛
요번에 해볼 것은
이러한 양식에서
아이디 입력없이 누르면 경고를 발생 시키려고 합니다.
우선 HTML 코드 입니다.
<body>
<div onsubmit="return false">
<form>
<div>
<label>아이디 : </label>
<input type="text" id="id">
</div>
<div>
<label>비밀번호 : </label>
<input type="password" id="pw">
</div>
<input type="submit" value="로그인" id="btnLogin">
</form>
</div>
</body>
(form 태그 밖에 div로 감싸서
onsubmit="return false" 속성을 줘서 페이지가 새로고침되는 것을 방지 합니다.
혹은 input type이 submit인 것을 button으로 변경해도 됩니다.)
JavaScript 코드 입니다.
function btnClick() {
if (document.getElementById('id').value.trim().length == 0) {
alert('아이디를 입력 바랍니다.');
}
}
document.getElementById('btnLogin').addEventListener('click', btnClick);텍스트(text)의 값(value)를 양쪽공간을 제거(trim())해서 길이(length)가 0이면 (== 0)
경고 발생!
함수 선언문으로 작성한 JavaScript 인데
함수 표현식 그리고 화살표 함수로 바꿔 봅시다.
(이전 글을 참고)
2024.01.30 - [IT공부/JAVASCRIPT] - [JavaScript기초] 함수 (함수 선언문, 함수 표현식, 화살표 함수)
[JavaScript기초] 함수 (함수 선언문, 함수 표현식, 화살표 함수)
목차 [1] 함수 선언문 [2] 함수 표현식 [3] 화살표 함수 [4] 간단한 예제 [1] 함수 선언문 [2] 함수 표현식(익명 함수) 함수 표현식 : 함수를 변수에 할당하는 방식 [3] 화살표 함수 화살표 함수 : 함수
900908.tistory.com
함수 표현식으로 변경
const $id = document.getElementById('id');
const $btnLogin = document.getElementById('btnLogin');
const btnClick = function () {
if ($id.value.trim().length == 0) {
alert('아이디를 입력 바랍니다.');
}
};
$btnLogin.addEventListener('click', btnClick);
화살표 함수로 변경
const $id = document.getElementById('id');
const $btnLogin = document.getElementById('btnLogin');
const btnClick = () => {
if ($id.value.trim().length == 0) {
alert('아이디를 입력 바랍니다.');
}
};
$btnLogin.addEventListener('click', btnClick);
왠지 이렇게 들어 갈 수 있을 것 같지 않나여?
화살표 함수로 변경 후 최종 리팩토링
const $id = document.getElementById('id');
const $btnLogin = document.getElementById('btnLogin');
$btnLogin.addEventListener('click', () => {
if ($id.value.trim().length == 0) {
alert('아이디를 입력 바랍니다.');
}
});
복습은 되었나요?
[1] 요소 생성
document.createElement('p') // p 태그 생성 => <p></p>
[2] 요소에 Content(컨텐츠) 추가
// 위에 코드 이어서
$p.textContent = '아이디를 입력하세요'; // <p>아이디를 입력하세요</p>
// innerHTML 과 .textContent 차이점을 기억 해 두자!
// .innerHTML // 타겟 엘리먼트에 컨텐츠 삽입(엘리먼트 + 텍스트)
// .textContent // 타겟 엘리먼트에 컨텐츠 삽입(문자열만)
[3] 요소에 속성 추가
$p.style.color = 'red';
$p.style.margin = 0;
$p.style.fontSize = '0.8rem'; // CSS에서 font-size => JS에서는 fontSize
$p.style.fontWeight = 'bold'; // CSS에서 font-weight => JS에서는 fontWeight
// ★CSS에서는 케밥 표기법이였는데 JS에서는 카멜 표기법으로 해야 된다는 것을 기억하자!★
[4] 요소 선택해서 배치하기
// .querySelector() : 요소 한개만 선택,
// 여러개 선택 하려면 .querySelectorAll()을 해야함
const $div = document.querySelector('form>div');
// insertAdjacetElement()를 이용하여
// 특정 위치에 요소 삽입
$div.insertAdjacentElement('afterend', $p);
// ★insertAdjacetElement() 사용법
// element.insertAdjacetElement(position, newElement);
// - position : 새로운 요소를 삽입할 위치를 지정하는 문자열
// 1. beforebegin : 해당 요소 이전에 삽입
// 2. afterbegin : 해당 요소의 첫 번째 자식으로 삽입
// 3. beforeend : 해당 요소의 마지막 자식으로 삽입
// 4. afterend : 해당 요소 이후에 삽입
// - newElement : 삽입할 새로운 요소
insertAdjacentElement() 공식문서 사이트
Element: insertAdjacentElement() method - Web APIs | MDN
The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.
developer.mozilla.org
insertAdjacentElement() 어려우면
element.appendChild();
element.removeChild();
element.replaceChild(new, old); 도 있다
다음으로 해볼 것은 요소를 만드는게 아니라
숨겨져 있던 것을 보이게 하는 것이다.
Copyright ⓒ. JaePPy All rights reserved.
usopp1004@naver.com
'IT공부 > JAVASCRIPT' 카테고리의 다른 글
| [JavaScript 기초] 계산기 구현 (0) | 2024.02.06 |
|---|---|
| [JavaScript기초] 객체 생성 (class 문법, 생성자 함수, 객체 리터럴) (0) | 2024.01.31 |
| [JavaScript기초] 함수 (함수 선언문, 함수 표현식, 화살표 함수) (2) | 2024.01.30 |