s01_inline.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 이벤트 처리</title>
</head>
<body>
<!-- 클릭시 네이버로 이동 -->
<input type = "button" value="이동" onclick = "location.href = 'https://www.naver.com'">
<!-- 클릭시 '클릭'이라는 에러창이 뜨고 다시 'CLICK'이라는 에러창이 뜸 -->
<input type = "button" value="확인" onclick = "alert('클릭');alert('CLICK');">
</body>
</html>
s02_function.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 이벤트 처리 - 함수 이용</title>
<style type="text/css">
div#header {
background-color: orange;
}
</style>
<script type="text/javascript">
function whenClick(){
alert('CLICK');
}
</script>
</head>
<body>
<div id="header" onclick="whenClick()">클릭</div>
</body>
</html>
s03_click.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>click</title>
<script type="text/javascript">
function changeColor(color){
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<input type="radio" name="color" value="blue"
onclick = "changeColor('lightblue')">파랑색
<input type="radio" name="color" value="green"
onclick = "changeColor('lightgreen')">녹색
<input type="radio" name="color" value="white"
onclick = "changeColor('white')">흰색
</body>
</html>
s04_change.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>change</title>
<script type="text/javascript">
function trans(){
let x = document.getElementById('word');
//input의 데이터를 읽어서 대문자로 변환 후 다시 input 태그의 value에 저장
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
영어 단어 : <input type="text" id="word" onchange="trans()">
<p>입력필드를 벗어나면 대문자로 변경됩니다.</p>
</body>
</html>
s05_Number.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function</title>
<script type="text/javascript">
function check(){
let korean = document.myForm.korean.value;
let english = document.myForm.english.value;
let math = document.myForm.math.value;
//총점 구하기
let sum = Number(korean) + Number(english) + Number(math);
//평균 구하기
let average = sum/3;
alert('총점 ='+sum+',평균 ='+average);
}
</script>
</head>
<body>
<form name="myForm">
국어: <input type="text" name="korean"><br>
영어: <input type="text" name="english"><br>
수학: <input type="text" name="math"><br>
<input type = "button" value="등록" onclick="check()">
</form>
</body>
</html>
s06_load.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load</title>
<script type="text/javascript">
//윈도우가 로드될 때 onload와 연결된 함수가 실행
window.onload=function(){
alert('문서가 로드되었습니다.');
document.body.style.backgroundColor = 'yellow';
let notice = document.getElementById('notice');
notice.innerHTML = '날씨 맑음!!';
};
</script>
</head>
<body>
<div id="notice"></div>
</body>
</html>
s07_click.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>click</title>
<style type="text/css">
div{
background-color:yellow;
}
</style>
<script type="text/javascript">
//윈도우가 로드될 때 onload에 연결된 함수 호출 이벤트 처리
window.onload=function(){
const header = document.getElementById('header');
function whenClick(){
alert('CLICK');
}
//이벤트 연결
// 이벤트 속성 이벤트 핸들러
header.onclick = whenClick;
//이벤트 연결을 하는 것이 아니라 함수가 1회 호출되고 이벤트 발생시 함수 호출이 되지 않음.(에러창이 먼저뜨고 그다음 화면이 나온다.)
//header.onclick = whenClick();
};
</script>
</head>
<body>
<div id ="header">클릭</div>
</body>
</html>
s08_click.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트내에서 이벤트 연결</title>
<style type="text/css">
div{
background-color:yellow;
}
</style>
<script type="text/javascript">
window.onload =function(){
const header = document.getElementById('header');
//이벤트연결
//이벤트 속성 = 이벤트 핸들러
header.onclick = function(){
alert('클릭');
};
};
</script>
</head>
<body>
<div id="header">클릭</div>
</body>
</html>
s09_click.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>click</title>
<script type="text/javascript">
window.onload=function(){
//div
const notice = document.getElementById('yumu');
//input 태그가 저장된 배열
let radios = document.getElementsByTagName('input');
for(let i=0;i<radios.length;i++){
//이벤트 연결
radios[i].onclick=function(){
if(radios[0].checked){//무료선택
//첫 번째 radio button 선택
//div숨기기
notice.style.display ='none';
}else{//유료선택
//두 번째 radio button 선택
//div노출
notice.style.display = '';
}
};
}
};
</script>
</head>
<body>
<form>
<input type="radio" name="price" checked value="0">무료
<input type="radio" name="price" value="1">유료
</form>
<div id="yumu" style="display:none;">
유료회원 가입비는 10,000원
</div>
</body>
</html>
'쌍용교육(JAVA) > JavaScript' 카테고리의 다른 글
| 쌍용교육 -JavaScript수업 38~39일차 JSEvent(3) (0) | 2024.04.15 |
|---|---|
| 쌍용교육 -JavaScript수업 37~38일차 JSEvent(2) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 36~37일차 ch24_JSDOM (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 36일차 JSNestedObject (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 36일차 JSClient (0) | 2024.04.15 |
