JavaScript
39일차 2023-05-01
choi Hoon
2023. 5. 2. 10:25
CSS
Transform13_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform13_1.html</title>
<style>
#rect{
width: 150px;
height: 150px;
background-color: red;
/*
line-height: 150px;
text-align: center;*/
display: flex;
justify-content: center;
align-items: center;
/*변형에 애니메이션을 주고자하는 요소에 transition-xxx속성 추가*/
/*transition animation의 유지시간*/
transition-duration: 3s;/*실행하는데 걸리는 시간 3초*/
}
#rect:hover{
width: 300px;
height: 300px;
background-color: green;
/*
line-height: 300px;
text-align: center;*/
}
#rect:active{
background-color: rgb(152, 122, 211);
border-radius: 150px;
}
</style>
</head>
<body>
<h2>변형1-반응 선택자와 css속성 변경을 통해 변경</h2>
<div id="rect">RECTANGLE</div>
</body>
</html>결과)
Transform13_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform13_2.html</title>
<style>
#content{
display: flex;/*이 속성을 적용하면 해당 요소가 flex컨테이너로 동작함(자식 요소들을 유연하게 정렬)*/
}
#rect1,#rect2{
width:100px;
height: 100px;
/*변형을 통한 애니메이션 구현(transition-xxx) 즉 변형을 부드럽게 만드는 속성들*/
/*transition-duration: 4s;//4초 동안 동작
transition-property: all;//모든 속성에 대해 전환 효과 */
/*https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed*/
/*transition-timing-function: ease-in;//전환진행 상태에 따라 속도조절,(ease-in)천천히에서 빠르게*/
/*변형이 일어나는 시간을 각 속성별(width,height,background-color)로 다르게 주기위함*/
transition-duration: 4s,3s,2s;/*4초동안 가로,3초동안 높이, 2초동안 색깔변화*/
/* 변형을 가할 css속성 설정*/
/*transition-property: background-color,width,height;
transition-timing-function: ease-in, linear, ease-out;*/
/*단축 속성*/ /* 천천히에서 빠르게, 선형:일정속도, 빠르게에서 천천히*/
/*transition-property(all) transition-duration(2s) transition-delay(1s) transition-timing-function(ease-out)*/
/* transition: 2s 1s ease-out;/*2초 전환시간, 1초 딜레이, 빠르게에서 느리게*/
}
#rect1{
background-color: red;
}
#rect2{
background-color: green;
}
#rect1:hover{
width:300px;
height: 200px;
background-color:rgb(0,70,128)
}
#rect2:hover{
width:200px;
height: 300px;
background-color:rgb(204,226,5)
}
</style>
</head>
<body>
<h2>변형2-반응 선택자와 CSS속성 변경을 통해 변형</h2>
<div id="content">
<div id="rect1"></div>
<div id="rect2"></div>
</div>
<div style="width:100px;height:100px;background-color: gold;"></div>
</body>
</html>결과)
Transform13_3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform13_3.html</title>
<style>
div{
width:100px;
height:100px;
text-align: center;
line-height:100px ;/*텍스트 줄간격(텍스트의 높이)*/
}
#trans1{
background-color: red;
/*transition-duration: 3s;는 적용이 안된다 즉 transform:함수()에는 적용 안된다*/
/*transition-duration: 3s;*/
/* 함수를 이용한 변형-transform:함수() 함수() ...*/
/*200만큼 X축 이동,90도 회전,(x축)가로크기1.5배 커짐*/
transform: translateX(200px) rotate(90deg) scaleX(1.5) ;
}
#trans2{
background-color: green;
/*x축 200,y축 200이동, 180도 회전,가로 세로2배 증가,x축방향으로 45도 기울어짐*/
transform: translate(200px,200px) rotate(180deg) scale(2,2) skewX(45deg);
}
</style>
</head>
<body>
<h2>변형3-CSS함수를 통해 변형(반응 선택자와 CSS속성 변경이 아닌)</h2>
<div id="trans1">TRNAS1</div>
<div id="trans2">TRNAS2</div>
</body>
</html>결과)
Keyframe14_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframe14_1.html</title>
<style>
/* 키프레임 규칙(@keyframe)을 이용한 애니메이션*/
*{
margin: 0;
padding: 0;
}
#wrap{
display:flex;
flex-direction: column;
}
#rect{
width:100px;
height:100px;
background-color: red;
/*키 프레임 애니 메이션 이름 지정*/
/*
animation-name: myani1;
animation-duration: 3s;/*필수-애니메이션이 일어난다 */
/*animation-delay: 2s;
animation-iteration-count:3 ;
*/
/*축약*/
/*
순서는 상관없다.단 duration은 delay보다 앞에
여러번 수행시(animation-iteration-count) delay은 최초 한번만 적용된다.
*/
animation: myani1 3s 2s 3;/*3초동안, 그전에 2초 딜레이,3번 반복*/
}
@keyframes myani1 {/* myani1이라는 애니메이션 이름을 가진 요소에 키프레임 규칙 적용*/
/* 키 프레임 규칙 작성-그래야 애니메이션이 일어남*/
/*방법1 - to블락만 기술해도 무방*/
/*
from{
width:100px;
height:100px;
}
to{
width:400px;
height:400px;
background-color:yellow
}*/
/*방법2*/
50%{
width:250px;
height:250px;
background-color: rgb(6,175,161);
}
100%{
width:400px;
height:400px;
background-color:yellow
}
}
#circ1{
width:100px;
height:100px;
background-color: green;
display: flex;/*flex속성 추가*/
justify-content: center;/*가로 정렬 중앙*/
align-items: center;/*위,중앙,아래정렬 중 중앙*/
animation: myani2 3s 3s;/*3초동안 동작,그전에 3초 딜레이*/
}
@keyframes myani2 {
50%{/*0~100까지가 동작*//*그 중에서 절반까지 동작*/
width:200px;
height:200px;
transform: rotate(180deg);
border-radius: 100px;/*반지름 100px//길이200짜리 직사각형의 반*/
}
100%{
width:400px;
height:400px;
transform: rotate(360deg);
border-radius: 200px;
}
}
#circ2{
width:100px;
height:100px;
background-color: blue;
animation: myani3 infinite 3s 2s;/*3초동안 동작,그전에 2초 딜레이,무한반복*/
}
@keyframes myani3 {
to{
transform: translate(400px,400px);/*가로 400,세로 400만큼 이동*/
}
}
/* 마우스 오버시 애니메이션 중지*/
#circ2:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<h2>키프레임 규칙을 이용한 애니메이션</h2>
<div id="wrap">
<div id="rect"></div>
<div id="circ1">CIRCLE</div>
<div id="circ2"></div>
</div>
</body>
</html>결과)
Keyframe14_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframe14_2.html</title>
<style>
.container{
display: inline-flex;/*컨테이너를 inline(가로정렬)성격을 가짐*/
width:150px;
}
.item{
width:20px;
height:20px;
background-color: rgb(247, 40, 4);
border-radius: 50%;
animation: loading 2s infinite;
}
@keyframes loading{
50%{
transform: scale(0.5);
background-color: rgb(202, 99, 99);
}
100%{
transform: scale(1);
background-color: rgb(247, 40, 4);
}
}
.item:nth-child(2){
animation-delay: 0.2s;
}
.item:nth-child(3){
animation-delay: 0.4s;
}
.item:nth-child(4){
animation-delay: 0.6s;
}
.item:nth-child(5){
animation-delay: 0.8s;
}
.item:nth-child(6){
animation-delay: 1s;
}
</style>
</head>
<body>
<!--전체적으로 커졌다 작아졌다 동작을 만든 후 각 태그마다 딜레이를 준다-->
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>결과)
ImportMedia15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ImportMedia15.html</title>
<!--
<link href="styles/import.css" rel="stylesheet" />
-->
<style>
/*
import규칙을 이용한 외부 css파일 연결
반드시 style태그 안에
반드시 style태그 최상단에 위치(안그러면 적용이 안된다)//아래로 위치 시켜보면 안됨
*/
@import url(styles/import.css);
.content{
color: yellow;
background-color: black;
}
/*import 규칙은 위치에 상관없음*/
/*위 코드에서 "import 규칙은 위치에 상관없음"은
@import 규칙을 사용하여 외부 CSS 파일을 가져올 때,
해당 규칙이 작성된 위치가 스타일 시트 내 어디에 있더라도
동일하게 작동한다는 의미입니다. 즉, 스타일 시트의 맨 위에
작성해도 되고 중간에 작성해도 되며 맨 아래에 작성해도
상관없다는 것입니다. 이는 다른 CSS 규칙들과는 달리
import 규칙이 적용될 때, 스타일 시트가 브라우저에
로드되기 전에 적용되기 때문입니다. 따라서 import 규칙은
다른 CSS 규칙들과는 다른 적용 방식을 가지고 있습니다.*/
@media screen {/*현재 문서가 서비스되는 장치가 모니터일때는 아래 CSS적용*/
.content{
color: white;
}
}
@media print {/*현재 문서가 서비스되는 장치가 인쇄장비(프린터)일때는 아래 CSS적용*/
.content{
color: black;
background-color: white;
}
}
</style>
</head>
<body>
<div class="content">
<p>
이런 가운데 전세 수요는 폭발하고 있다. 한국감정원의 지난 5일 기준 서울의 전세 수급지수는 121.4로 2016년 1월 이후 가장 높은 수준을 보였다. 수도권 역시 117.6으로 같은 해 2월 이후 최고치다. 이 지수는 0~200으로 표현되는데, 200을 향해갈수록 수요가 더 많다는 것을 드러낸다. 서울을 비롯한 수도권 아파트 전셋값이 60주 이상 오름세를 보이는 것도 공급자 우위 시장이 굳어진 데 따른 것이다.
</p>
</div>
</body>
</html>styles.import.css
결과) print
JavaScript
String12.html
문제 2개
Date13.html. 을 Date14.html로 이름 변경
Math13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math13.html</title>
<script>
/*
클래스 메소드임으로 Math.함수명() 식으로 호출한다
*/
console.log(Math);
console.log(Math.PI);
//1.abs():절대값
console.log('-10의 절대값:',Math.abs(-10));
//2.pow():지수
console.log('2의 3승:',Math.pow(2,3));
//3.round():반올림-소수점 첫째자리에서 반올림
console.log('반올림:',Math.round(3.159));
//4.ceil():올림
console.log('올림:',Math.ceil(3.159));
//5.floor():내림
console.log('내림:',Math.floor(3.159));
//6. random(): 0.0 <= 값 < 1.0사이의 값을
// 랜덤하게 발생 시킴
/*
parseInt(Math.random()*범위) + 시작값
예]
1부터 5사이의 숫자를 랜덤하게 발생시키자
범위:5-1 = 4
시작값:1
parseInt(Math.random()*4)+1:마지막값 5는 포함 안됨
※마지막 값을 포함하기 위해서
범위 + 1
parseInt(Math.random()*5)+1:마지막값 5도 포함됨
*/
console.log(parseInt(Math.random()*6)+5);//5부터 시작10까지
//(0<=x<6에서, parseInt하면 0<=x<=5, 양쪽항+5, 5<=x<11, 결국 5부터 11미만)
</script>
</head>
<body>
<fieldset>
<legend>로또 발생기</legend>
<button onclick="showLottoNumber();">로또 발생</button>
<span id='lotto' style='font-size:2em;color:red;font-weight:bold;'></span>
</fieldset>
<script>
/*문 */
// 1.랜점하게 숫자 발생후 중복되지 않게 인자로 전달된 배열에 저장하는 메소드]
var random=[];
function setRandomNumber(random, start, end) {
for (var i = 0; i < random.length; i++) {//필요한 이유=>세자리수만큼 돌림(XXX)만약 5자리면(XXXXX)5번돌림
while(true) {//필요한 이유=>중복이 없을때까지 돌려서 배열에 할당하는 작업
//1.1 랜덤하게 숫자 발생시키자
var randomNumber=parseInt(Math.random()*(end-start+1))+start;//난수저장
//1.2 랜덤하게 발생시킨 숫자의 중복 여부체크를 위한 변수 선언
var isDuplicated=false;//중복 아니다라는걸 디폴트값 설정(isDuplicated는 중복을 의미)
//1.3 랜덤하게 발생시킨 숫자(randomNumber)와 배열(random)에 저장된 값의 중복 여부 체크
for(var k=0; k<=i-1;k++) {//i-1을 한 이유=>처음에 0<=-1인데 이게 false=>처음에는 중복체크안할려고넣고, 1<1 이제 중복체크시작 이떄 if문들어감 ,2<1 =>false
if(randomNumber==random[k]) {//중복된 경우 //우항은 난수 세자리 그 자체==이걸 random[k]라는 백의자리,십의 자리,일의 자리 집어서 비교
isDuplicated=true;//중복이네?
break;//그럼 다시 숫자를 받아야겠다 돌아가->(while(true))를 나감->for (int i = 0; i < random.length; i++) {로 감
}
}
if(!isDuplicated) {//중복되지 않는 경우
random[i]=randomNumber;//random[i]는 첫번째자리에 넣는거
break;//while문을 빠져나감
}
}//while
}
}
/*2.함수 호출*/
var lotto =new Array(6);
console.log(lotto[0]);
setRandomNumber(lotto,1,45);
console.log(lotto[0]);
//3.lotto번호를 id가 lotto인 span태그 사이에 출력
//console.log(lotto[0]);
var span=document.querySelector('#lotto');//id가 lotto인 태그 찾아서 변수 span에 저장
function showLottoNumber(){//함수 정의
var lotto =new Array(6);//함수길이가 6인 배열 lotto 생성
setRandomNumber(lotto,1,45);//배열에 1부터 45까지의 난수 채움
var lottoNumber='';
lotto.forEach(function(item){//lotto배열의 각 요소를 인수'item'으로 받아서
lottoNumber+=item+' ';//lottoNumber문자열 상수에 배열요소와 공백으로 이루어진 문자열을 저장
});
span.textContent=lottoNumber;//span요소의 textContent로 할당하여 span태그 사이에 출력
}
</script>
</body>
</html>결과)
Date14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date14.html</title>
<script>
/*
Date객체는 var 변수명 =new Date();로 생성한다.
※배열객체 var 배열명 = new Array();
※Math객체 Math.함수명();
※String객체는
방법1] var 변수명 = new String("문자열");
방법2] var 변수명 = "문자열";
혹은 직접 "문자열".함수()형식으로 사용가능
날짜 정보를 가져올때는 getXXX()시리즈로
날짜를 설정할때는 setXXX()시리즈로
*/
//1]Date객체 얻기 방법1:Date()
var today = new Date();
console.log('%O,타입:%s',today, typeof today);//new 연산자로 생성된 객체의 타입은 object
console.log(today);//현재시간 나옴
//1]Date객체 얻는 방법2:new Date(년[,월,일 ,시,분,초,1000분의 1초])
//월은 0~부터 11사이의 값
//년은 그대로 연도를 넣어준다.
var date2 = new Date(2002,5,22,18,10,50);//Date생성자에 매개변수(parameters)로2002,5,
//22,18,10,50을 넣어 Date객체 생성하고, 변수 date2에 할당
console.log('%s년 %s월 %s일 %s시 %s분 %s초',
date2.getFullYear(),
date2.getMonth()+1,//월은 0부터 시작이라 출력 시에는 +1
date2.getDate(),
date2.getHours(),
date2.getMinutes(),
date2.getSeconds()
)
//2]setXXX()함수로 날짜 변경
date2.setMonth(6);//7월//date2의 달을 7월로 초기화
date2.setDate(31);//31//date2의 일을 31로 초기화
console.log('%s년 %s월 %s일 %s시 %s분 %s초',
date2.getFullYear(),
date2.getMonth()+1,//월은 0부터 시작이라 출력 시에는 +1
date2.getDate(),
date2.getHours(),
date2.getMinutes(),
date2.getSeconds()
)
//3]요일 얻기:getDay() 0:일요일 1:월요일,2:화요일....
switch(date2.getDay()){//변수.getDay()로 얻은 값에 따라 아래 콘솔 출력
case 0:console.log('일요일');break;
case 1:console.log('월요일');break;
case 2:console.log('화요일');break;
case 3:console.log('수요일');break;
case 4:console.log('목요일');break;
case 5:console.log('금요일');break;
case 6:console.log('토요일');break;
}
//4]두 날짜 사이의 차이 구하기
//getTime():1970년 1월1일 0시 0분 0초부터 특정 일까지
//흘러온 시간을 1000분의 1초(miliseconds)단위로 반환.
var currDate = new Date();//Date객체 생성 후 변수 currDate에 할당
var endDate = new Date('2023-8-28');//매개변수(parameters)에 '2023-8-28'을 받아 Date객체 생성 후 변수endDate에 할당
var cTime=currDate.getTime();//Date인스턴스의 getTime()을 받아 변수 cTime에 할당
console.log('cTime:',cTime);//cTime출력(long형의 거대한 수 출력됨:1683019435356)
var eTime = endDate.getTime();//Date인스턴스의 getTime()을 받아 변수eTime에 할당
console.log('eTime:',eTime);//eTime을 출력(long형의 수 출력:1693148400000)
console.log('수료일까지 남은 일수:',Math.ceil(Math.abs(cTime-eTime)/(1000*60*60*24)));//현재시간에서-나중시간=>그걸 절댓값으로 변환=>밀리초를 날일로 변환=>1000을 나누면 초 단위, 60나누면 분 단위, 60나누면 시간 단위,24나누면 일 단위,그리고 ceil로 숫자 소수자리 날림
//Date.now():1970년 1월 1일 00:00:00 UTC로부터 현재까지 흘러온 시간을 밀리초 단위의 숫자 값으로 반환 (현재 시간을 밀리초 단위의 숫자값으로 반환)
console.log('Date.now():',Date.now());//Date.now()는 Date객체 생성하고 getTime()을 합친 것(1683020252882)=>이건 1970년1월1일0시0분0초를 밀리초로 변환한 것
//Date.parse():날짜형식의 문자열을 날짜(Date타입)로 변환 한 후, 해당 날짜와 1970년 1월 1일 00:00:00 UTC의 시간 차이를 밀리초 단위의 숫자 값으로 반환
console.log("Date.parse:",Date.parse('2023-8-28'));//문자열을 Date타입으로 변환 뒤(날짜 문자열을 파싱),해당 날짜의 숫자 값을 반환.
//
console.log('수료일까지 남은 일수:',Math.ceil(Math.abs(Date.now()-Date.parse('2023-8-28'))/(1000*60*60*24)));//현재시간에서 해당날짜 빼고 그걸 절대값으로 변환(밀리초 단위 숫자임),나누기(1000*60*60*24)로 일단위로 변환 그리고 ceil로 숫자 소수자리 날림
//1693148400000 숫자를 년 월 일로 변환
//1.Date객체 생성
var temp = new Date();//Date객체 생성 후 변수 temp에 할당
//2.setTmie()함수 사용(자바와 동일)
temp.setTime(1693148400000);//Date타입의 변수 temp에 1693148400000를 밀리초 단위인데 할당 후 setTime()함수는 밀리초 단위의 숫자값을 인자로 받아 해당 숫자값에 해당하는 시간을 Date객체에 설정한다.
console.log(temp);
</script>
</head>
<body>
</body>
</html>결과)
EventBasic15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EventBasic15.html</title>
<script>
/*
모든 엘리먼트(태그,요소)에는 사용자가 발생시킨 이벤트가 있다.
동일한 클릭이라도 요소에 따라 이벤트가 달라진다(submit이벤트,reset이벤트,click이벤트등)
리스너: 이벤트가 발생할지 듣고 있는 객체
on계열의 리스너가 있다.(onXXXX 여기서 XXXX는 이벤트명)
리스너는 태그안에 속성으로 기술할 수 있다
[이벤트 처리방법]
1] 해당 태그에 직접 on계열의 리스너 부착
예] <a href="#" onclick="이벤트를 처리할 자바스크립트 코드">텍스트</a>
2] 해당 태그 객체를 얻어 와서 해당 태그 객체의 속성(onxxxx계열)에 익명함수를 할당해서 처리
예]<a href="#" >텍스트</a>
document객체의 getXXXXX()메소드로 얻어 와서
얻어온 객체.on이벤트명 = function(e){} e는 이벤트 객체
혹은 얻어온 객체.addEventListener("on을 뺀 이벤트명",function(e){});
※load이벤트 부착시에는 addEventListener("load",function(e){}); 사용하자
주요 이벤트]
DOMContentLoaded - 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생.
스타일 시트(.css), 이미지,.JS파일, 하위 프레임의 로딩은 기다리지 않습니다.
(IE8이하에서 미 지원)
load - DOM 트리가 생성되고 외부
리소스 파일(이미지나 css혹은 js파일)이 로드 된 경우 발생
위 두 이벤트에서는 주로 요소(태그 객체)를 얻은 작업들을 한다
-리스너:onload
-body태그안에서만 기술 가능
<body onload="자바스크립트 코드">
unload : 페이지가 닫히거나
다른 페이지로 이동할때 발생하는 이벤트
(파이어폭스는 적용 안됨)
-리스너:onunload
-body태그안에서만 기술가능
-콜백함수로 처리시에는 window객체에 onload 리스너 부착
<body onunload="자바스크립트 코드">
submit이벤트:type="submit" 혹은 type="image"인 경우
클릭시 발생하는 이벤트
즉 어떤 값을 폼의 action에 지정한 페이지로 전송시(submit)시
발생하는 이벤트
-onsubmit
-form태그안에서 사용가능
reset이벤트:type="reset"버튼 클릭시 발생하는 이벤트
-onreset
-form태그안에서 사용가능
click이벤트:가장 많이 씀 .모든 태그에서 사용가능
사용자가 해당 엘리먼트(태그)영역을 클릭햇을때
발생하는 이벤트(onclick)
모든 태그에 적용 됨.
change이벤트:<select> 에서 선택을 바꿀때마다
아래에서는 onclick을 사용해라
<input type="radio"
<input type="checkbox"에서 선택을 바꿀때마다
발생하는 이벤트
키보드 이벤트:텍스트상자(<input type="text"
<input type="password"등
입력상자에서 적용되는 이벤트
keydown:모든 키를 누를때 발생하는 이벤트
keyup:키보드를 떨때 발생하는 이벤트
keypress:문자키를 누를때 발생하는 이벤트(방향키나 DELETE키,한글 누를때는
발생안함-FIREFOX에서만 적용안됨)
마우스 이벤트:
mousedown:태그영역에서 마우스 다운시
mouseup:마우스 뗐을때
mouseover:영역에 마우스가 들어 왓을때
mouseout:영역에서 마우스가 나갔을때
포커스 관련 이벤트
focus:포커스(커서)를 얻었을 발생하는 이벤트(리스너:onfocus)
blur:포커스(커서)를 잃었을때 발생하는 이벤트(리스너:onblur)
※이벤트 취소
리스너에 false를 리턴하면 해당 이벤트가 취소된다
예] 유명함수 <태그명 on이벤트명="return false">
익명함수 태그객체.on이벤트명 =function(){return false;}
*/
//방법2]객체의 on계열 속성 혹은 addEventListener("on을 뺀 이벤트명",function(){})함수로 이벤트 처리
/*
window.onload=function(){
console.log('window객체의 onload속성:load이벤트 첫번째 발생');
};
window.onload=function(){
console.log('window객체의 onload속성:load이벤트 두번째 발생');
};*/
window.addEventListener('load',function(){
console.log('window객체.addEventListener():load이벤트 첫번째 발생');
});
window.addEventListener('load',function(){
console.log('window객체.addEventListener():load이벤트 두번째 발생');
});
window.addEventListener('DOMContentLoaded',function(){
console.log('window객체.addEventListener():DOMContentLoaded이벤트 발생');
/*
이벤트 핸들러(콜백함수)의 이벤트 취소 방법 2가지:
1.return false; 2. 이벤트객체.preventDefault()
폼객체.onsubmit=콜백함수인 경우
-2가지 방법 모두 취소 처리 됨
폼객체.addEventListener()
-2번인 이벤트객체.preventDefault()만 적용됨
form태그의 onsubmit="return fnSubmit()"일때는
-2가지 방법 모두 취소 처리 됨
*/
console.log(document.forms);//▶HTMLCollection [form]
var form=document.forms[0];//document.querySelector('form')와 같다
//form.onsubmit=fnSubmit;//()를 뺀 함수명만 혹은 함수표현식 할당
/*
form.onsubmit=function(e){
console.log('이벤트 객체:',e);
var text = document.querySelector('[name=txt]');
if(text.value.trim().length===0){
alert('입력하세요');
text.focus();
//return false;//이벤트 취소
e.preventDefault();//혹은 이벤트 취소
}
};*/
/*
<input type="submit">버튼 클릭시 발생하는 이벤트
1.CLICK
2.SUBMIT
CLICK이벤트가 먼저 발생한다.따라서 CLICK이벤트를 막으면
SUBMIT일어나지 않는다
단,폼의 다른 하위요소를 클릭할때도 CLICK이벤트가 발생한다
<input type="submit">버튼 클릭시 유효성체크는 SUBMIT이벤트로 처리한다
*/
//form.addEventListener('submit',fnSubmit);//함수명만
form.addEventListener('submit',function(e){ //이벤트 취소하려면 인자인 e(이벤트 객체 필수)
var text = document.querySelector('[name=txt]');
if(text.value.trim().length===0){
console.log('폼에 submit이벤트 발생');
//alert('입력하세요');
text.focus();
e.preventDefault();//이벤트 취소
}
});
//폼의 모든 하위요소 및 폼 영역클릭시 CLICK이벤트 발생
form.addEventListener('click',function(e){ //이벤트 취소하려면 인자인 e(이벤트 객체 필수)
console.log('폼에 click이벤트 발생:',e.target.nodeName);
/*e.preventDefault();*/
});
//클릭 이벤트 예제
var h2 = document.querySelector('#h2');
h2.onclick = ()=>console.log('H2영역에 CLICK이벤트 발생:',h2.textContent);
});//////////////////////addEventListener
function fnSubmit(e){//이벤트 핸들러(콜백함수)
console.log('이벤트 객체:',e);
var text = document.querySelector('[name=txt]');
if(text.value.trim().length===0){
alert('입력하세요');
text.focus();
//return false;//이벤트 취소
e.preventDefault();//혹은 이벤트 취소
}
}
</script>
</head>
<body>
<!--방법1]태그에 속성으로 on계열 부착-->
<!--
<body onload="alert('body태그:load이벤트 발생');console.log('body태그:load이벤트 발생');" >
-->
<body>
<!--
<h2 id="h2" onclick="alert('h2태그영역에 클릭이벤트 발생');" >이벤트 기초</h2>
-->
<h2 id="h2" >이벤트 기초</h2>
<fieldset>
<legend>submit,reset이벤트 및 이벤트 막기</legend>
<!--태그 속성으로 이벤트 핸들러 함수에 이벤트 객체를 전달시에는 반드시
첫번째 인자여야 되고 키워드인 event를 써야한다
-->
<!--
<form action="https://www.naver.com" onsubmit="return fnSubmit(event);">
-->
<form action="https://www.naver.com" onreset="//return false;" style="background-color: yellow;">
<input type="text" name="txt" />
<input type="submit" value="전송" />
<input type="image" src="../Images/button.jpg" alt="image버튼" style="margin-bottom:-6px"/>
<input type="reset" value="취소" />
</form>
</fieldset>
<h2>네이트로 이동 막기</h2>
<a href="https://www.nate.com" onclick="event.preventDefault();">네이트로 이동</a>
<script>
function fnClick(e,obj){
console.log('e:',e);
console.log('obj:',obj);
// on이벤트명="자바스크립트 코드 안에서 this"
// 이때 this는 자기자신의 태그 즉 이벤트가 발생한 객체를 가르킨다.
// javascript:함수(this) 이때 this는 자기자신의 태그가 아니고
// window객체다.
if(obj.href !== undefined) console.log(obj.href);
}
</script>
<fieldset>
<legend>click이벤트</legend>
태그의 onclick 속성으로 이벤트 처리
<div style="border:1px red solid" onclick="alert('DIV영역에 클릭이벤트 발생');">DIV클릭 이벤트</div>
<a href="#" onclick="alert('a태그영역에 click이벤트 발생1');fnClick(event,this);" style="background-color:red;" >A클릭 이벤트(#)</a>
<!--아래 EVENT는 UNDEFINED-->
<a href="javascript:alert('a태그영역에 click이벤트 발생2');fnClick(event,this);" style="background-color:green;">A클릭 이벤트(javascript:함수())</a>
<a href="https://www.nate.com">순수 a태그만</a>
</fieldset>
<script>
/*
선택된 인덱스 얻기]
-select객체.selectedIndex
-인덱스는 0부터 시작
select하위태그인 option(목록)의 개수 얻기]
-select객체.options로 얻는다
select객체.options.length
선택한 값 얻기]즉 option태그의 value속성에 지정한 값
방법1]select객체.value(단일 선택)
방법2]for문을 돌면서 selected속성 이용(다중선택)
option태그 사이의 텍스트 얻기]
options[인덱스].text로 혹은
select객체[select객체.selectedIndex].text
*/
function fnSelect(obj){
console.log(obj.selectedIndex);
console.log(obj.options);//HTMLOptionsCollection(유사배열)
console.log('총 아이템 수:',obj.options.length,obj.length);
console.log('선택한 값:',obj.options[obj.selectedIndex].value)
console.log('선택한 값:',obj.value);
//다중 선택 모드일때는 인덱스가 빠른 하나만 값으로 설정된다
//즉 obj.selectedIndex 혹은 obj.value값이 하나다
//다중 선택모드 일때 선택된 값들 가져오기
for(var i=0;i <obj.length;i++){
if(obj.options[i].selected)
console.log(obj.options[i].value);
}
//브라우저에 보여지는 텍스트 얻기
console.log(obj.options[obj.selectedIndex].text);
console.log(obj.options[obj.selectedIndex].textContent);
console.log(obj.options[obj.selectedIndex].innerHTML);
console.log(obj.options[obj.selectedIndex].innerText);
}
function isSelect(){
var select = document.querySelector('select');
if(select.selectedIndex===0){
alert('학력을 선택하세요');
select.focus();
}
}
</script>
<h2 onclick="isSelect();">선택 여부 알아내기</h2>
<fieldset>
<legend>change이벤트</legend>
<select onclick="console.log('click이벤트 발생');" onchange="console.log('change이벤트 발생');fnSelect(this);">
<option value="">학력 선택</option>
<option value="초딩">초등학교</option>
<option value="중딩">중학교</option>
<option value="고딩">고등학교</option>
<option value="대딩">대학교</option>
</select>
<input type="radio" name="gender" value="남자" onchange="console.log('change이벤트 발생');" onclick="console.log('click이벤트 발생');fnChoice(this)"/>남자
<input type="radio" name="gender" value="여자" onchange="console.log('change이벤트 발생');" onclick="console.log('click이벤트 발생');fnChoice(this)"/>여자
<input type="checkbox" name="inter" value="정치" onchange="console.log('change이벤트 발생');" onclick="console.log('click이벤트 발생');fnChoice(this)"/>정치
<input type="checkbox" name="inter" value="경제" onchange="console.log('change이벤트 발생');" onclick="console.log('click이벤트 발생');fnChoice(this)"/>경제
<input type="checkbox" name="inter" value="스포츠" onchange="console.log('change이벤트 발생');" onclick="console.log('click이벤트 발생');fnChoice(this)"/>스포츠
</fieldset>
<script>
function fnChoice(obj){
console.log(obj.type);
if(obj.type==='radio'){
console.log(obj.value+'선택');
}
else{
if(obj.checked) console.log(obj.value+'선택');
else console.log(obj.value+'해제');
}
}
</script>
</body>
</html>결과) text박스에 클릭 시
결과) 전송버튼 클릭 시 콘솔2줄, 이미지 SUBMIT클릭시 콘솔 2줄 출력, 취소 버튼 클릭시 콘솔 1줄 출력
취소 버튼 누를 시 텍스트 박스에 입력된 거 사라지고 클릭이벤트만 발생
A클릭 이벤트 클릭 시) 알람 호출뒤 console 출력
A클릭 이벤트(javascript:함수()) 클릭 시) 알람 호출뒤 console 출력
select 객체 클릭 시 console에 클릭 이벤트 출력
초등학교 클릭 시 console에 클릭 이벤트 발생, change이벤트 발생
라디오 박스 선택 시 console 출력
정치 체크박스 선택시 console 출력
정치 체크박스 체크 해제 시 console 출력
라디오 박스 여자 선택에서 남자로 선택 시 console 출력
