클래스 제어
수강신청 클래스를 만들어보자.
<style>
table {
border: 1px solid #000;
border-collapse: collapse;
width: 400px;
margin: 10px auto;
}
th, td {
text-align: center;
border: 1px solid #000;
padding: 5px;
}
.gungseo {
font-family: 궁서, cursive;
}
.on {
background-color: steelblue;
color: #fff;
}
</style> <table>
<thead>
<tr>
<th colspan="5">
<h2>수강신청</h2>
</th>
</tr>
</thead>
<tbody>
<!-- tr>th[colspan=5]>input:checkbox -->
<tr>
<th colspan="5">
<!-- this용법2. 태그의 inline event속성안의 this는 현재 tag객체를 가리킨다. -->
<input type="checkbox" id="checkAll" onclick="checkAllOrNone(this);">
<label for="checkAll">전체선택/해제</label>
</th>
</tr>
<!-- tr>(td.gungseo>input:checkbox[name=subject]#subject$+label[for=subject$])*5 -->
<tr>
<td class="gungseo"><input type="checkbox" name="subject" onchange="checkSubject(this);" id="subject1"><label for="subject1">국어</label></td>
<td class="gungseo"><input type="checkbox" name="subject" onchange="checkSubject(this);" id="subject2"><label for="subject2">영어</label></td>
<td class="gungseo"><input type="checkbox" name="subject" onchange="checkSubject(this);" id="subject3"><label for="subject3">수학</label></td>
<td class="gungseo"><input type="checkbox" name="subject" onchange="checkSubject(this);" id="subject4"><label for="subject4">사회</label></td>
<td class="gungseo"><input type="checkbox" name="subject" onchange="checkSubject(this);" id="subject5"><label for="subject5">과학</label></td>
</tr>
</tbody>
</table> <script>
// this용법1. 전역에서 this는 window객체를 가리킨다.
console.log(this); // window객체
function checkSubject(subject){
// 부모td .on 처리
handleTdClass(subject);
// 전체체크박스 처리
const subjects = document.querySelectorAll("[name=subject]"); // 체크박스
const checkedSubjects = document.querySelectorAll("[name=subject]:checked"); // 체크된 체크박스
// console.log(subjects, checkedSubjects);
checkAll.checked = (subjects.length == checkedSubjects.length);
}
function checkAllOrNone(obj){
// console.log(obj);
const subjects = document.querySelectorAll("[name=subject]");
for(let i = 0; i < subjects.length; i++){
const subject = subjects[i];
subject.checked = obj.checked; // checked처리
handleTdClass(subject); // 부모 td .on처리
}
}
function handleTdClass(subject){
const td = subject.parentElement;
// td.className = subject.checked ? "gungseo on" : "gungseo";
// toggle(class), contains(class):boolean
if(subject.checked)
td.classList.add("on");
else
td.classList.remove("on");
}
</script>this용법
- 전역에서 this는 window객체를 가리킨다.
- 태그의 inline event 속성안의 this는 현재 tag객체를 가리킨다.
전달함
사용자 클래스 제어가 체크를 통해 변경되는 것을 확인할 수 있다.
사용자 상호작용
alert , console
alert("") 사용자에게 뜨는 메세지
colsole.log(" ") 개발자에게 뜨는 일반 메세지
colsole.error(" ") 오류 메세지 지정 가능
console.dir(document) 계층구조 확인가능
colsole.time
실행내용
colsole.timeEnd 실행하면 실행내용의 소요시간 알려줌
<button onclick="test1();">alert | console</button>
/**
* alert
* console
*/
function test1(){
alert("안녕하세요~"); // 일반사용자
console.log("hello"); // 개발용
console.error("오류오류!!!"); // 에러메세지 출력
console.dir(document); // 계층구조 확인
console.time('abc1234'); // 스탑워치시작
for(let i = 0; i < 1000; i++)
console.log(i);
console.timeEnd('abc1234'); // 스탑워치끝
}
일반사용자에게는 alert로 알리는 것이 일반적.
개발용은 colsole 사용.
confirm (확인, 취소)
사용자로부터 예 or 아니오 / true or false 값이 필요한 경우
확인=true , 취소(esc)=false
<button onclick="test2();">confirm</button>
/**
* confirm
* - 사용자로부터 예/아니오, true/false 값이 필요한 경우
* - 확인 true
* - 취소(esc) false
*/
function test2(){
const bool = confirm("이 제품을 장바구니에서 제거하시겠습니까?");
console.log(bool);
if(bool){
// 제품을 장바구니에서 제거 프로세스 시작....
alert("제품을 장바구니에서 제거했습니다.");
}
else {
alert("취소했습니다.");
}
}
확인 누를 경우 알람창과 함께 true 뜸
취소 누를 경우 알람창과 함께 false뜸.
prompt
사용자로부터 한줄 입력을 받는 메소드
스트링 반환
취소를 누른 경우 null값 반환
javascript에서 boolean으로 자동 형변환 처리가 일어난다.
true (값이 있음) : "abc", 100, -10, 23.4, {}, []
false (값이 없음) : "", 0, 0.0, undefined, null, NaN
<button onclick="test3();">prompt</button> /**
* prompt
* - 사용자로부터 한줄 입력을 받는 메소드
* - string반환
* - 취소를 누른겨우 null을 반환
*/
function test3(){
const name = prompt("이름을 입력하세요.", "홍길동");
console.log(name);
// js boolean으로 자동형변환처리
// 값이 있는 것은 true로 변환 : "abc", 100, -10, 23.4, {}, []
// 값이 없는 것은 false로 변환 : "", 0, 0.0, undefined, null, NaN
if(name){
// document.querySelector(".area").innerHTML = name + "님, 반갑습니다.";
// string template(ES6) - backtick으로 감싸기, 개행/탭문자 처리가능
document.querySelector(".area").innerHTML = `${name}님, 반갑습니다.`;
}
else {
alert(`올
바
른
이름을 입력해주세요`);
// alert('올\n 바\n 른\n 이름을 입력해주세요');
}
}
홍길동 입력후 확인시, 홍길동이 출력됨
이름없이 입력시, 올바른 이름을 입력하라는 창과 함께 빈칸 출력됨.
getter : 개발자도구
setter : 사용자화면 (창)
innerHTML
getter : 자식 html 태그까지 포함해서 반환
setter : 문자열 html 태그 처리
<div id="foo">안녕하세요, 저는 <mark>박혁거세</mark>입니다.</div>
<div id="bar"></div>
<button onclick="test4();">innerHTML</button>
<button onclick="test5();">innerText</button>
<button onclick="test6();">outerHTML</button> function test4(){
console.log(foo.innerHTML); // 안녕하세요, 저는 <mark>박혁거세</mark>입니다.
bar.innerHTML = foo.innerHTML;
}
기본적으로 foo가 출력되어있는 상태.
innerHTML을 누르면 foo가 한번 더 실행된다.
innerText | textContent
getter : 자식 html태그를 제외하고, text node만 반환.
setter : 문자열 html태그를 처리안함(문자 그대로 처리)
function test5(){
console.log(foo.innerText); // 안녕하세요, 저는 박혁거세입니다.
bar.innerText = foo.innerHTML;
}
innerText를 누를 경우 창에서는 문자열 html그대로 뜨고, 개발자도구에서는 html태그를 제외하고 뜬다.
outerHTML
getter : 태그 자신을 포함한 문자열 반환(html태그 포함)
setter : 태그 자신을 대체(기존 태그는 삭제되고, 새 태그가 DOM에 등록됨)
function test6(){
console.log(foo.outerHTML); // <div id="foo">안녕하세요, 저는 <mark>박혁거세</mark>입니다.</div>
foo.outerHTML = `<div id="zoo"><mark>박혁거세</mark>야~ 그동안 즐거웠어</div>`;
}
창에서는 outerHTML에서 지정한 문자가 나오고, 개발자도구에서는 원래의 foo가 나온다.
String
String API
string 타입의 값(객체)은 상속받은 string prototype객체의 메소드를 사용할 수 있다.
.toUpperCase()
.toLowerCase()
.indexOf(' ')
.charAt( )
.charCodeAt( )
스트링명[인덱스]
.substring(a,b) : a부터 b미만까지 잘라내기
.substring(a) : a부터 끝까지
.replace('A','B') : A를 B로 대체. /문구/g 사용시 A가 들어가는 모든 부분 대체됨. 그냥 사용시 맨 처음에 해당하는 A만 대체
"A".padStart(5,"B") : 5자리로 A는 뒤에 써지고, 나머지 앞부분은 B로 채워짐
"A".padEnd(5, "B") : 5자리로 A는 앞에 써지고, 나머지 뒷부분은 B로 채워짐
<h1>String</h1>
<button onclick="test1();">확인</button> function test1(){
const str = "Apple Samsung PineApple";
console.log(str.toUpperCase()); // APPLE SAMSUNG PINEAPPLE
console.log(str.toLowerCase()); // apple samsung pineapple
console.log(str.indexOf('Sam')); // 6
console.log(str.indexOf('SSSSSSSS')); // -1
console.log(str.charAt(6)); // S
console.log(str[6]); // S
console.log(str.charCodeAt(0)); // 65
// 문자열 잘라내기1 substring(start, end)
console.log(str.substring(6, 9)); // 6번지부터 9번지미만까지 Sam
console.log(str.substring(6)); // Samsung PineApple
// 문자열 잘라내기2 substr(start, length)
console.log(str.substr(6, 3)); // 6번지로부터 3개 Sam
console.log(str.substr(6)); // Samsung PineApple
console.log(str.replace('Apple', '사과')); // 사과 Samsung PineApple
console.log(str.replace(/Apple/g, '사과')); // 사과 Samsung Pine사과
// 채우기
console.log("23".padStart(5, "0")); // 00023
console.log("23".padEnd(5, "0")); // 23000
}
확인 버튼을 누를 경우 다음과 같이 나온다.
Math
Math의 static메소드 API
Math.ceil : 올림
Math.floor : 반올림
Math.trunc : 내림
Math.round : 반올림 (소수점도 가능)
Math.random()* n + i : n개의수를 0+i부터 난수 처리
<h1>Math</h1>
<button onclick="test3();">확인</button> function test3(){
const num = 123.456;
console.log(Math.ceil(num)); // 124
console.log(Math.floor(num)); // 123
console.log(Math.trunc(num)); // 123
console.log(Math.round(num)); // 123
console.log(Math.round(num * 10) / 10); // 123.456 -> 1234.56 -> 1235 -> 123.5
// Math.floor(난수(0.0이상 1.0미만) * 경우의 수 + 시작값) 버림처리할것
console.log(Math.random() * 100 + 1); // 1 ~ 100
}
Date
날짜, 시각 정보를 관리하는 객체
Date prototype객체가 제공하는 메소드
.getFullYear() : 년도4자리 반환
.getMonth()+1 : 0~11이라 +1을 해줘야한다
.getDate() : 날짜 반환
.getDay() : 요일 반환 . 일요일(0) ~ 토요일 (6)
.getHours() : 시간 반환
.getMinutes() : 분 반환
.getSecounds() : 초 반환
.getTime() : 시간 반환
<button onclick="test4();">현재시각정보</button> function test4(){
const now = new Date();
console.log(now); // 브라우져를 통해 시스템의 현재 시각정보을 가져온다.
console.log(now.getFullYear()); // 2022
console.log(now.getMonth() + 1); // (0 ~ 11) + 1
console.log(now.getDate()); // 17
console.log(now.getDay()); // 일요일(0) ~ 토요일(6)
const days = ['일', '월', '화', '수', '목', '금', '토'];
console.log(days[now.getDay()]);
console.log(now.getHours()); // 20
console.log(now.getMinutes()); // 29
console.log(now.getSeconds()); // ?
console.log(now.getTime());
console.log(Date.now());
}
순서대로 값이 반환되었음을 알 수 있다.
현재시각 표시하기
<h2 id="clock">yyyy/MM/dd hh:mm:ss</h2> function clockString(){
function f(n){
// return n < 10 ? "0" + n : n;
return n.toString().padStart(2, "0");
}
const now = new Date();
const yyyy = now.getFullYear();
const MM = f(now.getMonth() + 1);
const dd = f(now.getDate());
const hh = f(now.getHours());
const mm = f(now.getMinutes());
const ss = f(now.getSeconds());
return `${yyyy}/${MM}/${dd} ${hh}:${mm}:${ss}`;
}
function displayClock(){
clock.innerHTML = clockString();
// setTimeout(함수, 밀리초)
setTimeout(displayClock, 1000);
}
displayClock();다음과 같이 시간이 제대로 출력된다.
날짜 차이계산
<button onclick="test5();">특정시각 | 간격계산</button>
function test5(){
// const d = new Date(2022, 2 - 1, 22);
// const d = new Date(2022, 2 - 1, 22, 15, 30, 0);
const d = new Date('2022/02/22 15:30');
console.log(d);
// 날짜차이 계산
const now = new Date();
let diff = now - d; // 밀리초차이
// let diff = now.getTime() - d.getTime(); // unix time(second)
diff = Math.floor(diff / 1000 / 60 / 60 / 24); // 일단위
console.log(diff);
}
오늘과 86일 차이나는 것을 계산해주었다.