컨디션이 너무 안좋은날....
다시 DOM 학습!
Document Object Model
어제 배운 것 복습.. 흐름을 이해하자.
○ <div class="d-flex">
→ display box model에서 학습했었다. display:flex;는 행 방향으로 배치
p태그는 원래 블록요소인데, display:flex가 적용되어 한 행에 모두 표현된다.
cf) Document에서 Justify Content를 참고하자.
○ <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
grow-1 에서 1은 비율을 표현한 것이다.
◎ Align Items (수직정렬,수평정렬 때 중요)
→ Justify Content와 같이 쓰일 때 수평으로 배치 또는 수직으로 배치할 수 있다.
◎ border는 무엇인가?
→ 부트스트랩 항목에서 찾지 못했을 때 웬만한건 Utilities에 들어있다. 거기서 찾아보자.
◎ Border Radius
<span class="rounded-circle"></span> → 원을 그릴 때 유용
★ 선택자
CSS Selector Reference 항상 참고하자
https://www.w3schools.com/cssref/css_selectors.php
→ querySelector 를 사용할 때 선택자를 넣어주어야 되기 때문.
● ID로 element값을 받아오기.
<script>
function findElementById() {
// 둘 다 알아야 하지만 querySelector는 id뿐만 아니라 class등을 찾을 수 있다.
// 방법 1
var el_p1 = window.document.getElementById("p1"); // window.은 생략 가능하다.
console.log(el_p1);
// 방법 2 (유용하다)
el_p1 = document.querySelector("#p1"); // getElementById보다 훨씬 더 다양하게 활용할 수 있다. id뿐아니라 class, 태그 등등
}
</script>
<!-- body태그 안 -->
<button onclick="findElementById()" class="btn btn-info btn-sm">ID로 찾기</button>
<p id="p1" class="border border-danger bg-success" style="width: 100px; height: 100px;"></p>→ 해당 id를 보유하고 있는 태그를 컨트롤할 수 있게 된다.
● Class로 찾기
<script>
function findElementByClass() {
// 방법 1
var el_class1 = document.getElementsByClassName("class1"); // HTMLCollection 타입으로 리턴
console.log(el_class1);
console.log(el_class1[0]); // 배열은 아니지만(콜렉션 타입이지만) 배열처럼 사용할 수 있다.
for(var el of el_class1){ // Collection 타입도 배열처럼 관리한다.. 따라서 for문이 가능한 것
console.log(el);
}
console.log("");
// 방법 2
el_class1 = document.querySelectorAll(".class1"); // 두 개 이상 가져올 땐 All을 붙인다. // NodeList 타입 리턴
console.log(el_class1);
console.log(el_class1[0]); // 타입은 다르지만 사용 방법은 같다..
for(var el of el_class1){
console.log(el);
}
}
</script>
<!-- body태그 안 -->
<button onclick="findElementByClass()" class="btn btn-info btn-sm">Class로 찾기</button>
<p class="class1 border border-dark bg-danger" style="width: 100px; height: 100px;"></p>→ Collection 타입도 배열처럼 관리한다. 따라서 for문이 가능한 것
★ querySelector와 querySelectorAll을 정말 많이 사용한다.
● Tag(태그)로 찾기
<script>
function findElementByTag() {
// 방법 1
var el_p = document.getElementsByTagName("p"); // 태그를 직접 입력
for(var el of el_p){
console.log(el);
}
// 방법 2
el_p = document.querySelectorAll("p"); // 태그를 직접 입력
for(var el of el_p){
console.log(el);
}
}
</script>
<!-- body태그 안 -->
<button onclick="findElementByTag()" class="btn btn-info btn-sm">Tag로 찾기</button>
<p class="class1 border border-dark bg-danger" style="width: 100px; height: 100px;"></p>
<p class="class1 border border-danger bg-info" style="width: 100px; height: 100px;"></p>
● 체크된 것만 찾기
<script>
function findElementByChecked() {
var el_checked = document.querySelectorAll("[name=skill]:checked"); // 사용법 숙지
for(var el of el_checked){
console.log(el);
}
}
</script>
<!-- body태그 안 -->
<button onclick="findElementByChecked()" class="btn btn-info btn-sm">체크된 것만 찾기</button>
<div class="d-flex align-items-center">
<div class="me-3"><input type="checkbox" name="skill" value="java"/>java</div>
<div class="me-3"><input type="checkbox" name="skill" value="javascript"/>javascript</div>
<div class="me-3"><input type="checkbox" name="skill" value="vue"/>vue</div>
</div>.→ 체크박스의 name속성은 해당 관련 내용을 묶어주는 역할을 한다. (name이 체크박스를 그룹핑하는 것)
속성과 속성 데이터값을 선택자로 이용하는 법. https://www.w3schools.com/cssref/css_selectors.php 사이트 참고하여 공부..
■ Element 변경 및 추가, 삭제
● 엘리먼트의 속성 변경
<script>
function changeContent(){
let el_div1 = document.querySelector("#div1");
// 기존 내용을 대체 // 해당 HTML에 접근하려면 .innerHTML을 쓴다
el_div1.innerHTML = "<img src='/htmlcssjs/resources/image/ul/king1.jpg' width='150'/>";
}
</script>
<!-- body태그 안 -->
<button onclick="changeContent()" class="btn btn-warning btn-sm">변경</button>→ 해당 HTML element에 접근하려면 .innerHTML을 쓴다.
element 타입이 무엇인지 파악하자..
● 엘리먼트의 속성 추가
<script>
function appendContent(){
let el_div1 = document.querySelector("#div1");
// 새로운 엘리먼트 생성 // 만약 id를 갖고 있는 엘리먼트라면 맨 마지막의 내용을 삭제하는 것도 해당 id로 찾아서 할 수 있다.
const el_img = document.createElement("img");
el_img.setAttribute("src", "/htmlcssjs/resources/image/ul/king2.jpg");
el_img.setAttribute("width", "150");
// 기존 내용 뒤에 추가
el_div1.appendChild(el_img);
}
</script>
<!-- body태그 안 -->
<button onclick="appendContent()" class="btn btn-warning btn-sm">추가</button>appendChild() → 상속에서의 Child가 아니라 해당 관련 내용이란 것
● 엘리먼트의 속성 삭제
<script>
function deleteContent(){
let el_div1 = document.querySelector("#div1");
// 기존 내용을 모두 삭제
//el_div1.innerHTML = "";
// 맨 뒤에 있는 엘리먼트 삭제
el_div1.removeChild(el_div1.lastElementChild);
}
</script>
<!-- body태그 안 -->
<button onclick="deleteContent()" class="btn btn-warning btn-sm">삭제</button>→ .innerHTML로 한번에 값을 깔끔히 지워버리는 것을 보며 틀에 박힌 생각 깨보자.
● 이미지 사이즈 변경해보기
<script>
function changeSize(){
var el_img1 = document.querySelector("#img1");
el_img1.style.width = "50px"; // style로 접근할 때 가능하면 px을 생략하지말고 단위를 넣어주는 것이 좋다.
el_img1.style.height = "50px";
// style = "border-radius:50px; border-width:5px; border-color:red; border-style:solid"
el_img1.style.borderRadius = "25px";
el_img1.style.borderWidth = "5px";
el_img1.style.borderColor = "red";
el_img1.style.borderStyle = "solid";
}
</script>
<!-- body태그 안 -->
<button onclick="changeSize()" class="btn btn-primary btn-sm">크기 변경</button>
<hr/>
<div id="div2">
<img id="img1" src="/htmlcssjs/resources/image/ul/king3.jpg" width="200" />
<img class="rounded-circle" src="/htmlcssjs/resources/image/ul/king4.jpg"
width="200" height="200"/>
</div>→버튼을 만들고 그 버튼을 클릭했을 때, 특정한 id나 class 등으로 접근하여 엘리먼트 변경이 가능하다.
● 속성값 변경해보기
<script>
function chageAttribute(){
var el_img2 = document.querySelector("#img2");
//el_img2.setAtrribute("src", "/htmlcssjs/resources/image/ul/king5.jpg")
el_img2.src = "/htmlcssjs/resources/image/ul/king6.jpg"; // 해당 엘리먼트의 속성값에 접근하여 값을 변경
}
</script>
<!-- body태그 안 -->
<button onclick="chageAttribute()" class="btn btn-primary btn-sm">속성값 변경</button>
<hr/>
<div id="div3">
<img id="img2"
src="/htmlcssjs/resources/image/ul/king5.jpg"
class="rounded-circle"
width="200" height="200"/>
</div>→ 속성값에 접근하는 방법.. Document를 보며 사용
■ DOM Form의 유효성 검사 ★
form 형식이 어떻게 이루어져 있는지와 유효성 검사가 어떻게 이루어지는지를 배웠다.
전체적인 흐름을 이해하려 노력했다.
body태그 안에 form이 어떻게 구성되어있는지 먼저 보자.
<!-- body태그 안의 form -->
<form id="joinForm" name="joinForm" action="/htmlcssjs/dom" onsubmit="handleCheckData()" novalidate="novalidate">
<div class="mb-3">
<label for="uid" class="form-lable">ID</label>
<input type="text" class="form-control" id="uid" name="uid" value="Abc123"/>
<span id="uidSpan" class="form-text">알파벳 대소문자, 숫자를 혼용해서 6자 이상 10장 이하</span>
</div>
<div class="mb-3">
<label for="email" class="form-lable">Email</label>
<input type="email" class="form-control" id="email" name="email" value="Abc123@mycompany.com"/>
</div>
<div class="mb-3">
<label for="password" class="form-lable">Password</label>
<input type="password" class="form-control" id="password" name="password" value="Abc12345"/>
<span id="passwordSpan" class="form-text">알파벳 대소문자, 숫자를 혼용해서 8자 이상 15장 이하</span>
</div>
<div class="mb-3">
<label for="phone" class="form-lable">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" value="010-123-1234"/>
<span id="phoneSpan" class="form-text">예) 010-123-1234, 010-1234-1234</span>
</div>
<div class="mb-3">
<label for="city" class="form-lable">City</label>
<select id="city" name="city" class="form-control">
<option value="seoul">서울</option>
<option value="pusan">부산</option>
<option selected value="jeju">제주</option>
</select>
</div>
<div class="mb-3">
<label class="form-lable">Hobby</label>
<div class="d-flex">
<div class="form-check me-3">
<input class="form-check-input" type="checkbox" id="hobby1" name="hobby" value="movie" checked/>
<label class="form-check-lable" for="hobby1"> 영화 </label>
</div>
<div class="form-check me-3">
<input class="form-check-input" type="checkbox" id="hobby2" name="hobby" value="trip" checked/>
<label class="form-check-lable" for="hobby2"> 여행 </label>
</div>
<div class="form-check me-3">
<input class="form-check-input" type="checkbox" id="hobby3" name="hobby" value="game" />
<label class="form-check-lable" for="hobby3"> 게임 </label>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-lable">Job</label>
<div class="d-flex">
<div class="form-check me-3">
<input class="form-check-input" type="radio" id="job1" name="job" value="developer" />
<label class="form-check-lable" for="job1"> 개발자 </label>
</div>
<div class="form-check me-3">
<input class="form-check-input" type="radio" id="job2" name="job" value="designer" checked/>
<label class="form-check-lable" for="job2"> 디자이너 </label>
</div>
<div class="form-check me-3">
<input class="form-check-input" type="radio" id="job3" name="job" value="manager" />
<label class="form-check-lable" for="job3"> 매니저 </label>
</div>
</div>
</div>
<div class="text-center">
<input type="submit" class="btn btn-primary btn-sm" value="Join" />
<input type="reset" class="btn btn-primary btn-sm" value="Reset" />
</div>
</form>폼의 속성에 novalidate="novalidate"를 추가해주게 되면 폼 자체가 유효성 검사를 하지 않게 된다. 따라서 위의 코드의 폼을 생각하면 아이디, 이메일, 비밀번호, 휴대폰 번호 등 개발자가 직접 유효성 검사를 해주어야 한다.
(novalidate="novalidate"는 novalidate만 써주어도 적용된다)
☞ 위 코드의 적용된 화면
★ 자바스크립트에서 유효성 검사
<script>
function handleCheckData(){
console.log("입력 데이터를 검사합니다.");
// form 태그의 action 기능을 수행하지 않도록 함.
event.preventDefault(); // 이벤트가 일어나지 않도록 하는 실행문
// 각 입력 양식의 데이터 검사
var totalResult = true;
// 1) ID 검사 -----------------------------------------------------------
var el_uid = document.querySelector("#uid"); // 방법 1
// el_uid = document.joinForm.uid; // 방법 2 (동적 필드 메소드 개념)
console.log("uid: ", el_uid.value); // 해당 엘리먼트의 값 확인
var uidPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,10}$/; // 알파벳 대소문자, 숫자를 혼용해서 6자 이상 10장 이하 정규표현식
var uidResult = uidPattern.test(el_uid.value); // 엘리먼트의 값이 정규표현식을 만족하는지 true, false 반환
console.log("uidResult:", uidResult); // 브라우저 콘솔창에서 확인
var el_uid_span = document.querySelector("#uidSpan"); // uid 엘리멘트 안에 있는 span태그에 id를 부여하여 엘리멘트를 찾음
if(uidResult){ // 만약 엘리먼트의 값이 정규표현식을 만족한다면
el_uid.classList.remove("bg-danger"); // 해당 태그 바탕색 원래대로 // 형식이 맞다면 다시 없애줌.
el_uid_span.classList.remove("text-danger"); // 형식 힌트 메시지의 글자색을 원래대로
}else { // 엘리먼트의 값이 정규표현식을 만족하지 않는다면
el_uid.classList.add("bg-danger"); // 해당 태그 바탕색 빨갛게
// 우리는 부트스트랩을 사용하고 있기 때문에 클래스로 접근
el_uid_span.classList.add("text-danger"); // 형식 힌트 메시지를 빨갛게 만들어줌
totalResult = false; // 전체 데이터 양식 검사
}
// 나머지 검사들도 1번과 비슷하게 해주면 된다.
// 2) email 검사 -----------------------------------------------------------
var el_email = document.querySelector("#email");
var emailPattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var emailResult = emailPattern.test(el_email.value);
if(emailResult){
el_email.classList.remove("bg-danger");
} else{
el_email.classList.add("bg-danger");
totalResult = false;
}
// 3) Password 검사 -----------------------------------------------------------
var el_password = document.querySelector("#password");
var passwordPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
var passwordResult = passwordPattern.test(el_password.value);
var el_password_Span = document.querySelector("#passwordSpan");
if(passwordResult){
el_password_Span.classList.remove("text-danger");
} else {
el_password_Span.classList.add("text-danger");
totalResult = false;
}
// 4) Phone 검사 -----------------------------------------------------------
var el_phone = document.querySelector("#phone");
var phonePattern = /^(010|011)-\d{3,4}-\d{4}$/;;
var phoneResult = phonePattern.test(el_phone.value);
var el_phone_Span = document.querySelector("#phoneSpan");
// 힌트 글 변경해주기!
if(phoneResult){
// .innerHTML로 값을 변경해준다!
el_phone_Span.innerHTML = "예) 010-123-1234, 010-1234-1234";
el_phone_Span.classList.remove("text-danger");
} else {
el_phone_Span.innerHTML = "형식에 맞게 다시 입력해주세요.";
el_phone_Span.classList.add("text-danger");
totalResult = false;
}
// 5) 전체 유효성 검사 결과가 true일 경우 -----------------------------------------------------------
if(totalResult){
var el_form = document.querySelector("#joinForm");
// el_form = document.joinForm; // 이것도 가능하다.. name 때문에 동적속성으로 추가가 된다.
// 강제적(수동적)으로 form의 프리벤트로 막아놨던 action 기능을 수행하도록 하려면?
el_form.submit();
}
}
</script>
■ jQuery 시작
여태까지 순수 자바스크립트를 사용하였다. 순수 자바스크립트를 바닐라 자바스크립트라고 부르기도 한다고 한다...
○ jQuery 사용해보기
<script>
// jQuery를 사용한 함수
function changeBgColor1(){
var jq_color_div = $(".colorDiv"); // css 선택자 문법으로 사용 // jquery 객체를 만들어줌.
// jQuery 객체 얻기
console.log(jq_color_div);
// jQuery 객체가 가지고 있는 메소드 호출
// jq_color_div.css("background-color", "orange"); // 일괄적으로 전체에 적용됨
jq_color_div.addClass("bg-danger"); // jQuery는 element객체 타입으로 가져오는 것이 아니라 jQuery객체로 가져온다.
// jQuery를 쓰지않는다면? for문을 이용하여 대입해주어야 한다.
}
// 자바스크립트만을 사용한 함수
function changeBgColor2(){
// HTML NodeList 객체 얻기
var el_color_div = document.querySelectorAll(".colorDiv");
console.log(el_color_div);
// for문으로 반복해서 스타일 적용
// Element 객체가 가지고 있는 속성과 메소드 사용
for(var el of el_color_div){
// el.style.backgroundColor = "orange";
el.classList.add("bg-danger");
}
}
</script>
<body>
<button onclick="changeBgColor1()" class="btn btn-outline-info btn-sm">배경색 변경</button>
<hr/>
<div class="d-flex">
<div class="colorDiv me-3 border" style="width:100px; height:100px"></div>
<div class="colorDiv me-3 border" style="width:100px; height:100px"></div>
<div class="colorDiv me-3 border" style="width:100px; height:100px"></div>
</div>
</body>오늘은 맛보기로 여기까지 수업.. 내일 jQuery 계속해서 학습할 것이다.
◈ jQuery를 사용하는 이유?
1. 간편한 DOM 조작
→ 순수 자바스크립트 코드보다 간결하게 작성할 수 있다.
2. 브라우저 호환성
→ jQuery는 다양한 브라우저에서 일관된 동작을 보장하여 여러 브라우저 간 호환성 문제를 해결해야 할 때 사용하면 비교적 쉽게 해결할 수 있다.
3. AJAX (Asynchronous JavaScript and XML) 요청 처리
→ AJAX 요청을 보내고 받는 기능을 쉽게 구현할 수 있도록 지원. 이를 통해 비동기적으로 서버와 통신하여 웹 페이지를 동적으로 업데이트할 수 있음.
등등... 있다고 한다.
직접 사용하며 공부하고 정리해보자.
'JAVA' 카테고리의 다른 글
| 29일차 2024 - 4 - 5 (Git과 GitHub) (0) | 2024.04.05 |
|---|---|
| 28일차 2024 - 4 - 4 (0) | 2024.04.04 |
| 26일차 2024 - 4 - 2 (0) | 2024.04.02 |
| 25일차 2024 - 4 - 1 (0) | 2024.04.01 |
| 24일차 2024 - 3 - 29 (2) | 2024.03.29 |