# DOM
<head>
<meta charset="UTF-8">
<title>6. 태그의 내용을 변경.html</title>
<script>
function change() {
/*
DOM : 화면구현에 관련된 영역(html문서)을 읽어들여서 특정 태그를 변수로 인식해서 그 값을 가져옴
형식 : document.getElementById("얻어올 태그의 id값);
*/
// alert("change 함수 호출됨\nㅎㅇ");
var ch = document.getElementById("test2"); // div id 중 'test2'의 값을 가져옴
// alert(ch); // 태그 정보
var input=prompt("변경시킬 문자열을 입력하세요");
ch.innerHTML=input;
// alert(ch.innerHTML); // ch.innerHTML : ch 태그의 내용을 꺼내올때 사용하는 속성
}
</script>
</head>
<body>
<!-- id : 같은 내그를 구분하기 위한 속성
사용목적 : 1. css의 사용목적(id선택자)
2. 자바스크립트에서 특정태그를 구분하기위한 구분자
-->
<div id = "test">자바스크립트의 변수, 연산자, 제어문(if), 함수</div>
<div id = "test2">DOM의 개요 및 활용</div>
<p>
<form>
<input type = "button" name = "" value = "변경" onclick = "change()">
</form>
</body>
# event
<head>
<meta charset="UTF-8">
<title>7. 이벤트종류.html</title>
<!--
이벤트 : 운영체제가 인식 가능한 사용자들의 모든 행동 양식
1. click : 마우스클릭(버튼, 링크문자열) onclick = "호출할 함수명()"
2. load : 제일 먼저 문서(html)을 읽어들일때 발생 onload = "호출할 함수명()"
3. unload : 현재 사이트 에서 다른 사이트로 이동할때 발생 onunload = "~"()IE
4. change : 콤보박스에서 특정한 항목을 선택했을때 발생 onChange = "~"
5. mouseover : 특정항목에 마우스 커서를 가져다 대면 발생 onmouseover
6. mouseout : 특정항목에서 마우스 커서를 벗어나면 발생 onmouseout
7. blur : 입력하는 경우(input type = "text")커서가 이동할때 발생, 커서를 다음 항목에 이동시키기전에 전의 데이터를 제대로 입력 했는지 확인시켜줌 onblur = "~"
-->
</head>
<body onload = "alert('환영합니다.')" onunload = "alert('다음기회에 또봅시다')">
<a href = "https:/www.naver.com" onmouseover = "document.img.src='../images/kid2.gif'" onmouseout="document.img.src='../images/kid.gif'">
<img src = "../images/kid.gif" name = "img">
</a>
<img src = "../images/kid3.gif" name = "img3"?
</body>
# event (2)
<head>
<meta charset="UTF-8">
<title>8. 배경색을 변경.html</title>
<style>
div#box {
background-color : #ccffcc;
width : 200px;
height : 200px;
border : 2px solid black;
}
</style>
<script>
function setRed() {
var color = ["#ff0000"];
// id가 box인 태그를 찾아옴
var box = document.getElementById("box");
// 태그정보.상위속성명.하위속성명 = 변경할값(저장할값);
box.style.background = color;
}
function setGreen() {
var box = document.getElementById("box");
box.style.background = "#00ff00";
}
function setBlue() {
var box = document.getElementById("box");
box.style.background = "#0000ff";
}
/*
함수의 이름가지고 구분 할 수 있음 = 이름이 있는 함수 O
이름이 없는 함수 X : 익명함수
형식 : var 변수명 = function() {
함수의 기능 서술
}
익명함수 작성전에는 setGreen()을 불러올수 없음
var setGreen = function() {
var box = document.getElementById("box");
box.style.background = "#00ff00";
}
*/
</script>
</head>
<body>
<div>
<input type = "button" value = "Red" onclick = "setRed()">
<input type = "button" value = "Green" onclick = "setGreen()">
<input type = "button" value = "Blue" onclick = "setBlue()">
</div>
<hr>
<!--정적 디자인 : <div id = "box" style = "background:red"></div>-->
<div id = "box"></div>
<div id = "box2"></div>
</body>
# form
<head>
<meta charset="UTF-8">
<title>9. form.html</title>
<script>
function test(){
//alert("test()");
// 이름
if (document.myForm.name.value != ""){
if((document.myForm.name.value.length >= 3) && (document.myForm.name.value.length <=5)){
}else{
alert("제대로 입력하세요.");
document.myForm.name.focus();
return false;
}
/*alert("이름 입력하세요");
document.myForm.name.focus();
return false; // 이름을 입력하기 전 까지는 밑의 if구문을 실행X
// 탈출문*/
}
if (document.myForm.tel.value == ""){
alert("전화번호 입력하세요");
document.myForm.tel.focus();
return false;
}
/*if (document.myForm.pwd.value == ""){
alert("패스워드 입력하세요");
document.myForm.pwd.focus();
return false;
}else{
document.myForm.submit();
alert("OK"); // 정상적으로 다 입력 했다면 action = "Register.jsp"
// 형식 : document.폼이름.submit()을 사용해야 가능
// <input type = "button" or 링크문자열 <a href = "함수명()"></a>
}*/
test2();
}
// 4자 이상 8자 이하만 입력을 허용 : document.myForm.pwd.value.length
// 중첩 if문
function test2(){
if (document.myForm.pwd.value != ""){
if((document.myForm.pwd.value.length <= 8) && (document.myForm.pwd.value.length >=4)) {
alert("가입을 환영합니다.");
document.myForm.submit();
}else{
alert("패스워드가 짧거나 깁니다.");
document.myForm.pwd.focus();
}
}else{
alert("패스워드를 입력해 주세요.");
document.myForm.pwd.focus();
}
}
function test3(){
alert("환영합니다");
document.myForm.name.focus();
}
</script>
</head> <!-- 문서를 제일먼저 읽어 들일때 호출되는 이벤트 종류
onload = "함수명()" -->
<body onload = "test3()">
<form name = "myForm" method = "post" action = "Register.jsp">
이름 : <input type = "text" name = "name" size = "10"><br>
전번 : <input type = "text" name = "tel" size = "13"><br>
pwd : <input type = "password" name = "pwd"><br>
<input type = "button" value = "전송" onclick = "test()">
<input type = "button" value = "암호입력" onclick = "test2()">
<input type = "reset" value = "다시입력" onclick = "test3()">
</form>
</body>'국비학원 > 공부' 카테고리의 다른 글
| 6일차 jsp(미니 프로젝트) (0) | 2023.04.28 |
|---|---|
| 5일차 jsp(Array) ~ DOM (0) | 2023.04.28 |
| 3일차 css(2) ~ javascript(jsp) (0) | 2023.04.23 |
| 2일차 css ~ div (0) | 2023.04.20 |
| 1일차 html ~ table (0) | 2023.04.20 |